:root{--bg:#031225;--bg2:#061b38;--panel:#082342;--card:#0a2748;--cyan:#25ddff;--blue:#168cff;--text:#f5f9ff;--muted:#a9bdd3;--line:rgba(255,255,255,.11);--shadow:0 24px 70px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:linear-gradient(180deg,#031225 0,#061a34 55%,#020c1b 100%);color:var(--text);line-height:1.6}a{color:inherit;text-decoration:none}button,input{font:inherit}.container{width:min(1180px,92%);margin:auto}
header{position:sticky;top:0;z-index:80;background:linear-gradient(180deg,#15527d 0%,#0d3b63 100%);backdrop-filter:blur(18px);border-bottom:1px solid rgba(37,221,255,.32);box-shadow:0 4px 22px rgba(0,0,0,.22)}.nav{min-height:76px;display:flex;align-items:center;gap:28px}.brand img{height:62px;width:auto;display:block;filter:drop-shadow(0 0 7px rgba(110,225,255,.28))}.nav-links{margin-left:auto;display:flex;align-items:center;gap:22px;list-style:none;padding:0}.nav-links a{font-size:13px;font-weight:800;color:#dce9f7}.nav-links a:hover,.nav-links a.active{color:var(--cyan)}.admin-btn{white-space:nowrap;padding:10px 15px;border:1px solid rgba(37,221,255,.4);border-radius:999px;background:rgba(20,139,255,.13);color:#fff!important}.menu{display:none;background:none;border:0;color:#fff;font-size:28px}
/* New top hero inspired by the supplied reference; the existing 3 slides remain below it. */
.intro-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 72% 50%,rgba(21,143,255,.28),transparent 34%),linear-gradient(135deg,#02132c,#07376e 60%,#021225);padding:48px 0 38px;border-bottom:1px solid rgba(37,221,255,.08)}.intro-grid{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:40px}.badge{display:inline-flex;padding:7px 14px;border-radius:999px;background:linear-gradient(135deg,#087eff,#0bd7ff);font-size:11px;font-weight:900}.intro h1{font-size:clamp(40px,5vw,66px);line-height:1.02;margin:16px 0 12px}.intro h1 span{color:var(--cyan)}.intro p{max-width:610px;color:#c0d3e7;font-size:16px}.intro-actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:11px;padding:12px 18px;font-weight:900;cursor:pointer}.primary{background:linear-gradient(135deg,#158aff,#24d9ff);color:#02152a}.ghost{border-color:var(--line);background:rgba(255,255,255,.04)}.intro-points{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}.intro-point{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035);font-size:12px}.intro-point b{color:var(--cyan);margin-right:7px}.showcase{min-height:420px;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:13px;align-items:center}.showcase-card{height:175px;border:1px solid rgba(76,207,255,.25);border-radius:22px;background:linear-gradient(180deg,rgba(11,50,91,.95),rgba(3,23,47,.96));box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;transition:.25s}.showcase-card:hover{transform:translateY(-5px);border-color:rgba(37,221,255,.7)}.showcase-card img{height:112px;width:100%;object-fit:contain}.showcase-card strong{font-size:12px}.showcase-card.main{grid-column:2;grid-row:1 / span 2;height:360px;background:radial-gradient(circle at 50% 35%,rgba(0,190,255,.28),transparent 42%),#061d3b}.showcase-card.main img{height:270px}.showcase-card:nth-child(1){grid-column:1}.showcase-card:nth-child(3){grid-column:3}.showcase-card:nth-child(4){grid-column:1}.showcase-card:nth-child(5){grid-column:3}
/* Existing three slides are intentionally retained. */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#061b36,#041528);min-height:600px}.slide{display:none;min-height:600px}.slide.active{display:block}.hero-grid{min-height:600px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:35px}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#55e4ff;font-weight:900;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.hero h2{font-size:clamp(38px,5vw,64px);line-height:1.05;margin:16px 0}.hero h2 span{color:#55e4ff}.hero p{color:var(--muted);font-size:18px;max-width:640px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}.hero-image{width:100%;height:440px;object-fit:cover;border-radius:28px;border:1px solid var(--line);box-shadow:var(--shadow)}.hero-image-wrap{position:relative}.dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:8px}.dot{width:10px;height:10px;border:0;border-radius:50%;background:#71849b;opacity:.6;cursor:pointer}.dot.active{opacity:1;background:#55e4ff}.arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.3);color:#fff;font-size:28px;cursor:pointer}.arrow.prev{left:18px}.arrow.next{right:18px}
.section{padding:80px 0}.heading{display:flex;justify-content:space-between;gap:25px;align-items:end}.heading h2{font-size:40px;margin:8px 0}.heading p{color:var(--muted)}.search{margin:28px 0 18px}.search input{width:100%;padding:17px;border:1px solid var(--line);border-radius:14px;background:#071a32;color:#fff;outline:none}.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}.chip{padding:10px 15px;border-radius:999px;border:1px solid var(--line);background:#0a2039;color:#d8e8f7;cursor:pointer}.chip.active{border-color:var(--cyan);background:rgba(14,163,255,.15);color:var(--cyan)}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:stretch}.card{display:flex;flex-direction:column;min-width:0;background:linear-gradient(180deg,#0a2748,#071d36);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.16)}.card-img{height:148px;padding:12px;background:linear-gradient(180deg,#06182d,#0a2545);display:flex;align-items:center;justify-content:center}.card-img img{width:132px;height:132px;object-fit:contain;display:block}.card-img .product-logo-1{height:128px;width:auto}.card-img .product-logo-2{height:128px;width:128px}.card-img .product-logo-3{height:128px;width:128px}.card-img .product-logo-4{height:128px;width:128px}.card-img .product-logo-5{width:142px;height:112px}.card-body{padding:15px;display:flex;flex-direction:column;flex:1}.pill{display:inline-flex;align-self:flex-start;padding:4px 9px;border-radius:999px;background:rgba(37,221,255,.1);border:1px solid rgba(37,221,255,.18);color:var(--cyan);font-size:10px;font-weight:900}.card h3{font-size:18px;margin:9px 0 5px}.card p{color:var(--muted);margin:0 0 10px;font-size:13px;line-height:1.5}.meta{color:#91a9c0;font-size:10px;margin-bottom:12px}.wide{width:100%;margin-top:auto;padding:10px 12px;font-size:13px}
.about{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}.about-image{width:100%;height:390px;object-fit:cover;border-radius:26px;border:1px solid var(--line);box-shadow:var(--shadow)}.about h2{font-size:40px;line-height:1.12;margin:12px 0}.about p{color:var(--muted);font-size:17px}.features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px}.feature{padding:13px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}.feature b{color:#55e4ff;margin-right:8px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:60px}.stat{padding:22px;border:1px solid var(--line);border-radius:16px;background:#071c34;text-align:center}.stat strong{display:block;color:var(--cyan);font-size:28px}.stat span{color:#a5bad0;font-size:12px}
.cta{padding:18px 0 35px}.cta-box{border-radius:18px;padding:24px 28px;background:linear-gradient(100deg,#0969de,#168cff 70%,#0bd7ff);display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 20px 50px rgba(0,106,255,.2)}.cta-box h3{margin:0;font-size:19px}.cta-box p{margin:3px 0 0;font-size:12px;color:#eaf7ff}.cta-box .btn{background:rgba(0,30,85,.25);border-color:rgba(255,255,255,.35);color:#fff}
.partners{padding:72px 0 92px;background:linear-gradient(180deg,#02172b 0%,#001225 100%);position:relative;overflow:hidden}.partners:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(0,190,255,.08),transparent 42%);pointer-events:none}.partners-title{position:relative;text-align:center;margin-bottom:34px}.partners-title .eyebrow{display:none}.partners-title h2{margin:0;color:#f4f8ff;font-size:clamp(34px,4vw,52px);font-weight:900;letter-spacing:-1px;text-shadow:0 0 22px rgba(34,191,255,.08)}.partner-deco{height:34px;display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:2px;position:relative}.partner-deco:before,.partner-deco:after{content:"";width:138px;height:3px;background:linear-gradient(90deg,transparent,#11d7ff);border-radius:10px}.partner-deco:after{background:linear-gradient(90deg,#11d7ff,transparent)}.partner-deco i{display:block;width:12px;height:12px;background:#12d8ff;box-shadow:0 0 12px rgba(18,216,255,.55)}.partners-grid{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;align-items:center}.partner{height:250px;display:flex;align-items:center;justify-content:center;padding:8px;background:transparent;border:0;border-radius:0;overflow:visible}.partner img{display:block;width:100%;height:220px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.18));transition:transform .25s ease,filter .25s ease}.partner:hover img{transform:translateY(-5px) scale(1.035);filter:drop-shadow(0 16px 24px rgba(0,210,255,.18))} .partner:nth-child(2) img{transform:scale(1.30)} .partner:nth-child(2):hover img{transform:translateY(-5px) scale(1.34)}

footer{border-top:1px solid var(--line);padding:42px 0 18px;background:#020c1b}.footer{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr 1.35fr;gap:28px}.footer-brand img{height:54px;width:auto}.footer p,.footer li{color:#8fa7c0;font-size:12px}.footer ul{list-style:none;padding:0;margin:9px 0}.footer li{margin:6px 0}.footer h4{margin:0;color:#e7f2ff;font-size:13px}.newsletter{display:flex;gap:6px;margin-top:10px}.newsletter input{min-width:0;flex:1;padding:10px;border-radius:9px;border:1px solid var(--line);background:#071a31;color:#fff}.newsletter button{border:0;border-radius:9px;padding:10px 13px;background:#138cff;color:#fff;font-weight:800}.socials{display:flex;gap:7px;margin-top:10px}.socials span{width:25px;height:25px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px}.bottom{border-top:1px solid var(--line);margin-top:28px;padding-top:16px;color:#718aa3;font-size:11px;display:flex;justify-content:space-between}
.modal{position:fixed;inset:0;z-index:200;display:none;background:rgba(0,0,0,.82);padding:18px;overflow:auto}.modal.show{display:block}.modal-box{width:min(1100px,100%);margin:25px auto;background:#071b33;border:1px solid var(--line);border-radius:22px;overflow:hidden}.modal-head{display:flex;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(7,27,51,.97);z-index:2}.close{border:0;background:none;color:#fff;font-size:28px;cursor:pointer}.modal-content{padding:26px}.detail-hero{display:grid;grid-template-columns:290px 1fr;gap:28px;align-items:center}.detail-hero>img{width:100%;height:290px;object-fit:contain;background:#041225;border-radius:20px;padding:18px}.detail h1{font-size:40px;margin:8px 0}.lead{color:#b5c9dd}.detail-section{margin-top:32px}.detail-section h3{font-size:23px}.list{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0;list-style:none}.list li{padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}.highlights{display:flex;flex-wrap:wrap;gap:9px}.highlights span{padding:9px 12px;border-radius:999px;border:1px solid rgba(37,221,255,.2);background:rgba(37,221,255,.07);color:#c8f7ff;font-size:12px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.step{padding:14px;border:1px solid var(--line);border-radius:14px}.step b{display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;background:#128cff;margin-bottom:8px}.pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.price{border:1px solid var(--line);border-radius:14px;padding:15px;background:#0a2545}.price strong{display:block;font-size:19px}.price small{display:block;color:#9bb0c5;margin:4px 0 9px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.shot{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#041225}.shot img{display:block;width:100%;height:190px;object-fit:contain}.shot span{display:block;padding:9px 11px;color:#a9bdd3;font-size:11px}
@media(max-width:1100px){.footer{grid-template-columns:1.4fr 1fr 1fr}.newsletter-col{grid-column:1/-1}.partners-grid{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.nav-links{display:none}.menu{display:block;margin-left:auto}.nav-links.open{display:flex;position:absolute;top:76px;left:0;right:0;padding:18px 4%;flex-direction:column;align-items:flex-start;background:#061a32;border-bottom:1px solid var(--line)}.intro-grid,.hero-grid,.about-grid{grid-template-columns:1fr}.showcase{min-height:auto;margin-top:10px}.intro{order:1}.showcase{order:2}.hero-image{height:320px}.stats{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.pricing{grid-template-columns:1fr 1fr}.detail-hero{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.brand img{height:48px}.intro h1{font-size:39px}.showcase{grid-template-columns:1fr 1fr}.showcase-card.main{grid-column:1/-1;grid-row:auto;height:300px}.showcase-card.main img{height:215px}.showcase-card:nth-child(1),.showcase-card:nth-child(3),.showcase-card:nth-child(4),.showcase-card:nth-child(5){grid-column:auto}.grid{grid-template-columns:1fr}.features,.list,.gallery{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.partners-grid{grid-template-columns:1fr 1fr}.footer{grid-template-columns:1fr}.newsletter-col{grid-column:auto}.cta-box,.contact-box{display:block}.cta-box .btn,.contact-box .btn{margin-top:16px}.bottom{display:block}.bottom span{display:block;margin-top:7px}}

/* ===== Pusat Bantuan / FAQ ===== */
.help-section{position:relative;overflow:hidden;background:linear-gradient(135deg,#0759d8 0%,#168cff 45%,#eef8ff 100%);padding:96px 0;color:#10224d}
.help-bg{position:relative}.help-bg:before,.help-bg:after{content:"";position:absolute;border-radius:50%;filter:blur(1px);opacity:.25;background:#fff}.help-bg:before{width:420px;height:420px;left:-180px;top:-120px}.help-bg:after{width:360px;height:360px;right:-140px;bottom:-120px}
.help-grid{position:relative;z-index:1;display:grid;grid-template-columns:.8fr 1.35fr;gap:42px;align-items:center}
.help-intro{color:#fff;padding:18px 12px}.help-badge{display:inline-flex;padding:11px 20px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);font-weight:800;letter-spacing:.08em;font-size:13px}.help-intro h2{font-size:clamp(42px,5vw,68px);line-height:.98;margin:26px 0 22px;color:#fff}.help-intro p{font-size:18px;line-height:1.7;color:rgba(255,255,255,.92);max-width:560px}
.help-contact{margin-top:34px;padding:24px;border:1px solid rgba(255,255,255,.32);border-radius:24px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px)}.help-contact h3{margin:0 0 6px;font-size:20px;color:#fff}.help-contact>p{font-size:14px;margin:0 0 18px}.help-contact-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid rgba(255,255,255,.26);border-radius:16px;color:#fff;text-decoration:none;margin-top:10px;background:rgba(255,255,255,.08)}.hc-icon{width:44px;height:44px;border-radius:13px;background:#1b78ff;display:grid;place-items:center;font-size:21px}.hc-icon.wa{background:#20c875}.help-contact-item small,.help-contact-item strong{display:block}.help-contact-item small{opacity:.75;margin-bottom:2px}.help-contact-item strong{font-size:15px}
.help-panel{background:rgba(255,255,255,.97);border-radius:28px;padding:18px;box-shadow:0 24px 70px rgba(0,35,105,.22)}.help-tabs{display:flex;gap:10px;flex-wrap:wrap;padding:4px}.help-tab{border:1px solid #dbe7f7;background:#fff;color:#22345e;border-radius:15px;padding:15px 18px;display:flex;align-items:center;gap:10px;font-weight:800;cursor:pointer;transition:.2s}.help-tab.active{background:#176fff;color:#fff;border-color:#176fff;box-shadow:0 10px 24px rgba(23,111,255,.2)}.tab-num{font-weight:900}.help-panel-group{display:none;margin-top:12px}.help-panel-group.active{display:block}.faq-item{border:1px solid #dce7f5;border-radius:16px;margin:10px 0;background:#fff;overflow:hidden}.faq-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:42px 1fr 24px;align-items:center;gap:10px;padding:18px 20px;font-weight:800;color:#112652}.faq-item summary::-webkit-details-marker{display:none}.faq-number{width:34px;height:34px;border-radius:50%;background:#eef5ff;color:#176fff;display:grid;place-items:center;font-size:12px}.faq-chevron{color:#176fff;font-size:24px;transition:transform .2s}.faq-item[open] .faq-chevron{transform:rotate(180deg)}.faq-answer{padding:0 20px 20px 72px;color:#5b6f91;line-height:1.75;border-top:1px solid #edf3fb}
@media(max-width:900px){.help-grid{grid-template-columns:1fr}.help-intro h2{font-size:46px}.help-panel{padding:12px}.help-tab{flex:1 1 calc(50% - 10px);justify-content:center}}
@media(max-width:600px){.help-section{padding:70px 0}.help-intro h2{font-size:40px}.help-tab{flex:1 1 100%}.faq-item summary{grid-template-columns:36px 1fr 20px;padding:15px}.faq-answer{padding:0 15px 18px 60px}}

/* ===== Transparansi & Kepercayaan ===== */
.trust-section{padding:100px 0;background:#f6fbff;color:#142957}.trust-heading{text-align:center;max-width:900px;margin:0 auto 42px}.trust-heading .eyebrow{display:inline-block;background:#e7f2ff;color:#176fff;padding:10px 20px;border-radius:999px}.trust-heading h2{font-size:clamp(40px,5vw,62px);margin:16px 0 10px;background:linear-gradient(90deg,#102b68,#176fff);-webkit-background-clip:text;background-clip:text;color:transparent}.trust-heading p{font-size:18px;color:#63779a;line-height:1.6}.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.trust-card{background:#fff;border:1px solid #dceaf8;border-radius:26px;padding:20px;box-shadow:0 12px 35px rgba(20,71,135,.07)}.trust-card-head{display:flex;gap:14px;align-items:center;padding:18px;border-radius:20px;background:#eef6ff}.trust-card.orange .trust-card-head{background:#fff5e6}.trust-card.green .trust-card-head{background:#e9fbf5}.trust-icon{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:#2584ff;color:#fff;font-size:27px;flex:none}.trust-card.orange .trust-icon{background:#ffb338}.trust-card.green .trust-icon{background:#20b891}.trust-card h3{margin:0 0 4px;font-size:21px}.trust-card-head span{color:#65799b;font-size:13px}.trust-card ul{list-style:none;padding:12px 4px 0;margin:0}.trust-card li{display:flex;gap:10px;padding:9px 0;color:#536887;line-height:1.5}.trust-card li>span{width:23px;height:23px;border-radius:50%;background:#2b85ff;color:#fff;display:grid;place-items:center;flex:none;font-size:12px}.trust-card.orange li>span{background:#ffad2f}.trust-card.green li>span{background:#20b891}.trust-card li p{margin:0}.trust-contact{max-width:850px;margin:26px auto 0;padding:20px 28px;background:#fff;border:1px solid #dceaf8;border-radius:20px;display:flex;align-items:center;justify-content:center;gap:30px}.trust-contact a{color:#17356e;text-decoration:none}.trust-contact span{width:1px;height:32px;background:#d7e4f2}@media(max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.trust-grid{grid-template-columns:1fr}.trust-contact{flex-wrap:wrap}}@media(max-width:600px){.trust-section{padding:70px 0}.trust-heading h2{font-size:42px}.trust-contact{gap:14px}.trust-contact span{display:none}}

/* ===== Testimonials ===== */
.testimonials-section{padding:100px 0;background:linear-gradient(180deg,#fff 0%,#f4faff 100%);color:#122652;overflow:hidden}.testimonial-heading{text-align:center;max-width:900px;margin:0 auto 38px}.testimonial-heading .eyebrow{display:inline-block;background:#edf7ff;color:#168cff;padding:10px 18px;border-radius:999px}.testimonial-heading h2{font-size:clamp(40px,5vw,62px);margin:16px 0 12px;background:linear-gradient(90deg,#102b68,#168cff,#16bfe9);-webkit-background-clip:text;background-clip:text;color:transparent}.testimonial-heading p{font-size:18px;color:#7082a1}.testimonial-viewport{overflow:hidden}.testimonial-track{display:flex;transition:transform .45s ease}.testimonial-card{flex:0 0 100%;box-sizing:border-box;padding:30px;background:#fff;border:1px solid #dce9f7;border-radius:25px;box-shadow:0 16px 45px rgba(24,75,130,.08);min-height:380px;display:flex;flex-direction:column}.quote-mark{font-size:64px;line-height:.6;color:#2384ff;font-weight:900}.stars{color:#ffb000;font-size:22px;letter-spacing:4px;margin:12px 0}.quote{font-size:21px;line-height:1.65;color:#213861;max-width:950px;margin:10px 0 26px}.testimonial-person{display:flex;align-items:center;gap:14px;margin-top:auto}.initials{width:58px;height:58px;border-radius:50%;background:#e6f2ff;color:#168cff;display:grid;place-items:center;font-weight:900;font-size:18px}.testimonial-person strong,.testimonial-person span{display:block}.testimonial-person span{color:#7184a3;margin-top:4px}.testimonial-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:25px}.testimonial-controls>button{width:48px;height:48px;border:0;border-radius:50%;background:#eaf4ff;color:#168cff;font-size:30px;cursor:pointer}.testimonial-dots{display:flex;gap:8px}.testimonial-dots button{width:11px;height:11px;border:0;border-radius:50%;background:#c6ddf7;cursor:pointer;padding:0}.testimonial-dots button.active{background:#168cff;width:25px;border-radius:8px}@media(min-width:850px){.testimonial-track{gap:20px}.testimonial-card{flex-basis:calc((100% - 40px)/3);min-width:calc((100% - 40px)/3)}.testimonial-card{min-height:410px}.testimonial-track{transform:none!important}.testimonial-controls{display:none}}

@media(max-width:850px){.partners-grid{grid-template-columns:repeat(2,1fr);gap:4px}.partner{height:210px}.partner img{height:190px}.partner:nth-child(2) img{transform:scale(1.18)}.partner-deco:before,.partner-deco:after{width:70px}}
@media(max-width:560px){.partners{padding:58px 0 65px}.partners-grid{grid-template-columns:1fr 1fr;gap:0}.partner{height:175px;padding:4px}.partner img{height:160px}.partner:nth-child(2) img{transform:scale(1.12)}.partner-deco:before,.partner-deco:after{width:42px;height:2px}.partner-deco i{width:9px;height:9px}.admin-btn{display:none}}


/* Partnership final: transparent logo artwork and exact requested order */
.partner img{background:transparent!important;mix-blend-mode:normal;}


/* === SerbaAPK bright neon brand refresh === */
header{
  background:
    radial-gradient(circle at 18% 50%, rgba(0,217,255,.18), transparent 24%),
    radial-gradient(circle at 78% 20%, rgba(39,125,255,.24), transparent 28%),
    linear-gradient(135deg,#063d91 0%,#0750ad 46%,#06377f 100%) !important;
  border-bottom:1px solid rgba(52,225,255,.72) !important;
  box-shadow:0 5px 28px rgba(0,157,255,.30), 0 1px 0 rgba(255,255,255,.08) inset !important;
  overflow:hidden;
}
header::before,
header::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:.8;
}
header::before{
  left:-7%; top:-70%; width:44%; height:220%;
  background:linear-gradient(125deg,transparent 42%,rgba(0,225,255,.18) 47%,transparent 52%);
  transform:rotate(-8deg);
}
header::after{
  right:-8%; top:-80%; width:34%; height:240%;
  background:linear-gradient(305deg,transparent 44%,rgba(0,210,255,.15) 48%,transparent 53%);
  transform:rotate(7deg);
}
header .nav{position:relative;z-index:2}
.brand{position:relative;display:flex;align-items:center;isolation:isolate}
.brand::before{
  content:"";
  position:absolute;
  width:82px;height:58px;left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(40,226,255,.42) 0%,rgba(25,132,255,.18) 38%,transparent 72%);
  filter:blur(9px);
  z-index:-1;
}
.brand img{
  height:70px !important;
  width:auto !important;
  filter:brightness(1.12) saturate(1.18) drop-shadow(0 0 5px rgba(71,235,255,.9)) drop-shadow(0 0 15px rgba(0,155,255,.72)) !important;
  animation:serbaLogoPulse 3.2s ease-in-out infinite;
}
.nav-links a{color:#f4fbff !important;text-shadow:0 1px 8px rgba(0,0,0,.22)}
.nav-links a:hover,.nav-links a.active{color:#63edff !important;text-shadow:0 0 12px rgba(70,233,255,.65)}
.admin-btn{
  background:linear-gradient(135deg,rgba(0,194,255,.16),rgba(0,101,255,.24)) !important;
  border-color:rgba(57,231,255,.72) !important;
  box-shadow:0 0 18px rgba(0,197,255,.18), inset 0 0 14px rgba(0,210,255,.08);
}

footer{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 35%,rgba(0,201,255,.12),transparent 23%),
    radial-gradient(circle at 84% 70%,rgba(0,103,255,.17),transparent 28%),
    linear-gradient(135deg,#021a45 0%,#031d4d 50%,#01142f 100%) !important;
  border-top:1px solid rgba(35,221,255,.5) !important;
  box-shadow:0 -8px 30px rgba(0,104,255,.13);
}
footer::before,
footer::after{
  content:"";
  position:absolute;
  pointer-events:none;
  width:420px;height:150px;
  opacity:.75;
  filter:blur(.2px);
}
footer::before{
  left:-170px;bottom:-55px;
  background:linear-gradient(135deg,transparent 42%,rgba(0,224,255,.35) 48%,rgba(0,108,255,.18) 51%,transparent 57%);
  transform:rotate(-8deg);
}
footer::after{
  right:-170px;bottom:-35px;
  background:linear-gradient(45deg,transparent 42%,rgba(0,224,255,.32) 48%,rgba(0,108,255,.18) 51%,transparent 57%);
  transform:rotate(8deg);
}
.footer{position:relative;z-index:2}
.footer-brand img{
  height:76px !important;
  width:auto !important;
  filter:brightness(1.1) saturate(1.16) drop-shadow(0 0 6px rgba(71,235,255,.92)) drop-shadow(0 0 18px rgba(0,155,255,.72)) !important;
  animation:serbaLogoPulse 3.2s ease-in-out infinite;
}
.footer h4{font-size:14px !important;color:#ffffff !important;text-shadow:0 0 10px rgba(71,213,255,.18)}
.footer p,.footer li{color:#b7d5f3 !important}
.footer li a{color:#b7d5f3 !important}
.footer li a:hover{color:#5feaff !important;text-shadow:0 0 9px rgba(66,227,255,.42)}
.socials span{
  width:34px !important;height:34px !important;
  border-color:rgba(43,220,255,.58) !important;
  color:#62eaff;
  box-shadow:0 0 12px rgba(0,205,255,.14);
}
.newsletter input{
  background:rgba(1,19,48,.72) !important;
  border-color:rgba(69,190,255,.38) !important;
}
.newsletter button{
  background:linear-gradient(135deg,#168cff,#14c9ff) !important;
  box-shadow:0 0 18px rgba(0,180,255,.24);
}

@keyframes serbaLogoPulse{
  0%,100%{filter:brightness(1.08) saturate(1.12) drop-shadow(0 0 5px rgba(71,235,255,.82)) drop-shadow(0 0 14px rgba(0,155,255,.58))}
  50%{filter:brightness(1.24) saturate(1.24) drop-shadow(0 0 8px rgba(112,246,255,1)) drop-shadow(0 0 24px rgba(0,173,255,.84))}
}
@media (prefers-reduced-motion:reduce){.brand img,.footer-brand img{animation:none !important}}
@media (max-width:700px){
  .brand img{height:58px !important}
  .footer-brand img{height:68px !important}
}


/* === Partnership logo refresh: supplied IT Care + equal medium sizing === */
.partners-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:center}
.partner{height:176px;padding:4px;display:flex;align-items:center;justify-content:center;background:transparent!important;border:0!important}
.partner img{width:100%!important;height:150px!important;max-width:250px!important;object-fit:contain!important;object-position:center!important;display:block!important;transform:none!important;filter:drop-shadow(0 8px 14px rgba(0,0,0,.16))!important}
.partner:hover img{transform:translateY(-3px)!important;filter:drop-shadow(0 11px 18px rgba(0,210,255,.18))!important}
@media(max-width:1100px){.partners-grid{grid-template-columns:repeat(3,1fr);gap:10px}.partner{height:165px}.partner img{height:142px!important}}
@media(max-width:700px){.partners-grid{grid-template-columns:repeat(2,1fr);gap:4px}.partner{height:150px}.partner img{height:128px!important}}


/* === Partnership logo visibility refresh: medium, equal visual height === */
.partners-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:center}
.partner{height:155px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent!important;border:0!important;overflow:visible}
.partner img{width:auto!important;height:118px!important;max-width:220px!important;max-height:118px!important;object-fit:contain!important;object-position:center!important;display:block!important;transform:none!important;filter:drop-shadow(0 7px 13px rgba(0,0,0,.16))!important}
.partner:hover img{transform:translateY(-3px) scale(1.035)!important;filter:drop-shadow(0 10px 17px rgba(0,210,255,.18))!important}
@media(max-width:1100px){.partners-grid{grid-template-columns:repeat(3,1fr);gap:14px}.partner{height:145px}.partner img{height:108px!important;max-height:108px!important}}
@media(max-width:700px){.partners-grid{grid-template-columns:repeat(2,1fr);gap:8px}.partner{height:135px}.partner img{height:100px!important;max-height:100px!important;max-width:190px!important}}


/* === Floating AI SerbaAPK + WhatsApp === */
.serbaapk-ai-float{position:fixed;right:18px;bottom:18px;z-index:1200;font-family:inherit}
.serbaapk-ai-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.serba-wa-float,.serba-ai-float{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;border:0;cursor:pointer;box-shadow:0 10px 25px rgba(0,40,100,.28),0 0 18px rgba(0,128,255,.16);transition:transform .2s ease,box-shadow .2s ease}
.serba-wa-float{background:#20d66b;color:#fff;font-size:30px;font-weight:900}
.serba-ai-float{background:linear-gradient(135deg,#168cff,#2457df);color:#fff;font-size:25px}
.ai-float-mark{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid #fff;border-radius:9px;color:#fff;font-size:11px;letter-spacing:-.4px;line-height:1;font-weight:900}.ai-float-mark i{position:absolute;right:-6px;top:-8px;font-size:10px;font-style:normal;color:#7fe8ff;text-shadow:0 0 8px rgba(127,232,255,.95)}
.serba-wa-float:hover,.serba-ai-float:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,40,100,.32),0 0 22px rgba(0,169,255,.25)}
.serbaapk-ai-window{position:absolute;right:0;bottom:136px;width:338px;height:390px;background:#fff;border-radius:20px;overflow:hidden;border:1px solid rgba(18,86,210,.16);box-shadow:0 18px 50px rgba(0,22,60,.28);color:#13243b}
.serbaapk-ai-head{height:76px;background:linear-gradient(135deg,#2461df,#1f55d8);display:flex;align-items:center;padding:0 14px;color:#fff}
.serbaapk-ai-avatar{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;margin-right:10px;border:1px solid rgba(255,255,255,.24)}
.ai-mark{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid #fff;border-radius:9px;color:#fff;font-size:11px;letter-spacing:-.4px;line-height:1;font-weight:800}.ai-mark i{position:absolute;right:-5px;top:-7px;font-size:10px;font-style:normal;color:#7fe8ff;text-shadow:0 0 7px rgba(127,232,255,.9)}
.serbaapk-ai-head-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.serbaapk-ai-head-copy strong{font-size:14px}.serbaapk-ai-head-copy small{font-size:10px;opacity:.9}.serbaapk-ai-head-copy small i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#38e776;margin-right:4px}
.serbaapk-ai-close{margin-left:auto;background:none;border:0;color:#fff;font-size:27px;line-height:1;cursor:pointer;padding:3px 5px}
.serbaapk-ai-body{height:259px;padding:14px 14px 8px;overflow:auto;background:#fff}
.serbaapk-ai-msg{max-width:91%;padding:10px 12px;border-radius:14px;font-size:12px;line-height:1.55;margin-bottom:8px;white-space:pre-line}.serbaapk-ai-msg.bot{background:#eef3f8;color:#18304d;border-top-left-radius:5px}.serbaapk-ai-msg.user{margin-left:auto;background:#2461df;color:#fff;border-top-right-radius:5px}
.serbaapk-ai-quick{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}.serbaapk-ai-quick button{border:1px solid #a8caff;background:#f8fbff;color:#2161dc;border-radius:999px;padding:6px 10px;font-size:10px;cursor:pointer}.serbaapk-ai-quick button:hover{background:#edf5ff}
.serbaapk-ai-input{height:55px;border-top:1px solid #e4ebf4;padding:9px 12px;display:flex;gap:7px;background:#fff}.serbaapk-ai-input input{flex:1;min-width:0;border:1px solid #1761ee;border-radius:12px;padding:10px 11px;font-size:12px;outline:none}.serbaapk-ai-input button{width:38px;border:0;border-radius:11px;background:#246be6;color:#fff;font-size:20px;cursor:pointer}
@media(max-width:520px){.serbaapk-ai-float{right:12px;bottom:12px}.serbaapk-ai-window{right:0;bottom:130px;width:min(338px,calc(100vw - 24px));height:380px}.serba-wa-float,.serba-ai-float{width:54px;height:54px}}


/* === Kustomisasi & API — SerbaAPK === */
.custom-services{
  position:relative;
  overflow:hidden;
  padding:88px 0 82px;
  background:
    radial-gradient(circle at 8% 52%,rgba(35,164,255,.10),transparent 22%),
    radial-gradient(circle at 94% 28%,rgba(35,164,255,.11),transparent 25%),
    linear-gradient(180deg,#fafdff 0%,#f5faff 100%);
  color:#10255c;
}
.custom-services::before{
  content:"";
  position:absolute;
  width:520px;height:520px;
  border:1px solid rgba(58,160,240,.12);
  border-radius:50%;
  left:-350px;top:30px;
}
.custom-services::after{
  content:"";
  position:absolute;
  width:460px;height:460px;
  border:1px solid rgba(58,160,240,.10);
  border-radius:50%;
  right:-290px;top:-120px;
}
.custom-orb{position:absolute;border-radius:50%;background:rgba(75,173,246,.08);pointer-events:none}
.custom-orb-left{width:95px;height:95px;left:-48px;bottom:90px}
.custom-orb-right{width:75px;height:75px;right:-34px;bottom:30px}
.custom-head{position:relative;z-index:2;text-align:center;max-width:980px;margin:0 auto 48px}
.custom-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 22px;border-radius:999px;
  background:linear-gradient(180deg,#edf7ff,#e2f1ff);
  color:#1168dc;font-weight:900;font-size:14px;letter-spacing:.2px;
  box-shadow:0 8px 22px rgba(0,117,255,.08);
}
.custom-head h2{
  margin:24px 0 12px;
  color:#122b69;font-size:clamp(36px,4.1vw,62px);line-height:1.08;
  font-weight:950;letter-spacing:-1.8px;
}
.custom-head p{
  max-width:820px;margin:0 auto;color:#62758f;font-size:18px;line-height:1.65;
}
.custom-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px;
  max-width:1380px;margin:0 auto;
}
.custom-card{
  position:relative;display:flex;flex-direction:column;
  min-height:465px;padding:34px 38px 34px;
  background:rgba(255,255,255,.94);
  border:1px solid #dce9f7;border-left:5px solid #1596ff;
  border-radius:20px;
  box-shadow:0 18px 42px rgba(40,104,160,.10);
}
.custom-card::after{
  content:"";position:absolute;inset:0;border-radius:20px;
  box-shadow:inset 0 0 30px rgba(31,161,255,.025);pointer-events:none;
}
.custom-icon{
  width:76px;height:76px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#eff8ff,#e5f3ff);
  font-size:35px;margin-bottom:22px;
}
.custom-card h3{margin:0 0 14px;color:#12285f;font-size:26px;font-weight:900}
.custom-card p{margin:0;color:#657992;font-size:15px;line-height:1.7;flex:1}
.custom-price{
  display:inline-flex;align-self:flex-start;
  margin:22px 0 18px;padding:12px 18px;
  border:1px solid #bfe8dc;border-radius:14px;
  background:#f0fff9;color:#15936d;font-weight:900;font-size:15px;
}
.custom-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;padding:0 20px;border-radius:13px;
  background:linear-gradient(135deg,#146cff,#159fe8);
  color:#fff!important;font-weight:900;text-decoration:none;
  box-shadow:0 10px 22px rgba(15,103,239,.20);
  transition:transform .2s ease,box-shadow .2s ease;
}
.custom-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(15,103,239,.28)}
.custom-btn span{font-size:18px}
.custom-bottom{
  position:relative;z-index:2;
  max-width:980px;margin:44px auto 0;text-align:center;
  padding:28px 34px;border-radius:18px;
  background:rgba(235,247,255,.82);border:1px solid #d7eafa;
}
.custom-bottom h3{margin:0 0 8px;color:#132b67;font-size:23px}
.custom-bottom p{margin:0;color:#62758f;line-height:1.7;font-size:15px}
@media(max-width:1050px){
  .custom-grid{gap:18px}
  .custom-card{padding:28px 25px}
  .custom-card h3{font-size:22px}
}
@media(max-width:760px){
  .custom-services{padding:65px 0 58px}
  .custom-head{margin-bottom:32px}
  .custom-head h2{font-size:35px;letter-spacing:-.8px}
  .custom-head p{font-size:15px}
  .custom-grid{grid-template-columns:1fr;gap:18px}
  .custom-card{min-height:0;padding:25px 22px}
  .custom-icon{width:64px;height:64px;font-size:29px}
  .custom-card h3{font-size:22px}
  .custom-bottom{margin-top:28px;padding:23px 20px}
}

/* === Kustomisasi & API — visual update mengikuti desain referensi === */
.custom-services{
  padding:54px 0 72px;
  background:
    radial-gradient(circle at 4% 55%,rgba(0,108,255,.18),transparent 26%),
    radial-gradient(circle at 92% 48%,rgba(0,255,219,.11),transparent 28%),
    linear-gradient(180deg,#03183d 0%,#061c45 52%,#031936 100%);
  color:#fff;
}
.custom-services::before{border-color:rgba(23,126,255,.15);}
.custom-services::after{border-color:rgba(0,220,255,.10);}
.custom-bg-grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(0,157,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(0,157,255,.13) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);pointer-events:none}
.custom-head{margin-bottom:24px}
.custom-title-line{height:18px;display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:-11px}
.custom-title-line span{width:min(170px,15vw);height:1px;background:linear-gradient(90deg,transparent,#159dff)}
.custom-title-line span:last-child{background:linear-gradient(90deg,#159dff,transparent)}
.custom-title-line i{width:8px;height:8px;margin:0 12px;border-radius:50%;background:#14baff;box-shadow:0 0 12px #14baff}
.custom-badge{position:relative;padding:8px 23px;background:linear-gradient(180deg,#0d6ce0,#0754b8);color:#fff;border:1px solid #168dff;box-shadow:0 0 28px rgba(0,123,255,.25);font-size:15px;letter-spacing:.3px}
.custom-head h2{margin:14px 0 8px;color:#fff;font-size:clamp(39px,4.5vw,64px);letter-spacing:-2.2px;text-shadow:0 0 26px rgba(32,153,255,.10)}
.custom-head h2 span{color:#16d9ff}
.custom-head p{color:#d5e2f5;max-width:950px;font-size:18px;line-height:1.55}
.custom-grid{gap:24px;max-width:1600px}
.custom-card{min-height:630px;padding:0 34px 20px;background:linear-gradient(180deg,rgba(4,25,61,.93),rgba(3,24,57,.97));border:1px solid rgba(52,155,255,.9);border-left:1px solid rgba(52,155,255,.9);border-radius:22px;box-shadow:0 0 32px rgba(0,110,255,.12),inset 0 0 40px rgba(0,130,255,.025);overflow:hidden}
.custom-card::after{box-shadow:none}
.custom-card-api{border-color:#009cff}.custom-card-development{border-color:#a83cff}.custom-card-whitelabel{border-color:#00e4cf}
.custom-art{height:245px;margin:0 -34px 15px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 50% 45%,rgba(0,130,255,.26),transparent 48%)}
.custom-art-development{background:radial-gradient(circle at 50% 45%,rgba(143,34,255,.30),transparent 48%)}
.custom-art-whitelabel{background:radial-gradient(circle at 50% 45%,rgba(0,232,205,.18),transparent 48%)}
.art-server{position:absolute;left:56px;bottom:55px;width:82px}.art-server b{display:block;height:28px;margin:4px 0;border-radius:4px;background:linear-gradient(90deg,#087eff,#21d9ff);box-shadow:0 0 15px rgba(0,159,255,.65)}
.art-cloud{position:absolute;left:170px;top:43px;font-size:42px;font-weight:950;color:#fff;text-shadow:0 0 22px #1ea8ff}
.art-node{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:10px;background:rgba(0,95,220,.55);border:1px solid #1ca5ff;box-shadow:0 0 15px rgba(0,143,255,.5);font-size:22px}.art-node.n1{right:54px;top:48px}.art-node.n2{right:105px;bottom:42px}.art-node.n3{right:30px;bottom:65px}.art-node.n4{left:350px;top:80px}
.art-laptop{position:absolute;left:115px;bottom:42px;width:285px;height:148px;border:5px solid #8c7aff;border-bottom-width:9px;border-radius:10px 10px 18px 18px;background:linear-gradient(145deg,#171a43,#5b31b2);box-shadow:0 0 28px rgba(158,60,255,.55)}.art-laptop:after{content:"";position:absolute;left:-35px;right:-35px;bottom:-22px;height:18px;border-radius:50%;background:#24175b;box-shadow:0 8px 10px rgba(0,0,0,.3)}
.art-screen{padding:25px 22px}.art-screen i{display:block;height:7px;margin:8px 0;border-radius:5px;background:linear-gradient(90deg,#72a9ff,#d17cff);width:75%}.art-screen i:nth-child(2){width:90%}.art-screen i:nth-child(3){width:55%}.art-screen i:nth-child(4){width:70%}.art-code,.art-gear{position:absolute;padding:14px 18px;border-radius:12px;background:rgba(111,25,221,.75);border:1px solid #b15bff;box-shadow:0 0 22px rgba(166,55,255,.6);font-size:28px;font-weight:900}.art-code{left:58px;top:102px}.art-gear{right:70px;top:37px}.art-window{position:absolute;padding:10px 18px;border-radius:10px;background:rgba(79,23,151,.8);border:1px solid #b65cff;box-shadow:0 0 15px rgba(166,55,255,.45)}.art-window.w1{left:42px;top:40px}.art-window.w2{right:43px;bottom:44px}
.art-monitor{position:absolute;left:78px;top:37px;width:250px;height:145px;border:4px solid #00e6d0;border-radius:10px;background:linear-gradient(145deg,#031c42,#0b345a);box-shadow:0 0 30px rgba(0,226,211,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:900}.art-logo-mark{font-size:35px;color:#00caff}.art-monitor b{font-size:18px}.art-device{position:absolute;background:linear-gradient(145deg,#071a3b,#0a4b6a);border:3px solid #00d7d0;box-shadow:0 0 18px rgba(0,230,205,.35);border-radius:9px}.art-device.phone{width:55px;height:104px;right:84px;bottom:35px}.art-device.tablet{width:95px;height:75px;right:170px;bottom:28px}.art-palette,.art-pencil{position:absolute;font-size:32px;color:#ffcc42;text-shadow:0 0 15px rgba(255,204,66,.6)}.art-palette{right:47px;top:20px}.art-pencil{left:40px;bottom:36px;color:#15e5c8}.art-tags{position:absolute;right:18px;top:72px;display:flex;flex-direction:column;gap:5px}.art-tags span{padding:5px 10px;border:1px solid rgba(0,229,210,.6);border-radius:10px;background:rgba(0,72,80,.48);font-size:9px;color:#e6ffff}
.custom-card h3{margin:0 0 10px;color:#fff;font-size:27px;font-weight:950}.custom-card h3 span:first-child{color:#19d5ff}.custom-card-development h3 span:first-child{color:#b759ff}.custom-card-whitelabel h3 span:first-child{color:#14e0cb}.custom-mini-icon{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(145deg,#087df0,#0e50bb);font-size:20px;color:#fff!important;vertical-align:middle}.custom-card-development .custom-mini-icon{background:linear-gradient(145deg,#9e2cff,#6320d6)}.custom-card-whitelabel .custom-mini-icon{background:linear-gradient(145deg,#00cbb6,#008e86)}
.custom-card p{color:#d5e2f4;font-size:15px;line-height:1.55;min-height:72px}.custom-list{list-style:none;margin:8px 0 15px;padding:0;color:#dce7f7;font-size:14px;line-height:1.65}.custom-list li{position:relative;padding-left:26px}.custom-list li::before{content:"✓";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1697ff;color:#fff;font-size:12px;font-weight:900}.custom-card-development .custom-list li::before{background:#8f28ef}.custom-card-whitelabel .custom-list li::before{background:#09cdb9}
.custom-price{display:block;margin:0 0 13px;padding:10px 22px;border:1px solid #0ca7ff;border-radius:12px;background:linear-gradient(90deg,rgba(4,70,157,.8),rgba(0,57,132,.48));color:#fff;box-shadow:0 0 18px rgba(0,137,255,.14)}.custom-card-development .custom-price{border-color:#a844ff;background:linear-gradient(90deg,rgba(89,22,157,.8),rgba(69,23,122,.48))}.custom-card-whitelabel .custom-price{border-color:#00ddc8;background:linear-gradient(90deg,rgba(0,100,96,.8),rgba(0,69,71,.48))}.custom-price small{display:block;font-size:13px;color:#d8e7fb;font-weight:700}.custom-price strong{display:block;font-size:29px;line-height:1.08;color:#fff;font-weight:950}.custom-price strong span{font-size:18px;font-weight:700}
.custom-btn{min-height:56px;border-radius:14px;font-size:16px;box-shadow:0 10px 25px rgba(0,114,255,.25)}.custom-btn-blue{background:linear-gradient(90deg,#1289ff,#0572e8)}.custom-btn-purple{background:linear-gradient(90deg,#9b24f4,#7d20e9)}.custom-btn-green{background:linear-gradient(90deg,#08cfae,#05b995)}.custom-btn:hover{box-shadow:0 14px 30px rgba(0,150,255,.34)}
@media(max-width:1100px){.custom-grid{grid-template-columns:1fr 1fr}.custom-card-whitelabel{grid-column:1/-1}.custom-art{height:220px}}
@media(max-width:760px){.custom-services{padding:48px 0 58px}.custom-head h2{font-size:36px;letter-spacing:-1px}.custom-head p{font-size:15px}.custom-grid{grid-template-columns:1fr}.custom-card-whitelabel{grid-column:auto}.custom-card{min-height:0;padding:0 24px 20px}.custom-art{height:210px;margin:0 -24px 14px}.art-laptop{left:70px;transform:scale(.84);transform-origin:bottom left}.art-monitor{left:45px;transform:scale(.85);transform-origin:top left}.custom-price strong{font-size:25px}}

/* === KUSTOMISASI & API — exact visual alignment with supplied reference === */
.custom-services{padding:20px 0 46px!important;background:
 radial-gradient(circle at 4% 58%,rgba(0,108,255,.20),transparent 28%),
 radial-gradient(circle at 95% 52%,rgba(0,255,219,.10),transparent 28%),
 linear-gradient(180deg,#03183d 0%,#061d48 52%,#031936 100%)!important;}
.custom-services .custom-head{max-width:1200px;margin:0 auto 20px!important;}
.custom-services .custom-title-line{margin-bottom:-10px!important;}
.custom-services .custom-title-line span{width:170px!important;}
.custom-services .custom-badge{padding:8px 24px!important;font-size:15px!important;}
.custom-services .custom-head h2{margin:13px 0 7px!important;font-size:clamp(38px,4vw,62px)!important;line-height:1.05!important;letter-spacing:-2px!important;white-space:nowrap!important;}
.custom-services .custom-head p{max-width:980px!important;font-size:18px!important;line-height:1.55!important;}
.custom-services .custom-grid{max-width:1640px!important;gap:24px!important;}
.custom-services .custom-card{min-height:630px!important;padding:0 36px 18px!important;border-radius:22px!important;box-shadow:0 0 32px rgba(0,110,255,.12),inset 0 0 40px rgba(0,130,255,.025)!important;}
.custom-services .custom-panel-image{display:block;width:calc(100% + 72px);height:260px;object-fit:cover;margin:0 -36px 0;border:0;}
.custom-services .custom-card p{margin:0!important;min-height:72px!important;color:#d5e2f4!important;font-size:15px!important;line-height:1.55!important;}
.custom-services .custom-list{margin:8px 0 15px!important;font-size:14px!important;line-height:1.65!important;}
.custom-services .custom-price{margin-top:auto!important;margin-bottom:13px!important;}
.custom-services .custom-btn{min-height:56px!important;border-radius:14px!important;font-size:16px!important;}
@media(max-width:1200px){
 .custom-services .custom-grid{padding:0 22px;}
 .custom-services .custom-head{padding:0 22px;}
 .custom-services .custom-head h2{font-size:clamp(34px,4.5vw,56px)!important;}
 .custom-services .custom-card{padding-left:28px!important;padding-right:28px!important;}
 .custom-services .custom-panel-image{width:calc(100% + 56px);margin-left:-28px;margin-right:-28px;height:240px;}
}
@media(max-width:900px){
 .custom-services .custom-head h2{white-space:normal!important;}
 .custom-services .custom-grid{grid-template-columns:1fr 1fr!important;}
 .custom-services .custom-card-whitelabel{grid-column:1/-1!important;}
}
@media(max-width:760px){
 .custom-services{padding:28px 0 42px!important;}
 .custom-services .custom-grid{grid-template-columns:1fr!important;padding:0 14px;}
 .custom-services .custom-card-whitelabel{grid-column:auto!important;}
 .custom-services .custom-head{padding:0 14px;}
 .custom-services .custom-head h2{font-size:36px!important;}
 .custom-services .custom-head p{font-size:15px!important;}
 .custom-services .custom-card{padding-left:24px!important;padding-right:24px!important;min-height:0!important;}
 .custom-services .custom-panel-image{width:calc(100% + 48px);margin-left:-24px;margin-right:-24px;height:auto;aspect-ratio:2.015/1;object-fit:cover;}
}

/* Kustomisasi & API — exact visual reference */
.custom-reference-section{
  position:relative;
  width:100%;
  margin:0;
  padding:0;
  background:#061a3c;
  overflow:hidden;
}
.custom-reference-stage{
  position:relative;
  width:100%;
  max-width:1778px;
  margin:0 auto;
  line-height:0;
}
.custom-reference-image{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1778 / 885;
  object-fit:contain;
  margin:0;
}
.custom-reference-link{
  position:absolute;
  display:block;
  z-index:3;
  color:transparent;
  background:transparent;
  border-radius:18px;
  outline:none;
  line-height:1;
  text-indent:-9999px;
}
.custom-reference-link-api{
  left:5.96%; top:86.45%; width:25.25%; height:6.45%;
}
.custom-reference-link-development{
  left:36.45%; top:86.45%; width:24.72%; height:6.45%;
}
.custom-reference-link-whitelabel{
  left:66.25%; top:86.45%; width:26.02%; height:6.45%;
}
.custom-reference-link:hover{background:rgba(255,255,255,.035)}
.custom-reference-link:focus-visible{outline:3px solid rgba(41,201,255,.95);outline-offset:3px}
@media(max-width:760px){
  .custom-reference-stage{width:100%;min-width:0}
  .custom-reference-image{width:100%;height:auto}
  .custom-reference-link{border-radius:10px}
}

/* === SERBAAPK NAVIGATION — RAPi, SEJAJAR & PREMIUM === */
:root{--serba-font:'Plus Jakarta Sans',Inter,system-ui,-apple-system,'Segoe UI',sans-serif}
body{font-family:var(--serba-font)}
header{height:78px;min-height:78px}
header .nav{
  width:min(1240px,94%);
  min-height:78px;
  height:78px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:28px;
}
.brand{height:78px;min-width:92px;justify-content:flex-start}
.brand img{
  height:58px !important;
  max-width:145px;
  object-fit:contain;
  object-position:left center;
}
nav{min-width:0;display:flex;justify-content:center;align-items:center}
.nav-links{
  margin:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,1.55vw,25px);
  white-space:nowrap;
}
.nav-links li{display:flex;align-items:center}
.nav-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  font-family:var(--serba-font) !important;
  font-size:13px !important;
  line-height:1;
  font-weight:700 !important;
  letter-spacing:-.01em;
  color:#f7fbff !important;
  text-shadow:none !important;
  transition:color .2s ease,transform .2s ease,text-shadow .2s ease;
}
.nav-links a:hover,.nav-links a.active{
  color:#65eaff !important;
  text-shadow:0 0 14px rgba(72,231,255,.55) !important;
  transform:translateY(-1px);
}
.admin-btn{
  height:48px;
  min-width:124px;
  padding:0 18px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serba-font) !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:-.01em;
  white-space:nowrap;
  border-radius:999px;
}
@media(max-width:1080px){
  header .nav{column-gap:18px}
  .nav-links{gap:clamp(9px,1.2vw,16px)}
  .nav-links a{font-size:12px !important}
  .admin-btn{min-width:112px;padding:0 14px !important;font-size:13px !important}
  .brand img{height:54px !important}
}
@media(max-width:850px){
  header,header .nav{height:76px;min-height:76px}
  header .nav{display:flex;justify-content:space-between;column-gap:0}
  .brand{height:76px}
  .brand img{height:56px !important}
  nav{position:static}
  .nav-links{display:none}
  .menu{display:block;margin-left:auto}
  .admin-btn{margin-left:14px;height:44px;min-width:108px}
  .nav-links.open{display:flex;position:absolute;top:76px;left:0;right:0;width:100%;padding:18px 5%;flex-direction:column;align-items:stretch;gap:4px;background:linear-gradient(180deg,#061a32,#031225);border-bottom:1px solid var(--line);box-shadow:0 16px 35px rgba(0,0,0,.3)}
  .nav-links.open li{width:100%}
  .nav-links.open a{width:100%;justify-content:flex-start;padding:13px 4px;font-size:14px !important}
}
@media(max-width:560px){
  .brand img{height:50px !important;max-width:125px}
  .admin-btn{min-width:96px;padding:0 12px !important;font-size:12px !important}
}


/* Video demo aplikasi */
.video-demo-section{padding-top:40px;padding-bottom:40px}
.video-demo-card{max-width:1100px;margin:0 auto;border:1px solid rgba(37,221,255,.22);background:linear-gradient(145deg,rgba(8,32,62,.96),rgba(3,18,38,.98));border-radius:24px;padding:14px;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.app-demo-video,.detail-demo-video{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:contain;background:#020b18;border-radius:18px}
.video-demo-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 8px 4px;color:#c9d9ea}
.video-demo-caption strong{font-size:18px;color:#fff}.video-demo-caption span{font-size:13px;color:#9fb4ca}
.detail-video-section{margin-top:30px}.detail-demo-video{max-height:620px;border:1px solid rgba(37,221,255,.18);box-shadow:0 18px 50px rgba(0,0,0,.25)}
@media(max-width:700px){.video-demo-card{padding:8px;border-radius:18px}.app-demo-video,.detail-demo-video{border-radius:12px}.video-demo-caption{display:block}.video-demo-caption span{display:block;margin-top:4px}}

/* === DESKLIVE VIDEO — PLAY BUTTON FIX === */
.video-player-wrap{position:relative;width:100%;overflow:hidden;border-radius:18px;background:#020b18;isolation:isolate}
.video-player-wrap .app-demo-video{position:relative;z-index:1;cursor:pointer}
.video-big-play{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border:1px solid rgba(101,234,255,.85);border-radius:50%;display:grid;place-items:center;background:rgba(2,18,38,.82);backdrop-filter:blur(8px);box-shadow:0 0 0 8px rgba(37,221,255,.08),0 12px 40px rgba(0,0,0,.45);color:#fff;cursor:pointer;transition:transform .2s ease,opacity .2s ease,background .2s ease}
.video-big-play span{font-size:28px;line-height:1;margin-left:4px;color:#65eaff;text-shadow:0 0 14px rgba(101,234,255,.55)}
.video-big-play:hover{transform:translate(-50%,-50%) scale(1.06);background:rgba(3,42,75,.92)}
.video-player-wrap.is-playing .video-big-play{opacity:0;pointer-events:none}
.video-status{position:absolute;z-index:6;left:18px;right:18px;bottom:52px;padding:10px 13px;border:1px solid rgba(255,180,80,.35);border-radius:10px;background:rgba(25,14,3,.9);color:#ffd9a0;font-size:12px;text-align:center}
.video-demo-caption{flex-wrap:wrap}
.video-open-link{margin-left:auto;color:#65eaff;font-size:12px;font-weight:700;white-space:nowrap}
@media(max-width:700px){.video-big-play{width:62px;height:62px}.video-big-play span{font-size:23px}.video-open-link{display:block;margin:8px 0 0}}

/* === HEADER REFERENCE — SERBAAPK (MATCH UPLOADED DESIGN) === */
header{
  height:80px !important;
  min-height:80px !important;
  background:linear-gradient(90deg,#0b63b9 0%,#0758ae 48%,#0d4e9d 100%) !important;
  border-bottom:1px solid rgba(70,224,255,.75) !important;
  box-shadow:0 4px 20px rgba(0,0,0,.18) !important;
  backdrop-filter:none !important;
}
header .nav{
  width:min(1350px,92%);
  height:80px !important;
  min-height:80px !important;
  margin:0 auto;
  display:grid !important;
  grid-template-columns:150px minmax(0,1fr) 150px !important;
  align-items:center !important;
  column-gap:18px !important;
}
.brand{
  height:80px !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
.brand img{
  height:56px !important;
  width:auto !important;
  max-width:125px !important;
  object-fit:contain !important;
  object-position:left center !important;
  filter:brightness(1.08) saturate(1.15) drop-shadow(0 0 8px rgba(44,235,255,.42)) !important;
  animation:none !important;
}
nav{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.nav-links{
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:27px !important;
  white-space:nowrap !important;
  list-style:none !important;
}
.nav-links li{display:flex !important;align-items:center !important}
.nav-links a{
  min-height:40px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:'Plus Jakarta Sans',Inter,system-ui,-apple-system,'Segoe UI',sans-serif !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:-.015em !important;
  color:#fff !important;
  text-shadow:0 1px 4px rgba(0,0,0,.18) !important;
  transform:none !important;
}
.nav-links a:hover,.nav-links a.active{
  color:#70edff !important;
  text-shadow:0 0 12px rgba(80,232,255,.58) !important;
  transform:none !important;
}
.admin-btn{
  justify-self:end !important;
  width:124px !important;
  min-width:124px !important;
  height:48px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(60,225,255,.82) !important;
  border-radius:999px !important;
  background:rgba(8,91,177,.18) !important;
  box-shadow:0 0 12px rgba(34,207,255,.08),inset 0 0 12px rgba(0,211,255,.05) !important;
  color:#fff !important;
  font-family:'Plus Jakarta Sans',Inter,system-ui,-apple-system,'Segoe UI',sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  white-space:nowrap !important;
}
@media(max-width:1180px){
  header .nav{grid-template-columns:125px minmax(0,1fr) 130px !important;column-gap:12px !important;width:94% !important}
  .nav-links{gap:18px !important}
  .nav-links a{font-size:12px !important}
  .brand img{height:53px !important}
  .admin-btn{width:116px !important;min-width:116px !important;font-size:13px !important}
}
@media(max-width:850px){
  header,header .nav{height:76px !important;min-height:76px !important}
  header .nav{display:flex !important;width:94% !important;justify-content:space-between !important;column-gap:0 !important}
  .brand{height:76px !important}
  .brand img{height:54px !important}
  nav{position:static !important}
  .nav-links{display:none !important}
  .menu{display:block !important;margin-left:auto !important;color:#fff !important}
  .admin-btn{margin-left:14px !important;width:108px !important;min-width:108px !important;height:44px !important;font-size:12px !important}
  .nav-links.open{display:flex !important;position:absolute !important;top:76px !important;left:0 !important;right:0 !important;width:100% !important;padding:18px 5% !important;flex-direction:column !important;align-items:stretch !important;gap:4px !important;background:linear-gradient(180deg,#0758ae,#031a33) !important;border-bottom:1px solid rgba(70,224,255,.45) !important}
}
@media(max-width:560px){
  .brand img{height:50px !important;max-width:115px !important}
  .admin-btn{width:98px !important;min-width:98px !important;padding:0 !important}
}