/* ===== CSS BLOCK 1 ===== */
:root{
  --navy:#071a38;
  --blue:#00ff9c;
  --text:#f1f5f9;
  --muted:#94a3b8;
  --white:#fff;
  --line:rgba(255, 255, 255, 0.1);
  --shadow:0 16px 45px rgba(0,0,0,.3);
}
*{box-sizing:border-box;margin:0;padding:0}
html, body{
  height: 100%;
}
body{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background: linear-gradient(rgba(4, 13, 26, 0.85), rgba(7, 26, 56, 0.90)), url('bg-foto.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height:1.65;
  position: relative;
  overflow-x: hidden;
}

main {
  flex: 1;
}

a{text-decoration:none;color:inherit}
button{font:inherit}

.header{
  position:sticky;top:0;z-index:100;
  background:rgba(7, 26, 56, 0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{max-width:1160px;margin:auto;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.08em}
.brand-logo{
  width:42px;
  height:42px;
  object-fit:contain;
  border-radius:10px;
  flex:0 0 42px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
.brand-text{font-size:18px;color:#fff}
.brand-text span{display:block;font-size:10px;letter-spacing:.16em;color:#00ff9c;font-weight:700}
.menu{display:flex;gap:6px;align-items:center}
.menu a{padding:9px 15px;border-radius:9px;font-size:14px;font-weight:650;color:#cbd5e1;transition:all 0.3s;position:relative;overflow:hidden}
.menu a:hover,.menu a.active{background:rgba(0, 255, 156, 0.4);color:#00ff9c}

/* Efek Transisi Halus (Fade-In & Smooth Slide) */
.section{display:none;padding:80px 22px;background:transparent;opacity:0;transform:translateY(15px);transition:opacity 0.4s ease, transform 0.4s ease;}
.section.show{display:block;opacity:1;transform:translateY(0);}

.section-inner{max-width:1100px;margin:auto}
.section-head{text-align:center;max-width:720px;margin:0 auto 42px}
.section-head .eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#00ff9c;font-weight:800}
.section-head h2{font-size:clamp(28px, 4vw, 38px);line-height:1.2;color:#fff;margin:8px 0 12px}
.section-head p{color:#94a3b8;font-size:clamp(14px, 2vw, 16px)}

.hero{color:#fff;min-height:85vh;align-items:center}
.hero-inner{max-width:1160px;margin:auto;padding:50px 22px;width:100%;display:grid;grid-template-columns:1.1fr 0.9fr;gap:45px;align-items:center}
.hero-copy .eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#00ff9c;font-weight:800;margin-bottom:16px}
.hero h1{font-size:clamp(32px, 5vw, 60px);line-height:1.1;letter-spacing:-.03em;margin-bottom:18px;color:#fff}
.hero h1 span{display:block;font-size:.4em;letter-spacing:.08em;color:#00ff9c;margin-top:14px;font-weight:600}
.hero p{font-size:clamp(15px, 2vw, 18px);color:#cbd5e1;max-width:600px}
.hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:11px;font-weight:750;
  border:1px solid transparent;cursor:pointer;
  position: relative; overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn:active { transform: scale(0.96); }
.btn-primary{background:#00ff9c;color:#071a38;box-shadow:0 4px 15px rgba(0, 255, 156,0.3)}
.btn-primary:hover{background:#00ff9c}
.btn-secondary{border-color:rgba(255,255,255,0.3);color:#fff;background:rgba(255,255,255,0.05)}
.btn-secondary:hover{background:rgba(255,255,255,0.15)}

.logo-stage{display:flex;justify-content:center;align-items:center; position: relative;}
.logo-stage::before {
  content: '';
  position: absolute;
  width: 290px;
  height: 290px;
  background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(0, 255, 156,0.4) 50%, transparent 75%);
  border-radius: 50%;
  z-index: 0;
  filter: blur(25px);
}
.logo-stage img{
  width:min(400px,100%);
  height:auto;
  border-radius:22px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 15px 30px rgba(0,0,0,0.7));
}

.cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:20px}
.card{background:rgba(13, 39, 77, 0.75);border:1px solid var(--line);border-radius:17px;padding:25px;box-shadow:var(--shadow);transition:transform 0.3s, box-shadow 0.3s;position:relative;overflow:hidden;}
.card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,.5);border-color:rgba(0, 255, 156,0.3)}
.card-icon{width:46px;height:46px;border-radius:12px;background:rgba(0, 255, 156,0.1);color:#00ff9c;display:grid;place-items:center;font-size:21px;margin-bottom:18px}
.card h3{font-size:18px;color:#fff;margin-bottom:10px}
.card p{color:#94a3b8;font-size:14px}
.card ul{margin:12px 0 0 18px;color:#00ff9c;font-size:14px}
.card li{margin:4px 0}

.notice{margin-top:35px;padding:20px 22px;border-radius:15px;background:rgba(13, 39, 77, 0.7);border:1px solid var(--line);color:#cbd5e1;font-size:15px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-box{background:rgba(13, 39, 77, 0.75);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow)}
.about-box h3{color:#fff;font-size:22px;margin-bottom:12px}
.about-box p{color:#94a3b8;font-size:15px}
.steps{display:grid;gap:13px}
.step{display:flex;gap:15px;align-items:flex-start;background:rgba(13, 39, 77, 0.75);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.step p{color:#94a3b8}
.num{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#00ff9c;color:#071a38;display:grid;place-items:center;font-weight:800;font-size:14px}

.consult-container{max-width:700px;margin:0 auto;background:rgba(13, 39, 77, 0.85);border:1px solid var(--line);border-radius:22px;padding:35px;box-shadow:var(--shadow)}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:13px;color:#00ff9c;margin-bottom:8px;font-weight:700;letter-spacing:.05em}
.form-control{width:100%;padding:12px 16px;border-radius:11px;background:rgba(4,13,26,0.6);border:1px solid var(--line);color:#fff;font-size:14px;outline:none;transition:border-color 0.3s}
.form-control:focus{border-color:#00ff9c}
textarea.form-control{resize:vertical;min-height:110px}

/* Tombol WhatsApp Melayang (Floating Button) */
.float-wa {
  position: fixed;
  width: 55px;
  height: 55px;
  bottom: 25px;
  right: 25px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 26px;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  display: grid;
  place-items: center;
  transition: transform 0.3s;
}
.float-wa:hover {
  transform: scale(1.1);
}

footer{background:#020813;color:#94a3b8;padding:25px 22px;text-align:center;border-top:1px solid var(--line);margin-top:auto;}
.footer-inner{max-width:1100px;margin:auto;display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}
.footer-brand{color:#fff;font-weight:800;letter-spacing:.1em}
small{font-size:12px}

/* Efek Klik Ripple */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: rippleEffect 0.6s linear;
  pointer-events: none;
}
@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* Responsif */
@media(max-width: 900px){
  .hero-inner,.about-grid{grid-template-columns:1fr; text-align:center;}
  .hero-actions, .hero p, .hero-copy .eyebrow{margin-left:auto; margin-right:auto;}
  .logo-stage{order:-1}
}
@media(max-width: 600px){
  .nav{padding:10px 15px;}
  .brand-text{font-size:16px;}
  .hero{min-height:auto; padding:20px 0;}
  .section{padding:50px 15px;}
  .consult-container{padding:20px;}
  .footer-inner{flex-direction:column;align-items:center;text-align:center;}
}

/* ===== MARTONDI POLISH / INTERACTIVE SERVICES ===== */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(circle at 15% 20%, rgba(0, 255, 156,.08), transparent 30%),
    radial-gradient(circle at 85% 75%, rgba(0, 255, 156,.10), transparent 30%);
}
.header{box-shadow:0 8px 30px rgba(0,0,0,.12)}
.brand{transition:transform .25s ease}
.brand:hover{transform:translateY(-1px)}
.logo-stage img{
  animation:logoFloat 5s ease-in-out infinite;
  transition:transform .45s ease, filter .45s ease;
}
.logo-stage img:hover{
  transform:scale(1.025) rotate(.3deg);
  filter:drop-shadow(0 18px 38px rgba(0, 255, 156,.25));
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
.btn{transition:transform .2s ease, box-shadow .25s ease, background .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary:hover{box-shadow:0 8px 24px rgba(0, 255, 156,.32)}
.service-count{
  width:max-content; max-width:100%; margin:0 auto 28px;
  display:flex; align-items:center; gap:13px;
  padding:10px 16px; border:1px solid rgba(0, 255, 156,.18);
  border-radius:16px; background:rgba(7,26,56,.45);
  box-shadow:0 8px 25px rgba(0,0,0,.15);
}
.service-count span{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,#00ff9c,#00ff9c);color:#071a38;
  font-size:16px;font-weight:900;
}
.service-count strong{display:block;color:#fff;font-size:14px}
.service-count small{display:block;color:#94a3b8;font-size:11px}
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-card{
  min-height:245px; cursor:pointer;
  background:linear-gradient(145deg,rgba(17,48,91,.78),rgba(8,28,57,.72));
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px; padding:22px;
  box-shadow:0 12px 35px rgba(0,0,0,.22);
  position:relative; overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.service-card::before{
  content:""; position:absolute; width:130px;height:130px;right:-55px;top:-55px;
  border-radius:50%; background:rgba(0, 255, 156,.08);
  transition:transform .4s ease;
}
.service-card:hover,.service-card:focus-visible{
  transform:translateY(-7px);
  border-color:rgba(0, 255, 156,.35);
  box-shadow:0 22px 45px rgba(0,0,0,.35);
  outline:none;
}
.service-card:hover::before{transform:scale(1.6)}
.service-top{display:flex;justify-content:space-between;align-items:center}
.service-no{font-size:11px;color:#64748b;font-weight:800;letter-spacing:.12em}
.service-card h3{margin:15px 0 8px;font-size:18px}
.service-card p{min-height:68px}
.service-more{
  margin-top:15px;color:#00ff9c;font-size:13px;font-weight:800;
  display:flex;justify-content:space-between;align-items:center;
}
.service-more span{transition:transform .25s ease;font-size:18px}
.service-card:hover .service-more span{transform:translateX(5px)}
.service-detail{
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s ease, opacity .35s ease, margin-top .35s ease;
}
.service-card.open{background:linear-gradient(145deg,rgba(19,61,111,.92),rgba(8,28,57,.9));}
.service-card .service-detail{max-height:0!important;opacity:0!important;margin-top:0!important;overflow:hidden!important}
.service-detail ul{margin:0 0 2px 18px;color:#00ff9c;font-size:13px}
.service-detail li{margin:4px 0}
.back-link{
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);
  color:#cbd5e1;padding:9px 14px;border-radius:10px;cursor:pointer;
  transition:.25s ease;margin-bottom:5px;
}
.back-link:hover{background:rgba(0, 255, 156,.12);color:#00ff9c;transform:translateX(-3px)}
@media(max-width:1000px){
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:220px}
}


/* ===== PREMIUM HOMEPAGE POLISH ===== */
:root{
  --cyan:#00ff9c;
  --blue-bright:#00ff9c;
  --glass:rgba(8,28,58,.72);
}
body{
  background-color:#06142c;
  background-image:
    radial-gradient(ellipse at 8% 10%,rgba(0, 255, 156,.14),transparent 32%),
    radial-gradient(ellipse at 92% 18%,rgba(0, 255, 156,.16),transparent 28%),
    linear-gradient(135deg,rgba(4,13,26,.91),rgba(7,26,56,.94)),
    url('bg-foto.jpg');
  background-size:auto,auto,auto,cover;
}
.header{
  background:rgba(4,17,39,.78);
  border-bottom-color:rgba(0, 255, 156,.16);
}
.header::after{
  content:"";display:block;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0, 255, 156,.55),rgba(0, 255, 156,.55),transparent);
  opacity:.65;
}
.brand-logo{background:rgba(255,255,255,.04);padding:3px}
.brand-text{letter-spacing:.055em}
.menu a{transition:background .25s,color .25s,transform .25s}
.menu a:hover{transform:translateY(-1px)}
.hero{position:relative;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:8% 4%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 20% 35%,rgba(0, 255, 156,.075),transparent 45%);
}
.hero-inner{padding-top:66px;padding-bottom:66px;gap:clamp(25px,5vw,70px)}
.hero-copy .eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid rgba(0, 255, 156,.24);border-radius:999px;
  background:rgba(8,47,73,.42);padding:8px 13px;margin-bottom:19px;
  color:#00ff9c;font-size:11px;letter-spacing:.16em;
}
.hero-copy .eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#34d399;
  box-shadow:0 0 0 4px rgba(0, 255, 156,.12),0 0 14px rgba(0, 255, 156,.7);
}
.hero h1{max-width:720px;text-wrap:balance}
.hero h1 span{color:#00ff9c}
.hero p{line-height:1.85}
.hero-actions{gap:13px}
.btn{border-radius:13px}
.btn-primary{
  background:linear-gradient(135deg,#00ff9c,#00ff9c 48%,#00ff9c);
  box-shadow:0 8px 28px rgba(0, 255, 156,.2),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{background:linear-gradient(135deg,#00ff9c,#00ff9c 50%,#00ff9c);box-shadow:0 12px 32px rgba(0, 255, 156,.3)}
.btn-secondary{border-color:rgba(148,205,255,.24);background:rgba(255,255,255,.055);backdrop-filter:blur(10px)}
.logo-stage{min-height:350px}
.logo-stage::before{
  width:min(360px,90vw);height:min(360px,90vw);
  background:radial-gradient(circle,rgba(255,255,255,.78) 0%,rgba(0, 255, 156,.34) 35%,rgba(0, 255, 156,.16) 58%,transparent 74%);
  filter:blur(30px);animation:glowPulse 5s ease-in-out infinite;
}
.logo-stage::after{
  content:"";position:absolute;width:min(390px,95%);aspect-ratio:1;
  border:1px solid rgba(103,232,249,.15);border-radius:50%;
  box-shadow:0 0 60px rgba(0, 255, 156,.06),inset 0 0 50px rgba(0, 255, 156,.05);
  animation:orbit 28s linear infinite;
}
.logo-stage img{max-width:390px;border:1px solid rgba(255,255,255,.12);box-shadow:0 25px 75px rgba(0,0,0,.48);background:rgba(255,255,255,.025)}
@keyframes glowPulse{0%,100%{opacity:.78;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}
@keyframes orbit{to{transform:rotate(360deg)}}
.hero-proof{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;
}
.hero-proof span{
  display:inline-flex;align-items:center;gap:7px;padding:7px 11px;
  border:1px solid rgba(148,163,184,.14);border-radius:999px;
  background:rgba(15,35,65,.55);color:#cbd5e1;font-size:12px;
}
.hero-proof span b{color:#00ff9c;font-size:14px}
.section-head .eyebrow{color:#00ff9c}
.card,.about-box,.step,.consult-container,.notice{
  backdrop-filter:blur(14px);
  border-color:rgba(148,205,255,.12);
}
.card,.service-card{box-shadow:0 16px 42px rgba(0,0,0,.22)}
.service-card{backdrop-filter:blur(12px)}
.service-count{border-color:rgba(0, 255, 156,.22);background:linear-gradient(120deg,rgba(8,47,73,.55),rgba(15,35,65,.55))}
.notice{border-left:3px solid #00ff9c}
.float-wa{border:1px solid rgba(255,255,255,.28);animation:waPulse 3s ease-in-out infinite}
@keyframes waPulse{0%,100%{box-shadow:0 4px 15px rgba(37,211,102,.35),0 0 0 0 rgba(37,211,102,.18)}50%{box-shadow:0 4px 24px rgba(37,211,102,.48),0 0 0 9px rgba(37,211,102,0)}}
footer{background:rgba(2,8,19,.86);backdrop-filter:blur(12px)}
/* Notifikasi kecil yang tidak mengganggu */
.site-toast{
  position:fixed;left:22px;bottom:24px;z-index:1200;
  display:flex;align-items:flex-start;gap:12px;
  width:min(370px,calc(100vw - 36px));padding:15px 16px;
  color:#eaf7ff;background:rgba(6,23,48,.94);
  border:1px solid rgba(103,232,249,.24);border-radius:17px;
  box-shadow:0 18px 55px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
  opacity:0;transform:translateY(18px) scale(.98);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease;
}
.site-toast.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.toast-icon{
  width:38px;height:38px;flex:0 0 38px;border-radius:12px;
  display:grid;place-items:center;font-size:18px;
  color:#062039;background:linear-gradient(135deg,#00ff9c,#00ff9c);
}
.toast-copy{flex:1;min-width:0}
.toast-copy strong{display:block;font-size:13px;margin:1px 0 3px}
.toast-copy p{font-size:12px;line-height:1.55;color:#b8c9dc}
.toast-close{
  border:0;background:transparent;color:#94a3b8;cursor:pointer;
  font-size:19px;line-height:1;padding:1px 3px;
}
.toast-close:hover{color:#fff}

/* Panel pembayaran MARTONDI */
.payment-section{padding-top:58px}
.payment-intro{max-width:720px;margin:0 auto 26px;text-align:center;color:#b8c9dc;line-height:1.7}
.payment-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:28px 0}
.payment-method{position:relative;text-align:left;min-height:145px;padding:18px;border:1px solid rgba(148,205,255,.16);border-radius:18px;background:linear-gradient(145deg,rgba(15,35,65,.82),rgba(7,18,38,.78));color:#eaf7ff;cursor:pointer;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.payment-method:hover,.payment-method.selected{transform:translateY(-3px);border-color:rgba(103,232,249,.65);box-shadow:0 12px 32px rgba(0, 255, 156,.11)}
.payment-method.selected:after{content:'✓ Dipilih';position:absolute;right:12px;top:12px;color:#00ff9c;font-size:10px;font-weight:800}
.payment-logo{display:grid;place-items:center;width:104px;height:38px;border-radius:12px;margin-bottom:13px;background:#fff;border:1px solid rgba(255,255,255,.72);padding:5px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.payment-logo img{display:block;width:100%;height:100%;object-fit:contain}
.payment-method[data-payment="bsi"] .payment-logo{background:#fff;border-color:#d8eeee}
.payment-method[data-payment="dana"] .payment-logo{background:#fff;border-color:#dceeff}
.payment-method[data-payment="seabank"] .payment-logo{background:#fff;border-color:#ffe1d0}
.payment-method[data-payment="qris"] .payment-logo{background:#fff;border-color:#e5e7eb}
.payment-method strong{display:block;font-size:15px;margin-bottom:5px}
.payment-method small{display:block;color:#a9bbd0;line-height:1.45;font-size:11px}
.payment-detail{padding:24px;border:1px solid rgba(103,232,249,.2);border-radius:22px;background:linear-gradient(145deg,rgba(10,28,55,.9),rgba(5,15,32,.92));box-shadow:0 18px 50px rgba(0,0,0,.22)}
.payment-detail h3{margin:0 0 8px;font-size:21px}
.payment-detail p{color:#b8c9dc;line-height:1.65}
.payment-placeholder{margin-top:16px;padding:15px;border:1px dashed rgba(103,232,249,.35);border-radius:14px;background:rgba(8,47,73,.22);color:#d6e8f7}
.payment-placeholder strong{display:block;color:#00ff9c;margin-bottom:5px}
.payment-note{margin-top:18px;padding:13px 15px;border-radius:13px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);color:#f6d9a3;font-size:12px;line-height:1.6}
.qris-placeholder{width:min(220px,100%);aspect-ratio:1;margin:16px auto;display:grid;place-items:center;text-align:center;padding:20px;border:1px dashed rgba(103,232,249,.4);border-radius:18px;background:rgba(255,255,255,.025);color:#b8c9dc}
.payment-wa{display:inline-flex;margin-top:16px}
.payment-number{font-size:23px;font-weight:850;letter-spacing:.04em;color:#fff;margin:10px 0 12px;overflow-wrap:anywhere}
.copy-payment{margin-top:4px;cursor:pointer}
.payment-hint{display:block;color:#b8c9dc;margin-top:10px;line-height:1.5}
.qris-real{display:block;width:min(360px,100%);height:auto;margin:18px auto;border-radius:12px;background:#fff;box-shadow:0 12px 35px rgba(0,0,0,.24)}
.qris-label{text-align:center;color:#b8c9dc;font-size:13px;line-height:1.6}
@media(max-width:760px){.payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.payment-detail{padding:18px}}
@media(max-width:420px){.payment-grid{gap:9px}.payment-method{padding:14px;min-height:136px}.payment-method strong{font-size:13px}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}
@media(max-width:600px){
  .hero-inner{padding-top:34px;padding-bottom:48px;gap:16px}
  .logo-stage{min-height:250px}
  .logo-stage img{max-width:280px}
  .hero-proof{justify-content:center}
  .hero-copy .eyebrow{font-size:10px;letter-spacing:.1em}
  .site-toast{left:12px;bottom:14px;width:calc(100vw - 24px)}
  .float-wa{right:16px;bottom:18px;width:51px;height:51px}
}


/* Pop-up detail layanan: tidak menggeser kartu lain */
.service-modal{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.service-modal.visible{display:flex}
.service-modal-backdrop{position:absolute;inset:0;background:rgba(2,8,23,.80);backdrop-filter:blur(5px)}
.service-modal-box{position:relative;z-index:1;width:min(520px,100%);max-height:85vh;overflow:auto;box-sizing:border-box;padding:28px;border:1px solid rgba(0, 255, 156,.28);border-radius:22px;background:linear-gradient(145deg,#102f59,#071a35);box-shadow:0 25px 80px rgba(0,0,0,.5);color:#fff}
.service-modal-close{position:absolute;right:14px;top:12px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;border:0;border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font-size:26px;cursor:pointer}
.service-modal-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;color:#00ff9c;margin:2px 42px 10px 0}
.service-modal-box h3{font-size:24px;margin:0 42px 10px 0;color:#fff}
.service-modal-box p{color:#cbd5e1;line-height:1.65}
.service-modal-box ul{padding-left:22px;color:#00ff9c;line-height:1.7}
.service-wa-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;box-sizing:border-box;margin-top:18px;padding:13px 16px;border-radius:12px;background:#20a464;color:#fff!important;font-weight:800;text-decoration:none!important;text-align:center;border:1px solid rgba(255,255,255,.12);transition:filter .2s ease,transform .2s ease}
.service-wa-button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.service-wa-button svg{display:block;flex:none;width:24px;height:24px;color:#fff}
@media(max-width:600px){.service-modal-box{padding:24px 20px}}


/* ===== RESPONSIVE FIX: Android, iPhone, tablet, desktop ===== */
html{width:100%;max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{width:100%;max-width:100%;min-width:0;overflow-x:clip;background-attachment:scroll}
img,svg,video,canvas{max-width:100%}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
.section-inner,.hero-inner,.nav,.footer-inner{min-width:0}
.card,.service-card,.about-box,.consult-container,.payment-method,.payment-detail{min-width:0;overflow-wrap:anywhere}
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-modal{padding:clamp(10px,3vw,20px);padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
.service-modal-box{max-height:calc(100dvh - 32px);max-height:calc(100vh - 32px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.float-wa{bottom:max(18px,env(safe-area-inset-bottom));right:max(16px,env(safe-area-inset-right))}
@media (min-width:1001px){.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){
 .nav{gap:12px}
 .menu a{padding:9px 10px}
 .hero-inner{gap:28px}
 .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
 .nav{align-items:flex-start;flex-wrap:wrap;padding:10px 16px;gap:8px}
 .brand{max-width:100%;min-width:0}
 .brand-text{line-height:1.35}
 .menu{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;gap:5px;padding:2px 0 5px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
 .menu a{white-space:nowrap;flex:0 0 auto;font-size:13px;padding:8px 11px}
 .section{padding:46px 16px}
 .section-head{margin-bottom:28px}
 .hero-inner{padding:30px 18px 42px;grid-template-columns:minmax(0,1fr);gap:18px}
 .hero-copy{text-align:center;min-width:0}
 .hero h1{font-size:clamp(30px,8vw,46px);overflow-wrap:anywhere}
 .hero-actions{justify-content:center}
 .logo-stage{min-height:0}
 .logo-stage img{width:min(72vw,300px);max-height:34vh;object-fit:contain}
 .about-grid{grid-template-columns:minmax(0,1fr);gap:22px}
 .consult-container{padding:clamp(16px,4vw,24px)}
 .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .payment-method{padding:14px;min-height:128px}
 .payment-detail{padding:clamp(14px,4vw,20px)}
 .footer-inner{gap:12px}
}
@media (max-width:480px){
 .nav{padding:9px 12px}
 .brand-logo{width:36px;height:36px;flex-basis:36px}
 .brand-text{font-size:15px;letter-spacing:.05em}
 .brand-text span{font-size:9px;letter-spacing:.1em}
 .section{padding:38px 12px}
 .section-head h2{font-size:clamp(25px,7vw,32px)}
 .hero-inner{padding:25px 14px 34px}
 .hero h1{font-size:clamp(29px,8.3vw,38px)}
 .hero p{font-size:15px;line-height:1.65}
 .hero-actions{gap:9px}
 .hero-actions .btn{width:100%;max-width:320px}
 .cards,.service-grid{grid-template-columns:minmax(0,1fr)}
 .card,.service-card{padding:19px;min-width:0}
 .service-card{min-height:0}
 .service-card p{min-height:0}
 .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .payment-method{padding:12px 10px;min-height:122px}
 .payment-method strong{font-size:12px;overflow-wrap:anywhere}
 .payment-method small{font-size:10px}
 .payment-number{font-size:clamp(18px,5vw,23px)}
 .service-modal{align-items:center;padding-left:10px;padding-right:10px}
 .service-modal-box{width:100%;max-height:calc(100dvh - 24px);max-height:calc(100vh - 24px);padding:22px 16px;border-radius:18px}
 .service-modal-box h3{font-size:21px;line-height:1.3}
 .service-modal-box p,.service-modal-box ul{font-size:14px;line-height:1.6}
 .service-modal-close{right:10px;top:10px;width:36px;height:36px}
 .service-modal-kicker{font-size:10px;letter-spacing:.1em}
 .service-wa-button{padding:12px 10px;font-size:14px}
 .float-wa{width:49px;height:49px;right:max(12px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}
 footer{padding:22px 14px}
}
@media (max-width:360px){
 .brand-text{font-size:14px}
 .menu a{font-size:12px;padding:7px 9px}
 .payment-grid{grid-template-columns:minmax(0,1fr)}
 .payment-method{min-height:unset}
 .service-modal-box{padding:20px 14px}
}
@supports (height: 100dvh){.service-modal-box{max-height:calc(100dvh - 32px)}}


/* Revisi akhir: kartu layanan jelas saat dipilih, tanpa lingkaran dekoratif yang mengganggu */
.service-card::before{content:none!important;display:none!important}
.service-card{cursor:pointer;position:relative;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease}
.service-card:hover,.service-card:focus-visible,.service-card.open{
  transform:translateY(-3px)!important;
  border-color:rgba(0, 255, 156,.78)!important;
  box-shadow:0 0 0 2px rgba(0, 255, 156,.12),0 14px 32px rgba(0,0,0,.28)!important;
  outline:none;
}
.service-card:active{transform:translateY(-1px)!important;box-shadow:0 0 0 3px rgba(0, 255, 156,.2)!important}
.service-card .service-no{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 7px;border-radius:10px;letter-spacing:.04em;text-align:center;background:rgba(103,232,249,.08);border:1px solid rgba(103,232,249,.24);line-height:1}
/* QRIS: pertahankan gambar asli, area putih untuk pemindaian, bingkai navy-cyan */
.qris-real{box-sizing:border-box;width:min(360px,100%);height:auto;padding:10px!important;background:#fff!important;border:2px solid #00ff9c!important;border-radius:16px!important;box-shadow:0 0 0 5px rgba(10,35,68,.96),0 0 0 7px rgba(0, 255, 156,.55),0 14px 32px rgba(0,0,0,.28)!important;object-fit:contain}
.qris-label{margin:24px auto 0;max-width:420px}

/* MARTONDI: hero typography enhancement, responsive and isolated */
.hero-copy h1.hero-main-title{font-size:clamp(2.6rem,6.2vw,5.2rem);line-height:1.08;margin:0 0 20px;font-weight:900;letter-spacing:-.035em;text-shadow:0 3px 12px rgba(0,0,0,.4),0 0 26px rgba(0, 255, 156,.22)}
.hero-copy h1.hero-main-title span{display:block;margin-top:0;color:#00ff9c;font-size:1em;line-height:1.12;letter-spacing:-.025em;font-weight:900;text-shadow:0 0 10px rgba(0, 255, 156,.42),0 3px 14px rgba(0,0,0,.4)}
@media(max-width:600px){.hero-copy h1.hero-main-title{font-size:clamp(2.25rem,9vw,3.3rem);line-height:1.12}}

.hero-copy h1{
  font-size:clamp(2rem,4.2vw,3.8rem);
  line-height:1.12;
  font-weight:900;
  letter-spacing:-.025em;
  text-wrap:balance;
  text-shadow:0 3px 10px rgba(0,0,0,.38),0 0 22px rgba(0, 255, 156,.18);
}
.hero-copy h1 span{
  display:block;
  margin-top:clamp(10px,1.5vw,18px);
  color:#00ff9c;
  font-size:.58em;
  line-height:1.25;
  letter-spacing:.015em;
  text-shadow:0 0 8px rgba(0, 255, 156,.38),0 2px 12px rgba(0,0,0,.35);
}
.hero-copy > p{
  font-size:clamp(1rem,1.45vw,1.15rem);
  line-height:1.75;
  text-shadow:0 1px 5px rgba(0,0,0,.28);
}
/* Restore a visible but lightweight transition whenever a section changes */
.section.section-enter{animation:martondiSectionEnter .46s cubic-bezier(.2,.75,.25,1) both;}
@keyframes martondiSectionEnter{
  from{opacity:.35;transform:translateY(16px);filter:blur(1.5px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@media(max-width:600px){
  .hero-copy h1{font-size:clamp(1.85rem,8vw,2.65rem);line-height:1.14;}
  .hero-copy h1 span{font-size:.62em;}
}
@media(prefers-reduced-motion:reduce){
  .section.section-enter{animation:none;}
}


/* ===== MARTONDI: TRANSISI 21 KARTU LAYANAN ===== */
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}
.service-card{
  opacity:0;
  animation:martondiServiceReveal .34s cubic-bezier(.2,.72,.25,1) forwards;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background-color .28s ease;
  will-change:transform,opacity;
}
.service-card:nth-child(1){animation-delay:.02s}
.service-card:nth-child(2){animation-delay:.045s}
.service-card:nth-child(3){animation-delay:.07s}
.service-card:nth-child(4){animation-delay:.095s}
.service-card:nth-child(5){animation-delay:.12s}
.service-card:nth-child(6){animation-delay:.145s}
.service-card:nth-child(7){animation-delay:.17s}
.service-card:nth-child(8){animation-delay:.195s}
.service-card:nth-child(9){animation-delay:.22s}
.service-card:nth-child(10){animation-delay:.245s}
.service-card:nth-child(11){animation-delay:.27s}
.service-card:nth-child(12){animation-delay:.295s}
.service-card:nth-child(13){animation-delay:.32s}
.service-card:nth-child(14){animation-delay:.345s}
.service-card:nth-child(15){animation-delay:.37s}
.service-card:nth-child(16){animation-delay:.395s}
.service-card:nth-child(17){animation-delay:.42s}
.service-card:nth-child(18){animation-delay:.445s}
.service-card:nth-child(19){animation-delay:.47s}
.service-card:nth-child(20){animation-delay:.495s}
.service-card:nth-child(21){animation-delay:.52s}
@keyframes martondiServiceReveal{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.service-card:hover,.service-card:focus-visible{
  transform:translateY(-5px);
  border-color:rgba(0, 255, 156,.52);
  box-shadow:0 16px 32px rgba(0,0,0,.28),0 0 0 1px rgba(0, 255, 156,.08);
}
@media(max-width:1000px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:600px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.service-card{min-height:210px;padding:16px;border-radius:16px}.service-card h3{font-size:16px}.service-card p{min-height:0;font-size:13px}}
@media(prefers-reduced-motion:reduce){.service-card{opacity:1;animation:none;transition:none;will-change:auto}.service-card:hover,.service-card:focus-visible{transform:none}}


/* MARTONDI CYBER THEME — lapisan visual menyeluruh, isi dan fungsi asli dipertahankan */
:root{
 --navy:#030b09 !important; --blue:#00ff9c !important; --text:#e5fff3 !important;
 --muted:#8cb6a5 !important; --white:#f2fff9 !important;
 --line:rgba(0,255,156,.22) !important; --shadow:0 16px 42px rgba(0,0,0,.48) !important;
 color-scheme:dark;
}
html{background:#020806!important;scroll-behavior:smooth}
body{
 color:#e5fff3!important;
 background-color:#020806!important;
 background-image:linear-gradient(rgba(2,8,6,.93),rgba(2,8,6,.97)),url('bg-foto.jpg')!important;
 background-size:cover!important;background-position:center!important;background-attachment:fixed!important;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.17;background-image:linear-gradient(rgba(0,255,156,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,156,.12) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 90%)}
header,main,footer{position:relative;z-index:1}
/* Modal harus tetap fixed agar detail layanan bisa dibuka dan ditutup */
.service-modal{position:fixed!important;inset:0!important;z-index:99999!important}
.service-modal-backdrop{position:absolute!important;inset:0!important;z-index:0!important}
.service-modal-box{position:relative!important;z-index:1!important}
.header{background:rgba(2,10,7,.91)!important;border-bottom:1px solid rgba(0,255,156,.3)!important;box-shadow:0 8px 30px rgba(0,0,0,.3)!important}
.brand-text,.footer-brand{color:#eafff5!important}
.brand-text span{color:#00ff9c!important}
.menu a{color:#a7cdbb!important;border-color:transparent!important;transition:color .2s,border-color .2s,background .2s}
.menu a:hover,.menu a.active{color:#00ff9c!important;border-color:rgba(0,255,156,.35)!important;background:rgba(0,255,156,.07)!important}
.hero{background:transparent!important;color:#f0fff8!important}
.hero-copy .eyebrow,.section-head .eyebrow,.form-group label{color:#00ff9c!important}
.hero h1,.hero h1 span,.section-head h2,.card h3,.service-card h3,.about-box h3,.service-modal h2,.service-modal h3{color:#effff7!important}
.hero h1 span{color:#00ff9c!important}
.hero p,.section-head p,.card p,.service-card p,.about-box p,.service-count small{color:#a2c9b6!important}
.hero-actions a,.btn,.button,.back-link{border-radius:8px!important;letter-spacing:.02em;transition:all .22s ease}
.hero-actions a:first-child,.btn-primary,.button-primary{background:#00ff9c!important;color:#00140b!important;border:1px solid #00ff9c!important;box-shadow:0 0 22px rgba(0,255,156,.12)!important;font-weight:800!important}
.hero-actions a:first-child:hover,.btn-primary:hover,.button-primary:hover{background:#00ff9c!important;box-shadow:0 0 26px rgba(0,255,156,.27)!important}
.hero-actions a:not(:first-child),.btn-secondary,.back-link{background:rgba(0,255,156,.045)!important;color:#baffdd!important;border:1px solid rgba(0,255,156,.34)!important}
.section{background:transparent!important}
/* Semua panel/kolom memakai permukaan gelap ala cyber */
.card,.about-box,.consult-container,.payment-method,.payment-detail,.service-card,.service-modal-box,.contact-box,.support-box,.form-container{
 background:linear-gradient(145deg,rgba(8,25,18,.96),rgba(3,12,9,.98))!important;
 color:#e5fff3!important;border:1px solid rgba(0,255,156,.22)!important;
 border-radius:12px!important;box-shadow:0 12px 32px rgba(0,0,0,.32),inset 0 1px rgba(0,255,156,.035)!important;
}
.card:hover,.service-card:hover,.about-box:hover,.payment-method:hover{border-color:rgba(0,255,156,.62)!important;box-shadow:0 16px 36px rgba(0,0,0,.48),0 0 20px rgba(0,255,156,.07)!important}
.card-icon{background:rgba(0,255,156,.09)!important;color:#00ff9c!important;border:1px solid rgba(0,255,156,.18)!important}
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
.service-card{position:relative!important;overflow:hidden!important;min-height:235px!important;padding:21px!important;cursor:pointer!important;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important}
.service-card::before{content:""!important;position:absolute!important;right:-48px!important;top:-48px!important;width:125px!important;height:125px!important;border-radius:50%!important;background:radial-gradient(circle,rgba(0,255,156,.12),transparent 70%)!important;pointer-events:none!important}
.service-card:hover,.service-card:focus-visible{transform:translateY(-4px)!important;outline:1px solid rgba(0,255,156,.22)!important}
.service-top{position:relative;z-index:1}
.service-no{color:#00ff9c!important;background:rgba(0,255,156,.07)!important;border:1px solid rgba(0,255,156,.2)!important;border-radius:5px!important;padding:4px 7px!important;font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:.08em!important}
.service-card .card-icon{width:45px!important;height:45px!important;border-radius:9px!important;font-size:21px!important}
.service-card h3{font-size:16px!important;line-height:1.45!important;margin:17px 0 9px!important;position:relative;z-index:1}
.service-card p{font-size:13px!important;line-height:1.65!important;position:relative;z-index:1}
.service-more{color:#00ff9c!important;border-top:1px solid rgba(0,255,156,.14)!important;margin-top:17px!important;padding-top:12px!important;font-size:12px!important;letter-spacing:.04em!important}
.service-count{background:rgba(0,255,156,.045)!important;border:1px solid rgba(0,255,156,.22)!important;border-radius:10px!important;padding:15px 20px!important}
.service-count>span{color:#00ff9c!important;text-shadow:0 0 18px rgba(0,255,156,.24)!important}
.form-control,input,textarea,select,button,option{font-family:inherit}
.form-control,input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea,select{
 background:#030d09!important;color:#e5fff3!important;border:1px solid rgba(0,255,156,.24)!important;border-radius:8px!important;box-shadow:none!important
}
.form-control::placeholder,input::placeholder,textarea::placeholder{color:#648b78!important;opacity:1}
.form-control:focus,input:focus,textarea:focus,select:focus{border-color:#00ff9c!important;outline:2px solid rgba(0,255,156,.09)!important;box-shadow:0 0 0 3px rgba(0,255,156,.06)!important}
input[type=checkbox],input[type=radio]{accent-color:#00ff9c!important}
button[type=submit],.submit-btn,.btn-submit{background:#00ff9c!important;color:#00140b!important;border:1px solid #00ff9c!important;font-weight:800!important}
button:not(.float-wa),.payment-method,.payment-detail{transition:border-color .2s,background .2s,box-shadow .2s}
.service-modal{background:rgba(0,0,0,.78)!important;backdrop-filter:blur(8px)!important}
.service-modal-box{background:linear-gradient(145deg,#081a12,#030a07)!important;border-color:rgba(0,255,156,.34)!important}
.service-detail ul,.service-detail li{color:#a9f6cf!important}
footer{background:rgba(1,7,5,.97)!important;color:#8cb6a5!important;border-top:1px solid rgba(0,255,156,.25)!important}
footer a{color:#00ff9c!important}
.float-wa{box-shadow:0 0 22px rgba(0,255,156,.16)!important}
hr{border-color:rgba(0,255,156,.18)!important}
::selection{background:#00ff9c!important;color:#00140b!important}
@media(max-width:900px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.hero-inner,.about-grid{gap:28px!important}}
@media(max-width:600px){.service-grid{grid-template-columns:repeat(1,minmax(0,1fr))!important}.service-card{min-height:0!important;padding:19px!important}.hero-inner{padding-top:36px!important;padding-bottom:36px!important}.section{padding:58px 16px!important}.card,.about-box,.consult-container,.payment-method,.payment-detail{padding:20px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* CYBER THEME FIX: ratakan warna komponen yang sebelumnya masih mewarisi tema lama */
:root,html,body,main,.section,.section.show,.section.active{background-color:#020806!important;color:#e5fff3!important}
.section::before,.section::after,.hero::before,.hero::after{background-color:transparent!important}
.card,.service-card,.about-box,.consult-container,.payment-method,.payment-detail,.contact-box,.support-box,.form-container,.service-count,.faq-item,.info-card,.feature-card,.about-card,.contact-card,.support-card{
 background:linear-gradient(145deg,#081a12 0%,#030a07 100%)!important;color:#e5fff3!important;border-color:rgba(0,255,156,.28)!important
}
.card h1,.card h2,.card h3,.card h4,.service-card h1,.service-card h2,.service-card h3,.about-box h1,.about-box h2,.about-box h3,.consult-container h2,.consult-container h3,.payment-method h3,.payment-detail h3,.section h1,.section h2,.section h3{color:#effff7!important}
.card p,.about-box p,.consult-container p,.payment-method p,.payment-detail p,.contact-box p,.support-box p,.section small,.section label{color:#a2c9b6!important}
.section-head,.section-head *{text-shadow:none}
.badge,.tag,.pill,.status,.service-label{background:rgba(0,255,156,.08)!important;color:#00ff9c!important;border-color:rgba(0,255,156,.25)!important}
button,.btn,.button,.back-link,.service-wa-button{border-radius:8px!important}
.service-modal{background:rgba(0,0,0,.82)!important;backdrop-filter:blur(8px)!important}
.service-modal-box{background:linear-gradient(145deg,#081a12,#030a07)!important;color:#e5fff3!important;border:1px solid rgba(0,255,156,.42)!important}
.service-modal-box h3,.service-modal-box p,.service-modal-box li{color:#d8ffea!important}
.service-modal-kicker{color:#00ff9c!important}
.service-modal-close{background:rgba(0,255,156,.1)!important;color:#00ff9c!important;border:1px solid rgba(0,255,156,.25)!important}
.service-wa-button{background:#00ff9c!important;color:#00140b!important;border:1px solid #00ff9c!important}
footer,footer *{border-color:rgba(0,255,156,.2)}
@media(max-width:600px){.service-grid{grid-template-columns:1fr!important}}


/* FIX LOGO GERAK + AURA TERLIHAT: animasi tetap aktif walau sistem mengurangi motion */
.logo-stage { position:relative !important; isolation:isolate !important; }
.logo-stage img {
  position:relative !important;
  z-index:2 !important;
  transform-origin:center center !important;
  animation: martondiLogoMoveGlow 3.2s ease-in-out infinite !important;
  will-change: transform, filter !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.logo-stage::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:1 !important;
  left:50% !important;
  top:50% !important;
  width:min(82%, 340px) !important;
  aspect-ratio:1 !important;
  height:auto !important;
  transform:translate(-50%,-50%) scale(.88) !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center, rgba(0, 255, 156,.42) 0%, rgba(0, 255, 156,.22) 36%, rgba(0, 255, 156,.08) 58%, transparent 74%) !important;
  filter:blur(20px) !important;
  opacity:.72 !important;
  pointer-events:none !important;
  animation:martondiLogoAuraMove 3.2s ease-in-out infinite !important;
}
.brand-logo {
  animation:martondiHeaderLogoMove 3.2s ease-in-out infinite !important;
  will-change:transform,filter !important;
  filter:drop-shadow(0 0 4px rgba(0, 255, 156,.55)) drop-shadow(0 0 10px rgba(0, 255, 156,.28)) !important;
}
@keyframes martondiLogoMoveGlow {
  0%,100% { transform:translateY(0) scale(1); filter:drop-shadow(0 0 3px rgba(0, 255, 156,.45)) drop-shadow(0 0 9px rgba(0, 255, 156,.25)); }
  50% { transform:translateY(-12px) scale(1.035); filter:drop-shadow(0 0 7px rgba(0,240,255,.95)) drop-shadow(0 0 19px rgba(0,170,255,.65)) drop-shadow(0 0 30px rgba(0,120,255,.28)); }
}
@keyframes martondiLogoAuraMove {
  0%,100% { opacity:.48; }
  50% { opacity:.95; }
}
@keyframes martondiHeaderLogoMove {
  0%,100% { transform:translateY(0) scale(1); filter:drop-shadow(0 0 3px rgba(0, 255, 156,.4)) drop-shadow(0 0 7px rgba(0, 255, 156,.2)); }
  50% { transform:translateY(-3px) scale(1.06); filter:drop-shadow(0 0 6px rgba(0,240,255,.9)) drop-shadow(0 0 13px rgba(0, 255, 156,.5)); }
}



/* ===== BERANDA DIPERLUAS: informasi layanan, alur, privasi, FAQ ===== */
.home-extra{position:relative;isolation:isolate;overflow:hidden}
.home-block{padding:clamp(54px,7vw,92px) 22px;position:relative}
.home-block:nth-child(even){background:linear-gradient(180deg,rgba(0,255,156,.025),rgba(0,255,156,.008))}
.home-block .section-inner{max-width:1100px;margin:0 auto}
.home-block .section-head{margin-bottom:34px}
.home-block .section-head .eyebrow,.home-block .eyebrow{color:#00ff9c;font-size:11px;font-weight:850;letter-spacing:.18em;text-transform:uppercase}
.home-block .section-head h2,.home-privacy h2,.home-faq h2,.home-final-panel h2{font-size:clamp(27px,4vw,42px);line-height:1.17;letter-spacing:-.025em;color:#effff7;margin:9px 0 13px;text-wrap:balance}
.home-block .section-head p,.home-privacy-copy>p,.home-faq-intro>p,.home-final-panel>p{max-width:680px;margin:0 auto;color:#a2c9b6;font-size:15px;line-height:1.8}
.home-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.home-feature-card{min-width:0;padding:26px 24px;border:1px solid rgba(0,255,156,.22);border-radius:15px;background:linear-gradient(145deg,rgba(8,25,18,.96),rgba(3,12,9,.98));box-shadow:0 14px 34px rgba(0,0,0,.22);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.home-feature-card:hover{transform:translateY(-5px);border-color:rgba(0,255,156,.58);box-shadow:0 20px 42px rgba(0,0,0,.34),0 0 22px rgba(0,255,156,.06)}
.home-feature-icon{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(0,255,156,.28);border-radius:12px;background:rgba(0,255,156,.08);color:#00ff9c;font-size:25px;margin-bottom:20px}
.home-feature-card h3,.home-process-step h3{color:#effff7;font-size:18px;line-height:1.4;margin-bottom:9px}
.home-feature-card p,.home-process-step p{color:#a2c9b6;font-size:14px;line-height:1.75}
.home-feature-card>a,.home-text-link{display:inline-flex;align-items:center;gap:8px;margin-top:19px;color:#00ff9c;font-size:13px;font-weight:800}
.home-feature-card>a span,.home-text-link span{transition:transform .2s ease}
.home-feature-card>a:hover span,.home-text-link:hover span{transform:translate(3px,-2px)}
.home-process-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.home-process-step{display:flex;gap:16px;align-items:flex-start;min-width:0;padding:22px;border:1px solid rgba(0,255,156,.18);border-radius:13px;background:rgba(5,19,13,.84)}
.home-step-number{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:10px;background:rgba(0,255,156,.09);border:1px solid rgba(0,255,156,.3);color:#00ff9c;font:800 13px ui-monospace,SFMono-Regular,Consolas,monospace}
.home-process-action{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:27px}
.home-privacy-panel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:25px;align-items:start;padding:clamp(24px,4vw,42px);border:1px solid rgba(0,255,156,.28);border-radius:18px;background:radial-gradient(ellipse at 0% 0%,rgba(0,255,156,.09),transparent 55%),linear-gradient(145deg,rgba(8,25,18,.98),rgba(3,12,9,.98));box-shadow:0 18px 48px rgba(0,0,0,.25)}
.home-privacy-symbol{width:58px;height:58px;display:grid;place-items:center;border-radius:15px;border:1px solid rgba(0,255,156,.28);background:rgba(0,255,156,.08);color:#00ff9c;font-size:30px}
.home-privacy-copy h2{margin-top:9px}
.home-privacy-copy>p{max-width:unset;margin:0}
.home-privacy-copy .home-text-link{margin-top:18px}
.home-faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,70px);align-items:start}
.home-faq-intro h2{font-size:clamp(28px,3.5vw,40px);line-height:1.2;color:#effff7;margin:10px 0 13px;letter-spacing:-.025em}
.home-faq-intro>p{margin:0 0 22px}
.home-faq-list{display:grid;gap:10px}
.home-faq-item{border:1px solid rgba(0,255,156,.2);border-radius:12px;background:linear-gradient(145deg,rgba(8,25,18,.95),rgba(3,12,9,.98));overflow:hidden}
.home-faq-item summary{position:relative;list-style:none;cursor:pointer;padding:17px 48px 17px 18px;color:#eafff5;font-size:14px;font-weight:750;line-height:1.5}
.home-faq-item summary::-webkit-details-marker{display:none}
.home-faq-item summary::after{content:'?';position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#00ff9c;font-size:17px;font-weight:800;width:28px;height:28px;border:1px solid rgba(0,255,156,.38);border-radius:50%;display:grid;place-items:center;line-height:1;transition:transform .25s ease,background .25s ease}
.home-faq-item[open] summary::after{content:'−';background:rgba(0,255,156,.16);transform:translateY(-50%) rotate(180deg)}
.home-faq-item[open] summary{color:#00ff9c}
.home-faq-item p{padding:0 18px 18px;color:#a2c9b6;font-size:13px;line-height:1.75}
.home-final-panel{text-align:center;padding:clamp(30px,6vw,60px) clamp(20px,5vw,55px);border:1px solid rgba(0,255,156,.28);border-radius:20px;background:radial-gradient(ellipse at 50% 0%,rgba(0,255,156,.1),transparent 62%),linear-gradient(145deg,rgba(8,25,18,.98),rgba(3,12,9,.98));box-shadow:0 18px 48px rgba(0,0,0,.28)}
.home-final-kicker{color:#00ff9c;font-size:11px;font-weight:850;letter-spacing:.2em}
.home-final-panel h2{max-width:780px;margin:13px auto}
.home-final-panel>p{max-width:650px}
.home-final-panel .home-process-action{margin-top:25px}
@media(max-width:850px){.home-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-faq-layout{grid-template-columns:1fr;gap:28px}.home-faq-intro{max-width:650px}.home-faq-intro>p{margin-left:0}}
@media(max-width:600px){.home-block{padding:48px 15px}.home-feature-grid,.home-process-grid{grid-template-columns:minmax(0,1fr);gap:12px}.home-feature-card{padding:22px}.home-feature-card:hover{transform:none}.home-process-step{padding:17px;gap:13px}.home-privacy-panel{grid-template-columns:minmax(0,1fr);gap:17px;padding:23px 19px}.home-privacy-symbol{width:48px;height:48px;font-size:25px}.home-process-action{gap:9px}.home-process-action .btn{width:100%;max-width:330px}.home-faq-item summary{padding:16px 42px 16px 15px}.home-faq-item p{padding:0 15px 16px}.home-final-panel{padding:30px 18px}.home-block .section-head{margin-bottom:25px}}
@media(prefers-reduced-motion:reduce){.home-feature-card,.home-feature-card>a span,.home-text-link span{transition:none}}



/* FIX KHUSUS BIGROUND DUKUNGAN LAYANAN: ornamen selalu di belakang konten */
#pembayaran {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden;
  background-color: rgba(2, 12, 8, .18) !important;
}
#pembayaran::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .42 !important;
  background-image:
    radial-gradient(ellipse at 50% 8%, rgba(0,255,156,.17), transparent 42%),
    radial-gradient(circle at 12% 72%, rgba(0,255,156,.09) 1px, transparent 2px),
    repeating-linear-gradient(135deg, transparent 0 46px, rgba(0,255,156,.045) 47px, transparent 49px),
    linear-gradient(90deg, transparent 49.8%, rgba(0,255,156,.045) 50%, transparent 50.2%);
  background-size: auto, 34px 34px, auto, 100% 100%;
  animation: martondiPaymentBiground 36s linear infinite;
}
#pembayaran::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 0 !important;
  pointer-events: none !important;
  border: 1px solid rgba(0,255,156,.08);
  border-radius: 22px;
}
#pembayaran > *, #pembayaran .section-inner, #pembayaran .section-inner > * {
  position: relative;
  z-index: 1;
}
#pembayaran .payment-method, #pembayaran .payment-detail, #pembayaran .payment-grid, #pembayaran .section-head, #pembayaran .payment-intro {
  isolation: isolate;
}
#pembayaran .payment-method *, #pembayaran .payment-detail *, #pembayaran .qris-label {
  position: relative;
  z-index: 1;
}
@keyframes martondiPaymentBiground {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 34px 34px, 90px 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  #pembayaran::before { animation: none !important; }
}
@media (max-width: 600px) {
  #pembayaran::after { inset: 7px; border-radius: 16px; }
  #pembayaran::before { opacity: .3 !important; }
}



/* FIX: ikon WhatsApp harus tetap berada di atas footer saat halaman di-scroll */
#floatWaBtn.float-wa{
  position:fixed!important;
  right:max(16px, env(safe-area-inset-right))!important;
  bottom:max(18px, env(safe-area-inset-bottom))!important;
  z-index:2147483647!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:translateZ(0);
}
#floatWaBtn.float-wa:hover{transform:translateZ(0) scale(1.08);}
footer{position:relative;z-index:1;}

/* Final responsive corrections: transparent header, compact mobile navigation, preserve all order steps. */
.header{background:rgba(3,12,17,.20)!important;background-color:rgba(3,12,17,.20)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,255,156,.22)!important}
.nav{background:transparent!important}
.menu-toggle{display:none;border:1px solid rgba(0,255,156,.55);color:#00ff9c;background:rgba(0,20,15,.65);border-radius:9px;width:42px;height:40px;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 0 12px rgba(0,255,156,.12)}
.home-process-timeline{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:760px){
 .nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px!important;min-height:64px}
 .brand{display:flex;align-items:center;min-width:0;max-width:calc(100% - 54px);gap:8px}
 .brand-logo{width:36px;max-width:36px;height:auto;object-fit:contain}
 .brand-text{font-size:14px!important;line-height:1.15;white-space:nowrap}
 .brand-text span{font-size:8px!important;letter-spacing:.05em}
 .menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px}
 .menu{display:none!important;position:absolute!important;top:calc(100% + 8px);right:12px;left:12px;width:auto!important;max-width:none!important;height:auto!important;min-height:0!important;flex-direction:column;align-items:stretch;gap:4px!important;padding:10px!important;margin:0!important;background:rgba(2,16,14,.96)!important;border:1px solid rgba(0,255,156,.4)!important;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 18px rgba(0,255,156,.12);z-index:9999;overflow:visible!important}
 .menu.is-open{display:flex!important}
 .menu a{display:block;width:100%;font-size:14px!important;padding:11px 12px!important;white-space:normal;border-radius:8px}
 .home-process-timeline{grid-template-columns:1fr!important}
 .home-process-timeline-viewport{overflow:visible!important}
 .home-process-step{width:100%;min-width:0}
 #layanan .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
 #layanan .service-card{padding:14px!important;min-width:0}
}
@media(max-width:390px){.brand-text{font-size:12px!important}.brand-logo{width:31px;max-width:31px}.nav{padding:8px 10px!important}#layanan .service-grid{grid-template-columns:1fr!important}}
@media(min-width:761px){.menu-toggle{display:none!important}.menu{display:flex!important;position:static!important}}


/* MOBILE NAV TOUCH FEEDBACK + BRAND ALIGNMENT */
.header .nav{position:relative!important;}
.header .brand{align-items:center!important;gap:9px!important;}
.header .brand-logo{display:block!important;object-fit:contain!important;object-position:center!important;}
.header .brand-text{line-height:1.15!important;}
.header .brand-text span{line-height:1.2!important;margin-top:2px!important;}
.header .menu a{transition:background-color .18s ease,color .18s ease,transform .18s ease,border-color .18s ease!important;border:1px solid transparent!important;}
.header .menu a:active{background:rgba(0,255,156,.20)!important;color:#00ffb3!important;border-color:rgba(0,255,156,.38)!important;transform:scale(.985)!important;}
.header .menu a:focus-visible{outline:2px solid rgba(0,255,156,.8)!important;outline-offset:2px!important;background:rgba(0,255,156,.12)!important;color:#00ffb3!important;}
.header .menu-toggle{transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease!important;touch-action:manipulation!important;-webkit-tap-highlight-color:rgba(0,255,156,.18)!important;}
.header .menu-toggle:active,.header .menu-toggle[aria-expanded="true"]{background:rgba(0,255,156,.12)!important;box-shadow:0 0 14px rgba(0,255,156,.12)!important;transform:scale(.97)!important;}
@media(max-width:760px){
 .header .menu{gap:3px!important;padding:9px!important;}
 .header .menu a{min-height:42px!important;display:flex!important;align-items:center!important;padding:10px 12px!important;}
 .header .menu a.active{background:rgba(0,255,156,.10)!important;color:#00ffb3!important;border-color:rgba(0,255,156,.18)!important;}
 .header .brand-logo{width:34px!important;height:34px!important;flex:0 0 34px!important;}
}


/* NAV TAP FEEDBACK: every mobile menu row visibly responds to touch. */
@media(max-width:760px){
 .header .menu a{
   position:relative!important; overflow:hidden!important;
   border:1px solid transparent!important;
   color:#c5ddd5!important;
   background:rgba(0,255,156,0)!important;
   transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease!important;
   -webkit-tap-highlight-color:rgba(0,255,156,.18)!important;
   touch-action:manipulation!important;
 }
 .header .menu a::after{
   content:""!important; position:absolute!important; left:12px!important; right:12px!important; bottom:4px!important;
   height:2px!important; border-radius:4px!important; background:#00ffb0!important;
   transform:scaleX(0)!important; transform-origin:left!important; opacity:0!important;
   transition:transform .2s ease,opacity .2s ease!important; pointer-events:none!important;
 }
 .header .menu a:hover,.header .menu a:focus-visible{
   color:#00ffc0!important; background:rgba(0,255,156,.09)!important;
   border-color:rgba(0,255,156,.3)!important; box-shadow:inset 3px 0 0 #00ff9c,0 0 14px rgba(0,255,156,.07)!important;
   outline:none!important;
 }
 .header .menu a:active{transform:scale(.985)!important;background:rgba(0,255,156,.18)!important;box-shadow:inset 3px 0 0 #00ff9c,0 0 18px rgba(0,255,156,.13)!important}
 .header .menu a.active{color:#00ffc0!important;background:rgba(0,255,156,.105)!important;border-color:rgba(0,255,156,.26)!important;box-shadow:inset 3px 0 0 #00ff9c!important}
 .header .menu a.active::after{transform:scaleX(1)!important;opacity:.9!important}
 .header .menu-toggle{transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;-webkit-tap-highlight-color:rgba(0,255,156,.18)!important;touch-action:manipulation!important}
 .header .menu-toggle:active,.header .menu-toggle[aria-expanded="true"]{background:rgba(0,255,156,.14)!important;border-color:rgba(0,255,156,.75)!important;box-shadow:0 0 16px rgba(0,255,156,.15),inset 0 0 12px rgba(0,255,156,.06)!important;transform:scale(.96)!important}
}
@media(prefers-reduced-motion:reduce){.header .menu a,.header .menu a::after,.header .menu-toggle{transition:none!important}}

/* ===== CSS BLOCK 2 ===== */
/* FINAL OVERRIDE — tema cyber hijau, hilangkan sisa aksen biru/cyan */
:root{
  --navy:#04110b !important;
  --blue:#00ff9c !important;
  --cyan:#00ff9c !important;
  --blue-bright:#00d982 !important;
  --text:#eafff3 !important;
  --muted:#9ab9a8 !important;
  --white:#f4fff8 !important;
  --line:rgba(0,245,155,.20) !important;
  --glass:rgba(5,24,15,.88) !important;
  --shadow:0 16px 42px rgba(0,0,0,.48) !important;
  color-scheme:dark;
}
html, body, main, .section, .section.show, .section.active{
  background-color:#020906 !important;
  color:#eafff3 !important;
}
body{
  background-image:
    radial-gradient(ellipse at 12% 8%, rgba(0,232,135,.10), transparent 34%),
    radial-gradient(ellipse at 88% 70%, rgba(0,180,100,.07), transparent 34%),
    linear-gradient(145deg,#020906 0%,#06180f 52%,#020906 100%) !important;
  background-size:cover !important;
  background-position:center !important;
  background-attachment:scroll !important;
}
body::before{
  background-image:
    linear-gradient(rgba(0,245,155,.055) 1px, transparent 1px),
    linear-gradient(90deg,rgba(0,245,155,.055) 1px, transparent 1px) !important;
  background-size:44px 44px !important;
  opacity:.45 !important;
}
.header{
  background:rgba(2,12,7,.94) !important;
  border-color:rgba(0,245,155,.25) !important;
}
.header::after{
  background:linear-gradient(90deg,transparent,rgba(0,245,155,.55),transparent) !important;
}
.brand-text,.footer-brand,.hero h1,.hero h1 span,.section-head h2,
.card h3,.service-card h3,.about-box h3,.service-modal-box h3{
  color:#effff6 !important;
}
.brand-text span,.menu a:hover,.menu a.active,
.hero-copy .eyebrow,.section-head .eyebrow,.form-group label,
.service-modal-kicker,.service-more,.service-no,.footer-inner a{
  color:#00ff9c !important;
}
.menu a{color:#b7d3c3 !important}
.menu a:hover,.menu a.active{
  background:rgba(0,245,155,.08) !important;
  border-color:rgba(0,245,155,.30) !important;
}
.hero-copy .eyebrow{
  background:rgba(0,70,40,.28) !important;
  border-color:rgba(0,245,155,.24) !important;
}
.hero-copy .eyebrow::before{
  background:#00ff9c !important;
  box-shadow:0 0 0 4px rgba(0,232,135,.12),0 0 14px rgba(0,232,135,.45) !important;
}
.hero h1 span,.hero-copy h1 span{
  color:#00ff9c !important;
  text-shadow:0 0 10px rgba(0,245,155,.18) !important;
}
.hero p,.section-head p,.card p,.service-card p,.about-box p,
.step p,.service-count small,.payment-intro,.payment-detail p,
.payment-method small,.payment-hint,.qris-label{
  color:#a9c9b7 !important;
}
.btn-primary,.hero-actions a:first-child,.button-primary,
button[type=submit],.submit-btn,.btn-submit,.num{
  background:linear-gradient(135deg,#00ff9c,#00ff9c) !important;
  color:#00190d !important;
  border-color:#00ff9c !important;
  box-shadow:0 7px 24px rgba(0,232,135,.15) !important;
}
.btn-primary:hover,.hero-actions a:first-child:hover,
.button-primary:hover,button[type=submit]:hover{
  background:#00ff9c !important;
}
.btn-secondary,.back-link,.hero-actions a:not(:first-child){
  background:rgba(0,245,155,.045) !important;
  color:#c8f7dd !important;
  border-color:rgba(0,245,155,.30) !important;
}
.card,.service-card,.about-box,.step,.consult-container,.notice,
.payment-method,.payment-detail,.service-modal-box,.contact-box,
.support-box,.form-container,.faq-item,.info-card,.feature-card,
.about-card,.contact-card,.support-card{
  background:linear-gradient(145deg,rgba(8,29,18,.97),rgba(3,13,8,.98)) !important;
  color:#eafff3 !important;
  border-color:rgba(0,245,155,.22) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.32) !important;
}
.card:hover,.service-card:hover,.service-card:focus-visible,
.service-card.open,.about-box:hover,.payment-method:hover,
.payment-method.selected{
  border-color:rgba(0,245,155,.60) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.42),0 0 18px rgba(0,245,155,.06) !important;
}
.card-icon,.service-card .card-icon{
  background:rgba(0,245,155,.08) !important;
  color:#00ff9c !important;
  border-color:rgba(0,245,155,.22) !important;
}
.service-count{
  background:rgba(0,245,155,.045) !important;
  border-color:rgba(0,245,155,.22) !important;
}
.service-count > span{
  background:linear-gradient(135deg,#00ff9c,#00ff9c) !important;
  color:#00190d !important;
}
.service-card::before{
  background:radial-gradient(circle,rgba(0,245,155,.10),transparent 70%) !important;
}
.service-more{border-color:rgba(0,245,155,.14) !important}
.form-control,input:not([type=checkbox]):not([type=radio]):not([type=submit]),
textarea,select{
  background:#030e08 !important;
  color:#eafff3 !important;
  border-color:rgba(0,245,155,.24) !important;
}
.form-control::placeholder,input::placeholder,textarea::placeholder{
  color:#789b87 !important;
}
.form-control:focus,input:focus,textarea:focus,select:focus{
  border-color:#00ff9c !important;
  outline-color:rgba(0,245,155,.12) !important;
  box-shadow:0 0 0 3px rgba(0,245,155,.06) !important;
}
input[type=checkbox],input[type=radio]{accent-color:#00ff9c !important}
.service-modal-backdrop{background:rgba(0,5,2,.84) !important}
.service-modal-box{
  background:linear-gradient(145deg,#081c11,#030a06) !important;
  border-color:rgba(0,245,155,.32) !important;
}
.service-modal-box p,.service-modal-box li,.service-detail ul,
.service-detail li{color:#b9e8ce !important}
.service-modal-close{
  background:rgba(0,245,155,.08) !important;
  color:#00ff9c !important;
  border-color:rgba(0,245,155,.24) !important;
}
.service-wa-button{
  background:#20a464 !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.12) !important;
}
footer{
  background:rgba(1,7,4,.98) !important;
  color:#91b5a0 !important;
  border-top-color:rgba(0,245,155,.22) !important;
}
.float-wa{
  background:#25d366 !important;
  color:#fff !important;
}
.site-toast{
  background:rgba(4,20,12,.97) !important;
  border-color:rgba(0,245,155,.24) !important;
  color:#eafff3 !important;
}
.toast-icon{
  background:linear-gradient(135deg,#00ff9c,#00ff9c) !important;
  color:#00190d !important;
}
.payment-method.selected:after{color:#00ff9c !important}
.payment-placeholder{
  background:rgba(0,245,155,.035) !important;
  border-color:rgba(0,245,155,.30) !important;
}
.payment-placeholder strong{color:#00ff9c !important}
.qris-real{
  border-color:#00ff9c !important;
  box-shadow:0 0 0 5px rgba(5,25,15,.96),0 0 0 7px rgba(0,245,155,.45),0 14px 32px rgba(0,0,0,.28) !important;
}
.notice{border-left-color:#00ff9c !important}
.badge,.tag,.pill,.status,.service-label{
  background:rgba(0,245,155,.08) !important;
  color:#00ff9c !important;
  border-color:rgba(0,245,155,.25) !important;
}
::selection{background:#00ff9c !important;color:#00190d !important}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* FIX LOGO GERAK + AURA TERLIHAT: animasi tetap aktif walau sistem mengurangi motion */
.logo-stage { position:relative !important; isolation:isolate !important; }
.logo-stage img {
  position:relative !important;
  z-index:2 !important;
  transform-origin:center center !important;
  animation: martondiLogoMoveGlow 3.2s ease-in-out infinite !important;
  will-change: transform, filter !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.logo-stage::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:1 !important;
  left:50% !important;
  top:50% !important;
  width:min(82%, 340px) !important;
  aspect-ratio:1 !important;
  height:auto !important;
  transform:translate(-50%,-50%) scale(.88) !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center, rgba(0, 255, 156,.42) 0%, rgba(0, 255, 156,.22) 36%, rgba(0, 255, 156,.08) 58%, transparent 74%) !important;
  filter:blur(20px) !important;
  opacity:.72 !important;
  pointer-events:none !important;
  animation:martondiLogoAuraMove 3.2s ease-in-out infinite !important;
}
.brand-logo {
  animation:martondiHeaderLogoMove 3.2s ease-in-out infinite !important;
  will-change:transform,filter !important;
  filter:drop-shadow(0 0 4px rgba(0, 255, 156,.55)) drop-shadow(0 0 10px rgba(0, 255, 156,.28)) !important;
}
@keyframes martondiLogoMoveGlow {
  0%,100% { transform:translateY(0) scale(1); filter:drop-shadow(0 0 3px rgba(0, 255, 156,.45)) drop-shadow(0 0 9px rgba(0, 255, 156,.25)); }
  50% { transform:translateY(-12px) scale(1.035); filter:drop-shadow(0 0 7px rgba(0,240,255,.95)) drop-shadow(0 0 19px rgba(0,170,255,.65)) drop-shadow(0 0 30px rgba(0,120,255,.28)); }
}
@keyframes martondiLogoAuraMove {
  0%,100% { opacity:.48; }
  50% { opacity:.95; }
}
@keyframes martondiHeaderLogoMove {
  0%,100% { transform:translateY(0) scale(1); filter:drop-shadow(0 0 3px rgba(0, 255, 156,.4)) drop-shadow(0 0 7px rgba(0, 255, 156,.2)); }
  50% { transform:translateY(-3px) scale(1.06); filter:drop-shadow(0 0 6px rgba(0,240,255,.9)) drop-shadow(0 0 13px rgba(0, 255, 156,.5)); }
}

/* ===== CSS BLOCK 3 ===== */
/* Pulihkan animasi dan transisi interaktif tanpa mengubah tema cyber hijau. */
html { scroll-behavior: smooth !important; }
.menu a, .brand, .brand-logo, .btn, .button, .hero-actions a,
.card, .service-card, .form-control, .back-link, .payment-method,
.payment-detail, .float-wa, .faq-item, .service-more span {
  transition: transform .28s ease, opacity .28s ease, color .28s ease,
    background-color .28s ease, border-color .28s ease, box-shadow .28s ease,
    filter .28s ease !important;
}
.brand-logo { animation: martondiLogoFloat 5s ease-in-out infinite !important; }
@keyframes martondiLogoFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.btn:hover, .button:hover, .hero-actions a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 9px 22px rgba(0,255,156,.16) !important;
}
.btn:active, .button:active { transform: scale(.97) !important; }
.card:hover, .service-card:hover, .service-card:focus-visible {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(0,255,156,.12) !important;
}
.menu a:hover, .back-link:hover { transform: translateY(-2px) !important; }
.float-wa { animation: martondiWaPulse 2.8s ease-in-out infinite !important; }
@keyframes martondiWaPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,255,156,.18); }
  50% { box-shadow: 0 0 0 9px rgba(0,255,156,0); }
}
.section.section-enter {
  animation: martondiSectionEnterRestored .46s cubic-bezier(.2,.75,.25,1) both !important;
}
@keyframes martondiSectionEnterRestored {
  from { opacity: .35; transform: translateY(16px); filter: blur(1.5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.service-card {
  opacity: 0;
  animation: martondiServiceRevealRestored .42s cubic-bezier(.2,.72,.25,1) forwards !important;
}
.service-card:nth-child(1){animation-delay:.02s!important}
.service-card:nth-child(2){animation-delay:.045s!important}
.service-card:nth-child(3){animation-delay:.07s!important}
.service-card:nth-child(4){animation-delay:.095s!important}
.service-card:nth-child(5){animation-delay:.12s!important}
.service-card:nth-child(6){animation-delay:.145s!important}
.service-card:nth-child(7){animation-delay:.17s!important}
.service-card:nth-child(8){animation-delay:.195s!important}
.service-card:nth-child(9){animation-delay:.22s!important}
.service-card:nth-child(10){animation-delay:.245s!important}
.service-card:nth-child(11){animation-delay:.27s!important}
.service-card:nth-child(12){animation-delay:.295s!important}
.service-card:nth-child(13){animation-delay:.32s!important}
.service-card:nth-child(14){animation-delay:.345s!important}
.service-card:nth-child(15){animation-delay:.37s!important}
.service-card:nth-child(16){animation-delay:.395s!important}
.service-card:nth-child(17){animation-delay:.42s!important}
.service-card:nth-child(18){animation-delay:.445s!important}
.service-card:nth-child(19){animation-delay:.47s!important}
.service-card:nth-child(20){animation-delay:.495s!important}
.service-card:nth-child(21){animation-delay:.52s!important}
@keyframes martondiServiceRevealRestored {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width:600px) {
  .service-card { animation-duration:.36s !important; }
}

/* FINAL SAFE PATCH: logo bersih tanpa kotak, garis, glow atau bayangan */
.brand-logo {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.logo-stage::before,
.logo-stage::after {
  content: none !important;
  display: none !important;
}
.logo-stage img {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  border-radius: 0 !important;
  animation: none !important;
}
.logo-stage img:hover {
  transform: none !important;
  filter: none !important;
}

/* Transisi halus untuk semua 21 layanan; layout responsif tetap mengikuti breakpoint asli */
.service-card {
  animation-name: martondiServiceRevealRestored !important;
  animation-fill-mode: both !important;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background-color .28s ease !important;
  will-change: opacity, transform;
}
.service-card:focus-visible {
  outline: 2px solid rgba(0,255,156,.7) !important;
  outline-offset: 3px;
}
@media (hover: none) {
  .service-card:hover { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card { opacity: 1 !important; animation: none !important; transition: none !important; will-change: auto !important; }
}

/* FIX LOGO GERAK + AURA TERLIHAT: animasi tetap aktif walau sistem mengurangi motion */
.logo-stage { position:relative !important; isolation:isolate !important; }
.logo-stage img {
  position:relative !important;
  z-index:2 !important;
  transform-origin:center center !important;
  animation: martondiLogoMoveGlow 3.2s ease-in-out infinite !important;
  will-change: transform, filter !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.logo-stage::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:1 !important;
  left:50% !important;
  top:50% !important;
  width:min(82%, 340px) !important;
  aspect-ratio:1 !important;
  height:auto !important;
  transform:translate(-50%,-50%) scale(.88) !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center, rgba(0, 255, 156,.42) 0%, rgba(0, 255, 156,.22) 36%, rgba(0, 255, 156,.08) 58%, transparent 74%) !important;
  filter:blur(20px) !important;
  opacity:.72 !important;
  pointer-events:none !important;
  animation:martondiLogoAuraMove 3.2s ease-in-out infinite !important;
}
.brand-logo {
  animation:martondiHeaderLogoMove 3.2s ease-in-out infinite !important;
  will-change:transform,filter !important;
  filter:drop-shadow(0 0 4px rgba(0, 255, 156,.55)) drop-shadow(0 0 10px rgba(0, 255, 156,.28)) !important;
}
@keyframes martondiLogoMoveGlow {
  0%,100% { transform:translateY(0) scale(1); filter:drop-shadow(0 0 3px rgba(0, 255, 156,.45)) drop-shadow(0 0 9px rgba(0, 255, 156,.25)); }
  50% { transform:translateY(-12px) scale(1.035); filter:drop-shadow(0 0 7px rgba(0,240,255,.95)) drop-shadow(0 0 19px rgba(0,170,255,.65)) drop-shadow(0 0 30px rgba(0,120,255,.28)); }
}
@keyframes martondiLogoAuraMove {
  0%,100% { opacity:.48; }
  50% { opacity:.95; }
}
@keyframes martondiHeaderLogoMove {
  0%,100% { transform:translateY(0) scale(1); filter:drop-shadow(0 0 3px rgba(0, 255, 156,.4)) drop-shadow(0 0 7px rgba(0, 255, 156,.2)); }
  50% { transform:translateY(-3px) scale(1.06); filter:drop-shadow(0 0 6px rgba(0,240,255,.9)) drop-shadow(0 0 13px rgba(0, 255, 156,.5)); }
}

/* ===== CSS BLOCK 4 ===== */
/* MARTONDI — animated cybersecurity closing section */
.cyber-privacy{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:clamp(22px,4vw,52px);
  border-top:1px solid rgba(0,255,156,.22);
  border-bottom:1px solid rgba(0,255,156,.14);
  background:radial-gradient(ellipse at 75% 50%,rgba(0,255,156,.105),transparent 42%),linear-gradient(135deg,#020a07 0%,#06170f 52%,#020806 100%)!important;
}
.cyber-background{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.cyber-grid{position:absolute;inset:-30%;opacity:.19;background-image:linear-gradient(rgba(0,255,156,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,156,.15) 1px,transparent 1px);background-size:46px 46px;transform:perspective(600px) rotateX(58deg) scale(1.5);transform-origin:center 70%;animation:cyberGridDrift 22s linear infinite}
.cyber-glow{position:absolute;width:360px;height:360px;border-radius:50%;filter:blur(70px);opacity:.16;background:#00ff9c;animation:cyberGlowFloat 11s ease-in-out infinite alternate}
.cyber-glow-one{top:-170px;left:8%}.cyber-glow-two{right:-160px;bottom:-210px;animation-delay:-5s;opacity:.12}
.cyber-code{position:absolute;color:#00ff9c;font:600 11px/2.1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.16em;white-space:nowrap;opacity:.24;text-shadow:0 0 12px rgba(0,255,156,.55);animation:cyberCodeFloat 13s ease-in-out infinite}
.cyber-code-one{top:6%;left:5%;animation-delay:-2s}.cyber-code-two{top:12%;right:5%;color:#8bffc9;animation-delay:-7s}.cyber-code-three{bottom:5%;left:35%;opacity:.13;animation-delay:-4s}
.cyber-particles i{position:absolute;display:block;width:3px;height:3px;border-radius:50%;background:#7dffbf;box-shadow:0 0 12px 2px rgba(0,255,156,.6);animation:cyberParticle 8s ease-in-out infinite}
.cyber-particles i:nth-child(1){left:12%;top:26%;animation-delay:-1s}.cyber-particles i:nth-child(2){left:23%;top:75%;animation-delay:-4s}.cyber-particles i:nth-child(3){left:40%;top:16%;animation-delay:-2s}.cyber-particles i:nth-child(4){left:56%;top:83%;animation-delay:-6s}.cyber-particles i:nth-child(5){left:70%;top:22%;animation-delay:-3s}.cyber-particles i:nth-child(6){left:82%;top:66%;animation-delay:-5s}.cyber-particles i:nth-child(7){left:91%;top:38%;animation-delay:-2.5s}.cyber-particles i:nth-child(8){left:32%;top:42%;animation-delay:-7s}.cyber-particles i:nth-child(9){left:64%;top:48%;animation-delay:-1.5s}.cyber-particles i:nth-child(10){left:48%;top:60%;animation-delay:-3.5s}.cyber-particles i:nth-child(11){left:8%;top:88%;animation-delay:-6.5s}.cyber-particles i:nth-child(12){left:76%;top:90%;animation-delay:-4.5s}
.cyber-privacy-inner{position:relative;display:grid;grid-template-columns:minmax(250px,.86fr) minmax(0,1.14fr);gap:clamp(30px,7vw,100px);align-items:center;padding-top:clamp(52px,8vw,100px);padding-bottom:clamp(56px,8vw,104px)}
.cyber-privacy-art{position:relative;min-height:360px;display:flex;align-items:center;justify-content:center;isolation:isolate}
.cyber-orbit{position:absolute;aspect-ratio:1;border:1px solid rgba(0,255,156,.19);border-radius:50%;transform:rotate(-22deg);animation:cyberOrbit 24s linear infinite}
.cyber-orbit-one{width:min(92%,350px);border-style:dashed}.cyber-orbit-two{width:min(70%,260px);border-color:rgba(126,255,194,.2);animation-direction:reverse;animation-duration:30s}
.cyber-orbit:before,.cyber-orbit:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#9bffd0;box-shadow:0 0 14px #00ff9c}
.cyber-orbit:before{top:12%;left:17%}.cyber-orbit:after{right:10%;bottom:23%;width:4px;height:4px}
.cyber-shield{position:relative;z-index:1;width:min(65%,235px);height:auto;filter:drop-shadow(0 0 20px rgba(0,255,156,.18));animation:cyberShieldHover 5s ease-in-out infinite}
.cyber-art-label{position:absolute;top:5%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 12px;border:1px solid rgba(0,255,156,.25);border-radius:999px;background:rgba(2,12,8,.72);color:#baffdc;font:700 9px/1.2 ui-monospace,monospace;letter-spacing:.12em}
.cyber-art-label>span:last-child{color:#00ff9c}
.cyber-live-dot,.cyber-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:#00ff9c;box-shadow:0 0 10px #00ff9c;display:inline-block;animation:cyberPulse 2s ease-in-out infinite}
.cyber-art-caption{position:absolute;bottom:4%;display:flex;gap:9px;align-items:center;color:#7dbda0;font:700 9px/1.4 ui-monospace,monospace;letter-spacing:.13em}
.cyber-art-caption span:nth-child(odd){color:#b8ffdc}
.cyber-privacy-copy{max-width:650px}
.cyber-privacy-copy .eyebrow{display:flex;align-items:center;gap:10px;color:#69ffb9;font-size:11px;font-weight:850;letter-spacing:.2em}
.cyber-privacy-copy h2{margin:16px 0 18px;color:#f0fff7;font-size:clamp(30px,4.4vw,52px);line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.cyber-privacy-copy>p{max-width:620px;color:#b0cdbd;font-size:clamp(14px,1.4vw,16px);line-height:1.9}
.cyber-privacy-points{display:grid;gap:10px;margin:22px 0 24px}
.cyber-privacy-points span{display:flex;align-items:center;gap:10px;color:#d5f8e6;font-size:13px}
.cyber-privacy-points b{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:7px;border:1px solid rgba(0,255,156,.3);background:rgba(0,255,156,.08);color:#00ff9c;font-size:12px}
.cyber-privacy-copy .home-text-link{display:inline-flex;align-items:center;gap:9px;margin-top:2px;padding:12px 16px;border:1px solid rgba(0,255,156,.35);border-radius:10px;background:rgba(0,255,156,.06);color:#aaffd2;font-weight:750;transition:transform .25s ease,border-color .25s ease,background .25s ease}
.cyber-privacy-copy .home-text-link:hover{transform:translateY(-2px);border-color:#00ff9c;background:rgba(0,255,156,.12)}
.home-faq-item summary::after{content:'?';background:rgba(0,255,156,.06)}
.home-faq-item[open] summary::after{content:'−';background:rgba(0,255,156,.16);transform:translateY(-50%) rotate(180deg)}
@keyframes cyberGridDrift{from{background-position:0 0}to{background-position:0 92px}}
@keyframes cyberGlowFloat{from{transform:translate3d(-15px,-8px,0) scale(.92)}to{transform:translate3d(25px,18px,0) scale(1.08)}}
@keyframes cyberCodeFloat{0%,100%{transform:translateY(0);opacity:.13}50%{transform:translateY(-18px);opacity:.3}}
@keyframes cyberParticle{0%,100%{transform:translate3d(0,0,0);opacity:.25}50%{transform:translate3d(9px,-23px,0);opacity:.9}}
@keyframes cyberOrbit{to{transform:rotate(338deg)}}
@keyframes cyberShieldHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes cyberPulse{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}
@media(max-width:760px){.cyber-privacy-inner{grid-template-columns:1fr;gap:25px;padding-top:48px;padding-bottom:55px}.cyber-privacy-art{min-height:300px;order:0}.cyber-privacy-copy{order:1}.cyber-code{font-size:9px;opacity:.17}.cyber-code-three{left:25%}.cyber-art-label{top:2%}.cyber-art-caption{bottom:0}.cyber-grid{background-size:34px 34px}}
@media(max-width:420px){.cyber-privacy-art{min-height:270px}.cyber-shield{width:62%}.cyber-privacy-copy h2{font-size:30px}.cyber-art-label{font-size:8px}.cyber-privacy-points span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.cyber-grid,.cyber-glow,.cyber-code,.cyber-particles i,.cyber-orbit,.cyber-shield,.cyber-live-dot,.cyber-eyebrow-dot{animation:none!important}.cyber-privacy-copy .home-text-link{transition:none}}

/* ===== CSS BLOCK 5 ===== */
/* Shared animated cyber atmosphere across the entire MARTONDI website */
body{background-color:#030b08!important}
.global-cyber-bg{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  isolation:isolate;contain:strict;
  background:
    radial-gradient(ellipse at 16% 15%,rgba(0,255,156,.075),transparent 34%),
    radial-gradient(ellipse at 88% 78%,rgba(0,180,110,.07),transparent 36%),
    linear-gradient(135deg,rgba(2,10,7,.93),rgba(4,17,12,.88) 48%,rgba(2,9,7,.94));
}
.global-cyber-bg:after{
  content:"";position:absolute;inset:0;opacity:.22;
  background:linear-gradient(180deg,transparent 0%,rgba(0,255,156,.025) 50%,transparent 100%);
  transform:translate3d(0,-100%,0);animation:globalCyberScan 14s linear infinite;
  will-change:transform;
}
.global-cyber-grid{
  position:absolute;inset:-35%;
  opacity:.2;
  background-image:linear-gradient(rgba(0,255,156,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,156,.13) 1px,transparent 1px);
  background-size:52px 52px;
  transform:translate3d(0,0,0) perspective(850px) rotateX(54deg) scale(1.6);
  transform-origin:50% 62%;
  animation:globalCyberGridDrift 32s linear infinite;
  will-change:transform;
}
.global-cyber-halo{
  position:absolute;width:min(42vw,520px);aspect-ratio:1;border-radius:50%;
  background:rgba(0,255,156,.12);filter:blur(90px);opacity:.38;
  transform:translate3d(0,0,0);will-change:transform;
  animation:globalCyberHaloFloat 20s ease-in-out infinite alternate;
}
.global-cyber-halo-a{top:-28%;left:-14%}
.global-cyber-halo-b{right:-18%;bottom:-32%;background:rgba(0,180,110,.13);animation-delay:-10s;animation-duration:25s}
.global-cyber-stream{
  position:absolute;z-index:1;
  color:#45ffae;font:600 10px/2.15 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.16em;white-space:nowrap;opacity:.15;
  text-shadow:0 0 10px rgba(0,255,156,.35);
  transform:translate3d(0,0,0);will-change:transform,opacity;
  animation:globalCyberStreamFloat 18s ease-in-out infinite;
}
.global-cyber-stream-a{top:14%;left:4%;animation-delay:-6s}
.global-cyber-stream-b{top:18%;right:4%;color:#8cffc6;animation-delay:-12s;animation-duration:22s}
.global-cyber-stream-c{bottom:9%;left:28%;opacity:.10;animation-delay:-3s;animation-duration:24s}
.global-cyber-scan{
  position:absolute;top:-35%;bottom:-35%;left:50%;width:1px;
  opacity:.12;background:linear-gradient(transparent,rgba(0,255,156,.75),transparent);
  transform:translate3d(0,0,0);animation:globalCyberLine 19s ease-in-out infinite alternate;
  will-change:transform;
}
.global-cyber-dots i{
  position:absolute;display:block;width:3px;height:3px;border-radius:50%;
  background:#8dffcb;box-shadow:0 0 9px 1px rgba(0,255,156,.45);
  opacity:.35;will-change:transform,opacity;
  animation:globalCyberParticle 12s ease-in-out infinite;
}
.global-cyber-dots i:nth-child(1){left:8%;top:28%;animation-delay:-1s}
.global-cyber-dots i:nth-child(2){left:17%;top:70%;animation-delay:-5s}
.global-cyber-dots i:nth-child(3){left:28%;top:17%;animation-delay:-8s}
.global-cyber-dots i:nth-child(4){left:39%;top:84%;animation-delay:-3s}
.global-cyber-dots i:nth-child(5){left:51%;top:25%;animation-delay:-7s}
.global-cyber-dots i:nth-child(6){left:63%;top:68%;animation-delay:-4s}
.global-cyber-dots i:nth-child(7){left:74%;top:15%;animation-delay:-9s}
.global-cyber-dots i:nth-child(8){left:86%;top:47%;animation-delay:-2s}
.global-cyber-dots i:nth-child(9){left:94%;top:82%;animation-delay:-6s}
.global-cyber-dots i:nth-child(10){left:45%;top:48%;animation-delay:-10s}
.global-cyber-dots i:nth-child(11){left:22%;top:42%;animation-delay:-6.5s}
.global-cyber-dots i:nth-child(12){left:69%;top:89%;animation-delay:-3.5s}
.global-cyber-dots i:nth-child(13){left:91%;top:24%;animation-delay:-8.5s}
.global-cyber-dots i:nth-child(14){left:5%;top:88%;animation-delay:-11s}
.global-cyber-dots i:nth-child(15){left:57%;top:9%;animation-delay:-4.5s}
.global-cyber-dots i:nth-child(16){left:33%;top:60%;animation-delay:-2.5s}
/* Keep all page content above the shared animated layer. */
body>*:not(.global-cyber-bg){z-index:1}
.header{z-index:100}
.service-modal-box,.modal,.modal-overlay,.toast,.whatsapp-float{z-index:1000}
.cyber-privacy{position:relative;isolation:isolate}
@keyframes globalCyberGridDrift{
  0%{transform:translate3d(0,0,0) perspective(850px) rotateX(54deg) scale(1.6)}
  50%{transform:translate3d(0,26px,0) perspective(850px) rotateX(54deg) scale(1.6)}
  100%{transform:translate3d(0,52px,0) perspective(850px) rotateX(54deg) scale(1.6)}
}
@keyframes globalCyberHaloFloat{
  0%{transform:translate3d(-12px,-8px,0) scale(.94)}
  100%{transform:translate3d(20px,18px,0) scale(1.05)}
}
@keyframes globalCyberStreamFloat{
  0%,100%{transform:translate3d(0,0,0);opacity:.10}
  50%{transform:translate3d(0,-15px,0);opacity:.2}
}
@keyframes globalCyberScan{
  0%{transform:translate3d(0,-100%,0)}
  100%{transform:translate3d(0,200%,0)}
}
@keyframes globalCyberLine{
  0%{transform:translate3d(-24vw,0,0);opacity:.03}
  100%{transform:translate3d(24vw,0,0);opacity:.15}
}
@keyframes globalCyberParticle{
  0%,100%{transform:translate3d(0,0,0);opacity:.2}
  50%{transform:translate3d(5px,-16px,0);opacity:.72}
}
@media(max-width:760px){
  .global-cyber-grid{background-size:40px 40px;opacity:.14}
  .global-cyber-stream{font-size:8px;opacity:.10}
  .global-cyber-stream-a{left:2%}.global-cyber-stream-b{right:2%}.global-cyber-stream-c{left:20%}
  .global-cyber-halo{filter:blur(65px);opacity:.3}
}
@media(prefers-reduced-motion:reduce){
  .global-cyber-grid,.global-cyber-halo,.global-cyber-stream,.global-cyber-scan,.global-cyber-bg:after,.global-cyber-dots i{animation:none!important}
}

/* ===== CSS BLOCK 6 ===== */
/* Full-site cyber background: stronger visibility, shared by every page/section. */
html,body{background:#020906!important}
body{position:relative;isolation:isolate}
.global-cyber-bg{z-index:-1!important;opacity:1!important;background-color:#020906!important}
.global-cyber-bg:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;
  background-image:repeating-linear-gradient(0deg,rgba(0,255,156,.045) 0,rgba(0,255,156,.045) 1px,transparent 1px,transparent 4px),
  radial-gradient(ellipse at 50% 50%,rgba(0,255,156,.055),transparent 65%);
}
.global-cyber-grid{opacity:.26!important;background-size:46px 46px!important}
.global-cyber-halo{opacity:.42!important}
.global-cyber-stream{opacity:.2!important;text-shadow:0 0 12px rgba(0,255,156,.45)!important}
.global-cyber-stream-a{top:11%;left:3%;animation-duration:21s}
.global-cyber-stream-b{top:17%;right:3%;animation-duration:24s}
.global-cyber-stream-c{bottom:8%;left:25%;animation-duration:26s}
.global-cyber-stream-d{top:35%;left:14%;animation-delay:-11s;animation-duration:25s;color:#00ff9c}
.global-cyber-stream-e{top:58%;right:8%;animation-delay:-8s;animation-duration:23s;color:#9affd0;font-size:9px}
.global-cyber-stream-f{top:72%;left:4%;animation-delay:-15s;animation-duration:27s;color:#00ff9c}
.global-cyber-stream-g{top:40%;right:24%;animation-delay:-5s;animation-duration:29s;opacity:.12!important}
.global-cyber-stream-h{top:26%;left:52%;animation-delay:-18s;animation-duration:22s;opacity:.13!important}
/* Transparent section canvases let the same cyber atmosphere remain visible everywhere. */
main,main>section,.section,.home-block,.home-faq,.home-process,.home-features,.home-final-cta,
.home-final-panel,.home-feature-grid,.home-process-grid{background-color:transparent!important}
.section{background:transparent!important}
/* Keep the privacy/security panel distinct, but let the global matrix show through it. */
.cyber-privacy{background:radial-gradient(ellipse at 75% 50%,rgba(0,255,156,.10),transparent 42%),linear-gradient(135deg,rgba(2,10,7,.76),rgba(6,23,15,.72) 52%,rgba(2,8,6,.78))!important}
/* Ensure page content stays above the fixed background. */
body>header,body>main,body>footer,body>.site-toast,body>.modal,body>.modal-overlay{position:relative;z-index:1}
.header{z-index:100!important}
.global-cyber-bg{position:fixed!important;inset:0;pointer-events:none}
@media(max-width:760px){
  .global-cyber-grid{opacity:.17!important;background-size:35px 35px!important}
  .global-cyber-stream{font-size:8px!important;opacity:.13!important}
  .global-cyber-halo{filter:blur(58px);opacity:.3!important}
  .global-cyber-stream-g,.global-cyber-stream-h{display:none}
}
@media(prefers-reduced-motion:reduce){
  .global-cyber-stream-d,.global-cyber-stream-e,.global-cyber-stream-f,.global-cyber-stream-g,.global-cyber-stream-h{animation:none!important}
}

/* ===== CSS BLOCK 7 ===== */
:root{--cyber-green:#00f5a0;--cyber-lime:#8cff00;--cyber-line:rgba(0, 255, 156,.24)}
body{background-color:#020a08!important;background-image:radial-gradient(ellipse at 15% 20%,rgba(0, 255, 156,.13),transparent 34%),radial-gradient(ellipse at 85% 70%,rgba(28,255,120,.09),transparent 32%),linear-gradient(135deg,#020807,#041a12 52%,#010605)!important;background-attachment:fixed!important}
/* Formula / algorithm ambience changes by section */
.section{isolation:isolate;position:relative;background-color:transparent!important;overflow:hidden}
.section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9;background-image:radial-gradient(circle at 12% 22%,rgba(0,255,150,.16),transparent 20%),radial-gradient(circle at 88% 78%,rgba(100,255,0,.10),transparent 22%),linear-gradient(90deg,transparent 49.8%,rgba(0,255,150,.07) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(0,255,150,.06) 50%,transparent 50.2%);background-size:auto,auto,72px 72px,72px 72px}
.section-inner,.section-head,.cards,.service-count,.payment-detail,.about-grid,.consult-container{position:relative;z-index:1}
#beranda::before{background-image:linear-gradient(115deg,transparent 45%,rgba(0, 255, 156,.12) 45.2%,transparent 45.7%),radial-gradient(circle at 50% 45%,rgba(0, 255, 156,.16),transparent 34%),repeating-linear-gradient(0deg,transparent 0 33px,rgba(0, 255, 156,.10) 34px,transparent 35px),repeating-linear-gradient(90deg,transparent 0 52px,rgba(0, 255, 156,.08) 53px,transparent 54px)}
#layanan::before{background-image:radial-gradient(circle at 20% 25%,rgba(0, 255, 156,.22) 0 2px,transparent 3px),radial-gradient(circle at 70% 60%,rgba(0, 255, 156,.18) 0 2px,transparent 3px),linear-gradient(30deg,transparent 48%,rgba(0, 255, 156,.12) 49%,transparent 50%),linear-gradient(150deg,transparent 48%,rgba(0, 255, 156,.10) 49%,transparent 50%);background-size:110px 100px,140px 130px,90px 90px,120px 120px}
#tentang::before{background-image:radial-gradient(ellipse at 50% 50%,rgba(0, 255, 156,.18),transparent 42%),repeating-radial-gradient(ellipse at 50% 50%,transparent 0 38px,rgba(0, 255, 156,.10) 39px 40px,transparent 41px 65px)}
#kontak::before{background-image:repeating-linear-gradient(0deg,transparent 0 28px,rgba(0, 255, 156,.09) 29px,transparent 30px),linear-gradient(90deg,transparent 0 10%,rgba(0, 255, 156,.16) 10.1%,transparent 10.4%,transparent 89%,rgba(0, 255, 156,.12) 89.1%,transparent 89.4%),radial-gradient(circle at 80% 20%,rgba(0, 255, 156,.18),transparent 25%)}
#pembayaran::before{background-image:radial-gradient(circle at 80% 40%,rgba(0, 255, 156,.2),transparent 24%),repeating-linear-gradient(135deg,transparent 0 30px,rgba(0, 255, 156,.08) 31px,transparent 32px),radial-gradient(ellipse at 20% 80%,rgba(120,255,0,.10),transparent 30%)}
.home-privacy::before{background-image:radial-gradient(ellipse at 50% 45%,rgba(0, 255, 156,.2),transparent 30%),repeating-radial-gradient(circle at 50% 45%,transparent 0 22px,rgba(0, 255, 156,.13) 23px 24px,transparent 25px 42px),linear-gradient(90deg,transparent 49.7%,rgba(0, 255, 156,.15) 50%,transparent 50.3%)}
.home-faq::before{background-image:radial-gradient(circle at 15% 20%,rgba(0, 255, 156,.18),transparent 18%),radial-gradient(circle at 85% 70%,rgba(0, 255, 156,.14),transparent 20%),repeating-linear-gradient(0deg,transparent 0 42px,rgba(0, 255, 156,.08) 43px,transparent 44px)}
/* The 21 service cards each get a different quiet algorithm/formula watermark */
.service-card{background:linear-gradient(145deg,rgba(3,35,24,.91),rgba(2,14,11,.88))!important;border-color:rgba(0, 255, 156,.25)!important;isolation:isolate}
.service-card::after{position:absolute;right:9px;bottom:8px;z-index:-1;pointer-events:none;color:rgba(0, 255, 156,.17);font:700 11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;max-width:75%;text-align:right;content:"∑ xᵢ / n"}
.service-card:nth-child(2)::after{content:"f(x)=x²"}.service-card:nth-child(3)::after{content:"0101 · 1100"}.service-card:nth-child(4)::after{content:"A → B → C"}.service-card:nth-child(5)::after{content:"Σ data = total"}.service-card:nth-child(6)::after{content:"P(A|B)"}.service-card:nth-child(7)::after{content:"{ layout: grid }"}.service-card:nth-child(8)::after{content:"x² + y² = r²"}.service-card:nth-child(9)::after{content:"for(i=0; i<n; i++)"}.service-card:nth-child(10)::after{content:"01001011"}.service-card:nth-child(11)::after{content:"JSON { data }"}.service-card:nth-child(12)::after{content:"ID → validasi"}.service-card:nth-child(13)::after{content:"∫ f(x) dx"}.service-card:nth-child(14)::after{content:"[01] [10] [11]"}.service-card:nth-child(15)::after{content:"sort(data)"}.service-card:nth-child(16)::after{content:"Σ halaman"}.service-card:nth-child(17)::after{content:"A₁ + A₂ = A₃"}.service-card:nth-child(18)::after{content:"<data />"}.service-card:nth-child(19)::after{content:"CV → PDF"}.service-card:nth-child(20)::after{content:"{ user: true }"}.service-card:nth-child(21)::after{content:"if (ready) → go"}
.service-card>*{position:relative;z-index:1}
.service-card .service-no,.service-more{color:#00ff9c!important}
.card,.about-box,.step,.consult-container,.notice,.payment-detail,.payment-method{backdrop-filter:blur(8px);border-color:rgba(0, 255, 156,.22)}
.section-head .eyebrow{color:#00ff9c!important}
@keyframes formulaDrift{0%,100%{background-position:0 0,0 0,0 0,0 0}50%{background-position:18px 12px,-15px 20px,0 36px,36px 0}}
.section::before{animation:formulaDrift 24s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.section::before{animation:none!important}.service-card{transition:none!important}}
@media(max-width:700px){.section::before{opacity:.65}.service-card::after{font-size:9px;opacity:.75}.section{background-attachment:scroll}}

/* ===== CSS BLOCK 8 ===== */
/* Header selalu tersedia saat halaman digulir */
html { scroll-behavior: auto !important; }
body { min-height: 100vh; overflow-x: clip; }
/* Header dibuat fixed agar menu tidak ikut hilang saat halaman digulir di HP. */
.header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; width: 100%; background: rgba(3, 15, 10, .96) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav { min-height: 58px; }
/* Ruang untuk header tetap disediakan supaya konten tidak tertutup. */
main { padding-top: 76px; }

/* Jarak section dibuat konsisten dan nyaman */
.section { box-sizing: border-box; padding-top: clamp(42px, 5vw, 66px) !important; padding-bottom: clamp(44px, 5vw, 68px) !important; }
.section-inner { width: min(1100px, 100%); margin-left: auto; margin-right: auto; }
#tentang .section-head { margin-bottom: 24px !important; }
#tentang .about-grid { margin-top: 0 !important; gap: 22px; }
#tentang .about-box { margin-top: 0 !important; padding: clamp(20px, 3vw, 30px) !important; }
#tentang .about-box p { margin: 12px 0 0 !important; line-height: 1.8; }
#pembayaran .section-head { margin-bottom: 16px !important; }
#pembayaran .payment-intro { margin: 0 auto 22px !important; max-width: 850px; text-align: center; }

/* Transisi ringan; tidak mengulang efek scroll saat berganti menu */
.section { transition: opacity .22s ease, transform .22s ease !important; }
.section.section-enter { animation: martondiSectionIn .22s ease both; }
@keyframes martondiSectionIn { from { opacity: .65; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Pastikan footer tetap dapat dicapai di layar kecil */
main { min-width: 0; flex: 1 0 auto; }
footer, .footer { flex-shrink: 0; }
@media (max-width: 600px) {
  main { padding-top: 112px; }
  .nav { padding: 9px 12px !important; gap: 8px; flex-wrap: wrap; }
  .brand { gap: 8px; }
  .brand-logo { width: 36px; height: 36px; flex-basis: 36px; }
  .brand-text { font-size: 13px !important; line-height: 1.2; }
  .brand-text span { font-size: 9px; letter-spacing: .08em; }
  .menu { gap: 3px !important; flex-wrap: wrap; justify-content: flex-end; }
  .menu a { padding: 8px 9px !important; font-size: 12px !important; white-space: nowrap; }
  .section { padding: 38px 14px 46px !important; }
  #tentang .section-head { margin-bottom: 18px !important; }
  #tentang .about-box { padding: 19px !important; }
  #pembayaran .payment-intro { margin-bottom: 18px !important; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .section, .section.section-enter { animation: none !important; transition: none !important; } }

/* ===== CSS BLOCK 9 ===== */
/* Alur pemesanan bergaya timeline cyber, terisolasi agar tidak mengubah komponen lain. */
.home-process{position:relative;isolation:isolate;overflow:hidden}
.home-process .section-head{text-align:center;position:relative;z-index:2}
.home-process .section-head p{margin-left:auto;margin-right:auto}
.home-process-timeline{--timeline-green:#00ff9c;--timeline-line:rgba(0,255,156,.72);position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch;margin:64px auto 0;max-width:1240px;padding:0 2px}
.home-timeline-track{position:absolute;left:2.5%;right:2.5%;top:50%;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,rgba(0,255,156,.25) 5%,#00ff9c 18%,rgba(0,255,156,.72) 82%,#00ff9c 95%,transparent);box-shadow:0 0 10px rgba(0,255,156,.38);pointer-events:none}
.home-timeline-track span{position:absolute;inset:-3px auto -3px 0;width:23%;background:linear-gradient(90deg,transparent,rgba(142,255,201,.95),transparent);filter:blur(2px);animation:martondiTimelineScan 4.5s linear infinite}
.timeline-step{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;padding:0;border:0;background:transparent;overflow:visible}
.timeline-card{position:relative;min-height:220px;padding:20px 19px 17px;border:1px solid rgba(0,255,156,.34);border-radius:16px;background:linear-gradient(145deg,rgba(5,25,17,.97),rgba(2,12,8,.97));box-shadow:0 12px 30px rgba(0,0,0,.25),inset 0 0 24px rgba(0,255,156,.025);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;backdrop-filter:blur(8px)}
.timeline-card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(0,255,156,.25),transparent 42%,rgba(0,255,156,.08));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.timeline-step:nth-of-type(odd) .timeline-card{margin-top:-34px;margin-bottom:34px}
.timeline-step:nth-of-type(even) .timeline-card{margin-top:34px;margin-bottom:-34px}
.timeline-card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.timeline-card .home-step-number{flex:0 0 40px;width:40px;height:40px;border-radius:11px;font-size:12px;box-shadow:0 0 16px rgba(0,255,156,.08)}
.timeline-kicker{color:#35f5a1;font:700 9px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.15em}
.timeline-card h3{margin:0 0 10px;color:#eafff5;font-size:clamp(15px,1.3vw,18px);line-height:1.35}
.timeline-card p{margin:0;color:#a2c9b6;font-size:13px;line-height:1.75}
.timeline-tags{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid rgba(0,255,156,.14);padding-top:13px;margin-top:15px}
.timeline-tags span{font:600 9px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;color:#72ffbb;border:1px solid rgba(0,255,156,.28);border-radius:5px;padding:4px 7px;background:rgba(0,255,156,.035)}
.timeline-node{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;display:grid;place-items:center;border:2px solid #00ff9c;border-radius:50%;background:#03130b;box-shadow:0 0 0 7px rgba(0,255,156,.035),0 0 22px rgba(0,255,156,.18);color:#00ff9c}
.timeline-node:before{content:"";position:absolute;inset:-8px;border:1px solid rgba(0,255,156,.18);border-radius:50%;animation:martondiTimelinePulse 2.8s ease-out infinite}
.timeline-node-icon{font-size:27px;line-height:1;text-shadow:0 0 12px rgba(0,255,156,.55)}
.timeline-step:hover .timeline-card{transform:translateY(-5px);border-color:rgba(0,255,156,.72);box-shadow:0 18px 36px rgba(0,0,0,.3),0 0 22px rgba(0,255,156,.07)}
.timeline-step:hover .timeline-node{box-shadow:0 0 0 7px rgba(0,255,156,.06),0 0 30px rgba(0,255,156,.3)}
@keyframes martondiTimelineScan{0%{transform:translateX(-120%)}100%{transform:translateX(480%)}}
@keyframes martondiTimelinePulse{0%{transform:scale(.8);opacity:.65}100%{transform:scale(1.35);opacity:0}}
@media(max-width:900px){.home-process-timeline{gap:12px}.timeline-card{padding:17px 14px;min-height:238px}.timeline-card-head{gap:8px}.timeline-kicker{font-size:8px}.timeline-node{width:50px;height:50px}.timeline-tags span{font-size:8px;padding:4px 5px}}
@media(max-width:650px){.home-process-timeline{grid-template-columns:minmax(0,1fr);gap:18px;margin:34px 0 0;padding:0 0 0 22px}.home-timeline-track{top:0;bottom:0;left:46px;right:auto;width:2px;height:auto;transform:none;background:linear-gradient(180deg,transparent,#00ff9c 8%,rgba(0,255,156,.7) 90%,transparent)}.home-timeline-track span{inset:0 -2px auto;width:auto;height:24%;background:linear-gradient(180deg,transparent,rgba(142,255,201,.95),transparent);animation:martondiTimelineScanVertical 4.5s linear infinite}.timeline-step{padding-left:42px}.timeline-step:nth-of-type(odd) .timeline-card,.timeline-step:nth-of-type(even) .timeline-card{margin:0;min-height:0}.timeline-node{left:24px;top:28px;width:44px;height:44px;transform:translate(-50%,0)}.timeline-node-icon{font-size:22px}.timeline-card{padding:18px 17px}.timeline-card h3{font-size:17px}.timeline-card p{font-size:13px}.home-process-action{margin-top:30px}}
@keyframes martondiTimelineScanVertical{0%{transform:translateY(-120%)}100%{transform:translateY(520%)}}
/* Penyempurnaan posisi timeline: node/logo tidak boleh menutupi tulisan kartu. */
.home-process-timeline{min-height:560px;align-items:stretch;overflow:visible}
.timeline-step{min-height:560px;display:block}
.timeline-card{position:absolute;left:0;right:0;z-index:4;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.timeline-step:nth-of-type(odd) .timeline-card{top:0;bottom:auto;margin:0}
.timeline-step:nth-of-type(even) .timeline-card{top:auto;bottom:0;margin:0}
.timeline-node{top:50%;z-index:2}
.home-timeline-track{z-index:1}
.timeline-card h3,.timeline-card p,.timeline-card-head,.timeline-tags{position:relative;z-index:2}
@media(max-width:900px) and (min-width:651px){.home-process-timeline{min-height:590px;gap:12px}.timeline-step{min-height:590px}.timeline-card{padding:17px 14px}.timeline-card h3{font-size:15px}.timeline-card p{font-size:12px}.timeline-node{width:48px;height:48px}}
@media(max-width:650px){.home-process-timeline{min-height:0;align-items:stretch;overflow:visible}.timeline-step{min-height:0;display:block}.timeline-card{position:relative;left:auto;right:auto;top:auto!important;bottom:auto!important;z-index:4}.timeline-node{z-index:2}.home-timeline-track{z-index:1}}
@media(prefers-reduced-motion:reduce){.home-timeline-track span,.timeline-node:before{animation:none!important}.timeline-card,.timeline-step:hover .timeline-card{transition:none!important;transform:none!important}}

/* ===== CSS BLOCK 10 ===== */
/* Hapus hanya garis diagonal panjang pada area hero; motif cyber lain tetap ada. */
#beranda::before{
  background-image:
    repeating-linear-gradient(0deg,transparent 0 35px,rgba(0, 255, 156,.045) 36px,transparent 37px),
    repeating-linear-gradient(90deg,transparent 0 52px,rgba(0, 255, 156,.04) 53px,transparent 54px),
    radial-gradient(circle at 50% 45%,rgba(0, 255, 156,.14),transparent 36%) !important;
}

/* ===== CSS BLOCK 11 ===== */
/* Keep the original alternating cyber timeline; improve card/node spacing at zoomed widths. */
.home-process-timeline{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:1240px!important;
  gap:clamp(16px,2.2vw,30px)!important;
  margin-top:72px!important;
  padding:0 10px!important;
  align-items:stretch!important;
}
.home-process-timeline .timeline-step{
  min-width:0!important;
  min-height:570px!important;
  position:relative!important;
}
.home-process-timeline .timeline-card{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:220px!important;
  margin:0!important;
  position:absolute!important;
  left:0!important;right:0!important;
  z-index:4!important;
}
.home-process-timeline .timeline-step:nth-of-type(odd) .timeline-card{
  top:0!important;bottom:auto!important;
}
.home-process-timeline .timeline-step:nth-of-type(even) .timeline-card{
  top:auto!important;bottom:0!important;
}
.home-process-timeline .home-timeline-track{z-index:1!important;top:50%!important;left:2%!important;right:2%!important;width:auto!important;height:2px!important;transform:translateY(-50%)!important;display:block!important}
.home-process-timeline .timeline-node{z-index:5!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important}
@media(max-width:900px){
  .home-process-timeline{
    min-width:900px!important;
    width:900px!important;
    max-width:none!important;
    gap:18px!important;
    margin-top:72px!important;
  }
  .home-process-timeline .timeline-step{min-height:570px!important}
  .home-process-timeline .timeline-card{padding:18px 15px!important;min-height:220px!important}
}
@media(max-width:650px){
  /* On phones, retain alternating timeline by allowing horizontal swipe rather than overlapping cards. */
  .home-process-timeline{min-width:900px!important;width:900px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .home-process-timeline .home-timeline-track{display:block!important;top:50%!important;bottom:auto!important;left:2%!important;right:2%!important;width:auto!important;height:2px!important}
  .home-process-timeline .timeline-step{min-height:570px!important;padding:0!important}
  .home-process-timeline .timeline-card{position:absolute!important;left:0!important;right:0!important;min-height:220px!important}
  .home-process-timeline .timeline-step:nth-of-type(odd) .timeline-card{top:0!important;bottom:auto!important}
  .home-process-timeline .timeline-step:nth-of-type(even) .timeline-card{top:auto!important;bottom:0!important}
  .home-process-timeline .timeline-node{top:50%!important;left:50%!important;width:50px!important;height:50px!important;transform:translate(-50%,-50%)!important}
  .home-process-timeline-viewport{overflow-x:auto!important;overflow-y:hidden!important;max-width:100%!important;-webkit-overflow-scrolling:touch!important}
}

/* ===== CSS BLOCK 12 ===== */
/* Final targeted fix: equal distance from the central timeline line; remove circular nodes only. */
.home-process-timeline{
  --timeline-card-gap:28px;
  position:relative!important;
  align-items:stretch!important;
}
.home-process-timeline .timeline-step{
  position:relative!important;
  min-height:570px!important;
}
.home-process-timeline .timeline-card{
  position:absolute!important;
  left:0!important;right:0!important;
  width:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
}
/* Top cards stop the same distance above the line. */
.home-process-timeline .timeline-step:nth-of-type(odd) .timeline-card{
  top:auto!important;
  bottom:calc(50% + var(--timeline-card-gap))!important;
}
/* Bottom cards start the same distance below the line. */
.home-process-timeline .timeline-step:nth-of-type(even) .timeline-card{
  top:calc(50% + var(--timeline-card-gap))!important;
  bottom:auto!important;
}
/* Remove the round nodes/icons as requested; keep the glowing horizontal line. */
.home-process-timeline .timeline-node{display:none!important;}
.home-process-timeline .home-timeline-track{
  display:block!important;top:50%!important;bottom:auto!important;
  left:2%!important;right:2%!important;width:auto!important;height:2px!important;
  transform:translateY(-50%)!important;z-index:1!important;
}
.home-process-timeline .timeline-card{z-index:2!important;}
@media(max-width:900px){
  .home-process-timeline{min-width:900px!important;width:900px!important;max-width:none!important;}
  .home-process-timeline .timeline-step{min-height:570px!important;}
}
@media(max-width:650px){
  .home-process-timeline{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;}
  .home-process-timeline .timeline-step{min-height:570px!important;padding:0!important;}
  .home-process-timeline .timeline-card{padding:18px 15px!important;min-height:220px!important;}
  .home-process-timeline-viewport{overflow-x:auto!important;overflow-y:hidden!important;max-width:100%!important;-webkit-overflow-scrolling:touch!important;}
}

/* ===== CSS BLOCK 13 ===== */
/* Timeline: keep original alternating cards, restore the four round icon nodes, and equalize vertical offset. */
.home-process-timeline{align-items:center!important;}
.home-process-timeline .timeline-step{align-self:stretch!important;min-height:0!important;}
.home-process-timeline .timeline-step .timeline-card{margin-top:0!important;margin-bottom:0!important;}
.home-process-timeline .timeline-step:nth-of-type(odd) .timeline-card{transform:translateY(-34px)!important;}
.home-process-timeline .timeline-step:nth-of-type(even) .timeline-card{transform:translateY(34px)!important;}
.home-process-timeline .timeline-node{display:grid!important;visibility:visible!important;opacity:1!important;z-index:5!important;}
.home-process-timeline .timeline-node-icon{display:inline-block!important;visibility:visible!important;opacity:1!important;}
.home-process-timeline .timeline-step:hover .timeline-card{transform:translateY(-39px)!important;}
.home-process-timeline .timeline-step:nth-of-type(even):hover .timeline-card{transform:translateY(39px)!important;}
@media(max-width:650px){
 .home-process-timeline{align-items:stretch!important;}
 .home-process-timeline .timeline-step:nth-of-type(odd) .timeline-card,
 .home-process-timeline .timeline-step:nth-of-type(even) .timeline-card{transform:none!important;margin:0!important;}
 .home-process-timeline .timeline-node{display:grid!important;}
}
/* Remove only the large logo's diffuse glow; preserve its image and orbit/ring outline. */
.logo-stage::before{content:none!important;display:none!important;animation:none!important;filter:none!important;}
.logo-stage img{filter:drop-shadow(0 8px 18px rgba(0,0,0,.24))!important;}
/* Remove the decorative circular/radial motif beside the privacy text, not the content or logo. */
.home-privacy{position:relative!important;isolation:isolate!important;overflow:hidden!important;}
.home-privacy::before{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;opacity:.48!important;background-image:radial-gradient(ellipse at 50% 45%,rgba(0, 255, 156,.2),transparent 30%),repeating-radial-gradient(circle at 50% 45%,transparent 0 22px,rgba(0, 255, 156,.13) 23px 24px,transparent 25px 42px),linear-gradient(90deg,transparent 49.7%,rgba(0, 255, 156,.15) 50%,transparent 50.3%)!important;}
/* Keep section lighting localized and subtle; do not change layout or remove the green timeline line. */
.home-process{background-image:radial-gradient(ellipse at 50% 48%,rgba(0,255,156,.055),transparent 55%)!important;}
/* CTA alur ditempatkan di bawah seluruh kolom timeline, pada baris sendiri. */
.home-process-action{display:flex!important;position:relative!important;clear:both!important;width:100%!important;justify-content:center!important;align-items:center!important;flex-wrap:wrap!important;gap:14px!important;margin:62px auto 0!important;padding-top:8px!important;}
.home-process-action .btn{flex:0 1 auto!important;}
@media(max-width:650px){.home-process-action{margin-top:30px!important;padding-top:0!important;gap:10px!important;}.home-process-action .btn{width:100%!important;max-width:330px!important;}}
.cyber-privacy{background-image:radial-gradient(ellipse at 75% 50%,rgba(0,255,156,.055),transparent 42%),linear-gradient(135deg,rgba(2,10,7,.76),rgba(6,23,15,.72) 52%,rgba(2,8,6,.78))!important;}
@media(prefers-reduced-motion:reduce){.home-process-timeline .timeline-node:before{animation:none!important;}}

/* ===== CSS BLOCK 14 ===== */
/* Kembalikan biground Privasi seperti desain sebelumnya; hanya ornamen latar, isi tetap di atasnya. */
.home-privacy{position:relative!important;isolation:isolate!important;overflow:hidden!important;}
.home-privacy::before{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;opacity:.48!important;background-image:radial-gradient(ellipse at 50% 45%,rgba(0, 255, 156,.2),transparent 30%),repeating-radial-gradient(circle at 50% 45%,transparent 0 22px,rgba(0, 255, 156,.13) 23px 24px,transparent 25px 42px),linear-gradient(90deg,transparent 49.7%,rgba(0, 255, 156,.15) 50%,transparent 50.3%)!important;background-size:auto!important;animation:none!important;}
.home-privacy>*{position:relative;z-index:1;}

/* ===== CSS BLOCK 15 ===== */
/* Biground Privasi dibuat menyatu dengan bidang section, bukan motif lingkaran. */
.home-privacy::before,
.cyber-privacy::before{
  content:""!important; display:block!important; position:absolute!important; inset:0!important;
  z-index:0!important; pointer-events:none!important; opacity:.72!important;
  background-image:
    radial-gradient(ellipse at 78% 48%, rgba(0,255,156,.14) 0%, rgba(0,255,156,.055) 24%, transparent 54%),
    radial-gradient(ellipse at 8% 92%, rgba(0,255,130,.075) 0%, transparent 42%),
    linear-gradient(115deg, transparent 0%, rgba(0,255,156,.025) 46%, rgba(0,255,156,.06) 70%, transparent 100%)!important;
  background-size:100% 100%!important; background-repeat:no-repeat!important; animation:none!important;
}
.home-privacy, .cyber-privacy{position:relative!important; isolation:isolate!important;}
.home-privacy > *, .cyber-privacy > *{position:relative; z-index:1;}

/* ===== CSS BLOCK 16 ===== */
/* Privasi & Security: atmosfer cyber berupa matrix, jalur sirkuit, data, dan formula — tanpa motif lingkaran besar. */
.home-privacy.cyber-privacy{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background-color:#020a07!important;
  background-image:
    radial-gradient(ellipse at 74% 42%,rgba(0,255,156,.13) 0%,rgba(0,255,156,.045) 30%,transparent 58%),
    linear-gradient(115deg,rgba(1,9,6,.98) 0%,rgba(3,17,11,.94) 48%,rgba(1,8,6,.97) 100%)!important;
}
/* The decorative layer must remain absolute; this prevents it collapsing into a blank strip. */
.home-privacy.cyber-privacy > .cyber-background{
  display:block!important;position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;z-index:1!important;
  overflow:hidden!important;pointer-events:none!important;
}
.home-privacy.cyber-privacy > .cyber-privacy-inner{
  position:relative!important;z-index:3!important;
}
/* Matrix and PCB-like circuit traces, using angular lines rather than circular rings. */
.home-privacy.cyber-privacy::before{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;
  z-index:0!important;pointer-events:none!important;opacity:.9!important;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(0,255,156,.025) 6px,transparent 7px),
    linear-gradient(90deg,transparent 0 7%,rgba(0,255,156,.12) 7.08%,transparent 7.18%,transparent 18%,rgba(0,255,156,.075) 18.08%,transparent 18.18%,transparent 84%,rgba(0,255,156,.08) 84.08%,transparent 84.18%),
    linear-gradient(0deg,transparent 0 22%,rgba(0,255,156,.06) 22.08%,transparent 22.18%,transparent 78%,rgba(0,255,156,.055) 78.08%,transparent 78.18%),
    repeating-linear-gradient(135deg,transparent 0 61px,rgba(0,255,156,.045) 62px,transparent 63px),
    radial-gradient(ellipse at 74% 40%,rgba(0,255,156,.12),transparent 48%),
    radial-gradient(circle,rgba(0, 255, 156,.3) 1px,transparent 1.8px)!important;
  background-size:auto,100% 100%,100% 100%,122px 122px,100% 100%,34px 34px!important;
  background-position:0 0,0 0,0 0,0 0,center,8px 9px!important;
  animation:privacyCircuitDrift 28s linear infinite!important;
}
/* Data/formula layer is clearly visible but remains behind the copy and shield artwork. */
.home-privacy.cyber-privacy .cyber-grid{
  position:absolute!important;inset:-22% -10% -12%!important;z-index:0!important;
  opacity:.34!important;
  background-image:
    linear-gradient(rgba(0,255,156,.15) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,156,.15) 1px,transparent 1px)!important;
  background-size:42px 42px!important;
  transform:perspective(680px) rotateX(54deg) scale(1.25)!important;
  animation:privacyMatrixFlow 23s linear infinite!important;
}
.home-privacy.cyber-privacy .cyber-glow{
  width:clamp(240px,36vw,440px)!important;height:clamp(240px,36vw,440px)!important;
  border-radius:50%!important;filter:blur(88px)!important;opacity:.14!important;
}
.home-privacy.cyber-privacy .cyber-code{
  z-index:2!important;display:block!important;max-width:38%!important;
  color:#00ff9c!important;opacity:.33!important;
  font-size:clamp(8px,.78vw,11px)!important;line-height:2!important;
  letter-spacing:.12em!important;text-shadow:0 0 14px rgba(0,255,156,.46)!important;
  user-select:none!important;
}
.home-privacy.cyber-privacy .cyber-code-one{top:8%!important;left:3%!important}
.home-privacy.cyber-privacy .cyber-code-two{top:10%!important;right:3%!important;color:#a5ffd8!important;text-align:right!important}
.home-privacy.cyber-privacy .cyber-code-three{bottom:5%!important;left:30%!important;opacity:.22!important}
.home-privacy.cyber-privacy .cyber-particles{position:absolute!important;inset:0!important;z-index:2!important;pointer-events:none!important}
.home-privacy.cyber-privacy .cyber-particles i{box-shadow:0 0 9px 1px rgba(0,255,156,.52)!important}
/* Swap circular orbit outlines around the shield for sharp, technical diamond frames. */
.home-privacy.cyber-privacy .cyber-orbit{
  aspect-ratio:1!important;border-radius:7px!important;
  transform:rotate(45deg) scaleX(.78)!important;
  border-color:rgba(0,255,156,.22)!important;
}
.home-privacy.cyber-privacy .cyber-orbit-one{
  width:min(82%,310px)!important;border-style:dashed!important;
  animation:privacyFrameTurn 42s linear infinite!important;
}
.home-privacy.cyber-privacy .cyber-orbit-two{
  width:min(65%,245px)!important;border-style:solid!important;
  border-color:rgba(126,255,194,.25)!important;
  animation:privacyFrameTurnReverse 36s linear infinite!important;
}
.home-privacy.cyber-privacy .cyber-orbit:before,
.home-privacy.cyber-privacy .cyber-orbit:after{border-radius:1px!important;width:6px!important;height:6px!important}
@keyframes privacyCircuitDrift{from{background-position:0 0,0 0,0 0,0 0,center,8px 9px}to{background-position:0 0,18px 0,0 18px,61px 61px,center,42px 43px}}
@keyframes privacyMatrixFlow{from{background-position:0 0,0 0}to{background-position:0 84px,84px 0}}
@keyframes privacyFrameTurn{from{transform:rotate(45deg) scaleX(.78)}to{transform:rotate(405deg) scaleX(.78)}}
@keyframes privacyFrameTurnReverse{from{transform:rotate(405deg) scaleX(.78)}to{transform:rotate(45deg) scaleX(.78)}}
@media(max-width:760px){
  .home-privacy.cyber-privacy .cyber-grid{opacity:.22!important;background-size:32px 32px!important}
  .home-privacy.cyber-privacy .cyber-code{font-size:8px!important;opacity:.23!important;max-width:35%!important}
  .home-privacy.cyber-privacy .cyber-code-three{left:12%!important;bottom:2%!important}
  .home-privacy.cyber-privacy .cyber-orbit-one{width:min(82%,275px)!important}
  .home-privacy.cyber-privacy .cyber-orbit-two{width:min(63%,205px)!important}
}
@media(prefers-reduced-motion:reduce){
  .home-privacy.cyber-privacy::before,.home-privacy.cyber-privacy .cyber-grid,
  .home-privacy.cyber-privacy .cyber-glow,.home-privacy.cyber-privacy .cyber-code,
  .home-privacy.cyber-privacy .cyber-particles i,.home-privacy.cyber-privacy .cyber-orbit{animation:none!important}
}

/* ===== CSS BLOCK 17 ===== */
/* Redupkan ornamen latar pada Privasi agar nuansa cyber tetap ada, tetapi teks tidak kalah terang. */
.home-privacy.cyber-privacy::before{
  opacity:.43!important;
}
.home-privacy.cyber-privacy .cyber-grid{
  opacity:.14!important;
  background-image:
    linear-gradient(rgba(0,255,156,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,156,.09) 1px,transparent 1px)!important;
}
.home-privacy.cyber-privacy .cyber-glow{
  opacity:.055!important;
  filter:blur(100px)!important;
}
.home-privacy.cyber-privacy .cyber-code{
  opacity:.12!important;
  color:rgba(0, 255, 156,.78)!important;
  text-shadow:0 0 7px rgba(0,255,156,.19)!important;
}
.home-privacy.cyber-privacy .cyber-code-one,
.home-privacy.cyber-privacy .cyber-code-two{opacity:.11!important}
.home-privacy.cyber-privacy .cyber-code-three{opacity:.09!important}
.home-privacy.cyber-privacy .cyber-particles i{opacity:.42!important;box-shadow:0 0 5px 1px rgba(0,255,156,.28)!important}
/* Latar gelap transparan yang lembut tepat di belakang salinan, bukan menutupi ilustrasi kunci. */
.home-privacy.cyber-privacy .cyber-privacy-copy{
  position:relative!important;
  isolation:isolate!important;
  padding:clamp(15px,2vw,24px)!important;
  border:1px solid rgba(80,255,174,.10)!important;
  border-radius:18px!important;
  background:linear-gradient(112deg,rgba(1,8,6,.91) 0%,rgba(1,9,7,.86) 68%,rgba(1,9,7,.77) 100%)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.22),inset 0 0 24px rgba(0,0,0,.12)!important;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
.home-privacy.cyber-privacy .cyber-privacy-copy .eyebrow{color:#00ff9c!important;text-shadow:0 1px 8px rgba(0,0,0,.85)!important}
.home-privacy.cyber-privacy .cyber-privacy-copy h2{
  color:#f4fff9!important;
  text-shadow:0 2px 12px rgba(0,0,0,.9)!important;
}
.home-privacy.cyber-privacy .cyber-privacy-copy>p{
  color:#d4e5db!important;
  text-shadow:0 1px 5px rgba(0,0,0,.88)!important;
}
.home-privacy.cyber-privacy .cyber-privacy-points span{
  color:#e0f2e8!important;
  text-shadow:0 1px 4px rgba(0,0,0,.9)!important;
}
.home-privacy.cyber-privacy .cyber-privacy-points b{
  flex:0 0 21px;
  box-shadow:0 0 8px rgba(0,255,156,.07)!important;
}
/* Animasi bingkai dan ikon kunci lebih lambat serta stabil, supaya tidak terasa patah-patah. */
.home-privacy.cyber-privacy .cyber-orbit-one{animation:privacyFrameTurn 58s linear infinite!important}
.home-privacy.cyber-privacy .cyber-orbit-two{animation:privacyFrameTurnReverse 52s linear infinite!important}
.home-privacy.cyber-privacy .cyber-shield{
  animation:privacyLockFloat 7.2s ease-in-out infinite!important;
  will-change:transform;
}
@keyframes privacyLockFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-3px,0)}
}
@media(max-width:760px){
  .home-privacy.cyber-privacy .cyber-privacy-copy{
    padding:15px!important;
    background:linear-gradient(112deg,rgba(1,8,6,.94),rgba(1,9,7,.89))!important;
    border-radius:14px!important;
  }
  .home-privacy.cyber-privacy .cyber-code{opacity:.075!important}
  .home-privacy.cyber-privacy::before{opacity:.34!important}
}
@media(prefers-reduced-motion:reduce){
  .home-privacy.cyber-privacy .cyber-orbit-one,
  .home-privacy.cyber-privacy .cyber-orbit-two,
  .home-privacy.cyber-privacy .cyber-shield{animation:none!important}
}

/* ===== CSS BLOCK 18 ===== */
/* Lingkaran orbit tetap tegak dan bulat. Hanya lapisan titik di atasnya yang berputar. */
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit{
  position:absolute!important;
  top:50%!important;left:50%!important;
  aspect-ratio:1!important;height:auto!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%)!important;
  animation:none!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-one{
  width:min(82%,310px)!important;
  border:1px dashed rgba(0,255,156,.22)!important;
}
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-two{
  width:min(65%,245px)!important;
  border:1px solid rgba(126,255,194,.25)!important;
}
/* Matikan titik lama yang menempel pada bingkai; titik baru ada pada runner beranimasi. */
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit::before,
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit::after{content:none!important;display:none!important;}
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-runner{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  display:block!important;border:0!important;border-radius:50%!important;
  background:transparent!important;pointer-events:none!important;
  transform-origin:50% 50%!important;will-change:transform!important;
}
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-one .cyber-orbit-runner{
  animation:martondiSecurityDotTravel 24s linear infinite!important;
}
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-two .cyber-orbit-runner{
  animation:martondiSecurityDotTravelReverse 19s linear infinite!important;
}
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-runner::before,
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-runner::after{
  content:""!important;display:block!important;position:absolute!important;
  left:50%!important;right:auto!important;bottom:auto!important;
  top:0!important;width:7px!important;height:7px!important;
  border:0!important;border-radius:50%!important;
  background:#00ff9c!important;
  box-shadow:0 0 7px 2px rgba(0,255,156,.65),0 0 14px rgba(0,255,156,.45)!important;
  transform:translate(-50%,-50%)!important;
}
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-runner::after{
  top:100%!important;width:4px!important;height:4px!important;
  background:#00ff9c!important;opacity:.9!important;
}
@keyframes martondiSecurityDotTravel{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes martondiSecurityDotTravelReverse{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@media(max-width:760px){
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-one{width:min(82%,275px)!important}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-two{width:min(63%,205px)!important}
}
/* Motion is applied to the dots' runner only; the circle outlines never rotate or tilt. */

/* ===== CSS BLOCK 19 ===== */
/* Privasi: pencahayaan lebih terarah dan tajam; kurangi kabut/haze tanpa mengubah orbit ikon. */
.home-privacy.cyber-privacy{
  background-image:
    radial-gradient(ellipse at 73% 42%,rgba(0,255,156,.075) 0%,rgba(0,255,156,.025) 30%,transparent 57%),
    linear-gradient(115deg,rgba(1,9,6,.90) 0%,rgba(3,17,11,.84) 48%,rgba(1,8,6,.91) 100%) !important;
}
/* Sirkuit dan grid dibuat lebih tegas, tidak tenggelam oleh cahaya yang terlalu lembut. */
.home-privacy.cyber-privacy::before{opacity:.58!important;}
.home-privacy.cyber-privacy .cyber-grid{
  opacity:.19!important;
  background-image:
    linear-gradient(rgba(0,255,156,.105) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,156,.105) 1px,transparent 1px)!important;
}
/* Cahaya tidak lagi melebar seperti kabut di seluruh bidang. */
.home-privacy.cyber-privacy .cyber-glow{
  filter:blur(48px)!important;
  opacity:.045!important;
}
.home-privacy.cyber-privacy .cyber-code{
  opacity:.17!important;
  text-shadow:0 0 3px rgba(0,255,156,.12)!important;
}
.home-privacy.cyber-privacy .cyber-code-one,
.home-privacy.cyber-privacy .cyber-code-two{opacity:.15!important}
.home-privacy.cyber-privacy .cyber-code-three{opacity:.12!important}
.home-privacy.cyber-privacy .cyber-particles i{
  opacity:.58!important;
  box-shadow:0 0 4px 1px rgba(0,255,156,.22)!important;
}
/* Hilangkan blur kaca di belakang teks; pertahankan panel gelap agar tulisan kontras dan bersih. */
.home-privacy.cyber-privacy .cyber-privacy-copy{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:linear-gradient(112deg,rgba(1,8,6,.92) 0%,rgba(1,9,7,.88) 68%,rgba(1,9,7,.84) 100%)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.22),inset 0 0 18px rgba(0,0,0,.08)!important;
}
.home-privacy.cyber-privacy .cyber-privacy-copy h2{
  text-shadow:0 1px 3px rgba(0,0,0,.82)!important;
}
.home-privacy.cyber-privacy .cyber-privacy-copy>p,
.home-privacy.cyber-privacy .cyber-privacy-points span{
  text-shadow:0 1px 2px rgba(0,0,0,.78)!important;
}
@media(max-width:760px){
  .home-privacy.cyber-privacy::before{opacity:.47!important}
  .home-privacy.cyber-privacy .cyber-glow{filter:blur(38px)!important;opacity:.035!important}
  .home-privacy.cyber-privacy .cyber-grid{opacity:.15!important}
}

/* ===== CSS BLOCK 20 ===== */
/* FINAL: hilangkan kabut blur, tonjolkan pola digital agar biground cyber benar-benar terlihat. */
.home-privacy.cyber-privacy{
  background-color:#020a07!important;
  background-image:
    radial-gradient(ellipse at 73% 42%,rgba(0,255,156,.12) 0%,rgba(0,255,156,.035) 32%,transparent 57%),
    linear-gradient(115deg,#010906 0%,#03170f 48%,#010805 100%)!important;
}
/* Pola grid utama lebih kontras dan tajam; bukan cahaya berkabut. */
.home-privacy.cyber-privacy .cyber-background{
  position:absolute!important;inset:0!important;z-index:1!important;
  display:block!important;pointer-events:none!important;overflow:hidden!important;
}
.home-privacy.cyber-privacy .cyber-grid{
  opacity:.43!important;
  background-image:
    linear-gradient(rgba(0,255,156,.19) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,156,.19) 1px,transparent 1px)!important;
  background-size:48px 48px!important;
  filter:none!important;
}
.home-privacy.cyber-privacy::before{
  opacity:.88!important;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(0,255,156,.032) 6px,transparent 7px),
    linear-gradient(90deg,transparent 0 7%,rgba(0,255,156,.17) 7.08%,transparent 7.18%,transparent 18%,rgba(0,255,156,.12) 18.08%,transparent 18.18%,transparent 84%,rgba(0,255,156,.14) 84.08%,transparent 84.18%),
    linear-gradient(0deg,transparent 0 22%,rgba(0,255,156,.115) 22.08%,transparent 22.18%,transparent 78%,rgba(0,255,156,.10) 78.08%,transparent 78.18%),
    repeating-linear-gradient(135deg,transparent 0 61px,rgba(0,255,156,.06) 62px,transparent 63px),
    radial-gradient(circle,rgba(0, 255, 156,.38) 1px,transparent 1.8px)!important;
  background-size:auto,100% 100%,100% 100%,122px 122px,34px 34px!important;
  background-position:0 0,0 0,0 0,0 0,8px 9px!important;
  animation:none!important;
}
/* Matikan dua glow yang memakai blur besar; biarkan grid, kode, dan titik menjadi fokus. */
.home-privacy.cyber-privacy .cyber-glow{
  display:none!important;filter:none!important;opacity:0!important;
}
.home-privacy.cyber-privacy .cyber-code{
  opacity:.26!important;color:#00ff9c!important;
  text-shadow:0 0 2px rgba(0,255,156,.12)!important;
}
.home-privacy.cyber-privacy .cyber-code-one,
.home-privacy.cyber-privacy .cyber-code-two{opacity:.25!important}
.home-privacy.cyber-privacy .cyber-code-three{opacity:.20!important}
.home-privacy.cyber-privacy .cyber-particles i{
  opacity:.72!important;filter:none!important;
  box-shadow:0 0 3px 1px rgba(0,255,156,.3)!important;
}
.home-privacy.cyber-privacy .cyber-privacy-copy{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  background:linear-gradient(112deg,rgba(1,8,6,.90),rgba(1,9,7,.86))!important;
}

/* Alur pemesanan: latar gelap bersih dengan jalur digital tajam, bukan kabut hijau. */
.home-process{
  background-color:#020a07!important;
  background-image:linear-gradient(115deg,#020906 0%,#03150d 50%,#010805 100%)!important;
}
.home-process::before{
  opacity:.72!important;filter:none!important;
  background-image:
    linear-gradient(rgba(0,255,156,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,156,.11) 1px,transparent 1px),
    radial-gradient(circle at 18px 18px,rgba(0,255,156,.62) 1.4px,transparent 2px),
    radial-gradient(circle at 72px 58px,rgba(0,255,156,.38) 1px,transparent 2px),
    linear-gradient(30deg,transparent 48.8%,rgba(0,255,156,.16) 49.5%,rgba(0,255,156,.16) 50%,transparent 50.7%),
    linear-gradient(150deg,transparent 48.8%,rgba(0,255,156,.13) 49.5%,rgba(0,255,156,.13) 50%,transparent 50.7%)!important;
  background-size:48px 48px,48px 48px,90px 90px,130px 100px,90px 90px,90px 90px!important;
  background-position:0 0,0 0,0 0,0 0,0 0,0 0!important;
  animation:none!important;
}
.home-process::after{color:rgba(0, 255, 156,.14)!important;text-shadow:none!important}
.home-process .section-head,
.home-process .home-process-timeline-viewport,
.home-process .home-process-timeline,
.home-process .home-process-action{position:relative!important;z-index:2!important}
@media(max-width:760px){
  .home-privacy.cyber-privacy .cyber-grid{opacity:.35!important;background-size:34px 34px!important}
  .home-privacy.cyber-privacy::before{opacity:.78!important}
  .home-privacy.cyber-privacy .cyber-code{opacity:.18!important}
  .home-process::before{opacity:.58!important;background-size:34px 34px,34px 34px,72px 72px,110px 90px,72px 72px,72px 72px!important}
}

/* ===== CSS BLOCK 21 ===== */
/* Desktop saja: lebarkan ruang konten agar memanfaatkan layar, tanpa mengubah susunan mobile/tablet. */
@media (min-width: 1200px) {
  .nav, .hero-inner, .section-inner, .home-block .section-inner, .footer-inner {
    width: min(94vw, 1600px) !important;
    max-width: min(94vw, 1600px) !important;
  }
  .home-process-timeline, .home-process-timeline-viewport {
    width: 100% !important;
    max-width: min(94vw, 1600px) !important;
  }
  .home-process-timeline {
    gap: clamp(22px, 2vw, 34px) !important;
  }
  .service-grid {
    width: 100% !important;
  }
  .hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
    gap: clamp(36px, 4vw, 76px) !important;
  }
}

/* ===== CSS BLOCK 22 ===== */
/* Label PRIVACY diturunkan sedikit; gerak ikon tetap aktif tetapi sangat kecil agar tidak keluar dari orbit. */
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{
  top:-4px!important;
}
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-shield{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:min(54%,170px)!important;
  max-height:calc(min(63%,205px) - 8px)!important;
  height:auto!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center center!important;
  animation:martondiShieldContainedFloat 6.8s ease-in-out infinite!important;
  will-change:transform!important;
  z-index:3!important;
}
@keyframes martondiShieldContainedFloat{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(-50%,calc(-50% - 1px))}
}
@media(min-width:761px){
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-shield{
    width:min(60%,210px)!important;
    max-height:237px!important;
  }
}
@media(max-width:760px){
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-shield{
    width:min(54%,170px)!important;
    max-height:191px!important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{top:-3px!important;}
}
/* Jangan matikan animasi ikon di HP; orbit dan titik-titik tetap bergerak sendiri. */
@media(prefers-reduced-motion:reduce){
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-shield{
    animation:martondiShieldContainedFloat 6.8s ease-in-out infinite!important;
  }
}

/* ===== CSS BLOCK 23 ===== */
/* Koreksi kecil berdasarkan pratinjau: turunkan label atas sedikit, angkat caption bawah agar tak dilewati titik orbit. */
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{
  top:0px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:5!important;
}
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-caption{
  bottom:10%!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  white-space:nowrap!important;
  z-index:5!important;
}
/* Ikon tetap terpusat dan bergerak halus; seluruh gerakannya masih di dalam orbit. */
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-shield{
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  animation:martondiShieldRefinedFloat 6.2s ease-in-out infinite!important;
  will-change:transform!important;
}
@keyframes martondiShieldRefinedFloat{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(-50%,calc(-50% - 2.5px))}
}
@media(max-width:760px){
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{top:1px!important}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-caption{bottom:11%!important}
}
@media(max-width:420px){
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-caption{bottom:10%!important}
}
/* Animasi ikon tetap berjalan meski preferensi reduce-motion aktif, sesuai permintaan. */
@media(prefers-reduced-motion:reduce){
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-shield{
    animation:martondiShieldRefinedFloat 6.2s ease-in-out infinite!important;
  }
}

/* ===== CSS BLOCK 24 ===== */
/* Desktop/PC pada jendela sedang: gunakan ruang mendatar, bukan layout mobile.
   Aturan ini hanya berlaku di atas 680px; HP tetap memakai layout responsif lama. */
@media (min-width:681px) and (max-width:1000px){
  .header .nav{
    width:100%!important;max-width:100%!important;
    flex-wrap:nowrap!important;align-items:center!important;
    justify-content:space-between!important;gap:10px!important;
    padding:10px 16px!important;
  }
  .header .brand{flex:0 0 auto!important;min-width:0!important;gap:7px!important;}
  .header .brand-logo{width:34px!important;height:34px!important;flex-basis:34px!important;}
  .header .brand-text{font-size:14px!important;line-height:1.2!important;white-space:nowrap!important;}
  .header .brand-text span{font-size:8px!important;letter-spacing:.09em!important;}
  .header .menu{
    display:flex!important;flex:0 1 auto!important;width:auto!important;max-width:none!important;
    min-width:0!important;overflow:visible!important;flex-wrap:nowrap!important;
    gap:2px!important;margin-left:auto!important;padding:0!important;
  }
  .header .menu a{font-size:11px!important;white-space:nowrap!important;
    flex:0 0 auto!important;padding:8px 7px!important;}

  /* Beranda: dua kolom tetap dipakai pada desktop/window sedang. */
  .hero-inner{
    width:100%!important;max-width:100%!important;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;
    gap:clamp(16px,3vw,28px)!important;
    padding:36px 18px 46px!important;text-align:left!important;
  }
  .hero-copy{text-align:left!important;min-width:0!important;}
  .hero-copy > p{margin-left:0!important;margin-right:0!important;}
  .hero-actions{justify-content:flex-start!important;}
  .logo-stage{order:0!important;min-height:280px!important;min-width:0!important;}
  .logo-stage img{width:min(100%,300px)!important;max-height:38vh!important;object-fit:contain!important;}

  /* Privasi: ilustrasi security dan deskripsi kembali berdampingan seperti desktop. */
  .home-privacy.cyber-privacy .cyber-privacy-inner{
    width:100%!important;max-width:100%!important;
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)!important;
    gap:clamp(16px,3vw,28px)!important;
    align-items:center!important;padding:48px 0 52px!important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-art{
    order:0!important;min-width:0!important;min-height:320px!important;
    width:100%!important;margin:0!important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-copy{
    order:1!important;min-width:0!important;width:100%!important;
    margin:0!important;padding:0!important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-one{width:min(82%,280px)!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-two{width:min(65%,215px)!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-shield{width:min(54%,165px)!important;}

  /* Timeline desktop mengisi lebar yang tersedia tanpa area paksa 900px/scroll horizontal. */
  .home-process .home-process-timeline-viewport{
    width:100%!important;max-width:100%!important;min-width:0!important;
    overflow-x:visible!important;overflow-y:visible!important;
  }
  .home-process .home-process-timeline{
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    gap:clamp(7px,1.2vw,12px)!important;padding:0 2px!important;
  }
  .home-process .home-process-timeline .timeline-step{
    min-width:0!important;min-height:570px!important;
  }
  .home-process .home-process-timeline .timeline-card{
    width:100%!important;min-width:0!important;
    padding:14px 11px 13px!important;
    overflow-wrap:anywhere!important;
  }
  .home-process .home-process-timeline .timeline-card h3{font-size:clamp(13px,1.5vw,16px)!important;line-height:1.35!important;}
  .home-process .home-process-timeline .timeline-card p{font-size:clamp(11px,1.2vw,13px)!important;line-height:1.55!important;}
  .home-process .home-process-timeline .home-timeline-track{left:2%!important;right:2%!important;}
}

/* ===== CSS BLOCK 25 ===== */
/* Perbaikan khusus layout Privasi pada jendela PC sedang: art tidak terkurung di kolom kiri,
   salinan tidak terdorong keluar viewport. Desktop lebar tetap dua kolom; timeline tidak disentuh. */
@media (min-width:681px) and (max-width:900px){
  .home-privacy.cyber-privacy > .cyber-privacy-inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin-inline:auto!important;
    gap:24px!important;
    padding:42px 18px 48px!important;
    box-sizing:border-box!important;
    align-items:center!important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-art{
    grid-column:1!important;order:0!important;
    width:min(100%,520px)!important;max-width:520px!important;min-width:0!important;
    min-height:360px!important;margin:0 auto!important;
    justify-self:center!important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-copy{
    grid-column:1!important;order:1!important;
    display:block!important;visibility:visible!important;opacity:1!important;
    width:100%!important;max-width:760px!important;min-width:0!important;
    margin:0 auto!important;padding:clamp(14px,2.2vw,22px)!important;
    box-sizing:border-box!important;
  }
}
@media (min-width:901px) and (max-width:1000px){
  .home-privacy.cyber-privacy > .cyber-privacy-inner{
    width:100%!important;max-width:100%!important;min-width:0!important;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
    gap:clamp(20px,3vw,32px)!important;
    padding:48px 18px 52px!important;
    margin-inline:auto!important;box-sizing:border-box!important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-art{min-width:0!important;width:100%!important;max-width:520px!important;margin:0 auto!important;}
  .home-privacy.cyber-privacy .cyber-privacy-copy{min-width:0!important;width:100%!important;max-width:650px!important;margin:0!important;}
}
@media (min-width:1001px){
  .home-privacy.cyber-privacy > .cyber-privacy-inner{
    width:min(94vw,1400px)!important;max-width:min(94vw,1400px)!important;
    grid-template-columns:minmax(360px,.92fr) minmax(0,1.08fr)!important;
    gap:clamp(42px,5vw,90px)!important;margin-inline:auto!important;
    box-sizing:border-box!important;
  }
}

/* ===== CSS BLOCK 26 ===== */
/* Hilangkan hanya titik dekoratif di awal label beranda dan label Privacy Protocol.
   Pemisah antar kata pada PRIVACY • PROTOCOL • ACTIVE tetap dipertahankan. */
.hero-copy .eyebrow::before{display:none!important;content:none!important;}
.cyber-art-label .cyber-live-dot{display:none!important;}

/* ===== CSS BLOCK 27 ===== */
/* HP: kembalikan jarak label seperti sebelumnya—label atas tetap di atas orbit, caption bawah tetap di bawah orbit.
   Hanya posisi dua label; tidak mengubah ikon, animasi, orbit, timeline, atau bagian lainnya. */
@media (max-width:760px){
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{
    top:-9px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-caption{
    bottom:0!important;
    left:50%!important;
    transform:translateX(-50%)!important;
  }
}
@media (max-width:420px){
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{top:-9px!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-caption{bottom:0!important;}
}

/* ===== CSS BLOCK 28 ===== */
/* FIX navigasi: pergantian halaman bagian tidak memicu scroll yang saling bertabrakan */
html{scroll-behavior:auto!important;overflow-x:hidden!important}
body{
  background-attachment:scroll!important;
  overscroll-behavior-y:contain;
}
.section{will-change:auto!important;backface-visibility:hidden}
.section.section-enter{animation:martondiSectionEnter .28s ease-out both!important}
@keyframes martondiSectionEnter{
  from{opacity:.72;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}
/* Panel lebih transparan agar latar cyber terlihat, tetapi teks tetap terbaca */
.card,.about-box,.step,.consult-container,.notice,
.service-card,.payment-method,.payment-detail,
.contact-box,.support-box,.form-container{
  background:linear-gradient(145deg,rgba(8,25,18,.76),rgba(3,12,9,.80))!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}
.header{
  background:rgba(2,10,7,.82)!important;
  backdrop-filter:blur(9px)!important;
  -webkit-backdrop-filter:blur(9px)!important;
}
footer{background:rgba(1,7,5,.84)!important;backdrop-filter:blur(7px)!important}
.service-modal-box{
  background:linear-gradient(145deg,rgba(8,26,18,.97),rgba(3,10,7,.98))!important;
}
/* Kurangi efek mahal yang dapat membuat scroll terasa bergetar */
body::before{background-attachment:scroll!important}
.logo-stage img{will-change:auto!important}
.logo-stage::after{animation-duration:60s!important}
.logo-stage::before{animation-duration:8s!important;filter:blur(16px)!important}
.service-card{will-change:auto!important;animation-duration:.22s!important}
.card,.service-card,.about-box,.payment-method{
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease!important;
}
@media(max-width:760px){
  .header{backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important}
  .card,.about-box,.step,.consult-container,.notice,
  .service-card,.payment-method,.payment-detail{
    backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;
  }
  .logo-stage img{animation-duration:5s!important}
}
@media(prefers-reduced-motion:reduce){
  .section.section-enter{animation:none!important}
  .logo-stage img,.logo-stage::before,.logo-stage::after{animation:none!important}
}

/* ===== CSS BLOCK 29 ===== */
/* Optimasi scroll HP: semua konten, menu, dan animasi tetap ada. */
@media (max-width: 760px) {
  html, html:focus-within {
    scroll-behavior: auto !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    background-attachment: scroll !important;
    overflow-x: clip !important;
    overscroll-behavior-x: none;
  }
  /* Pertahankan efek kaca/transparansi, dengan blur lebih ringan untuk GPU HP. */
  .header {
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
  }
  .card, .about-box, .step, .consult-container, .notice,
  .service-card, .payment-method, .payment-detail {
    -webkit-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;
  }
  .timeline-card, .service-modal {
    -webkit-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;
  }
  /* Kurangi beban repaint saat disentuh tanpa menghilangkan efek hover desktop. */
  img, video, canvas, svg {
    max-width: 100%;
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== CSS BLOCK 30 ===== */
:root{--martondi-neon:#00ff9c;--martondi-glow:rgba(0,255,156,.30)}
/* Cyber glow is focused on the service and contact areas; glass stays transparent. */
#layanan .service-card,#kontak .consult-container,#kontak .cyber-contact-panel{
 background:rgba(2,18,12,.48)!important;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
 border:1px solid rgba(0,255,156,.48)!important;box-shadow:0 0 0 1px rgba(0,255,156,.07),0 0 20px rgba(0,255,156,.12),inset 0 0 20px rgba(0,255,156,.045)!important;
}
#layanan .service-card{position:relative;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important}
#layanan .service-card:before,#kontak .cyber-contact-panel:before{content:"";position:absolute;pointer-events:none;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 0%,rgba(0,255,156,.05) 42%,rgba(0,255,156,.20) 50%,rgba(0,255,156,.04) 58%,transparent 100%);background-size:220% 100%;animation:martondiScanGlow 7s linear infinite;opacity:.65}
#layanan .service-card>* ,#kontak .cyber-contact-panel>*{position:relative;z-index:1}
#layanan .service-card:hover,#layanan .service-card:focus-visible{transform:translateY(-3px);border-color:#00ff9c!important;box-shadow:0 0 26px rgba(0,255,156,.25),inset 0 0 18px rgba(0,255,156,.07)!important}
/* No WhatsApp shortcut inside service choices or service detail modal. Keep general contact form intact. */
#layanan .service-more,#layanan .service-wa-button,#layanan .service-wa,.service-modal .service-wa-button,.service-modal .service-wa{display:none!important}
#layanan .service-card{cursor:pointer}
.martondi-social-contact{position:relative;isolation:isolate;overflow:hidden;max-width:900px;margin:26px auto 0;padding:22px;border-radius:18px;text-align:center}
.social-contact-head h3{color:#eafff4;margin:0 0 6px}.social-contact-head p{color:#9dcab5;margin:0 0 17px;font-size:13px}
.social-contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.social-contact-card{display:flex;align-items:center;gap:12px;min-width:0;padding:14px;text-align:left;text-decoration:none!important;border:1px solid rgba(0,255,156,.3);border-radius:12px;background:rgba(0,255,156,.045);transition:transform .2s,border-color .2s,box-shadow .2s}
.social-contact-card:hover{transform:translateY(-2px);border-color:#00ff9c;box-shadow:0 0 18px rgba(0,255,156,.18)}
.social-contact-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border:1px solid rgba(0,255,156,.45);border-radius:10px;color:#48ffb0;font-size:21px;text-shadow:0 0 10px rgba(0,255,156,.6)}
.social-contact-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.social-contact-copy strong{color:#edfff6;font-size:14px}.social-contact-copy small{color:#9dcab5;font-size:11px;overflow-wrap:anywhere}
@keyframes martondiScanGlow{0%{background-position:120% 0}100%{background-position:-120% 0}}
@media(max-width:850px){.header .menu{gap:5px;flex-wrap:wrap;justify-content:flex-end}.header .menu a{padding:8px 10px;font-size:12px}.social-contact-grid{grid-template-columns:1fr}}
@media(max-width:600px){.header .nav{align-items:flex-start;gap:10px}.header .menu{max-width:100%;gap:4px}.header .menu a{font-size:11px;padding:7px 8px}.section-inner{width:min(100% - 28px,100%)!important}#layanan .service-grid{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}#layanan .service-card{padding:17px!important;min-width:0}#layanan .service-card h3{font-size:17px!important;overflow-wrap:anywhere}#layanan .service-card p,#layanan .service-detail{font-size:14px!important;line-height:1.65}.martondi-social-contact{padding:17px 13px;margin:20px 0 0}.social-contact-card{padding:12px}}
@media(prefers-reduced-motion:reduce){#layanan .service-card:before,#kontak .cyber-contact-panel:before{animation:none!important}}

/* ===== CSS BLOCK 31 ===== */
/* Kontak memakai atmosfer cyber yang sama dengan Pilih Layanan, tanpa mengubah bagian lain. */
#kontak{position:relative!important;isolation:isolate!important;overflow:hidden!important;background-color:transparent!important;background-image:none!important}
#kontak::before,#kontak::after{content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;z-index:0!important}
#kontak::before{background-image:linear-gradient(rgba(0,255,156,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,156,.055) 1px,transparent 1px),radial-gradient(circle at 15% 25%,rgba(0,255,156,.16),transparent 28%),radial-gradient(circle at 85% 75%,rgba(0,180,110,.13),transparent 30%)!important;background-size:42px 42px,42px 42px,auto,auto!important;background-position:0 0,0 0,center,center!important;opacity:.62!important;animation:serviceCyberGrid 28s linear infinite!important}
#kontak::after{background:linear-gradient(115deg,transparent 0%,rgba(0,255,156,.025) 45%,rgba(0,255,156,.12) 50%,rgba(0,255,156,.025) 55%,transparent 100%)!important;transform:translateX(-120%);opacity:.45!important;animation:serviceCyberSweep 16s ease-in-out infinite!important}
#kontak>.section-inner,#kontak>.container,#kontak .section-head,#kontak form,#kontak .consult-container,#kontak .contact-box,#kontak .cyber-contact-panel,#kontak .contact-grid{position:relative!important;z-index:1!important}
#kontak .consult-container,#kontak .contact-box,#kontak .cyber-contact-panel,#kontak .form-container,#kontak .card{background:rgba(2,20,17,.48)!important;border:1px solid rgba(0,255,156,.25)!important;box-shadow:0 8px 24px rgba(0,0,0,.16),inset 0 0 16px rgba(0,255,156,.018)!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important}
@media(max-width:600px){#kontak::before{background-size:32px 32px,32px 32px,auto,auto!important;opacity:.52!important}#kontak::after{opacity:.28!important}}
@media(prefers-reduced-motion:reduce){#kontak::before,#kontak::after{animation:none!important}}

/* ===== CSS BLOCK 32 ===== */
/* Hilangkan pencahayaan/glow dan sapuan cahaya; pertahankan grid cyber yang tajam serta efek klik kartu. */
#layanan::before,#kontak::before{
  background-image:linear-gradient(rgba(0,255,156,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,156,.045) 1px,transparent 1px)!important;
  background-size:42px 42px,42px 42px!important;
  background-position:0 0,0 0!important;
  opacity:.8!important;
  animation:none!important;
}
#layanan::after,#kontak::after{
  display:none!important;
  animation:none!important;
  background:none!important;
  opacity:0!important;
}
@media(max-width:600px){
  #layanan::before,#kontak::before{background-size:32px 32px,32px 32px!important;opacity:.72!important}
}

/* ===== CSS BLOCK 33 ===== */
/* Hilangkan pencahayaan dekoratif hanya pada kolom “Terhubung dengan MARTONDI”. */
#kontak .martondi-social-contact::before{content:none!important;display:none!important;animation:none!important;background:none!important;box-shadow:none!important;filter:none!important}
#kontak .martondi-social-contact{box-shadow:none!important;filter:none!important;text-shadow:none!important}
#kontak .martondi-social-contact .social-contact-head h3,
#kontak .martondi-social-contact .social-contact-head p,
#kontak .martondi-social-contact .social-contact-card,
#kontak .martondi-social-contact .social-contact-icon,
#kontak .martondi-social-contact .social-contact-copy{ text-shadow:none!important;filter:none!important;box-shadow:none!important;animation:none!important}
#kontak .martondi-social-contact .social-contact-card{background:rgba(2,20,17,.48)!important;border-color:rgba(0,255,156,.22)!important}

/* ===== CSS BLOCK 34 ===== */
/* Nonaktifkan pemilihan/penyalinan teks pada halaman, tanpa mengganggu input/form. */
body, body * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
/* Beri ruang antar tulisan di kolom Privasi & Keamanan khusus layar kecil. */
@media (max-width: 600px) {
  .cyber-privacy-copy h2 {
    line-height: 1.4 !important;
    margin-bottom: 18px !important;
  }
  .cyber-privacy-copy > p {
    line-height: 1.85 !important;
    margin-bottom: 22px !important;
  }
  .cyber-privacy-points {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .cyber-privacy-points > span {
    display: block !important;
    line-height: 1.8 !important;
    padding-bottom: 4px !important;
  }
}

/* ===== CSS BLOCK 35 ===== */
/* Rapikan logo dan nomor pada bagian Pilihan Layanan */
.service-card .service-top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}
.service-card .service-top .card-icon{margin:0!important;flex:0 0 45px!important;}
.service-card .service-top .service-no{margin:0!important;flex:0 0 auto!important;}

/* ===== CSS BLOCK 36 ===== */
/* Rapikan teks kolom Privasi & Keamanan khusus layar HP */
@media (max-width: 600px) {
  .cyber-privacy-inner { gap: 30px !important; }
  .cyber-privacy-copy { width: 100% !important; min-width: 0 !important; padding: 0 5px !important; box-sizing: border-box !important; }
  .cyber-privacy-copy h2 { margin: 0 0 20px !important; line-height: 1.28 !important; overflow-wrap: break-word !important; }
  .cyber-privacy-copy > p { margin: 0 0 22px !important; line-height: 1.85 !important; overflow-wrap: break-word !important; }
  .cyber-privacy-points { display: flex !important; flex-direction: column !important; gap: 16px !important; margin: 0 0 22px !important; padding: 0 !important; }
  .cyber-privacy-points > span { display: grid !important; grid-template-columns: 22px minmax(0, 1fr) !important; align-items: start !important; column-gap: 11px !important; line-height: 1.7 !important; font-size: 13px !important; min-width: 0 !important; overflow-wrap: anywhere !important; }
  .cyber-privacy-points > span > b { width: 21px !important; height: 21px !important; margin-top: 1px !important; flex-shrink: 0 !important; }
}

/* ===== CSS BLOCK 37 ===== */
@media (max-width: 600px) {
  .home-privacy.cyber-privacy .cyber-privacy-copy .cyber-privacy-points {
    display:flex !important; flex-direction:column !important; gap:12px !important;
    width:100% !important; margin:18px 0 0 !important; padding:0 !important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-copy .cyber-privacy-points > span {
    display:grid !important; grid-template-columns:22px minmax(0,1fr) !important;
    align-items:start !important; column-gap:10px !important;
    width:100% !important; box-sizing:border-box !important;
    margin:0 !important; padding:10px 0 !important;
    text-align:left !important; line-height:1.65 !important;
    white-space:normal !important; overflow-wrap:anywhere !important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-copy .cyber-privacy-points > span > b {
    display:flex !important; align-items:center !important; justify-content:center !important;
    width:22px !important; height:22px !important; box-sizing:border-box !important;
    margin:2px 0 0 !important; padding:0 !important;
    line-height:1 !important; text-align:center !important; flex:none !important;
  }
}

/* ===== CSS BLOCK 38 ===== */
@media (max-width: 760px) {
  .cyber-privacy-inner { padding-left: 18px !important; padding-right: 18px !important; }
  .cyber-privacy-copy { box-sizing: border-box !important; width: 100% !important; max-width: none !important; padding: 24px 20px 26px !important; border: 1px solid rgba(0,255,156,.18) !important; border-radius: 18px !important; background: rgba(0,10,7,.42) !important; }
  .cyber-privacy-copy h2 { margin: 0 0 16px !important; line-height: 1.22 !important; }
  .cyber-privacy-copy > p { margin: 0 !important; line-height: 1.85 !important; }
  .cyber-privacy-points { display: grid !important; gap: 20px !important; margin: 24px 0 8px !important; padding: 0 !important; }
  .cyber-privacy-points span { display: grid !important; grid-template-columns: 22px minmax(0,1fr) !important; align-items: start !important; column-gap: 11px !important; line-height: 1.65 !important; min-width: 0 !important; }
  .cyber-privacy-points b { width: 22px !important; height: 22px !important; box-sizing: border-box !important; margin-top: 1px !important; }
}
@media (max-width: 420px) { .cyber-privacy-inner { padding-left: 14px !important; padding-right: 14px !important; } .cyber-privacy-copy { padding: 22px 17px 24px !important; } }

/* ===== CSS BLOCK 39 ===== */
/* Mobile: inner spacing and aligned check-list, without visible CSS text */
@media (max-width: 768px) {
  .home-privacy.cyber-privacy .cyber-privacy-copy {
    width: calc(100% - 28px) !important; max-width: calc(100% - 28px) !important;
    margin: 0 auto !important; padding: 24px 20px 26px !important; box-sizing: border-box !important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-inner { padding: 18px 14px !important; box-sizing: border-box !important; }
  .home-privacy.cyber-privacy .cyber-privacy-copy h2 { margin: 0 0 16px !important; line-height: 1.3 !important; }
  .home-privacy.cyber-privacy .cyber-privacy-copy > p { margin: 0 0 22px !important; line-height: 1.8 !important; }
  .home-privacy.cyber-privacy .cyber-privacy-points { display: flex !important; flex-direction: column !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; box-sizing: border-box !important; }
  .home-privacy.cyber-privacy .cyber-privacy-points > * { display: grid !important; grid-template-columns: 22px minmax(0,1fr) !important; column-gap: 12px !important; align-items: start !important; width: 100% !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; line-height: 1.7 !important; }
  .home-privacy.cyber-privacy .cyber-privacy-points > * > b,
  .home-privacy.cyber-privacy .cyber-privacy-points > * > .check,
  .home-privacy.cyber-privacy .cyber-privacy-points > * > i { grid-column: 1 !important; margin-top: 2px !important; }
}
@media (max-width: 420px) {
  .home-privacy.cyber-privacy .cyber-privacy-copy { padding: 22px 18px 24px !important; }
}

/* ===== CSS BLOCK 40 ===== */
/* Mobile-only spacing for the privacy text card; all CSS stays inside head. */
@media (max-width: 760px) {
  .cyber-privacy-inner { padding-left: 18px !important; padding-right: 18px !important; }
  .cyber-privacy-copy {
    width: 100% !important; max-width: none !important; min-width: 0 !important;
    box-sizing: border-box !important; padding: 24px 18px 26px !important;
    margin: 0 !important; border: 1px solid rgba(0,255,156,.18) !important;
    border-radius: 18px !important;
  }
  .cyber-privacy-copy h2 { margin: 0 0 16px !important; line-height: 1.25 !important; }
  .cyber-privacy-copy > p { margin: 0 !important; line-height: 1.85 !important; }
  .cyber-privacy-points { display: grid !important; gap: 20px !important; margin: 24px 0 8px !important; padding: 0 !important; }
  .cyber-privacy-points span { display: grid !important; grid-template-columns: 22px minmax(0,1fr) !important; align-items: start !important; column-gap: 11px !important; line-height: 1.7 !important; min-width: 0 !important; }
  .cyber-privacy-points b { width: 22px !important; height: 22px !important; box-sizing: border-box !important; margin-top: 1px !important; }
}
@media (max-width: 420px) {
  .cyber-privacy-inner { padding-left: 14px !important; padding-right: 14px !important; }
  .cyber-privacy-copy { padding: 22px 16px 24px !important; }
}

/* ===== CSS BLOCK 41 ===== */
/* Khusus paragraf pembuka: beri ruang dari tepi panel pada layar HP */
@media (max-width: 760px) {
  .home-privacy.cyber-privacy .cyber-privacy-copy {
    padding: 22px 22px 24px !important;
    box-sizing: border-box !important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-copy > p {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 2px !important;
    line-height: 1.9 !important;
    overflow-wrap: anywhere !important;
  }
}
@media (max-width: 420px) {
  .home-privacy.cyber-privacy .cyber-privacy-copy {
    padding: 20px 19px 22px !important;
  }
}

/* ===== CSS BLOCK 42 ===== */
@media (max-width: 760px) {
  .home-privacy.cyber-privacy .cyber-privacy-copy > p {
    text-align: justify !important;
    text-justify: inter-word !important;
  }
}

/* ===== CSS BLOCK 43 ===== */
@media (max-width: 760px) {
  .home-privacy.cyber-privacy .cyber-privacy-copy > p {
    text-align: justify !important;
    text-align-last: left !important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-points {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-points > span {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-points > span > b {
    display: grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    box-sizing: border-box !important;
    margin: 1px 0 0 !important;
    line-height: 1 !important;
  }
}

/* ===== CSS BLOCK 44 ===== */
/* Final override: justify deskripsi and lock every checkmark/text into the same two columns. */
@media (max-width: 760px) {
  html body .home-privacy.cyber-privacy .cyber-privacy-copy > p {
    text-align: justify !important;
    text-align-last: left !important;
    text-justify: inter-word !important;
    width: 100% !important; max-width: none !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  html body .home-privacy.cyber-privacy .cyber-privacy-copy > .cyber-privacy-points {
    display: flex !important; flex-direction: column !important;
    align-items: stretch !important; gap: 14px !important;
    width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
    padding: 0 !important;
  }
  html body .home-privacy.cyber-privacy .cyber-privacy-copy > .cyber-privacy-points > span {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: start !important; column-gap: 10px !important;
    width: 100% !important; box-sizing: border-box !important;
    margin: 0 !important; padding: 0 !important;
    text-align: left !important; line-height: 1.75 !important;
    min-width: 0 !important; overflow-wrap: anywhere !important;
  }
  html body .home-privacy.cyber-privacy .cyber-privacy-copy > .cyber-privacy-points > span > b {
    display: grid !important; place-items: center !important;
    width: 22px !important; height: 22px !important;
    box-sizing: border-box !important; margin: 1px 0 0 !important;
    padding: 0 !important; line-height: 1 !important;
  }
}
@media (max-width: 420px) {
  html body .home-privacy.cyber-privacy .cyber-privacy-copy > .cyber-privacy-points > span {
    grid-template-columns: 22px minmax(0, 1fr) !important; column-gap: 9px !important;
  }
}

/* ===== CSS BLOCK 45 ===== */
/* Pilih Layanan: hilangkan ikon dan letakkan nomor di posisi ikon semula */
#layanan .service-card .service-top{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:0!important;
  min-height:38px!important;
  margin-bottom:10px!important;
}
#layanan .service-card .card-icon{
  display:none!important;
}
#layanan .service-card .service-no{
  display:inline-flex!important;
  order:-1!important;
  align-items:center!important;
  justify-content:center!important;
  position:static!important;
  margin:0!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  box-sizing:border-box!important;
  border-radius:12px!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1!important;
}

/* ===== CSS BLOCK 46 ===== */
/* Responsif dan lebih ringan saat dirender; konten dan fitur tetap dipertahankan. */
*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; scroll-behavior: smooth; }
body { max-width: 100%; margin-inline: auto; overflow-x: clip; }
img, video, canvas, svg { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
@media (max-width: 760px) {
  html { scroll-behavior: auto; }
  body { width: 100%; }
  section, main, header, footer, .container, .wrapper, .content, .section-inner {
    min-width: 0;
    max-width: 100%;
  }
  .row, [class*="grid"], [class*="flex"] { min-width: 0; }
  p, h1, h2, h3, h4, a, button, span { overflow-wrap: anywhere; }
  img { height: auto; }
}
/* Efek visual tetap ada; hanya menghindari animasi mahal pada pengguna yang meminta gerakan minimal. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===== CSS BLOCK 47 ===== */
@media (max-width: 760px) {
  /* Hilangkan kotak tombol menu (ikon ☰ / ×), tetapi ikon dan fungsinya tetap ada. */
  .header .menu-toggle {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
  }
  .header .menu-toggle:active,
  .header .menu-toggle[aria-expanded="true"] {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
  /* Hilangkan kotak tombol X pada detail layanan, ikon X tetap bisa ditap. */
  .service-modal-close {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ===== CSS BLOCK 48 ===== */
/* Back link premium: tanpa kotak, bingkai, atau bayangan; fungsi tetap tombol */
#kontak .back-link {
  display:inline-flex !important; align-items:center !important; gap:10px !important;
  padding:10px 0 !important; margin:0 0 12px !important;
  background:transparent !important; border:0 !important; outline:0 !important;
  border-radius:0 !important; box-shadow:none !important;
  color:#baffdd !important; font:inherit !important; font-weight:600 !important;
  cursor:pointer !important; text-decoration:none !important;
  transition:color .18s ease !important;
}
#kontak .back-link span { color:#00ff9c !important; font-size:1.15em !important; line-height:1 !important; }
#kontak .back-link:hover, #kontak .back-link:focus-visible, #kontak .back-link:active {
  background:transparent !important; border:0 !important; box-shadow:none !important;
  outline:0 !important; color:#00ff9c !important;
}
#kontak .back-link:hover span, #kontak .back-link:focus-visible span, #kontak .back-link:active span { color:#00ff9c !important; }

/* ===== CSS BLOCK 49 ===== */
/* Pilihan Layanan: hilangkan kotak kartu, gunakan nomor tipografi cyber yang sederhana. */
html body #layanan .service-card{
  background:transparent!important; background-image:none!important;
  border:0!important; border-color:transparent!important; border-radius:0!important;
  box-shadow:none!important; outline:0!important;
  backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
}
html body #layanan .service-card:hover,
html body #layanan .service-card:focus-within{
  background:transparent!important; border:0!important; box-shadow:none!important;
}
html body #layanan .service-card::before{border:0!important;box-shadow:none!important;background:none!important}
html body #layanan .service-card .service-no{
  display:inline-flex!important; width:auto!important; height:auto!important; min-width:0!important;
  padding:0!important; margin:0!important; border:0!important; border-radius:0!important;
  background:transparent!important; box-shadow:none!important; outline:0!important;
  color:#00f5a0!important; font:700 13px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace!important;
  letter-spacing:.08em!important; text-shadow:none!important;
}
html body #layanan .service-card .service-no::after{content:" /";color:rgba(0,245,160,.55);font-weight:400}
html body #layanan .service-card .service-top{gap:0!important}
html body #layanan .service-card:hover .service-no{color:#8cffc7!important;text-shadow:none!important}

/* ===== CSS BLOCK 50 ===== */
/* Cara Memesan: hilangkan kotak saja, semua tulisan tetap ada */
#beranda .home-process .timeline-card,
#beranda .home-process .home-step-number,
#beranda .home-process .timeline-kicker,
#beranda .home-process .timeline-tags span {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#beranda .home-process .timeline-card { border-radius: 0 !important; }
#beranda .home-process .home-step-number { padding: 0 !important; border-radius: 0 !important; }
#beranda .home-process .timeline-kicker { padding: 0 !important; border-radius: 0 !important; }
#beranda .home-process .timeline-tags span { padding: 0 !important; border-radius: 0 !important; }

/* ===== CSS BLOCK 51 ===== */
/* Pulihkan efek hover/bayangan dan transisi kartu layanan */
.service-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 42px rgba(0,0,0,.22) !important;
  transition: transform .32s cubic-bezier(.2,.7,.2,1),
              border-color .32s ease, box-shadow .32s ease,
              background-color .32s ease, filter .32s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 22px 45px rgba(0,0,0,.38), 0 0 18px rgba(0, 255, 156,.10) !important;
    border-color: rgba(0, 255, 156,.38) !important;
  }
}
.service-card:active,
.service-card.martondi-clicked {
  transform: scale(.985) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.34), 0 0 0 2px rgba(0, 255, 156,.20) !important;
}
.service-card .ripple {
  position:absolute; border-radius:50%; pointer-events:none; z-index:5;
  width:18px; height:18px; background:rgba(0, 255, 156,.32);
  transform:scale(0); animation:rippleEffect .6s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .service-card { transition: box-shadow .2s ease, border-color .2s ease !important; }
}

/* FIX LOGO GERAK + AURA TERLIHAT: animasi tetap aktif walau sistem mengurangi motion */
.logo-stage { position:relative !important; isolation:isolate !important; }
.logo-stage img {
  position:relative !important;
  z-index:2 !important;
  transform-origin:center center !important;
  animation: martondiLogoMoveGlow 3.2s ease-in-out infinite !important;
  will-change: transform, filter !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.logo-stage::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:1 !important;
  left:50% !important;
  top:50% !important;
  width:min(82%, 340px) !important;
  aspect-ratio:1 !important;
  height:auto !important;
  transform:translate(-50%,-50%) scale(.88) !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center, rgba(0, 255, 156,.42) 0%, rgba(0, 255, 156,.22) 36%, rgba(0, 255, 156,.08) 58%, transparent 74%) !important;
  filter:blur(20px) !important;
  opacity:.72 !important;
  pointer-events:none !important;
  animation:martondiLogoAuraMove 3.2s ease-in-out infinite !important;
}
.brand-logo {
  animation:martondiHeaderLogoMove 3.2s ease-in-out infinite !important;
  will-change:transform,filter !important;
  filter:drop-shadow(0 0 4px rgba(0, 255, 156,.55)) drop-shadow(0 0 10px rgba(0, 255, 156,.28)) !important;
}
@keyframes martondiLogoMoveGlow {
  0%,100% { transform:translateY(0) scale(1); filter:drop-shadow(0 0 3px rgba(0, 255, 156,.45)) drop-shadow(0 0 9px rgba(0, 255, 156,.25)); }
  50% { transform:translateY(-12px) scale(1.035); filter:drop-shadow(0 0 7px rgba(0,240,255,.95)) drop-shadow(0 0 19px rgba(0,170,255,.65)) drop-shadow(0 0 30px rgba(0,120,255,.28)); }
}
@keyframes martondiLogoAuraMove {
  0%,100% { opacity:.48; }
  50% { opacity:.95; }
}
@keyframes martondiHeaderLogoMove {
  0%,100% { transform:translateY(0) scale(1); filter:drop-shadow(0 0 3px rgba(0, 255, 156,.4)) drop-shadow(0 0 7px rgba(0, 255, 156,.2)); }
  50% { transform:translateY(-3px) scale(1.06); filter:drop-shadow(0 0 6px rgba(0,240,255,.9)) drop-shadow(0 0 13px rgba(0, 255, 156,.5)); }
}

/* ===== CSS BLOCK 52 ===== */
/* Interaksi lebih lembut: hindari gerakan mendadak seperti melesat */
.service-card {
  animation-duration: .65s !important;
  animation-timing-function: ease-out !important;
  transition: transform .38s ease, border-color .38s ease, box-shadow .38s ease, background-color .38s ease !important;
}
@keyframes martondiServiceRevealRestored {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,.28), 0 0 12px rgba(0,255,156,.06) !important;
  }
}
.service-card:active,
.service-card.martondi-clicked {
  transform: scale(.995) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.25) !important;
}
.service-card .ripple {
  width: 14px !important;
  height: 14px !important;
  background: rgba(0, 255, 156,.16) !important;
  animation: martondiGentleRipple .55s ease-out forwards !important;
}
@keyframes martondiGentleRipple {
  from { transform: scale(0); opacity: .65; }
  to { transform: scale(13); opacity: 0; }
}
/* Detail layanan muncul perlahan dan tidak menyentak */
.service-modal {
  opacity: 0;
  transition: opacity .22s ease !important;
}
.service-modal.visible {
  opacity: 1;
  animation: martondiModalFade .24s ease-out both !important;
}
.service-modal.visible .service-modal-box {
  animation: martondiModalSoftIn .28s ease-out both !important;
  transform-origin: center center;
}
@keyframes martondiModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes martondiModalSoftIn {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Tata letak: desktop lebar, tablet dua kolom, HP satu kolom */
@media (min-width: 1200px) {
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; }
}
@media (min-width: 601px) and (max-width: 1199px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
  .section-inner { width: min(100%, 1000px) !important; }
}
@media (max-width: 600px) {
  .service-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .service-card { min-width: 0 !important; padding: 18px !important; }
  .service-card h3 { overflow-wrap: anywhere; }
  .service-modal-box { width: 100% !important; max-width: 520px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card, .service-modal, .service-modal-box { animation: none !important; transition: none !important; }
}

/* Logo: cahaya lembut berdenyut mengikuti warna identitas, tanpa kotak atau garis */
.logo-stage{isolation:isolate;}
.logo-stage::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  width:min(72%,300px);
  aspect-ratio:1;
  height:auto;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0, 255, 156,.20) 0%, rgba(0, 255, 156,.09) 38%, rgba(0, 255, 156,0) 72%);
  filter:blur(22px);
  opacity:.62;
  z-index:0;
  pointer-events:none;
  animation:martondiLogoGlow 5.5s ease-in-out infinite;
}
.logo-stage img{
  position:relative;
  z-index:1;
  animation:martondiLogoBreath 5.5s ease-in-out infinite !important;
  filter:drop-shadow(0 0 5px rgba(0, 255, 156,.14)) !important;
}
.brand-logo{
  animation:martondiMiniGlow 5.5s ease-in-out infinite;
  filter:drop-shadow(0 0 4px rgba(0, 255, 156,.16)) !important;
}
@keyframes martondiLogoGlow{
  0%,100%{opacity:.42;transform:scale(.94)}
  50%{opacity:.78;transform:scale(1.04)}
}
@keyframes martondiLogoBreath{
  0%,100%{filter:drop-shadow(0 0 4px rgba(0, 255, 156,.10))}
  50%{filter:drop-shadow(0 0 10px rgba(0, 255, 156,.25))}
}
@keyframes martondiMiniGlow{
  0%,100%{filter:drop-shadow(0 0 2px rgba(0, 255, 156,.10))}
  50%{filter:drop-shadow(0 0 6px rgba(0, 255, 156,.28))}
}
@media(prefers-reduced-motion:reduce){
  .logo-stage::before,.logo-stage img,.brand-logo{animation:none !important}
}

/* PATCH FINAL: tombol kembali normal + cahaya mengikuti siluet PNG transparan */
/* Animasi navigasi tidak mengganggu klik dan riwayat browser */
.brand-logo,
.logo-stage img {
  will-change: filter;
}
/* Drop-shadow mengikuti bentuk/piksel logo PNG, bukan membuat bingkai kotak */
.logo-stage img {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: martondiPngAura 4.8s ease-in-out infinite !important;
  filter: drop-shadow(0 0 2px rgba(0, 255, 156,.22))
          drop-shadow(0 0 7px rgba(0, 255, 156,.12)) !important;
}
.brand-logo {
  animation: martondiPngAuraSmall 4.8s ease-in-out infinite !important;
  filter: drop-shadow(0 0 2px rgba(0, 255, 156,.25))
          drop-shadow(0 0 5px rgba(0, 255, 156,.13)) !important;
}
.logo-stage::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: min(78%, 320px) !important;
  aspect-ratio: 1 !important;
  height: auto !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(0, 255, 156,.14) 0%, rgba(0, 255, 156,.055) 42%, transparent 72%) !important;
  filter: blur(24px) !important;
  animation: martondiAuraBackdrop 5.5s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes martondiPngAura {
  0%,100% { filter: drop-shadow(0 0 2px rgba(0, 255, 156,.16)) drop-shadow(0 0 6px rgba(0, 255, 156,.09)); }
  50% { filter: drop-shadow(0 0 4px rgba(0, 255, 156,.40)) drop-shadow(0 0 12px rgba(0, 255, 156,.22)); }
}
@keyframes martondiPngAuraSmall {
  0%,100% { filter: drop-shadow(0 0 1px rgba(0, 255, 156,.18)) drop-shadow(0 0 3px rgba(0, 255, 156,.10)); }
  50% { filter: drop-shadow(0 0 3px rgba(0, 255, 156,.42)) drop-shadow(0 0 7px rgba(0, 255, 156,.22)); }
}
@keyframes martondiAuraBackdrop {
  0%,100% { opacity: .38; transform: scale(.96); }
  50% { opacity: .7; transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-stage::before, .logo-stage img, .brand-logo { animation: none !important; }
}


/* FIX LOGO GERAK + AURA TERLIHAT: animasi tetap aktif walau sistem mengurangi motion */
.logo-stage { position:relative !important; isolation:isolate !important; }
.logo-stage img {
  position:relative !important;
  z-index:2 !important;
  transform-origin:center center !important;
  animation: martondiLogoMoveGlow 3.2s ease-in-out infinite !important;
  will-change: transform, filter !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.logo-stage::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:1 !important;
  left:50% !important;
  top:50% !important;
  width:min(82%, 340px) !important;
  aspect-ratio:1 !important;
  height:auto !important;
  transform:translate(-50%,-50%) scale(.88) !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center, rgba(0, 255, 156,.42) 0%, rgba(0, 255, 156,.22) 36%, rgba(0, 255, 156,.08) 58%, transparent 74%) !important;
  filter:blur(20px) !important;
  opacity:.72 !important;
  pointer-events:none !important;
  animation:martondiLogoAuraMove 3.2s ease-in-out infinite !important;
}
.brand-logo {
  animation:martondiHeaderLogoMove 3.2s ease-in-out infinite !important;
  will-change:transform,filter !important;
  filter:drop-shadow(0 0 4px rgba(0, 255, 156,.55)) drop-shadow(0 0 10px rgba(0, 255, 156,.28)) !important;
}
@keyframes martondiLogoMoveGlow {
  0%,100% { transform:translateY(0) scale(1); filter:drop-shadow(0 0 3px rgba(0, 255, 156,.45)) drop-shadow(0 0 9px rgba(0, 255, 156,.25)); }
  50% { transform:translateY(-12px) scale(1.035); filter:drop-shadow(0 0 7px rgba(0,240,255,.95)) drop-shadow(0 0 19px rgba(0,170,255,.65)) drop-shadow(0 0 30px rgba(0,120,255,.28)); }
}
@keyframes martondiLogoAuraMove {
  0%,100% { opacity:.48; }
  50% { opacity:.95; }
}
@keyframes martondiHeaderLogoMove {
  0%,100% { transform:translateY(0) scale(1); filter:drop-shadow(0 0 3px rgba(0, 255, 156,.4)) drop-shadow(0 0 7px rgba(0, 255, 156,.2)); }
  50% { transform:translateY(-3px) scale(1.06); filter:drop-shadow(0 0 6px rgba(0,240,255,.9)) drop-shadow(0 0 13px rgba(0, 255, 156,.5)); }
}



/* MARTONDI CYBER 2.0 — pola background berbeda untuk tiap tampilan */
.section, .home-block { position:relative; isolation:isolate; }
.section::before, .home-block::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.72; background-repeat:repeat; animation:martondiAmbient 18s ease-in-out infinite alternate;
}
.section > *, .home-block > * { position:relative; z-index:1; }
/* Beranda: matrix rain + grid neon */
#beranda::before {
  opacity:.56;
  background-image:
    radial-gradient(ellipse at 15% 18%,rgba(0,255,156,.16),transparent 34%),
    radial-gradient(ellipse at 85% 70%,rgba(0,180,105,.12),transparent 32%),
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(0,255,156,.075) 28px,transparent 29px),
    repeating-linear-gradient(90deg,transparent 0 43px,rgba(0,255,156,.07) 44px,transparent 45px),
    repeating-linear-gradient(180deg,transparent 0 38px,rgba(0,255,156,.12) 39px,transparent 41px);
  background-size:auto,auto,auto,auto,100% 240px;
  animation:martondiMatrix 24s linear infinite;
}
/* Alur kerja: jaringan titik-titik */
.home-process::before {
  opacity:.43;
  background-image:
    radial-gradient(circle at 18px 18px,rgba(0,255,156,.38) 1.4px,transparent 2px),
    radial-gradient(circle at 72px 58px,rgba(0,255,156,.2) 1px,transparent 2px),
    linear-gradient(30deg,transparent 48.8%,rgba(0,255,156,.11) 49.5%,rgba(0,255,156,.11) 50%,transparent 50.7%),
    linear-gradient(150deg,transparent 48.8%,rgba(0,255,156,.08) 49.5%,rgba(0,255,156,.08) 50%,transparent 50.7%);
  background-size:90px 90px,130px 100px,90px 90px,90px 90px;
}
/* FAQ: halus, seperti panel data holografik */
.home-faq::before {
  opacity:.52;
  background-image:
    radial-gradient(ellipse at 80% 20%,rgba(0,255,156,.15),transparent 38%),
    repeating-linear-gradient(135deg,transparent 0 24px,rgba(0,255,156,.055) 25px,transparent 26px),
    radial-gradient(circle at 20% 75%,rgba(0, 255, 156,.12),transparent 30%);
  background-size:auto,70px 70px,auto;
}
/* Privasi: sirkuit/perisai, tetap khas keamanan */
.cyber-privacy::before {
  opacity:.62;
  background-image:
    radial-gradient(ellipse at 70% 30%,rgba(0,255,156,.18),transparent 36%),
    repeating-linear-gradient(90deg,transparent 0 54px,rgba(0,255,156,.07) 55px,transparent 57px),
    repeating-linear-gradient(0deg,transparent 0 54px,rgba(0,255,156,.055) 55px,transparent 57px),
    radial-gradient(circle at 75% 35%,transparent 0 65px,rgba(0,255,156,.11) 66px,transparent 68px);
}
/* Dukungan Layanan/pembayaran: aliran cahaya di belakang QRIS */
#pembayaran::before {
  opacity:.6;
  background-image:
    radial-gradient(ellipse at 50% 12%,rgba(0,255,156,.16),transparent 40%),
    repeating-linear-gradient(120deg,transparent 0 38px,rgba(0,255,156,.055) 39px,transparent 41px),
    radial-gradient(circle at 12% 82%,rgba(0,255,156,.11),transparent 25%);
}
/* Layanan: jaringan sirkuit yang lebih aktif */
#layanan::before {
  opacity:.5;
  background-image:
    radial-gradient(circle,rgba(0,255,156,.25) 1px,transparent 2px),
    linear-gradient(90deg,transparent 49%,rgba(0,255,156,.085) 50%,transparent 51%),
    linear-gradient(0deg,transparent 49%,rgba(0,255,156,.065) 50%,transparent 51%),
    radial-gradient(ellipse at 90% 8%,rgba(0,255,156,.13),transparent 34%);
  background-size:36px 36px,72px 72px,72px 72px,auto;
  animation:martondiCircuit 28s linear infinite;
}
/* Tentang Kami: cahaya elegan; konten rata tengah */
#tentang::before {
  opacity:.65;
  background-image:
    radial-gradient(ellipse at 50% 8%,rgba(0,255,156,.2),transparent 42%),
    radial-gradient(ellipse at 8% 78%,rgba(0, 255, 156,.12),transparent 35%),
    radial-gradient(ellipse at 92% 78%,rgba(0,255,156,.1),transparent 34%);
}
#tentang .section-head, #tentang .about-grid, #tentang .about-box { text-align:center!important; }
#tentang .about-grid { display:flex!important; justify-content:center!important; }
#tentang .about-box { width:min(900px,100%)!important; margin-inline:auto!important; }
#tentang .about-box p { text-align:center!important; }
/* Kontak: terminal dan scan line */
#kontak::before {
  opacity:.55;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(0,255,156,.035) 6px,transparent 7px),
    linear-gradient(90deg,transparent 0%,rgba(0,255,156,.08) 50%,transparent 100%),
    radial-gradient(ellipse at 50% 0%,rgba(0,255,156,.15),transparent 42%);
  background-size:auto,100% 100%,auto;
  animation:martondiScan 16s ease-in-out infinite alternate;
}
@keyframes martondiAmbient { from{background-position:0 0,0 0} to{background-position:20px -18px,-16px 14px} }
@keyframes martondiMatrix { from{background-position:0 0,0 0,0 0,0 0,0 0} to{background-position:0 0,0 0,0 110px,0 0,0 240px} }
@keyframes martondiCircuit { from{background-position:0 0,0 0,0 0,0 0} to{background-position:36px 36px,72px 0,0 72px,0 0} }
@keyframes martondiScan { from{background-position:0 0,0 0,0 0} to{background-position:0 14px,0 0,0 0} }
@media(max-width:600px){
  #beranda::before{opacity:.42;background-size:auto,auto,auto,auto,100% 200px}
  #layanan::before{opacity:.34;background-size:28px 28px,56px 56px,56px 56px,auto}
  .home-process::before,.home-faq::before,.cyber-privacy::before,#pembayaran::before,#tentang::before,#kontak::before{opacity:.36}
  #tentang .about-box{padding:22px!important}
}
@media(prefers-reduced-motion:reduce){
  .section::before,.home-block::before{animation:none!important}
}

/* ===== CSS BLOCK 53 ===== */
/* Latar algoritma & matematika: lapisan dekoratif saja, tidak mengubah isi/tulisan. */
:root{--formula-ink:rgba(0, 255, 156,.075);--formula-glow:rgba(0, 255, 156,.11)}
body{background-color:#020806!important;background-image:radial-gradient(ellipse at 12% 12%,rgba(0, 255, 156,.12),transparent 30%),radial-gradient(ellipse at 88% 82%,rgba(0, 255, 156,.075),transparent 28%),linear-gradient(135deg,#020806 0%,#04150e 48%,#010504 100%)!important;background-repeat:no-repeat;background-size:cover;background-attachment:fixed}
.section{isolation:isolate;position:relative;overflow:hidden;background-color:transparent!important}
.section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.8;background-image:linear-gradient(90deg,transparent 49.85%,rgba(0, 255, 156,.045) 50%,transparent 50.15%),linear-gradient(transparent 49.85%,rgba(0, 255, 156,.04) 50%,transparent 50.15%),radial-gradient(circle at 16% 24%,rgba(0, 255, 156,.12),transparent 22%),radial-gradient(circle at 84% 76%,rgba(0, 255, 156,.075),transparent 24%);background-size:64px 64px,64px 64px,auto,auto;background-position:0 0,0 0,center,center}
/* Watermark matematika yang lembut di sudut; tidak menimpa teks atau tombol. */
.section::after{content:"∑ f(x)  ·  ∫ dx  ·  {A → B}  ·  0101";position:absolute;right:clamp(12px,3vw,38px);bottom:clamp(12px,2vw,26px);z-index:-1;pointer-events:none;user-select:none;white-space:nowrap;font:600 clamp(10px,1.1vw,13px)/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.16em;color:rgba(0, 255, 156,.10);text-shadow:0 0 18px rgba(0, 255, 156,.08)}
#beranda::before{background-image:repeating-linear-gradient(0deg,transparent 0 35px,rgba(0, 255, 156,.045) 36px,transparent 37px),repeating-linear-gradient(90deg,transparent 0 52px,rgba(0, 255, 156,.04) 53px,transparent 54px),radial-gradient(circle at 50% 45%,rgba(0, 255, 156,.14),transparent 36%),linear-gradient(115deg,transparent 45%,rgba(0, 255, 156,.08) 45.2%,transparent 45.7%);background-size:auto,auto,auto,auto}
#layanan::before{background-image:radial-gradient(circle,rgba(0, 255, 156,.15) 1px,transparent 1.8px),linear-gradient(30deg,transparent 49.5%,rgba(0, 255, 156,.07) 50%,transparent 50.5%),linear-gradient(150deg,transparent 49.5%,rgba(0, 255, 156,.06) 50%,transparent 50.5%);background-size:34px 34px,92px 92px,116px 116px}
#tentang::before{background-image:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 42px,rgba(0, 255, 156,.055) 43px 44px,transparent 45px 70px),radial-gradient(ellipse at 50% 50%,rgba(0, 255, 156,.11),transparent 48%)}
#pembayaran::before,#kontak::before{background-image:repeating-linear-gradient(135deg,transparent 0 28px,rgba(0, 255, 156,.045) 29px,transparent 30px),radial-gradient(ellipse at 80% 35%,rgba(0, 255, 156,.12),transparent 28%),linear-gradient(90deg,transparent 10%,rgba(0, 255, 156,.055) 10.1%,transparent 10.4%,transparent 89%,rgba(0, 255, 156,.05) 89.1%,transparent 89.4%)}
/* Pastikan seluruh konten berada di atas ornamen latar. */
.section>*{position:relative;z-index:1}
.section::before,.section::after{contain:paint}
@keyframes martondiMathDrift{0%,100%{background-position:0 0,0 0,center,center}50%{background-position:14px 10px,-10px 18px,center,center}}
.section::before{animation:martondiMathDrift 32s ease-in-out infinite}
/* Biground algoritma & matematika: lebih terstruktur, tetapi tetap redup di belakang konten. */
body{background-image:radial-gradient(ellipse at 8% 18%,rgba(0,255,156,.13),transparent 32%),radial-gradient(ellipse at 92% 68%,rgba(0, 255, 156,.09),transparent 30%),linear-gradient(135deg,#020806 0%,#03140d 48%,#010504 100%)!important}
.global-cyber-bg{pointer-events:none}
.home-process{background-image:radial-gradient(ellipse at 50% 50%,rgba(0,255,156,.045),transparent 68%)}
.home-process::after{content:"∑  f(x)  ·  ∫ dx  ·  A → B  ·  0101 1010";position:absolute;right:clamp(12px,3vw,34px);bottom:12px;z-index:0;pointer-events:none;white-space:nowrap;font:600 10px/1.4 ui-monospace,monospace;letter-spacing:.13em;color:rgba(0, 255, 156,.075)}
@media(max-width:700px){body{background-attachment:scroll!important}.section::before{opacity:.58}.section::after{font-size:9px;letter-spacing:.08em;opacity:.65;right:10px;bottom:8px}.home-process::after{font-size:8px;opacity:.6;right:10px;bottom:6px}}
@media(prefers-reduced-motion:reduce){.section::before{animation:none!important}}

/* ===== CSS BLOCK 54 ===== */
/* Beri jarak lebih lapang antara timeline dan tombol tindakan. */
.home-process-action{margin-top:88px!important;padding-top:10px!important;}
@media(max-width:650px){
  .home-process-action{margin-top:44px!important;padding-top:0!important;}
}

/* ===== CSS BLOCK 55 ===== */
/* HP: kembalikan timeline ke tata letak vertikal yang rapi; aturan desktop tidak diubah. */
@media (max-width:650px){
  .home-process-timeline-viewport{
    display:block!important;width:100%!important;max-width:100%!important;
    overflow:visible!important;overflow-x:visible!important;overflow-y:visible!important;
    padding:0!important;margin:28px 0 0!important;
    -webkit-overflow-scrolling:auto!important;
  }
  .home-process-timeline{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    min-width:0!important;width:100%!important;max-width:100%!important;
    gap:18px!important;margin:0!important;padding:0!important;
    min-height:0!important;height:auto!important;align-items:stretch!important;
    overflow:visible!important;position:relative!important;
  }
  .home-process-timeline .home-timeline-track{
    display:block!important;position:absolute!important;
    left:22px!important;right:auto!important;top:22px!important;bottom:22px!important;
    width:2px!important;height:auto!important;transform:none!important;
    background:linear-gradient(180deg,transparent,rgba(0,255,156,.88) 8%,rgba(0,255,156,.58) 92%,transparent)!important;
    box-shadow:0 0 9px rgba(0,255,156,.26)!important;z-index:1!important;
  }
  .home-process-timeline .home-timeline-track span{
    left:-2px!important;right:auto!important;top:0!important;bottom:auto!important;
    width:6px!important;height:24%!important;max-height:110px!important;
    background:linear-gradient(180deg,transparent,rgba(0, 255, 156,.95),transparent)!important;
    filter:blur(1px)!important;animation:martondiTimelineScanVertical 4.5s linear infinite!important;
  }
  .home-process-timeline .timeline-step{
    display:block!important;position:relative!important;box-sizing:border-box!important;
    min-width:0!important;width:100%!important;min-height:0!important;height:auto!important;
    padding:0 0 0 56px!important;margin:0!important;overflow:visible!important;
    align-self:stretch!important;
  }
  .home-process-timeline .timeline-step .timeline-card,
  .home-process-timeline .timeline-step:nth-of-type(odd) .timeline-card,
  .home-process-timeline .timeline-step:nth-of-type(even) .timeline-card{
    display:block!important;position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    min-height:0!important;height:auto!important;box-sizing:border-box!important;
    margin:0!important;padding:17px 15px!important;
    transform:none!important;float:none!important;
  }
  .home-process-timeline .timeline-node{
    display:grid!important;visibility:visible!important;opacity:1!important;
    position:absolute!important;left:22px!important;top:22px!important;
    right:auto!important;bottom:auto!important;width:42px!important;height:42px!important;
    transform:translate(-50%,0)!important;z-index:5!important;
  }
  .home-process-timeline .timeline-node-icon{font-size:21px!important;line-height:1!important;}
  .home-process-timeline .timeline-card-head{gap:9px!important;margin-bottom:12px!important;}
  .home-process-timeline .timeline-card .home-step-number{flex-basis:36px!important;width:36px!important;height:36px!important;}
  .home-process-timeline .timeline-kicker{font-size:8px!important;letter-spacing:.11em!important;}
  .home-process-timeline .timeline-card h3{font-size:16px!important;line-height:1.4!important;margin:0 0 8px!important;}
  .home-process-timeline .timeline-card p{font-size:13px!important;line-height:1.65!important;overflow-wrap:anywhere!important;}
  .home-process-timeline .timeline-tags{gap:5px!important;margin-top:12px!important;padding-top:10px!important;}
  .home-process-timeline .timeline-tags span{font-size:8px!important;}
  .home-process-timeline .timeline-step:hover .timeline-card,
  .home-process-timeline .timeline-step:nth-of-type(even):hover .timeline-card{transform:none!important;}
  .home-process-action{margin-top:32px!important;}
}

/* ===== CSS BLOCK 56 ===== */
/* Kembalikan biground cyber Privasi yang jelas; timeline/aksi tidak disentuh. */
.home-privacy.cyber-privacy{
  background-image:
    radial-gradient(ellipse at 73% 42%,rgba(0,255,156,.09) 0%,rgba(0,255,156,.03) 31%,transparent 58%),
    linear-gradient(115deg,rgba(1,9,6,.90) 0%,rgba(3,17,11,.84) 48%,rgba(1,8,6,.91) 100%) !important;
}
.home-privacy.cyber-privacy::before{
  opacity:.64!important;
  background-image:
    radial-gradient(ellipse at 70% 30%,rgba(0,255,156,.20),transparent 38%),
    repeating-linear-gradient(90deg,transparent 0 54px,rgba(0,255,156,.09) 55px,transparent 57px),
    repeating-linear-gradient(0deg,transparent 0 54px,rgba(0,255,156,.075) 55px,transparent 57px),
    radial-gradient(circle at 75% 35%,transparent 0 65px,rgba(0,255,156,.13) 66px,transparent 68px) !important;
}
.home-privacy.cyber-privacy .cyber-grid{
  opacity:.22!important;
  background-image:
    linear-gradient(rgba(0,255,156,.115) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,156,.115) 1px,transparent 1px)!important;
}
/* Cahaya lokal sahaja; elak kabut tebal menutup corak latar. */
.home-privacy.cyber-privacy .cyber-glow{
  filter:blur(46px)!important;opacity:.045!important;
}
.home-privacy.cyber-privacy .cyber-code{
  opacity:.17!important;color:rgba(0, 255, 156,.84)!important;
  text-shadow:0 0 4px rgba(0,255,156,.14)!important;
}
.home-privacy.cyber-privacy .cyber-code-one,
.home-privacy.cyber-privacy .cyber-code-two{opacity:.15!important}
.home-privacy.cyber-privacy .cyber-code-three{opacity:.12!important}
.home-privacy.cyber-privacy .cyber-particles i{
  opacity:.58!important;box-shadow:0 0 5px 1px rgba(0,255,156,.27)!important;
}
@media(max-width:760px){
  .home-privacy.cyber-privacy::before{opacity:.56!important}
  .home-privacy.cyber-privacy .cyber-grid{opacity:.18!important;background-size:32px 32px!important}
  .home-privacy.cyber-privacy .cyber-glow{filter:blur(36px)!important;opacity:.035!important}
  .home-privacy.cyber-privacy .cyber-code{opacity:.12!important}
}

/* ===== CSS BLOCK 57 ===== */
/* Hanya paragraf deskripsi Privasi yang diratakan kiri-kanan; daftar poin tidak diubah. */
.home-privacy.cyber-privacy .cyber-privacy-copy > p{
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  line-height: 1.8;
}

/* ===== CSS BLOCK 58 ===== */
/* Hanya paragraf deskripsi di bagian Tentang Kami dibuat rata kiri-kanan.
   Desain Privasi, timeline, ikon, pencahayaan, dan elemen lain tetap dipertahankan. */
#tentang .about-box p{
  text-align:justify!important;
  text-justify:inter-word;
  hyphens:auto;
  line-height:1.8;
}

/* ===== CSS BLOCK 59 ===== */
/* PRIVASI: kembalikan biground cyber yang jelas; cahaya lokal, tidak berkabut. */
.home-privacy.cyber-privacy{
  background-color:#020a07!important;
  background-image:
    radial-gradient(ellipse at 73% 43%,rgba(0,255,156,.13) 0%,rgba(0,255,156,.045) 30%,transparent 58%),
    radial-gradient(ellipse at 8% 92%,rgba(0,255,130,.06) 0%,transparent 42%),
    linear-gradient(115deg,rgba(1,9,6,.91) 0%,rgba(3,17,11,.84) 48%,rgba(1,8,6,.92) 100%)!important;
}
.home-privacy.cyber-privacy::before{
  opacity:.68!important;
  background-image:
    radial-gradient(ellipse at 70% 30%,rgba(0,255,156,.19),transparent 38%),
    repeating-linear-gradient(90deg,transparent 0 54px,rgba(0,255,156,.085) 55px,transparent 57px),
    repeating-linear-gradient(0deg,transparent 0 54px,rgba(0,255,156,.07) 55px,transparent 57px),
    repeating-linear-gradient(135deg,transparent 0 61px,rgba(0,255,156,.035) 62px,transparent 63px),
    radial-gradient(circle,rgba(0, 255, 156,.22) 1px,transparent 1.8px)!important;
  background-size:auto,auto,auto,122px 122px,34px 34px!important;
  background-position:center,0 0,0 0,0 0,8px 9px!important;
}
.home-privacy.cyber-privacy .cyber-grid{
  opacity:.24!important;
  background-image:
    linear-gradient(rgba(0,255,156,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,156,.12) 1px,transparent 1px)!important;
}
/* Keep the green highlight near the artwork, without a wide fog over the background. */
.home-privacy.cyber-privacy .cyber-glow{
  filter:blur(54px)!important;
  opacity:.055!important;
}
.home-privacy.cyber-privacy .cyber-code{
  opacity:.17!important;
  color:rgba(0, 255, 156,.84)!important;
  text-shadow:0 0 5px rgba(0,255,156,.17)!important;
}
.home-privacy.cyber-privacy .cyber-code-one,
.home-privacy.cyber-privacy .cyber-code-two{opacity:.15!important}
.home-privacy.cyber-privacy .cyber-code-three{opacity:.12!important}
.home-privacy.cyber-privacy .cyber-particles i{
  opacity:.55!important;
  box-shadow:0 0 5px 1px rgba(0,255,156,.3)!important;
}
/* Prevent backdrop blur from making the background behind privacy copy look cloudy. */
.home-privacy.cyber-privacy .cyber-privacy-copy{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* BAGAIMANA CARA MEMESAN: visible cyber lighting behind timeline, not over the cards. */
.home-process{
  background-color:#020a07!important;
  background-image:
    radial-gradient(ellipse at 50% 43%,rgba(0,255,156,.105) 0%,rgba(0,255,156,.035) 42%,transparent 69%),
    radial-gradient(ellipse at 5% 85%,rgba(0, 255, 156,.055),transparent 36%),
    linear-gradient(115deg,rgba(2,10,7,.9),rgba(3,17,11,.78) 50%,rgba(1,8,6,.91))!important;
}
.home-process::before{
  opacity:.53!important;
  background-image:
    radial-gradient(circle at 18px 18px,rgba(0,255,156,.4) 1.4px,transparent 2px),
    radial-gradient(circle at 72px 58px,rgba(0,255,156,.22) 1px,transparent 2px),
    linear-gradient(30deg,transparent 48.8%,rgba(0,255,156,.105) 49.5%,rgba(0,255,156,.105) 50%,transparent 50.7%),
    linear-gradient(150deg,transparent 48.8%,rgba(0,255,156,.08) 49.5%,rgba(0,255,156,.08) 50%,transparent 50.7%),
    repeating-linear-gradient(90deg,transparent 0 67px,rgba(0,255,156,.025) 68px,transparent 69px)!important;
  background-size:90px 90px,130px 100px,90px 90px,90px 90px,68px 68px!important;
}
/* Keep timeline cards and the green center line above the decorative background. */
.home-process .section-head,
.home-process .home-process-timeline-viewport,
.home-process .home-process-timeline,
.home-process .home-process-action{
  position:relative!important;
  z-index:2!important;
}
@media(max-width:760px){
  .home-privacy.cyber-privacy::before{opacity:.61!important}
  .home-privacy.cyber-privacy .cyber-grid{opacity:.2!important;background-size:32px 32px!important}
  .home-privacy.cyber-privacy .cyber-glow{filter:blur(42px)!important;opacity:.04!important}
  .home-process::before{opacity:.42!important;background-size:72px 72px,110px 90px,72px 72px,72px 72px,58px 58px!important}
  .home-process{background-image:radial-gradient(ellipse at 50% 40%,rgba(0,255,156,.085),transparent 66%),linear-gradient(115deg,rgba(2,10,7,.93),rgba(3,17,11,.86),rgba(1,8,6,.94))!important}
}

/* ===== CSS BLOCK 60 ===== */
/* Pencahayaan diratakan: hilangkan hotspot yang berpindah-pindah; ornamen cyber tetap tajam. */
.home-privacy.cyber-privacy{
  background-color:#020a07!important;
  background-image:
    radial-gradient(ellipse 78% 72% at 50% 48%, rgba(0,255,156,.045) 0%, rgba(0,255,156,.018) 48%, transparent 82%),
    linear-gradient(180deg,#03100a 0%,#020b07 52%,#030e09 100%)!important;
}
.home-privacy.cyber-privacy::before{
  opacity:.58!important;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(0,255,156,.018) 6px, transparent 7px),
    linear-gradient(90deg, transparent 0 7%, rgba(0,255,156,.085) 7.08%, transparent 7.18%, transparent 18%, rgba(0,255,156,.06) 18.08%, transparent 18.18%, transparent 84%, rgba(0,255,156,.06) 84.08%, transparent 84.18%),
    linear-gradient(0deg, transparent 0 22%, rgba(0,255,156,.05) 22.08%, transparent 22.18%, transparent 78%, rgba(0,255,156,.045) 78.08%, transparent 78.18%),
    repeating-linear-gradient(135deg, transparent 0 61px, rgba(0,255,156,.028) 62px, transparent 63px),
    radial-gradient(circle, rgba(0, 255, 156,.22) 1px, transparent 1.8px)!important;
  background-size:auto,100% 100%,100% 100%,122px 122px,34px 34px!important;
  background-position:0 0,0 0,0 0,0 0,8px 9px!important;
  animation:none!important;
}
/* Sumber glow mengambang dimatikan agar warna tidak belang; bingkai, ikon, dan titik orbit tetap bekerja. */
.home-privacy.cyber-privacy .cyber-glow{
  opacity:0!important;
  animation:none!important;
  filter:none!important;
}
.home-privacy.cyber-privacy .cyber-grid{
  opacity:.19!important;
  background-image:
    linear-gradient(rgba(0,255,156,.105) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,156,.105) 1px,transparent 1px)!important;
  background-size:42px 42px!important;
  animation:none!important;
}
.home-privacy.cyber-privacy .cyber-code{
  opacity:.14!important;
  text-shadow:0 0 4px rgba(0,255,156,.12)!important;
}
.home-privacy.cyber-privacy .cyber-code-one,
.home-privacy.cyber-privacy .cyber-code-two{opacity:.13!important}
.home-privacy.cyber-privacy .cyber-code-three{opacity:.11!important}
.home-privacy.cyber-privacy .cyber-privacy-copy{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Bagaimana Cara Memesan: cahaya seimbang di tengah, pola digital seragam di seluruh bidang. */
.home-process{
  background-color:#020a07!important;
  background-image:
    radial-gradient(ellipse 82% 76% at 50% 48%, rgba(0,255,156,.04) 0%, rgba(0,255,156,.014) 52%, transparent 84%),
    linear-gradient(180deg,#030e09 0%,#020b07 50%,#030d08 100%)!important;
}
.home-process::before{
  opacity:.43!important;
  background-image:
    radial-gradient(circle at 18px 18px,rgba(0,255,156,.24) 1.2px,transparent 2px),
    radial-gradient(circle at 72px 58px,rgba(0,255,156,.16) 1px,transparent 2px),
    linear-gradient(30deg,transparent 48.9%,rgba(0,255,156,.065) 49.5%,rgba(0,255,156,.065) 50%,transparent 50.6%),
    linear-gradient(150deg,transparent 48.9%,rgba(0,255,156,.055) 49.5%,rgba(0,255,156,.055) 50%,transparent 50.6%),
    repeating-linear-gradient(90deg,transparent 0 67px,rgba(0,255,156,.022) 68px,transparent 69px)!important;
  background-size:90px 90px,130px 100px,90px 90px,90px 90px,68px 68px!important;
  background-position:0 0,0 0,0 0,0 0,0 0!important;
  animation:none!important;
}
@media(max-width:760px){
  .home-privacy.cyber-privacy{background-image:radial-gradient(ellipse 90% 70% at 50% 48%,rgba(0,255,156,.035),transparent 82%),linear-gradient(180deg,#030e09,#020b07 52%,#030d08)!important}
  .home-privacy.cyber-privacy::before{opacity:.48!important;background-size:auto,100% 100%,100% 100%,122px 122px,32px 32px!important}
  .home-privacy.cyber-privacy .cyber-grid{opacity:.16!important;background-size:32px 32px!important}
  .home-privacy.cyber-privacy .cyber-code{opacity:.10!important}
  .home-process{background-image:radial-gradient(ellipse 90% 70% at 50% 48%,rgba(0,255,156,.032),transparent 82%),linear-gradient(180deg,#030e09,#020b07 52%,#030d08)!important}
  .home-process::before{opacity:.34!important;background-size:72px 72px,110px 90px,72px 72px,72px 72px,58px 58px!important}
}

/* ===== CSS BLOCK 61 ===== */
/* Hilangkan hanya kode/rumus dekoratif di bawah CTA kartu layanan.
   Kartu tetap dapat diklik; nomor layanan, panah, ripple, modal, dan efek lain dipertahankan. */
.service-card::after { content: none !important; display: none !important; }

/* ===== CSS BLOCK 62 ===== */
/* Sedikit lebih transparan agar pola cyber di belakang kartu makin terlihat; fungsi tetap. */
.service-grid .service-card{
  background:linear-gradient(180deg,rgba(5,32,17,.58) 0%,rgba(0,8,4,.60) 100%)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  border-color:rgba(0, 255, 156,.17)!important;
}
.service-grid .service-card:hover,
.service-grid .service-card:focus-visible,
.service-grid .service-card.open{
  background:linear-gradient(180deg,rgba(6,39,20,.64) 0%,rgba(0,10,5,.66) 100%)!important;
}

/* ===== CSS BLOCK 63 ===== */
/* Transparansi lembut khusus Tentang Kami dan Dukungan Layanan.
   Ornamen latar, logo pembayaran/QRIS, teks, dan semua fungsi tetap dipertahankan. */
#tentang .about-box{
  background:linear-gradient(145deg,rgba(5,28,16,.56) 0%,rgba(2,11,7,.48) 100%) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-color:rgba(0,255,156,.20) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.24),inset 0 1px rgba(0,255,156,.025) !important;
}
#tentang .about-box:hover{
  background:linear-gradient(145deg,rgba(6,32,18,.61) 0%,rgba(2,13,8,.54) 100%) !important;
}

#pembayaran .payment-method{
  background:linear-gradient(145deg,rgba(5,28,16,.56) 0%,rgba(2,11,7,.49) 100%) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
#pembayaran .payment-method:hover,
#pembayaran .payment-method.selected{
  background:linear-gradient(145deg,rgba(6,35,19,.66) 0%,rgba(2,14,8,.59) 100%) !important;
}
#pembayaran .payment-detail{
  background:linear-gradient(145deg,rgba(5,28,16,.59) 0%,rgba(2,11,7,.53) 100%) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
#pembayaran .payment-placeholder{
  background:rgba(0,255,156,.035) !important;
  border-color:rgba(0,255,156,.23) !important;
}
#pembayaran .payment-note{
  background:rgba(0,255,156,.045) !important;
  border-color:rgba(0,255,156,.18) !important;
}
/* Jangan transparankan bidang putih logo/QRIS agar gambar tetap terbaca dan dapat dipindai. */
#pembayaran .payment-logo,
#pembayaran .qris-real{background:#fff !important;}

/* ===== CSS BLOCK 64 ===== */
/* Label hanya digeser sedikit menjauhi garis orbit agar komposisi tetap rapat dan premium. */
.home-privacy.cyber-privacy .cyber-privacy-art{
  min-height:360px!important;
  overflow:visible!important;
}
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{
  top:-6px!important;
  z-index:5!important;
}
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-caption{
  bottom:7%!important;
  z-index:5!important;
}
@media(max-width:760px){
  .home-privacy.cyber-privacy .cyber-privacy-art{min-height:320px!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{top:-4px!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-caption{bottom:9%!important;}
}
@media(max-width:420px){
  .home-privacy.cyber-privacy .cyber-privacy-art{min-height:320px!important;}
}

/* ===== CSS BLOCK 65 ===== */
/* Penyesuaian halus: label atas sedikit lebih naik; jarak visual diseimbangkan dengan caption bawah. */
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{
  top:-8px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
}
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-caption{
  left:50%!important;
  transform:translateX(-50%)!important;
  bottom:7%!important;
  white-space:nowrap!important;
}
/* Pusatkan shield secara eksplisit di titik tengah dua orbit; animasi hanya memberi apungan kecil. */
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-shield{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center center!important;
  animation:martondiShieldCenteredFloat 7.2s ease-in-out infinite!important;
  z-index:3!important;
}
@keyframes martondiShieldCenteredFloat{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(-50%,calc(-50% - 2px))}
}
@media(max-width:760px){
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{top:-5px!important}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-caption{bottom:9%!important}
}
@media(prefers-reduced-motion:reduce){
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-shield{animation:none!important;transform:translate(-50%,-50%)!important}
}

/* ===== CSS BLOCK 66 ===== */
/* Ikon security bergerak halus di titik tengah; orbitnya tidak ikut berubah bentuk. */
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-shield{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center center!important;
  animation:martondiSecurityIconFloatFinal 5.8s ease-in-out infinite!important;
  will-change:transform;
}
@keyframes martondiSecurityIconFloatFinal{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(-50%,calc(-50% - 2px))}
}
/* Turunkan label PRIVACY PROTOCOL / ACTIVE sedikit, tetap dekat dan seimbang dengan caption bawah. */
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{
  top:-1px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
}
@media(max-width:760px){
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{top:0!important}
}
@media(prefers-reduced-motion:reduce){
  /* Animasi ikon ini tetap aktif sesuai permintaan pengguna. */
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-shield{
    animation:martondiSecurityIconFloatFinal 5.8s ease-in-out infinite!important;
  }
}

/* ===== CSS BLOCK 67 ===== */
/* Hanya beri celah kecil antara label dan garis orbit. Ikon, orbit, animasi, dan layout lain tetap. */
.home-privacy.cyber-privacy .cyber-privacy-art{overflow:visible!important;}
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{
  top:-9px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:6!important;
}
.home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-caption{
  bottom:0!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:6!important;
}
@media(max-width:760px){
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{top:-9px!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-caption{bottom:0!important;}
}

/* ===== CSS BLOCK 68 ===== */
/* Only center the timeline node glyphs consistently; replace the search glyph with a balanced SVG. */
.home-process-timeline .timeline-node{display:grid!important;place-items:center!important;}
.home-process-timeline .timeline-node-icon{display:grid!important;place-items:center!important;width:100%!important;height:100%!important;line-height:1!important;text-align:center!important;transform:none!important;}
.home-process-timeline .timeline-node-icon .timeline-search-svg{display:block!important;width:25px!important;height:25px!important;flex:none!important;overflow:visible!important;}
@media(max-width:650px){.home-process-timeline .timeline-node-icon .timeline-search-svg{width:21px!important;height:21px!important;}}

/* ===== CSS BLOCK 69 ===== */
/* RESPONSIVE PASS: hanya merapikan lebar dan susunan di desktop, tablet, Android, dan iPhone.
   Warna, dekorasi, isi, ikon, animasi, serta interaksi layanan dipertahankan. */
html,body{width:100%;max-width:100%;overflow-x:clip!important;-webkit-text-size-adjust:100%;}
img,svg,video,canvas{max-width:100%;}
main,header,footer,.section,.home-extra,.home-block,.section-inner,.home-block .section-inner{min-width:0;}

/* Desktop lebar: gunakan ruang layar lebih lega tanpa membuat konten menempel ke tepi. */
@media (min-width:1200px){
  .header .nav,.hero-inner,.section-inner,.home-block .section-inner,.footer-inner{
    width:min(94vw,1600px)!important;max-width:min(94vw,1600px)!important;
  }
  .hero-inner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;gap:clamp(40px,4.4vw,78px)!important;padding:clamp(48px,5vw,78px) 0!important;}
  .hero-copy{min-width:0!important;}
  .hero-copy h1{font-size:clamp(3rem,5vw,5rem)!important;overflow-wrap:normal;}
  .logo-stage{min-width:0!important;min-height:360px!important;}
  .logo-stage img{width:min(100%,420px)!important;max-height:unset!important;object-fit:contain!important;}
  .home-block{padding-left:clamp(24px,3vw,48px)!important;padding-right:clamp(24px,3vw,48px)!important;}
  .home-process>.section-inner{width:min(94vw,1500px)!important;max-width:min(94vw,1500px)!important;}
  .home-process .home-process-timeline-viewport{width:100%!important;max-width:100%!important;overflow:visible!important;}
  .home-process .home-process-timeline{width:100%!important;max-width:1480px!important;margin-left:auto!important;margin-right:auto!important;gap:clamp(18px,1.8vw,30px)!important;padding:0 8px!important;}
  .home-privacy.cyber-privacy>.cyber-privacy-inner{width:min(94vw,1400px)!important;max-width:min(94vw,1400px)!important;}
  #layanan .section-inner,#tentang .section-inner,#pembayaran .section-inner,#kontak .section-inner{width:min(94vw,1450px)!important;max-width:min(94vw,1450px)!important;}
}

/* Desktop biasa / laptop: empat langkah berjajar dan seluruh kartu tetap terbaca. */
@media (min-width:1001px){
  .home-process .home-process-timeline-viewport{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;}
  .home-process .home-process-timeline{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;position:relative!important;width:100%!important;max-width:1480px!important;min-width:0!important;min-height:0!important;height:auto!important;gap:clamp(12px,1.6vw,26px)!important;margin:64px auto 0!important;padding:0 6px!important;overflow:visible!important;align-items:stretch!important;}
  .home-process .home-process-timeline .timeline-step{display:block!important;position:relative!important;min-width:0!important;width:auto!important;min-height:570px!important;height:auto!important;padding:0!important;margin:0!important;overflow:visible!important;}
  .home-process .home-process-timeline .timeline-card{display:block!important;position:absolute!important;left:0!important;right:0!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:210px!important;height:auto!important;margin:0!important;padding:clamp(15px,1.35vw,21px)!important;box-sizing:border-box!important;transform:none!important;float:none!important;overflow-wrap:anywhere!important;}
  .home-process .home-process-timeline .timeline-step:nth-of-type(odd) .timeline-card{top:auto!important;bottom:calc(50% + 27px)!important;}
  .home-process .home-process-timeline .timeline-step:nth-of-type(even) .timeline-card{top:calc(50% + 27px)!important;bottom:auto!important;}
  .home-process .home-process-timeline .home-timeline-track{display:block!important;position:absolute!important;left:2%!important;right:2%!important;top:50%!important;bottom:auto!important;width:auto!important;height:2px!important;transform:translateY(-50%)!important;z-index:1!important;}
  .home-process .home-process-timeline .home-timeline-track span{left:0!important;right:auto!important;top:-3px!important;bottom:-3px!important;width:23%!important;height:auto!important;animation:martondiTimelineScan 4.5s linear infinite!important;}
  .home-process .home-process-timeline .timeline-node{display:grid!important;visibility:visible!important;opacity:1!important;position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;width:52px!important;height:52px!important;transform:translate(-50%,-50%)!important;z-index:5!important;}
  .home-process .home-process-timeline .timeline-node-icon{display:grid!important;place-items:center!important;width:100%!important;height:100%!important;line-height:1!important;text-align:center!important;}
  .home-process .home-process-timeline .timeline-card h3{font-size:clamp(14px,1.18vw,18px)!important;line-height:1.38!important;overflow-wrap:anywhere!important;}
  .home-process .home-process-timeline .timeline-card p{font-size:clamp(12px,.94vw,14px)!important;line-height:1.65!important;overflow-wrap:anywhere!important;}
  .home-process .home-process-timeline .timeline-tags{display:flex!important;flex-wrap:wrap!important;}
  .home-process .home-process-action{margin-top:76px!important;}
}

/* Tablet dan PC dalam jendela sedang: jangan paksa timeline empat kolom menjadi sempit. */
@media (min-width:761px) and (max-width:1000px){
  .header .nav{width:100%!important;max-width:100%!important;flex-wrap:nowrap!important;gap:8px!important;padding:10px 14px!important;}
  .header .brand{flex:0 1 auto!important;min-width:0!important;gap:6px!important;}
  .header .brand-logo{width:32px!important;height:32px!important;flex-basis:32px!important;}
  .header .brand-text{font-size:clamp(12px,1.45vw,14px)!important;white-space:nowrap!important;}
  .header .brand-text span{font-size:8px!important;letter-spacing:.07em!important;}
  .header .menu{flex:0 1 auto!important;width:auto!important;max-width:none!important;min-width:0!important;overflow:visible!important;flex-wrap:nowrap!important;gap:2px!important;margin-left:auto!important;padding:0!important;}
  .header .menu a{font-size:clamp(10px,1.2vw,12px)!important;padding:8px clamp(5px,.7vw,8px)!important;white-space:nowrap!important;}
  .hero-inner{width:100%!important;max-width:100%!important;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;gap:clamp(14px,2.3vw,24px)!important;padding:38px 18px 44px!important;}
  .hero-copy{min-width:0!important;text-align:left!important;}
  .hero-copy h1{font-size:clamp(2rem,4.2vw,3rem)!important;overflow-wrap:normal!important;}
  .hero-copy>p{font-size:clamp(14px,1.55vw,16px)!important;margin-left:0!important;margin-right:0!important;}
  .hero-actions{justify-content:flex-start!important;}
  .logo-stage{order:0!important;min-width:0!important;min-height:250px!important;}
  .logo-stage img{width:min(100%,300px)!important;max-height:38vh!important;object-fit:contain!important;}
  .home-privacy.cyber-privacy>.cyber-privacy-inner{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;padding:38px 20px 44px!important;gap:20px!important;box-sizing:border-box!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art{width:min(100%,500px)!important;max-width:500px!important;min-width:0!important;min-height:320px!important;margin:0 auto!important;}
  .home-privacy.cyber-privacy .cyber-privacy-copy{display:block!important;width:100%!important;max-width:760px!important;min-width:0!important;margin:0 auto!important;padding:0!important;box-sizing:border-box!important;}
  .home-process .home-process-timeline-viewport{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;margin:28px auto 0!important;padding:0!important;}
}

/* Semua layar sampai 1000px memakai timeline vertikal agar garis, ikon, dan kartu tak bertabrakan. */
@media (max-width:1000px){
  .home-process .home-process-timeline-viewport{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;padding:0!important;margin:28px auto 0!important;}
  .home-process .home-process-timeline{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:18px!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;align-items:stretch!important;}
  .home-process .home-process-timeline .home-timeline-track{display:block!important;position:absolute!important;left:22px!important;right:auto!important;top:22px!important;bottom:22px!important;width:2px!important;height:auto!important;transform:none!important;z-index:1!important;}
  .home-process .home-process-timeline .home-timeline-track span{left:-2px!important;right:auto!important;top:0!important;bottom:auto!important;width:6px!important;height:24%!important;max-height:110px!important;animation:martondiTimelineScanVertical 4.5s linear infinite!important;}
  .home-process .home-process-timeline .timeline-step{display:block!important;position:relative!important;box-sizing:border-box!important;min-width:0!important;width:100%!important;min-height:0!important;height:auto!important;padding:0 0 0 56px!important;margin:0!important;overflow:visible!important;align-self:stretch!important;}
  .home-process .home-process-timeline .timeline-step .timeline-card,
  .home-process .home-process-timeline .timeline-step:nth-of-type(odd) .timeline-card,
  .home-process .home-process-timeline .timeline-step:nth-of-type(even) .timeline-card{display:block!important;position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;min-width:0!important;max-width:100%!important;min-height:0!important;height:auto!important;box-sizing:border-box!important;margin:0!important;padding:17px clamp(14px,2.4vw,22px)!important;transform:none!important;float:none!important;overflow-wrap:anywhere!important;}
  .home-process .home-process-timeline .timeline-node{display:grid!important;visibility:visible!important;opacity:1!important;position:absolute!important;left:22px!important;top:22px!important;right:auto!important;bottom:auto!important;width:42px!important;height:42px!important;transform:translate(-50%,0)!important;z-index:5!important;}
  .home-process .home-process-timeline .timeline-node-icon{display:grid!important;place-items:center!important;width:100%!important;height:100%!important;font-size:21px!important;line-height:1!important;text-align:center!important;}
  .home-process .home-process-timeline .timeline-node-icon .timeline-search-svg{width:22px!important;height:22px!important;}
  .home-process .home-process-timeline .timeline-card-head{gap:9px!important;margin-bottom:10px!important;}
  .home-process .home-process-timeline .timeline-card .home-step-number{flex:0 0 36px!important;width:36px!important;height:36px!important;}
  .home-process .home-process-timeline .timeline-card h3{font-size:clamp(15px,1.9vw,18px)!important;line-height:1.4!important;margin:0 0 8px!important;}
  .home-process .home-process-timeline .timeline-card p{font-size:14px!important;line-height:1.65!important;overflow-wrap:anywhere!important;}
  .home-process .home-process-timeline .timeline-tags{gap:6px!important;margin-top:12px!important;padding-top:10px!important;}
  .home-process .home-process-timeline .timeline-step:hover .timeline-card{transform:none!important;}
  .home-process .home-process-action{margin-top:34px!important;padding-top:0!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:12px!important;}
  .home-process .home-process-action .btn{max-width:100%!important;white-space:normal!important;text-align:center!important;}
  .home-privacy.cyber-privacy>.cyber-privacy-inner{min-width:0!important;}
  .home-privacy.cyber-privacy .cyber-privacy-copy{min-width:0!important;overflow-wrap:anywhere!important;}
  .home-privacy.cyber-privacy .cyber-privacy-copy>p{text-align:justify!important;hyphens:auto!important;}
}

/* Android/iPhone: menu boleh bergeser mendatar; hero dan semua panel memakai satu kolom. */
@media (max-width:760px){
  .header .nav{width:100%!important;max-width:100%!important;display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;padding:10px 13px!important;}
  .header .brand{display:flex!important;flex:1 1 100%!important;min-width:0!important;max-width:100%!important;gap:8px!important;}
  .header .brand-logo{width:36px!important;height:36px!important;flex:0 0 36px!important;}
  .header .brand-text{font-size:15px!important;line-height:1.3!important;white-space:normal!important;overflow-wrap:anywhere!important;}
  .header .brand-text span{font-size:9px!important;letter-spacing:.09em!important;}
  .header .menu{display:flex!important;flex:1 1 100%!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:5px!important;margin:0!important;padding:2px 0 5px!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important;}
  .header .menu a{flex:0 0 auto!important;white-space:nowrap!important;font-size:12px!important;padding:8px 10px!important;}
  .hero-inner{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;gap:20px!important;padding:28px 15px 38px!important;text-align:center!important;}
  .hero-copy{min-width:0!important;text-align:center!important;}
  .hero-copy .eyebrow{max-width:100%!important;white-space:normal!important;font-size:10px!important;letter-spacing:.10em!important;justify-content:center!important;}
  .hero-copy h1{font-size:clamp(1.9rem,7vw,2.8rem)!important;line-height:1.13!important;overflow-wrap:normal!important;word-break:normal!important;}
  .hero-copy>p{max-width:640px!important;margin-left:auto!important;margin-right:auto!important;font-size:15px!important;line-height:1.7!important;}
  .hero-actions{justify-content:center!important;flex-wrap:wrap!important;}
  .logo-stage{order:-1!important;min-width:0!important;min-height:0!important;width:100%!important;padding:8px 0!important;}
  .logo-stage img{width:min(72vw,300px)!important;max-height:34vh!important;object-fit:contain!important;}
  .home-block{padding-left:14px!important;padding-right:14px!important;}
  .home-block .section-inner{width:100%!important;max-width:100%!important;}
  .home-process .section-head{padding-inline:4px!important;margin-bottom:24px!important;}
  .home-process .section-head h2,.home-privacy h2,.section-head h2{font-size:clamp(24px,6vw,32px)!important;line-height:1.2!important;overflow-wrap:anywhere!important;}
  .home-privacy.cyber-privacy>.cyber-privacy-inner{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;gap:14px!important;padding:32px 0 38px!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art{width:min(100%,420px)!important;max-width:420px!important;min-width:0!important;min-height:310px!important;margin:0 auto!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-one{width:min(86%,310px)!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-two{width:min(66%,235px)!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-shield{width:min(54%,170px)!important;max-height:190px!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{max-width:calc(100% - 14px)!important;font-size:clamp(8px,2vw,9px)!important;letter-spacing:.08em!important;padding:7px 9px!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-caption{gap:clamp(4px,1.1vw,8px)!important;font-size:clamp(8px,2vw,9px)!important;max-width:calc(100% - 14px)!important;justify-content:center!important;}
  .home-privacy.cyber-privacy .cyber-privacy-copy{width:100%!important;max-width:100%!important;padding:0 2px!important;margin:0!important;}
  .home-privacy.cyber-privacy .cyber-privacy-copy>p{font-size:14px!important;line-height:1.75!important;}
  .home-privacy.cyber-privacy .cyber-privacy-points{width:100%!important;}
  .home-privacy.cyber-privacy .cyber-privacy-points>*{min-width:0!important;overflow-wrap:anywhere!important;}
  .home-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
  .home-feature-card{padding:17px 15px!important;min-width:0!important;}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;width:100%!important;}
  .service-card{min-width:0!important;padding:16px!important;overflow-wrap:anywhere!important;}
  .service-card h3{font-size:15px!important;line-height:1.4!important;}
  .service-card p{font-size:12px!important;line-height:1.6!important;}
  .about-grid{grid-template-columns:minmax(0,1fr)!important;gap:18px!important;}
  #tentang .about-box{width:100%!important;max-width:100%!important;padding:clamp(16px,4vw,22px)!important;}
  #tentang .about-box p{font-size:14px!important;line-height:1.75!important;}
  #pembayaran .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;}
  #pembayaran .payment-method{min-width:0!important;padding:12px!important;overflow-wrap:anywhere!important;}
  #pembayaran .payment-logo{max-width:100%!important;}
  #pembayaran .payment-detail{padding:clamp(14px,4vw,20px)!important;min-width:0!important;}
  .consult-container{width:100%!important;max-width:100%!important;padding:clamp(15px,4vw,22px)!important;}
  input,textarea,select,.form-control{max-width:100%!important;min-width:0!important;}
  .footer-inner{width:100%!important;flex-direction:column!important;gap:10px!important;text-align:center!important;}
}

/* Ponsel kecil: gunakan satu kolom untuk kartu layanan agar teks tidak terlalu sempit. */
@media (max-width:420px){
  .hero-inner{padding:24px 12px 30px!important;gap:14px!important;}
  .hero-copy h1{font-size:clamp(1.8rem,8vw,2.4rem)!important;}
  .header .menu a{font-size:11px!important;padding:8px 9px!important;}
  .service-grid{grid-template-columns:minmax(0,1fr)!important;gap:11px!important;}
  .service-card{padding:18px!important;}
  .service-card h3{font-size:16px!important;}
  .service-card p{font-size:13px!important;}
  .home-feature-grid{grid-template-columns:minmax(0,1fr)!important;}
  #pembayaran .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #pembayaran .payment-method{padding:10px 8px!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art{min-height:290px!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{top:-3px!important;letter-spacing:.045em!important;padding:6px 7px!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-caption{white-space:normal!important;flex-wrap:wrap!important;line-height:1.25!important;text-align:center!important;bottom:1%!important;}
}

/* ===== CSS BLOCK 70 ===== */
/* Perbaikan khusus HP: sediakan ruang vertikal untuk label, agar orbit tidak menyentuh tulisan.
   Lingkaran, animasi ikon/titik, warna, timeline, dan bagian lain tetap seperti file dasar. */
@media (max-width:760px){
  .home-privacy.cyber-privacy .cyber-privacy-art{
    min-height:350px!important;
    height:350px!important;
    overflow:visible!important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-one{
    width:min(82%,275px)!important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-orbit-two{
    width:min(63%,205px)!important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{
    top:-7px!important;
    left:50%!important;
    bottom:auto!important;
    transform:translateX(-50%)!important;
    z-index:7!important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-caption{
    top:auto!important;
    bottom:0!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    z-index:7!important;
  }
}
@media (max-width:420px){
  .home-privacy.cyber-privacy .cyber-privacy-art{
    min-height:350px!important;
    height:350px!important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-label{top:-7px!important;}
  .home-privacy.cyber-privacy .cyber-privacy-art .cyber-art-caption{bottom:0!important;}
}

/* REVISION: animated cyber service cards + compact mobile navigation */
#layanan{position:relative;isolation:isolate;overflow:hidden}
#layanan::before,#layanan::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
#layanan::before{background-image:linear-gradient(rgba(0,255,156,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,156,.055) 1px,transparent 1px),radial-gradient(circle at 15% 25%,rgba(0,255,156,.16),transparent 28%),radial-gradient(circle at 85% 75%,rgba(0,180,110,.13),transparent 30%);background-size:34px 34px,34px 34px,auto,auto;animation:serviceCyberGrid 18s linear infinite}
#layanan::after{background:linear-gradient(115deg,transparent 0%,rgba(0,255,156,.055) 45%,rgba(0,255,156,.22) 50%,rgba(0,255,156,.055) 55%,transparent 100%);transform:translateX(-120%);animation:serviceCyberSweep 9s ease-in-out infinite}
#layanan>.section-inner,#layanan>.container,#layanan .section-head,#layanan .service-grid,#layanan .service-count{position:relative;z-index:1}
#layanan .service-card{border-color:rgba(0,255,156,.22)!important;background:linear-gradient(145deg,rgba(3,35,26,.78),rgba(4,19,22,.74))!important;box-shadow:0 0 0 1px rgba(0,255,156,.035),0 12px 35px rgba(0,0,0,.28),inset 0 0 22px rgba(0,255,156,.025)!important}
#layanan .service-card::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(110deg,transparent 20%,rgba(0,255,156,.15) 50%,transparent 80%);transform:translateX(-120%);animation:serviceCardScan 7s ease-in-out infinite}
#layanan .service-card:hover{border-color:rgba(0,255,156,.72)!important;box-shadow:0 0 22px rgba(0,255,156,.13),0 15px 38px rgba(0,0,0,.3)!important}
@keyframes serviceCyberGrid{from{background-position:0 0,0 0,0 0,0 0}to{background-position:0 68px,68px 0,0 0,0 0}}
@keyframes serviceCyberSweep{0%,20%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}
@keyframes serviceCardScan{0%,15%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}
/* Hide the floating WhatsApp shortcut requested by user. Contact links/forms remain available. */
.float-wa{display:none!important}
@media(max-width:600px){
  /* Keep mobile nav compact instead of letting links occupy the whole screen. */
  .nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px!important;min-height:58px}
  .brand{min-width:0;max-width:calc(100% - 44px)}
  .brand-logo{max-width:34px;height:auto}
  .brand-text{font-size:13px!important;line-height:1.15}
  .brand-text span{font-size:8px!important;letter-spacing:.06em}
  .menu{display:flex!important;position:static!important;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:3px!important;width:auto!important;max-width:100%;height:auto!important;min-height:0!important;padding:0!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
  .menu a{font-size:10px!important;padding:6px 7px!important;white-space:nowrap;border-radius:7px}
  #layanan{padding-left:12px!important;padding-right:12px!important}
  #layanan .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  #layanan .service-card{min-width:0;padding:14px!important;border-radius:13px!important;min-height:unset}
  #layanan .service-card h3{font-size:13px;line-height:1.35;overflow-wrap:anywhere}
  #layanan .service-card p{font-size:11px;line-height:1.55}
  #layanan .service-card .service-icon{max-width:36px}
}
@media(max-width:380px){
  .menu a{font-size:9px!important;padding:5px 5px!important}
  #layanan .service-grid{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){#layanan::before,#layanan::after,#layanan .service-card::before{animation:none!important}}


/* FINAL POLISH: genuinely transparent header + restrained cyber service styling */
.header, header.header{
  background:rgba(0,0,0,0.04)!important;
  background-color:rgba(0,0,0,0.04)!important;
  box-shadow:none!important;
  border-bottom:1px solid rgba(0,255,156,.18)!important;
  -webkit-backdrop-filter:blur(3px)!important;
  backdrop-filter:blur(3px)!important;
}
.header::before,.header::after{background-color:transparent!important;opacity:.12!important;pointer-events:none!important}
.header .nav{background:transparent!important;box-shadow:none!important}
#layanan{background-color:transparent!important;isolation:isolate}
#layanan::before{opacity:.62!important;background-size:42px 42px,42px 42px,auto,auto!important;animation-duration:28s!important}
#layanan::after{opacity:.22!important;animation-duration:16s!important}
#layanan .service-card{
 background:rgba(2,20,17,.48)!important;
 border:1px solid rgba(0,255,156,.25)!important;
 box-shadow:0 8px 24px rgba(0,0,0,.16),inset 0 0 16px rgba(0,255,156,.018)!important;
 backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important;
}
#layanan .service-card::before{inset:0!important;border-radius:inherit!important;background:linear-gradient(115deg,transparent 0%,rgba(0,255,156,.035) 48%,rgba(0,255,156,.09) 50%,rgba(0,255,156,.035) 52%,transparent 100%)!important;background-size:220% 100%!important;transform:translateX(-100%);animation:serviceCardScan 12s ease-in-out infinite!important}
#layanan .service-card:hover,#layanan .service-card:focus-visible,#layanan .service-card.open{border-color:rgba(0,255,156,.62)!important;box-shadow:0 0 0 1px rgba(0,255,156,.06),0 8px 26px rgba(0,255,156,.09),inset 0 0 14px rgba(0,255,156,.035)!important;transform:translateY(-2px)!important}
@media(max-width:760px){
 .header .nav{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;min-height:60px!important;padding:9px 13px!important}
 .header .brand{flex:1 1 auto!important;min-width:0!important;max-width:calc(100% - 48px)!important}
 .header .brand-logo{width:34px!important;height:34px!important;flex:0 0 34px!important}
 .header .brand-text{font-size:13px!important;white-space:normal!important;line-height:1.15!important}
 .header .menu-toggle{display:inline-flex!important;flex:0 0 40px!important;align-items:center!important;justify-content:center!important;width:40px!important;height:40px!important;border:1px solid rgba(0,255,156,.38)!important;border-radius:10px!important;background:rgba(0,18,13,.28)!important;color:#00ff9c!important;font-size:23px!important;cursor:pointer!important}
 .header .menu{display:none!important;position:absolute!important;top:calc(100% + 1px)!important;left:10px!important;right:10px!important;width:auto!important;max-width:none!important;flex-direction:column!important;align-items:stretch!important;gap:4px!important;padding:10px!important;border:1px solid rgba(0,255,156,.25)!important;border-radius:12px!important;background:rgba(1,12,10,.94)!important;box-shadow:0 12px 28px rgba(0,0,0,.28)!important;z-index:9999!important;overflow:visible!important}
 .header .menu.is-open{display:flex!important}
 .header .menu a{display:block!important;width:100%!important;padding:11px 12px!important;font-size:13px!important;white-space:normal!important;border-radius:8px!important}
 #layanan .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
 #layanan .service-card{min-height:170px!important;padding:15px!important}
 #layanan .service-card h3{font-size:14px!important}
 #layanan .service-card p{font-size:12px!important}
}
@media(max-width:390px){#layanan .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}#layanan .service-card{padding:12px!important}#layanan .service-card h3{font-size:12px!important}#layanan .service-card p{font-size:11px!important}}
@media(min-width:761px){.header .menu-toggle{display:none!important}.header .menu{display:flex!important;position:static!important}}
@media(prefers-reduced-motion:reduce){#layanan::before,#layanan::after,#layanan .service-card::before{animation:none!important}}


/* FINAL MICRO-TUNING: softer MARTONDI connected glow + natural header spacing.
   Keep the existing page/background artwork unchanged. */
header.header,.header{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  border-bottom:1px solid rgba(0,255,156,.10)!important;
}
header.header::before,header.header::after,.header::before,.header::after{
  content:none!important;
  display:none!important;
  background:none!important;
  opacity:0!important;
}
.header .nav,.header .nav::before,.header .nav::after{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
/* Close the excess gap after the navigation without changing the hero design. */
#beranda.hero{margin-top:0!important;padding-top:clamp(18px,2.4vw,30px)!important;}
#beranda .hero-inner{margin-top:0!important;padding-top:0!important;}
#beranda .hero-copy{margin-top:0!important;}
/* Quiet, elegant glow on the service cards linked to MARTONDI. */
#layanan .service-card{
  border-color:rgba(0,255,156,.20)!important;
  box-shadow:0 7px 22px rgba(0,0,0,.18),inset 0 0 12px rgba(0,255,156,.012)!important;
}
#layanan .service-card::before{
  background:linear-gradient(110deg,transparent 0%,rgba(0,255,156,.018) 46%,rgba(0,255,156,.055) 50%,rgba(0,255,156,.018) 54%,transparent 100%)!important;
  opacity:.65!important;
  animation-duration:16s!important;
}
#layanan .service-card:hover,#layanan .service-card:focus-visible,#layanan .service-card.open{
  border-color:rgba(0,255,156,.48)!important;
  box-shadow:0 0 0 1px rgba(0,255,156,.035),0 8px 22px rgba(0,255,156,.065),inset 0 0 10px rgba(0,255,156,.02)!important;
}
@media(max-width:760px){
  #beranda.hero{padding-top:14px!important;}
}

/* ===== CSS BLOCK 71 ===== */
/* Mobile only: connect hero content to the header; preserve the existing cyber background. */
@media (max-width: 760px) {
  header.header { margin-bottom: 0 !important; }
  header.header .nav { margin-bottom: 0 !important; }
  main { margin-top: 0 !important; padding-top: 0 !important; }
  #beranda.hero { margin-top: 0 !important; padding-top: 8px !important; }
  #beranda .hero-inner {
    display: flex !important; flex-direction: column !important;
    align-items: stretch !important; gap: 12px !important;
    margin: 0 auto !important; padding: 0 18px !important;
  }
  #beranda .hero-copy { margin: 0 !important; padding-top: 0 !important; }
  #beranda .eyebrow { margin-top: 0 !important; }
  /* The large desktop logo-stage creates a blank row on phones; header logo stays untouched. */
  #beranda .logo-stage { display: none !important; }
  #beranda .hero-main-title { margin-top: 18px !important; }
  #beranda .hero-copy > p { margin-bottom: 12px !important; }
}
@media (max-width: 420px) {
  #beranda.hero { padding-top: 5px !important; }
  #beranda .hero-inner { gap: 8px !important; padding-left: 15px !important; padding-right: 15px !important; }
  #beranda .hero-main-title { margin-top: 14px !important; }
}

/* ===== CSS BLOCK 72 ===== */
/* Keep the real header logo visible on mobile and restore balanced hero spacing. */
@media (max-width: 760px) {
  .header .brand, header.header .brand { display:flex !important; visibility:visible !important; opacity:1 !important; align-items:center !important; }
  .header .brand-logo, header.header .brand-logo { display:block !important; visibility:visible !important; opacity:1 !important; width:36px !important; height:36px !important; flex:0 0 36px !important; object-fit:contain !important; }
  .header .brand-text, header.header .brand-text { display:block !important; visibility:visible !important; opacity:1 !important; font-size:14px !important; line-height:1.15 !important; }
  .header .brand-text span, header.header .brand-text span { display:block !important; font-size:8px !important; line-height:1.2 !important; }
  #beranda .logo-stage { display:flex !important; visibility:visible !important; opacity:1 !important; justify-content:center !important; align-items:center !important; margin:8px auto 0 !important; max-width:220px !important; }
  #beranda .logo-stage img { width:min(190px,70vw) !important; max-height:150px !important; object-fit:contain !important; border-radius:14px !important; }
  #beranda .logo-stage::before { width:150px !important; height:150px !important; filter:blur(22px) !important; opacity:.45 !important; }
  #beranda.hero { padding-top:14px !important; }
  #beranda .hero-inner { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:14px !important; padding:10px 16px 28px !important; margin:0 auto !important; }
  #beranda .hero-copy { margin:0 !important; padding:0 !important; }
  #beranda .hero-main-title { margin-top:12px !important; }
}
@media (max-width:420px) {
  .header .brand-logo, header.header .brand-logo { width:33px !important; height:33px !important; flex-basis:33px !important; }
  #beranda .hero-inner { gap:10px !important; padding-left:14px !important; padding-right:14px !important; }
  #beranda .logo-stage img { width:min(160px,62vw) !important; max-height:125px !important; }
}

/* FIX FINAL: beri ruang aman di bawah header pada HP agar logo dan judul tidak tertutup */
@media (max-width: 600px) {
  header.header { position: sticky !important; top: 0 !important; z-index: 1000 !important; }
  main { position: relative !important; }
  main > .section, main > section.section { scroll-margin-top: 86px !important; }
  #beranda.hero { padding-top: 24px !important; }
  #beranda .hero-inner { padding-top: 14px !important; }
  #beranda .logo-stage { margin-top: 14px !important; }
  #kontak, #layanan, #tentang, #pembayaran, #dukungan { scroll-margin-top: 90px !important; }
  #kontak .section-inner:first-child { padding-top: 12px !important; }
  .section-head { position: relative !important; z-index: 1 !important; }
}

/* ===== CSS BLOCK 73 ===== */
/* Final safe fix: fixed header stays visible even when sticky is affected by parent layout. */
header.header {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important; z-index: 10000 !important; margin: 0 !important;
  transform: none !important;
}
/* Keep content spacing intact by reserving the header's normal space. */
body { padding-top: 0 !important; }
@media (max-width: 760px) {
  header.header { position: fixed !important; }
  /* Avoid content hiding under the fixed header without creating a large gap. */
  body { padding-top: 68px !important; }
  /* Major performance fix: stop decorative motion on mobile, retain static cyber backgrounds. */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #layanan .service-card::before, #layanan .service-card::after,
  #layanan::before, #layanan::after { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}
/* Ruang tegas di dalam kolom Privasi & Keamanan khusus HP */
@media (max-width: 760px) {
  .cyber-privacy-inner { padding-left: 16px !important; padding-right: 16px !important; }
  .cyber-privacy-copy {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 28px 24px 32px !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }
  .cyber-privacy-copy h2 {
    margin: 0 0 22px !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere;
  }
  .cyber-privacy-copy > p {
    margin: 0 0 26px !important;
    padding: 0 !important;
    line-height: 1.9 !important;
    overflow-wrap: anywhere;
  }
  .cyber-privacy-points {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 20px !important;
  }
  .cyber-privacy-points span {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.85 !important;
    overflow-wrap: anywhere;
  }
  .cyber-privacy-points b { margin-top: 2px !important; }
}

/* Mobile privacy panel: match the roomy spacing and readable layout of the process timeline cards. */
@media (max-width: 760px) {
  .cyber-privacy-inner { box-sizing:border-box !important; padding: 24px 18px !important; }
  .cyber-privacy-copy { box-sizing:border-box !important; width:100% !important; min-width:0 !important; padding:24px 20px !important; margin:0 !important; border-radius:16px !important; }
  .cyber-privacy-copy h2 { margin:0 0 18px !important; line-height:1.35 !important; overflow-wrap:anywhere; }
  .cyber-privacy-copy>p { margin:0 0 20px !important; line-height:1.8 !important; }
  .cyber-privacy-points { display:flex !important; flex-direction:column !important; gap:14px !important; margin:0 !important; padding:0 !important; }
  .cyber-privacy-points>* { display:grid !important; grid-template-columns:22px minmax(0,1fr) !important; align-items:start !important; column-gap:10px !important; margin:0 !important; padding:12px 0 !important; line-height:1.7 !important; min-width:0 !important; overflow-wrap:anywhere; }
  .cyber-privacy-points>* b { display:block !important; margin:0 !important; text-align:center !important; line-height:1.7 !important; }
}
@media (max-width:390px) {
  .cyber-privacy-inner { padding:20px 12px !important; }
  .cyber-privacy-copy { padding:22px 16px !important; }
  .cyber-privacy-points>* { grid-template-columns:20px minmax(0,1fr) !important; column-gap:8px !important; }
}

/* ===== CSS BLOCK 74 ===== */
@media (max-width: 760px) {
  .home-privacy.cyber-privacy .cyber-privacy-inner {
    box-sizing: border-box !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-copy {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 22px 22px 24px !important;
    margin: 0 !important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-copy > p {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    text-align: justify !important;
    line-height: 1.85 !important;
    overflow-wrap: anywhere !important;
  }
}
@media (max-width: 420px) {
  .home-privacy.cyber-privacy .cyber-privacy-inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .home-privacy.cyber-privacy .cyber-privacy-copy {
    padding: 20px 19px 22px !important;
  }
}

/* ===== CSS BLOCK 75 ===== */
@media (max-width:760px){
  /* No full-screen dimmer: popup is limited to the menu area. */
  html body.martondi-menu-open::before{content:none !important; display:none !important;}
  html body .header .menu-toggle{
    position:relative !important; z-index:10002 !important; pointer-events:auto !important;
    cursor:pointer !important; background:transparent !important; border:0 !important;
    box-shadow:none !important; outline:none !important;
  }
  html body .header .menu{
    display:none !important; position:fixed !important; top:39% !important; left:50% !important;
    right:auto !important; bottom:auto !important; transform:translate(-50%,-50%) !important;
    width:min(88vw,360px) !important; max-width:88vw !important; max-height:76vh !important;
    overflow-y:auto !important; flex-direction:column !important; align-items:center !important;
    justify-content:center !important; gap:13px !important; margin:0 !important; padding:8px 0 !important;
    background:transparent !important; border:0 !important; outline:0 !important; border-radius:0 !important;
    box-shadow:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
    z-index:10001 !important;
  }
  html body .header .menu.is-open{
    display:flex !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
  }
  html body .header .menu.is-open a,
  html body .header .menu.is-open a:link,
  html body .header .menu.is-open a:visited{
    display:block !important; width:100% !important; box-sizing:border-box !important;
    min-height:0 !important; margin:0 !important; padding:9px 6px !important;
    text-align:center !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
    font-size:17px !important; line-height:1.5 !important; font-weight:700 !important;
    text-decoration:none !important; background:transparent !important; border:0 !important;
    border-radius:0 !important; box-shadow:none !important; opacity:1 !important; visibility:visible !important;
    transition:color .15s ease !important;
  }
  html body .header .menu.is-open a:active,
  html body .header .menu.is-open a:focus-visible{
    color:#00ffad !important; -webkit-text-fill-color:#00ffad !important;
    text-shadow:none !important;
    outline:none !important;
  }
}

/* ===== CSS BLOCK 76 ===== */
@media (max-width:760px){
  /* Menu popup stays text-only: no line, underline, panel, or button glow. */
  html body .header .menu.is-open,
  html body .header .menu.is-open a,
  html body .header .menu.is-open a:link,
  html body .header .menu.is-open a:visited,
  html body .header .menu.is-open a:hover,
  html body .header .menu.is-open a:active,
  html body .header .menu.is-open a:focus,
  html body .header .menu.is-open a:focus-visible{
    border:0 !important; border-top:0 !important; border-right:0 !important;
    border-bottom:0 !important; border-left:0 !important; outline:0 !important;
    text-decoration:none !important; background:transparent !important;
    box-shadow:none !important; border-radius:0 !important;
  }
  html body .header .menu.is-open a::before,
  html body .header .menu.is-open a::after{
    content:none !important; display:none !important; border:0 !important;
    background:none !important; box-shadow:none !important;
  }
  html body .header .menu-toggle,
  html body .header .menu-toggle:active,
  html body .header .menu-toggle[aria-expanded="true"]{
    background:transparent !important; border:0 !important; box-shadow:none !important;
    outline:none !important; transform:none !important; filter:none !important;
  }
  html body .header .menu.is-open a:active,
  html body .header .menu.is-open a:focus-visible{
    color:#00ffad !important; -webkit-text-fill-color:#00ffad !important;
    text-shadow:none !important;
  }
}

/* ===== CSS BLOCK 77 ===== */
@media (max-width:760px){
  html body.martondi-menu-open::before,
  html body.martondi-menu-open::after{content:none!important;display:none!important;opacity:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important;}
  html body.martondi-menu-open,
  html body.martondi-menu-open *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  html body .header .menu.is-open{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;}
  html body .header .menu.is-open a,
  html body .header .menu.is-open a:link,
  html body .header .menu.is-open a:visited{color:#fff!important;-webkit-text-fill-color:#fff!important;text-decoration:none!important;border:0!important;box-shadow:none!important;background:transparent!important;}
  html body .header .menu.is-open a:active,
  html body .header .menu.is-open a:focus-visible{color:#00ffad!important;-webkit-text-fill-color:#00ffad!important;text-shadow:none!important;text-decoration:none!important;border:0!important;box-shadow:none!important;background:transparent!important;}
}

/* ===== CSS BLOCK 78 ===== */
@media (max-width:760px){
  #martondi-menu-backdrop{display:block!important;position:fixed!important;inset:0!important;z-index:9990!important;background:rgba(0,0,0,.94)!important;backdrop-filter:blur(9px)!important;-webkit-backdrop-filter:blur(9px)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .18s ease,visibility .18s ease!important;}
  #martondi-menu-backdrop.is-visible{opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
  html body .header .menu{z-index:10001!important;}
  html body .header .menu-toggle{z-index:10002!important;}
  html body .header .menu.is-open a,
  html body .header .menu.is-open a:link,
  html body .header .menu.is-open a:visited{color:#fff!important;-webkit-text-fill-color:#fff!important;background:transparent!important;border:0!important;box-shadow:none!important;text-decoration:none!important;}
  html body .header .menu.is-open a:active,
  html body .header .menu.is-open a:focus-visible,
  html body .header .menu.is-open a.active{color:#00ffad!important;-webkit-text-fill-color:#00ffad!important;text-shadow:none!important;background:transparent!important;border:0!important;box-shadow:none!important;text-decoration:none!important;outline:0!important;}
  html body .header .menu.is-open,html body .header .menu.is-open a::before,html body .header .menu.is-open a::after{border:0!important;box-shadow:none!important;background:transparent!important;}
}
@media (min-width:761px){#martondi-menu-backdrop{display:none!important;}}

/* ===== CSS BLOCK 79 ===== */
/* Desktop and mobile: click/selected state changes text color only, without glow or box effects. */
@media (min-width:761px){
  html body .header .menu a.active,
  html body .header .menu a:active,
  html body .header .menu a:focus-visible{
    color:#00ffad!important; -webkit-text-fill-color:#00ffad!important;
    text-shadow:none!important; background:transparent!important;
    border-color:transparent!important; box-shadow:none!important;
    text-decoration:none!important; outline:none!important;
  }
}

/* ===== CSS BLOCK 80 ===== */
/* Tampilan premium: X tetap terlihat dan berfungsi, hanya kotak/bingkainya yang dihilangkan. */
.service-modal-close {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  padding:0 !important;
  color:#fff !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none !important;
  text-shadow:none !important;
  cursor:pointer !important;
  font-size:28px !important;
  line-height:1 !important;
  transition:color .18s ease !important;
}
.service-modal-close:hover,
.service-modal-close:focus-visible { color:#00ffad !important; background:transparent !important; border:0 !important; box-shadow:none !important; outline:none !important; }
.service-modal-box h3 { margin-right: 42px !important; }

/* ===== CSS BLOCK 81 ===== */
/* Layanan tampil minimalis tanpa kotak; area layanan tetap dapat dipilih dan dibuka. */
#layanan .service-grid{
  gap:clamp(22px,3vw,42px)!important;
}
#layanan .service-card,
#layanan .service-card.open{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:22px 8px!important;
  transform:none!important;
  outline:0!important;
}
#layanan .service-card::before{display:none!important;content:none!important;}
#layanan .service-card:hover,
#layanan .service-card:focus-visible,
#layanan .service-card:active{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  transform:none!important;
}
#layanan .service-card h3{transition:color .18s ease!important;}
#layanan .service-card:hover h3,
#layanan .service-card:focus-visible h3,
#layanan .service-card:active h3{color:#00ffad!important;}
@media(max-width:760px){#layanan .service-card{padding:18px 4px!important;}}

/* ===== CSS BLOCK 82 ===== */
/* Beranda: label LAYANAN DOKUMEN • DATA • DIGITAL tanpa kotak atau titik bercahaya. */
#beranda .hero-copy .eyebrow{
  display:inline-block!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  outline:0!important;
  text-shadow:none!important;
}
#beranda .hero-copy .eyebrow::before{
  display:none!important;content:none!important;
  box-shadow:none!important;filter:none!important;
}

/* ===== CSS BLOCK 83 ===== */
/* Pilihan layanan: tulisan 21 Layanan tetap ada, hanya kotak/bingkainya dihilangkan. */
html body #layanan .service-count{
 display:flex!important;align-items:center!important;gap:14px!important;width:max-content!important;max-width:100%!important;
 padding:8px 0!important;margin:0 0 22px!important;border:0!important;border-radius:0!important;
 background:transparent!important;box-shadow:none!important;outline:0!important;
}
html body #layanan .service-count>span{
 display:inline-block!important;position:relative!important;padding:0!important;margin:0!important;
 border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
 color:#65fbd2!important;font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;
 font-size:clamp(28px,3vw,38px)!important;font-weight:800!important;line-height:1!important;
 letter-spacing:.06em!important;text-shadow:none!important;
}
html body #layanan .service-count strong{color:#e6fff6!important;font-weight:700!important;}
html body #layanan .service-count small{color:#9bb9b0!important;}
html body #layanan .service-card .service-no{
 display:inline-block!important;width:auto!important;height:auto!important;min-width:0!important;
 padding:0!important;margin:0!important;border:0!important;border-radius:0!important;
 background:transparent!important;box-shadow:none!important;outline:0!important;
 color:#65fbd2!important;font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;
 font-size:12px!important;font-weight:700!important;line-height:1.4!important;letter-spacing:.16em!important;
 text-shadow:none!important;
}
html body #layanan .service-card .service-no::before,
html body #layanan .service-card .service-no::after{content:none!important;display:none!important;}
html body #layanan .service-card .service-top{gap:0!important;}
html body #layanan .service-card:hover .service-no,
html body #layanan .service-card:focus-visible .service-no{color:#00ffad!important;text-shadow:none!important;}

/* ===== CSS BLOCK 84 ===== */
/* Sejajarkan angka 21 secara vertikal dengan judul dan deskripsi layanan. */
html body #layanan .service-count{
  display:flex!important; flex-direction:row!important; align-items:center!important;
  justify-content:flex-start!important; gap:14px!important;
  padding:0!important; margin:0 0 22px!important;
}
html body #layanan .service-count>span{
  display:flex!important; align-items:center!important; justify-content:center!important;
  flex:0 0 auto!important; line-height:1!important; height:auto!important;
  transform:translateY(1px)!important;
}
html body #layanan .service-count>div{
  display:flex!important; flex-direction:column!important; justify-content:center!important;
  align-items:flex-start!important; min-height:0!important; gap:2px!important;
}
html body #layanan .service-count strong{display:block!important; line-height:1.25!important; margin:0!important; padding:0!important;}
html body #layanan .service-count small{display:block!important; line-height:1.45!important; margin:0!important; padding:0!important;}

/* ===== CSS BLOCK 85 ===== */
/* Angka 21 dan label layanan: gaya normal, tajam, tanpa cahaya/buram. */
html body #layanan .service-count,
html body #layanan .service-count *,
html body #layanan .service-card .service-no {
  text-shadow:none!important; filter:none!important; -webkit-filter:none!important;
  box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
  animation:none!important; transition:none!important;
}
html body #layanan .service-count {
  display:flex!important; flex-direction:row!important; align-items:center!important; gap:14px!important;
  background:transparent!important; border:0!important; outline:0!important; border-radius:0!important;
}
html body #layanan .service-count>span {
  color:#65fbd2!important; font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;
  font-size:clamp(28px,3vw,38px)!important; font-weight:700!important; line-height:1!important;
  letter-spacing:0!important; transform:none!important; opacity:1!important;
}
html body #layanan .service-count strong {color:#e6fff6!important; text-shadow:none!important;}
html body #layanan .service-count small {color:#9bb9b0!important; text-shadow:none!important;}
html body #layanan .service-card .service-no {color:#65fbd2!important; text-shadow:none!important;}

/* ===== CSS BLOCK 86 ===== */
/* Normal, tajam: hilangkan semua glow/blur pada label 21 Layanan dan nomor kartu. */
html body #layanan .service-count,
html body #layanan .service-count *,
html body #layanan .service-count::before,
html body #layanan .service-count::after,
html body #layanan .service-count *::before,
html body #layanan .service-count *::after,
html body #layanan .service-card .service-no,
html body #layanan .service-card .service-no::before,
html body #layanan .service-card .service-no::after {
  text-shadow:none!important; filter:none!important; -webkit-filter:none!important;
  box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
  animation:none!important; transition:none!important; opacity:1!important;
}
html body #layanan .service-count,
html body #layanan .service-count > span,
html body #layanan .service-count > div,
html body #layanan .service-count strong,
html body #layanan .service-count small,
html body #layanan .service-card .service-no {
  transform:none!important; -webkit-text-stroke:0!important;
}
html body #layanan .service-count {background:transparent!important;border:0!important;outline:0!important;border-radius:0!important;}
html body #layanan .service-count > span {color:#65fbd2!important;}
html body #layanan .service-count strong {color:#e6fff6!important;}
html body #layanan .service-count small {color:#9bb9b0!important;}
html body #layanan .service-card .service-no {color:#65fbd2!important;}

/* ===== CSS BLOCK 87 ===== */
/* Tampilan normal dan tajam: hilangkan aura/blur dekoratif di area pilihan layanan. */
html body #layanan,
html body #layanan .section-inner,
html body #layanan .service-count,
html body #layanan .service-count *,
html body #layanan .service-card,
html body #layanan .service-card *,
html body #layanan .service-grid {
  filter:none !important; -webkit-filter:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html body #layanan::before, html body #layanan::after,
html body #layanan .section-inner::before, html body #layanan .section-inner::after,
html body #layanan .service-count::before, html body #layanan .service-count::after,
html body #layanan .service-count *::before, html body #layanan .service-count *::after,
html body #layanan .service-card::before, html body #layanan .service-card::after {
  content:none !important; display:none !important; filter:none !important;
  box-shadow:none !important; background-image:none !important;
}
html body #layanan .service-count {
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
html body #layanan .service-count > span {
  background:transparent !important; border:0 !important; box-shadow:none !important;
  color:#65fbd2 !important; text-shadow:none !important; filter:none !important;
}
html body #layanan .service-count strong,
html body #layanan .service-count small,
html body #layanan .service-card .service-no {
  text-shadow:none !important; filter:none !important; box-shadow:none !important;
}

/* ===== CSS BLOCK 88 ===== */
/* Besarkan label utama Beranda tanpa glow atau blur. */
html body #beranda .hero-copy .eyebrow{
  font-size:15px!important;
  line-height:1.5!important;
  letter-spacing:.14em!important;
  font-weight:800!important;
  text-shadow:none!important;
  filter:none!important;
  opacity:1!important;
}
@media(max-width:760px){
  html body #beranda .hero-copy .eyebrow{
    font-size:12px!important;
    line-height:1.55!important;
    letter-spacing:.08em!important;
  }
}
/* ===== MARTONDI FIX: POSISI HEADER DAN BERANDA SAAT AWAL DIBUKA ===== */
/* Override khusus layout; warna, isi, dan fitur lain tidak diubah. */
html {
  scroll-padding-top: 0 !important;
}
body {
  padding-top: 0 !important;
}
header.header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 100% !important;
  margin-top: 0 !important;
}
main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
main > #beranda,
main > section#beranda,
#beranda.hero {
  margin-top: 0 !important;
  scroll-margin-top: 0 !important;
}
#beranda.hero {
  padding-top: 36px !important;
}
#beranda .hero-inner {
  padding-top: 42px !important;
}
@media (max-width: 760px) {
  #beranda.hero {
    padding-top: 24px !important;
  }
  #beranda .hero-inner {
    padding: 24px 16px 34px !important;
  }
}
@media (max-width: 420px) {
  #beranda.hero {
    padding-top: 20px !important;
  }
  #beranda .hero-inner {
    padding: 20px 14px 30px !important;
  }
}


/* ===== MARTONDI: HEADER TRANSPARAN 100% DAN TETAP DI ATAS ===== */
/* Hanya mengatur header; logo, menu, teks, dan desain halaman tetap mengikuti CSS asli. */
html body header.header,
html body .header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 10010 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}
html body header.header::before,
html body header.header::after,
html body .header::before,
html body .header::after {
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== MARTONDI: JARAK NAPAS DI BAWAH HEADER TRANSPARAN ===== */
/* Header tetap fixed dan transparan; konten diberi ruang supaya tidak terasa menempel. */
#beranda.hero {
  padding-top: 58px !important;
}
#beranda .hero-inner {
  padding-top: 54px !important;
}
/* Saat menu menuju bagian lain, judul bagian tidak menempel di tepi atas layar. */
#layanan,
#tentang,
#dukungan,
#kontak {
  scroll-margin-top: 96px !important;
}
@media (max-width: 760px) {
  #beranda.hero {
    padding-top: 34px !important;
  }
  #beranda .hero-inner {
    padding: 38px 16px 34px !important;
  }
  #layanan,
  #tentang,
  #dukungan,
  #kontak {
    scroll-margin-top: 78px !important;
  }
}
@media (max-width: 420px) {
  #beranda.hero {
    padding-top: 28px !important;
  }
  #beranda .hero-inner {
    padding: 32px 14px 30px !important;
  }
}


/* ===== MARTONDI: TAMBAHAN JARAK UNTUK LAYAR HP ===== */
/* Menurunkan konten beranda sedikit lagi di HP; header tetap transparan dan fixed. */
@media (max-width: 760px) {
  #beranda.hero {
    padding-top: 48px !important;
  }
  #beranda .hero-inner {
    padding-top: 52px !important;
  }
  #layanan,
  #tentang,
  #dukungan,
  #kontak {
    scroll-margin-top: 88px !important;
  }
}
@media (max-width: 420px) {
  #beranda.hero {
    padding-top: 42px !important;
  }
  #beranda .hero-inner {
    padding-top: 46px !important;
  }
}


/* ===== MARTONDI: JARAK ANTARMENU ===== */
/* Longgarkan jarak antar tautan navigasi tanpa mengubah posisi header. */
.header .menu {
  gap: clamp(22px, 2.2vw, 38px) !important;
}
.header .menu a {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
@media (max-width: 760px) {
  .header .menu {
    gap: 22px !important;
  }
  .header .menu a {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
}

/* ===== MARTONDI: JARAK HEADER KE KONTEN LEBIH LEGA ===== */
/* Tambah ruang di bawah header transparan; tidak mengubah jarak antar-menu. */
@media (max-width: 760px) {
  #beranda.hero {
    padding-top: 76px !important;
  }
  #beranda .hero-inner {
    padding-top: 64px !important;
  }
}
@media (max-width: 420px) {
  #beranda.hero {
    padding-top: 68px !important;
  }
  #beranda .hero-inner {
    padding-top: 58px !important;
  }
}

/* ===== MARTONDI: JARAK AMAN DI BAWAH HEADER UNTUK SEMUA BAGIAN ===== */
/* Header tetap transparan dan fixed. Beri ruang saat menu menuju tiap bagian. */
html {
  scroll-padding-top: 100px !important;
}
main > section,
main > .section,
main section[id],
#beranda.hero,
#layanan,
#tentang,
#dukungan,
#kontak,
#pembayaran {
  scroll-margin-top: 100px !important;
}
/* Sedikit ruang visual di awal tiap bagian, bukan hanya Beranda. */
main > section:not(#beranda),
main > .section:not(#beranda),
main section[id]:not(#beranda):not(.service-card) {
  padding-top: clamp(44px, 5vw, 64px) !important;
}
@media (max-width: 760px) {
  html { scroll-padding-top: 92px !important; }
  main > section,
  main > .section,
  main section[id],
  #beranda.hero,
  #layanan,
  #tentang,
  #dukungan,
  #kontak,
  #pembayaran {
    scroll-margin-top: 92px !important;
  }
  main > section:not(#beranda),
  main > .section:not(#beranda),
  main section[id]:not(#beranda):not(.service-card) {
    padding-top: 48px !important;
  }
}


/* ===== MARTONDI: TAMBAH SEDIKIT JARAK UNTUK SEMUA BAGIAN ===== */
/* Tambahan ruang yang seragam di bawah header transparan. */
main > section:not(#beranda),
main > .section:not(#beranda),
main section[id]:not(#beranda):not(.service-card) {
  padding-top: clamp(100px, 6vw, 50px) !important;
}
@media (max-width: 900px) {
  main > section:not(#beranda),
  main > .section:not(#beranda),
  main section[id]:not(#beranda):not(.service-card) {
    padding-top: 70px !important;
  }
}

/* ===== MARTONDI: JARAK HEADER KE TULISAN PERTAMA ===== */
/* Override terakhir agar ruang ini tetap berlaku tanpa mengubah desain lain. */
html body main #beranda.hero {
  padding-top: 85px !important;
}
html body main #beranda.hero .hero-inner {
  padding-top: 45px !important;
}
@media (max-width: 900px) {
  html body main #beranda.hero {
    padding-top: 40px !important;
  }
  html body main #beranda.hero .hero-inner {
    padding-top: 34px !important;
  }
}
@media (max-width: 420px) {
  html body main #beranda.hero {
    padding-top: 90px !important;
  }
  html body main #beranda.hero .hero-inner {
    padding-top: 28px !important;
  }
}

/* MARTONDI - tiga perbaikan terbatas sesuai permintaan */
/* HP: cegah sorotan teks biru saat kartu layanan disentuh; beri umpan balik halus. */
html body #layanan .service-card,
html body #layanan .service-card * {
  -webkit-tap-highlight-color: transparent !important;
}
@media (max-width: 760px) {
  html body #layanan .service-card,
  html body #layanan .service-card * {
    -webkit-user-select: none !important;
    user-select: none !important;
  }
  html body #layanan .service-card:active {
    transform: scale(.985) !important;
    transition: transform .16s ease-out !important;
  }
}
/* PC: logo Beranda lebih kecil dan punya jarak yang cukup dari header. */
@media (min-width: 900px) {
  html body #beranda .hero-inner {
    padding-top: 200px !important;
  }
  html body #beranda .logo-stage {
    min-height: 200px !important;
  }
  html body #beranda .logo-stage img {
    width: min(220px, 100%) !important;
    max-width: 220px !important;
    height: auto !important;
  }
}
/* Elemen tombol "Kembali ke Layanan" di bagian Kontak */
#kontak .back-link { display: none !important; }
@media screen and (max-width: 600px) {
  html body #beranda .hero-copy .eyebrow {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    font-size: clamp(7px, 2.5vw, 11px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  html body #beranda .hero-copy .eyebrow br {
    display: none !important;
  }
}

html body #kontak .back-link {
  display: none !important;
}

/* FIX FINAL HP: tiga label keamanan tetap satu baris */
@media screen and (max-width: 600px) {
  html body #beranda .hero-copy .eyebrow {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: clamp(6px, 2.1vw, 9px) !important;
    letter-spacing: -0.02em !important;
    gap: 3px !important;
  }
  html body #beranda .hero-copy .eyebrow > *,
  html body #beranda .hero-copy .eyebrow span,
  html body #beranda .hero-copy .eyebrow strong,
  html body #beranda .hero-copy .eyebrow b {
    display: inline !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body #beranda .hero-copy .eyebrow br { display: none !important; }
}

/* Pastikan tombol kembali disembunyikan hanya di bagian Kontak. */
html body #kontak .back-link { display: none !important; }