/* Gaya dasar index.html asli */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; color: #1e293b; background: #fff; }

nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 6%; border-bottom: 1px solid #e2e8f0;
  position: sticky; top: 0; background: #fff; z-index: 99;
}
.logo { font-size: 1.2rem; font-weight: 700; color: #1e40af; text-decoration: none; }
.nav-links { display: flex; gap: 1.5rem; list-style: none; }
.nav-links a { color: #64748b; text-decoration: none; font-size: 0.9rem; }
.nav-links a:hover { color: #1e40af; }
.nav-wa { background: #1e40af; color: #fff; padding: 0.45rem 1rem; border-radius: 6px; text-decoration: none; font-size: 0.85rem; font-weight: 500; }

/* HERO */
.hero { background: #eff6ff; padding: 5rem 6%; text-align: center; }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; color: #0f172a; margin-bottom: 1rem; line-height: 1.25; }
.hero h1 span { color: #1e40af; }
.hero p { color: #475569; font-size: 1rem; max-width: 520px; margin: 0 auto 2rem; line-height: 1.7; }
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-blue { background: #1e40af; color: #fff; padding: 0.7rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.btn-white { background: #fff; color: #1e40af; padding: 0.7rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.9rem; border: 1.5px solid #1e40af; }
.stats { display: flex; justify-content: center; gap: 3rem; margin-top: 3rem; flex-wrap: wrap; }
.stat-num { font-size: 1.8rem; font-weight: 700; color: #1e40af; }
.stat-label { font-size: 0.8rem; color: #64748b; margin-top: 2px; }

/* SECTION */
section { padding: 4rem 6%; }
section:nth-child(even) { background: #f8fafc; }
.sec-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #1e40af; margin-bottom: 0.5rem; }
h2 { font-size: 1.7rem; font-weight: 700; color: #0f172a; margin-bottom: 0.75rem; }
.sec-sub { color: #64748b; font-size: 0.95rem; line-height: 1.7; margin-bottom: 2.5rem; max-width: 520px; }

/* GRID CARDS */
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 1.5rem; }
.card-icon { font-size: 1.8rem; margin-bottom: 0.8rem; }
.card h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.4rem; color: #0f172a; }
.card p { font-size: 0.83rem; color: #64748b; line-height: 1.6; }

/* SOFTWARE */
.sw-list { list-style: none; }
.sw-list li { padding: 0.65rem 0; border-bottom: 1px solid #e2e8f0; font-size: 0.9rem; color: #334155; display: flex; gap: 0.7rem; align-items: flex-start; }
.sw-list li:last-child { border: none; }
.sw-list li::before { content: '✓'; color: #1e40af; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.tech { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.tech span { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 5px; font-weight: 500; }

/* KONTAK */
.kontak-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
@media(max-width:640px){ .kontak-grid { grid-template-columns: 1fr; } }
.info-item { display: flex; gap: 0.8rem; margin-bottom: 1.2rem; }
.info-ico { font-size: 1.1rem; width: 32px; flex-shrink: 0; }
.info-item h4 { font-size: 0.78rem; color: #94a3b8; margin-bottom: 0.2rem; }
.info-item p { font-size: 0.9rem; color: #1e293b; line-height: 1.5; }
.form-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 1.5rem; }
.form-box label { display: block; font-size: 0.78rem; color: #64748b; margin-bottom: 0.3rem; font-weight: 500; }
.form-box input, .form-box select, .form-box textarea {
  width: 100%; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 0.6rem 0.8rem; font-size: 0.88rem; font-family: 'Inter', sans-serif;
  color: #1e293b; background: #fff; margin-bottom: 0.9rem; outline: none;
}
.form-box textarea { min-height: 80px; resize: vertical; }
.btn-send { width: 100%; background: #1e40af; color: #fff; padding: 0.75rem; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; }

footer {
  background: #0f172a; color: #94a3b8;
  text-align: center; padding: 2rem 6%;
  font-size: 0.82rem; line-height: 2;
}
footer strong { color: #fff; }

.wa-btn {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: #25d366; color: #fff; font-size: 1.4rem;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 99;
}

@media(max-width:640px){
  .nav-links { display: none; }
  .stats { gap: 1.5rem; }
}

/* Tampilan biru modern seperti contoh foto */
/* Cakrawala Computer - lapisan desain tambahan
   Seluruh konten dan CSS asal dari index.html tetap tersimpan pada HTML. */
:root {--navy:#06172e;--navy2:#0c2b50;--blue:#2563eb;--sky:#48b7fb;--teal:#13a98d;--ink:#14263f;--muted:#5e6d83;--line:#e5eaf2;--surface:#f6f9ff;--radius:18px;}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#fff;color:var(--ink);overflow-x:hidden;line-height:1.5}
a{transition:color .2s,background .2s,transform .2s,border-color .2s,box-shadow .2s}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #38bdf8;outline-offset:3px}
.skip-link{position:absolute;z-index:1000;left:15px;top:-70px;background:#fff;color:#102b50;padding:10px 18px;border-radius:10px;font-weight:700}
.skip-link:focus{top:12px}
nav{position:sticky;top:0;display:flex;align-items:center;gap:28px;justify-content:space-between;min-height:80px;padding:14px max(5%,calc((100vw - 1200px)/2));border-bottom:1px solid #e8eef8;background:rgba(255,255,255,.96);backdrop-filter:blur(17px);box-shadow:0 4px 28px rgba(17,43,84,.04);z-index:99}
.logo{display:flex;align-items:center;gap:12px;font-size:1.1rem;letter-spacing:-.45px;white-space:nowrap;color:#10346b}
.logo:before{content:'C';display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;background:linear-gradient(150deg,#1265e1,#42b9fa);border-radius:12px;color:#fff;font-size:1.45rem;font-weight:800;box-shadow:0 8px 19px #2468d530}
.nav-links{display:flex;align-items:center;gap:clamp(12px,1.8vw,28px);margin-left:auto}
.nav-links a{font-size:.86rem;font-weight:600;color:#53637b;white-space:nowrap}
.nav-links a:hover{color:#125ad4}
.nav-wa{font-size:.84rem;font-weight:700;letter-spacing:.1px;background:#1759cc;color:#fff;white-space:nowrap;padding:12px 19px;border-radius:12px;box-shadow:0 6px 17px #2464ca24}
.nav-wa:hover{background:#0c439d;transform:translateY(-2px)}
.nav-menu-toggle{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;align-items:center;justify-content:center;flex-direction:column;gap:5px;border-radius:10px;padding:0}
.nav-menu-toggle span{display:block;width:21px;height:2px;background:#183f78;border-radius:3px}
.hero{position:relative;isolation:isolate;padding:106px 5% 88px;min-height:555px;overflow:hidden;background:linear-gradient(126deg,#05152c 0%,#0b2d56 55%,#124f85 100%);color:#fff;text-align:center}
.hero:before{position:absolute;inset:0;z-index:-1;content:'';background:radial-gradient(ellipse at 87% 7%,#38bdf828,transparent 42%),radial-gradient(ellipse at 14% 90%,#2585fe25,transparent 48%),linear-gradient(90deg,transparent 49.5%,#ffffff08 50%,transparent 50.5%);background-size:auto,auto,68px 68px}
.hero:after{content:'';position:absolute;width:470px;height:470px;border-radius:50%;border:1px solid #ffffff20;right:-260px;top:-260px;box-shadow:0 0 0 80px #ffffff07,0 0 0 160px #ffffff04;z-index:-1}
.hero-ambient{position:absolute;z-index:-1;pointer-events:none;filter:blur(32px);opacity:.75}
.hero-ambient-one{width:260px;height:260px;border-radius:50%;background:#0867d333;left:-130px;bottom:-100px}
.hero-ambient-two{width:280px;height:200px;border-radius:50%;background:#26c8e51a;right:0;bottom:-110px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:#ffffff13;color:#cee7ff;border:1px solid #cce4ff2d;font-size:.72rem;letter-spacing:.14em;font-weight:700;border-radius:50px;padding:9px 16px;margin-bottom:29px}
.hero-kicker:before{content:'';height:8px;width:8px;background:#5eeac8;border-radius:100%;box-shadow:0 0 12px #5eeac8}
.hero h1{max-width:890px;margin:0 auto 22px;color:#fff;font-size:clamp(2.5rem,5.6vw,4.65rem);font-weight:800;line-height:1.13;letter-spacing:-.054em;text-wrap:balance}
.hero h1 span{background:linear-gradient(110deg,#83e2ff,#c0ceff);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero p{font-size:clamp(.94rem,1.8vw,1.13rem);line-height:1.85;color:#c1d3e7;max-width:690px;margin:0 auto 30px}
.hero-btns{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.btn-blue,.btn-white,.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;font-size:.87rem;font-weight:700;min-height:48px;padding:13px 20px;border-radius:11px;box-shadow:0 8px 24px #0000000a}
.btn-blue{border:1px solid #3c8beb;background:#3187f7;color:#fff;box-shadow:0 10px 24px #3187f742}
.btn-blue:hover{transform:translateY(-3px);background:#1978ee}
.btn-white{background:#fff;color:#174b89;border:1px solid #fff}
.btn-white:hover{transform:translateY(-3px);background:#eef7ff}
.btn-outline{border:1px solid #9bd7ff81;color:#d9efff;background:#ffffff0b}
.btn-outline:hover{background:#ffffff1c;transform:translateY(-3px)}
.stats{display:flex;gap:0;justify-content:center;align-items:center;width:max-content;max-width:100%;margin:52px auto 0;padding:22px 26px;border:1px solid #c9e2ff24;background:#ffffff0c;backdrop-filter:blur(10px);border-radius:18px}
.stats>div{padding:0 30px}
.stats>div+div{border-left:1px solid #ffffff2d}
.stat-num{color:#fff;font-size:1.5rem;font-weight:800;letter-spacing:-1px}
.stat-label{color:#bfcee1;font-size:.73rem;margin-top:5px}
section{padding:84px max(5%,calc((100vw - 1200px)/2))}
section:nth-child(even){background:var(--surface)}
.sec-label{font-size:.75rem;letter-spacing:.16em;font-weight:800;color:#1765d3;margin-bottom:12px}
section h2{font-size:clamp(1.72rem,3vw,2.4rem);line-height:1.18;letter-spacing:-.04em;color:#0d2648;margin-bottom:13px}
.section-accent{color:#2468d7}
.sec-sub{font-size:.94rem;color:#65738a;line-height:1.85;max-width:650px;margin-bottom:36px}
.portal-section{position:relative;background:#fff!important;padding-top:88px;padding-bottom:95px}
.portal-heading-wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:15px}
.portal-heading-wrap .sec-sub{margin-bottom:13px}
.portal-heading-mark{width:81px;height:81px;border-radius:24px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;background:linear-gradient(135deg,#eff6ff,#e1f5fc);color:#2d6ac4;font-size:2.8rem;font-weight:900;letter-spacing:-.2em;padding-right:11px}
.portal-heading-mark span{font-size:1.2rem;position:absolute;right:13px;top:10px;color:#20bba3;letter-spacing:normal}
.portal-subhead{display:flex;gap:9px;align-items:center;font-size:.85rem;color:#17365f;font-weight:800;margin:25px 0 15px}
.portal-subhead.secondary{margin:29px 0 15px}
.subhead-dot{width:7px;height:7px;border-radius:50%;background:#3192e8}
.portal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.portal-card{display:flex;position:relative;flex-direction:column;min-height:220px;gap:17px;padding:24px 21px;border:1px solid #e4eaf4;background:#fff;color:#142640;text-decoration:none;border-radius:18px;box-shadow:0 7px 24px #19365b09;overflow:hidden}
.portal-card:before{content:'';height:4px;position:absolute;top:0;left:23px;right:23px;border-radius:0 0 6px 6px;background:linear-gradient(90deg,#0d72e7,#34c2bd);opacity:0;transition:opacity .25s}
.portal-card:hover{transform:translateY(-5px);border-color:#bed9fb;box-shadow:0 20px 35px #1b4d8721}
.portal-card:hover:before{opacity:1}
.portal-icon{display:grid;place-items:center;width:51px;height:51px;border-radius:14px;background:#eaf2ff;font-size:1.45rem;flex-shrink:0}
.portal-icon.blue{background:#e7f1ff}.portal-icon.teal{background:#e4f8f1}.portal-icon.indigo{background:#eaeafe}.portal-icon.amber{background:#fff2da}.portal-icon.violet{background:#f0eafe}.portal-icon.rose{background:#ffecef}
.portal-card-body{display:flex;flex-direction:column;gap:7px;min-width:0}
.portal-card-body strong{font-size:1.02rem;line-height:1.2;letter-spacing:-.02em;color:#122a4a}
.portal-card-body>span{font-size:.79rem;line-height:1.5;color:#64758f}
.portal-card-body small{color:#2571bf;font-size:.72rem;word-break:break-word;font-weight:600}
.portal-arrow{position:absolute;right:21px;top:24px;display:grid;place-items:center;width:25px;height:25px;color:#5d789c;font-size:1.12rem;font-weight:700}
.portal-extra{grid-template-columns:repeat(3,minmax(0,1fr))}
.portal-card.extra{min-height:140px;flex-direction:row;align-items:flex-start;padding:22px 18px;gap:14px}
.portal-card.extra .portal-icon{width:44px;height:44px;border-radius:12px;font-size:1.3rem}
.portal-card.extra .portal-card-body{padding-right:15px}
.portal-card.extra .portal-card-body strong{font-size:.92rem}
.portal-card.extra .portal-card-body span{font-size:.75rem}
.portal-card.extra .portal-card-body small{font-size:.69rem}
.portal-card.extra .portal-arrow{top:19px;right:15px}
#layanan{background:#f5f8fd}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{position:relative;padding:30px 26px 27px;border:1px solid #e4ebf4;border-radius:17px;background:#fff;box-shadow:0 8px 24px #19365b08;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 35px #1b4d8715;border-color:#c3d7f2}
.card-icon{display:grid;place-items:center;width:53px;height:53px;background:#edf5ff;border-radius:15px;font-size:1.55rem;margin-bottom:21px}
.card h3{color:#102b4e;font-size:1rem;margin-bottom:12px;font-weight:800;line-height:1.35}
.card p{color:#68758a;font-size:.84rem;line-height:1.8}
#produk{background:#fff}
.shop-callout{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:33px;padding:30px 33px;background:linear-gradient(115deg,#0a2f5c,#115f9f);border-radius:19px;color:#fff}
.shop-callout>div{display:flex;flex-direction:column;gap:7px}
.callout-eyebrow{color:#97d9ff;font-weight:800;font-size:.69rem;letter-spacing:.13em}
.shop-callout strong{font-size:1.16rem;letter-spacing:-.02em}
.shop-callout p{color:#c7deef;font-size:.82rem;line-height:1.5}
.shop-callout a{display:inline-flex;align-items:center;justify-content:center;gap:10px;color:#0a417d;background:#fff;padding:13px 18px;font-size:.82rem;white-space:nowrap;text-decoration:none;font-weight:800;border-radius:11px}
.shop-callout a:hover{background:#edfaff;transform:translateY(-2px)}
#software{background:#f6f9fe}
.sw-list{max-width:920px;display:grid;gap:10px;margin:0}
.sw-list li{padding:16px 19px;background:#fff;border:1px solid #e6edf6;border-radius:12px;color:#43566e;line-height:1.6;align-items:start;font-size:.87rem}
.sw-list li::before{background:#e8f8f0;color:#149b7f;width:22px;height:22px;display:grid;place-items:center;border-radius:100%;font-size:.8rem;margin-top:1px}
.sw-list strong{color:#17375d}
.tech{margin-top:27px;gap:8px}
.tech span{border:1px solid #cce1fb;background:#e8f2ff;color:#1358ac;padding:8px 11px;border-radius:10px;font-size:.77rem}
#kontak{background:#fff}
.kontak-grid{grid-template-columns:.95fr 1.05fr;gap:52px}
.info-item{gap:18px;align-items:start;margin-bottom:26px}
.info-ico{display:grid;place-items:center;width:45px;height:45px;min-width:45px;border-radius:13px;background:#edf5ff;font-size:1.2rem}
.info-item h4{font-size:.76rem;color:#8290a4;font-weight:700;margin-bottom:5px}
.info-item p{font-size:.9rem;color:#253b58;line-height:1.8}
.form-box{border:1px solid #e2ebf7;background:#f8faff;border-radius:20px;padding:28px 29px;box-shadow:0 10px 40px #10284a0a}
.form-box label{color:#324d6e;font-size:.76rem;font-weight:700;margin-bottom:7px}
.form-box input,.form-box select,.form-box textarea{background:#fff;color:#233b57;border:1px solid #d8e4f3;border-radius:10px;padding:12px 13px;margin-bottom:17px;font-size:.87rem;min-height:43px}
.form-box textarea{min-height:112px}
.form-box :is(input,select,textarea):focus{border-color:#2e8beb;box-shadow:0 0 0 3px #2e8beb18}
.btn-send{background:linear-gradient(110deg,#2066d4,#187fc7);padding:15px;border:0;border-radius:11px;font-size:.86rem;box-shadow:0 10px 20px #1d72cd2a}
.btn-send:hover{filter:brightness(1.08)}
footer{background:var(--navy);padding:36px 5%;line-height:2.15;color:#b3c6db;font-size:.82rem}
footer strong{color:#fff}
.wa-btn{width:55px;height:55px;right:23px;bottom:23px;background:#23bc65;font-size:1.45rem;border:3px solid #fff;box-shadow:0 12px 30px #063b2d3b}
.wa-btn:hover{transform:translateY(-4px) scale(1.04);background:#18ad58}
@media(max-width:1150px){nav{padding-left:4%;padding-right:4%;gap:16px}.nav-links{gap:14px}.nav-links a{font-size:.78rem}.nav-wa{padding:10px 13px}.portal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-extra{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){nav{min-height:72px;flex-wrap:wrap;gap:10px}.logo{margin-right:auto}.nav-menu-toggle{display:flex;order:3}.nav-wa{order:2}.nav-links{display:none;order:4;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;border-top:1px solid #e8eef8;padding:8px 0 12px}.nav-links.open{display:flex}.nav-links li{width:100%}.nav-links a{display:block;padding:12px 8px;font-size:.9rem}.hero{padding-top:75px;min-height:unset}.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.kontak-grid{gap:25px}}
@media(max-width:600px){nav{padding:12px 5%}.logo{font-size:.94rem;gap:8px}.logo:before{height:36px;width:36px;border-radius:10px;font-size:1.25rem}.nav-wa{font-size:.73rem;padding:9px 12px}.nav-menu-toggle{width:32px}section{padding:60px 6%}.hero{padding:71px 6% 65px}.hero h1{font-size:clamp(2.15rem,9vw,3.1rem);letter-spacing:-.05em}.hero p{font-size:.88rem;line-height:1.8}.hero-kicker{font-size:.58rem;letter-spacing:.1em;padding:8px 12px;margin-bottom:23px}.hero-btns{gap:9px}.hero-btns>a{font-size:.77rem;padding:10px 14px;min-height:42px}.stats{width:100%;padding:18px 8px;margin-top:37px}.stats>div{padding:0 8px;flex:1}.stat-num{font-size:1.15rem}.stat-label{font-size:.62rem;line-height:1.4}.portal-section{padding-top:63px;padding-bottom:66px}.portal-heading-mark{display:none}.portal-grid,.portal-extra,.grid3{grid-template-columns:1fr}.portal-card{min-height:155px;flex-direction:row;gap:16px;padding:22px 20px}.portal-card .portal-icon{width:48px;height:48px}.portal-card .portal-card-body{padding-right:12px}.portal-card-body strong{font-size:.94rem}.portal-arrow{top:20px;right:17px}.portal-card.extra{min-height:126px}.portal-card.extra .portal-icon{width:46px;height:46px}.card{padding:24px 23px}.shop-callout{flex-direction:column;align-items:flex-start;padding:24px 23px}.shop-callout a{width:100%;white-space:normal}.kontak-grid{grid-template-columns:1fr;gap:14px}.form-box{padding:23px}.wa-btn{right:15px;bottom:15px;width:50px;height:50px}footer{padding:30px 6%}}
@media(max-width:360px){.nav-wa{font-size:.68rem;padding:8px}.logo{font-size:.84rem}.stats>div{padding:0 4px}.stat-label{font-size:.56rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}


/* Perapian UI/UX: model scroll satu halaman, bukan model tab. */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { overflow-y: auto; }
section { scroll-margin-top: 88px; padding-top: 55px; padding-bottom: 57px; }
.hero { scroll-margin-top: 80px; min-height: 0; padding-top: 77px; padding-bottom: 69px; }
.hero-kicker { margin-bottom: 22px; }
.hero h1 { font-size: clamp(2.3rem, 5.45vw, 4.45rem); margin-bottom: 18px; }
.hero p { margin-bottom: 23px; }
.stats { margin-top: 32px; padding: 17px 22px; }
.portal-section { padding-top: 55px; padding-bottom: 60px; }
.portal-heading-wrap { margin-bottom: 8px; }
.portal-subhead { margin-top: 13px; margin-bottom: 14px; }
.portal-grid { gap: 12px; }
.portal-card { min-height: 174px; padding: 18px; gap: 12px; border-radius: 14px; }
.portal-arrow { top: 18px; right: 17px; }
.sec-sub { margin-bottom: 24px; line-height: 1.7; }
.grid3 { gap: 14px; }
.card { padding: 23px; border-radius: 14px; }
.card-icon { margin-bottom: 13px; }
.card h3 { margin-bottom: 7px; }
.card p { line-height: 1.65; }
.shop-callout { margin-top: 23px; padding: 22px 27px; }
.sw-list li { padding: 12px 16px; }
.tech { margin-top: 17px; }
.info-item { margin-bottom: 19px; }
.kontak-grid { gap: 28px; }
.form-box { padding: 22px; }
.form-box input,.form-box select,.form-box textarea { margin-bottom: 13px; }
.nav-links a[aria-current] { color:#125ad4; }
@media(max-width:850px) { .hero { padding-top: 64px; padding-bottom: 58px; } }
@media(max-width:600px) {
  html { scroll-padding-top: 74px; }
  section { scroll-margin-top: 74px; padding: 39px 6% 42px; }
  .hero { padding: 51px 6% 49px; }
  .hero h1 { font-size: clamp(2.12rem, 9vw, 3.15rem); }
  .hero p { margin-bottom: 18px; }
  .stats { margin-top: 25px; }
  .portal-section { padding-top: 39px; padding-bottom: 43px; }
  .portal-grid { grid-template-columns: 1fr; gap: 10px; }
  .portal-card { min-height: 0; padding: 17px; gap: 12px; }
  .portal-card-body>span { font-size: .76rem; }
  .grid3 { grid-template-columns: 1fr; gap: 10px; }
  .card { padding: 18px; }
  .card-icon { margin-bottom: 9px; }
  .sec-sub { margin-bottom: 19px; }
  .shop-callout { padding: 19px; }
  .kontak-grid { gap: 15px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
/* Jarak target menu cukup sekali dari sticky navbar, bukan dua kali. */
section, .hero { scroll-margin-top: 0; }


/* PEMBARUAN NAVIGASI: bagian yang diklik mengisi area layar, konten terpusat.
   Scroll biasa tetap aktif, konten yang lebih tinggi dari layar tidak terpotong. */
:root { --site-nav-height: 80px; }
html { scroll-padding-top: var(--site-nav-height); }
.hero,
section {
  min-height: calc(100vh - var(--site-nav-height));
  min-height: calc(100svh - var(--site-nav-height));
  scroll-margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero { align-items: center; }
.hero > :not(.hero-ambient) { flex-shrink: 0; }
section { padding-top: clamp(32px, 4vh, 54px); padding-bottom: clamp(32px, 4vh, 54px); }
.portal-section { padding-top: clamp(32px, 4vh, 54px); padding-bottom: clamp(32px, 4vh, 54px); }
/* Ukuran kecil: bila isinya panjang, section tumbuh dan tetap dapat discroll. */
@media (max-width: 600px) {
  section, .portal-section { padding-top: 30px; padding-bottom: 34px; }
  .hero { padding-top: 43px; padding-bottom: 43px; }
}