*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#17171a;background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.logo{font-size:20px;letter-spacing:-.4px;font-weight:800;color:#17171a;text-decoration:none}
.logo em{font-style:normal;color:#0071e3}
.logo::after{content:".my.id";font-size:11px;color:#86868b;font-weight:600;margin-left:2px}
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:blur(14px);border-bottom:1px solid #e8e8ed;box-shadow:0 4px 18px rgba(20,20,60,.05)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.menu{display:flex;gap:24px;align-items:center}
.menu a{color:#3c3c43;text-decoration:none;font-size:14px;font-weight:500}
.menu a:hover{color:#0071e3}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:#0071e3;color:#fff;border:0;border-radius:980px;padding:10px 20px;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;transition:.25s;box-shadow:0 8px 20px rgba(0,113,227,.3)}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,113,227,.4)}
.btn-ghost{background:#fff;color:#0071e3;box-shadow:0 6px 16px rgba(20,20,60,.08);border:1px solid #0071e3}
.btn-big{padding:16px 32px;font-size:16px}
.hero{position:relative;padding:92px 0 72px;overflow:hidden;background:linear-gradient(180deg,#f4f7ff 0%,#fff 100%);border-bottom:1px solid #ececf2}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:drift 14s ease-in-out infinite alternate}
.b1{width:520px;height:520px;background:#7ab8ff;top:-160px;left:-140px}
.b2{width:420px;height:420px;background:#c79bff;bottom:-160px;right:-100px;animation-delay:-6s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.15)}}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative}
h1{font-size:clamp(34px,6vw,62px);line-height:1.08;letter-spacing:-2px;font-weight:800}
h1 span{background:linear-gradient(90deg,#0071e3,#7b3ff2);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:#4b4b52;font-size:clamp(15px,2.2vw,19px);line-height:1.6;max-width:520px;margin:22px 0 30px}
.micro{color:#6e6e73;font-size:13px;margin-top:16px}
.stack{position:relative;height:380px}
.fcard{position:absolute;background:rgba(255,255,255,.96);border:1px solid #e6e6eb;border-radius:18px;box-shadow:0 30px 70px rgba(20,20,60,.18),0 6px 18px rgba(20,20,60,.08);padding:16px 20px;width:250px;animation:float 6s ease-in-out infinite}
.fcard h4{font-size:14px;margin-bottom:4px}
.fcard p{font-size:12px;color:#6e6e73}
.f1{top:6px;left:6px;rotate:-6deg}
.f2{top:120px;left:120px;rotate:3deg;animation-delay:-2s}
.f3{top:232px;left:36px;rotate:-2deg;animation-delay:-4s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;max-width:1032px;margin:-34px auto 0;padding:26px 24px;background:#fff;border:1px solid #e6e6eb;border-radius:22px;box-shadow:0 24px 60px rgba(20,20,60,.12);position:relative;z-index:5}
.stat{text-align:center}
.stat b{font-size:30px;font-weight:800;letter-spacing:-1px}
.stat span{display:block;color:#6e6e73;font-size:13px;margin-top:4px}
section{padding:84px 0;border-top:1px solid #ececf2}
h2{font-size:clamp(24px,4vw,40px);letter-spacing:-1px;text-align:center;margin-bottom:48px;font-weight:800}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px}
.card{background:#fff;border:1px solid #e6e6eb;border-radius:22px;padding:28px;box-shadow:0 10px 30px rgba(20,20,60,.08);transition:transform .3s,box-shadow .3s;will-change:transform}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(20,20,60,.16)}
.card span.no{color:#0071e3;font-weight:800;font-size:13px}
.card h3{font-size:18px;margin:8px 0 10px}
.card p{color:#4b4b52;font-size:14px;line-height:1.55}
.tag{display:inline-block;background:#f2f2f7;color:#6e6e73;border-radius:980px;padding:4px 12px;font-size:11px;font-weight:700;margin-bottom:10px}
.price{background:#f7f8fb}
.num{font-size:28px;font-weight:800;margin:6px 0}
.hi{border:2px solid #0071e3;box-shadow:0 24px 60px rgba(0,113,227,.22);transform:translateY(-8px)}
.band{max-width:1032px;margin:40px auto;background:radial-gradient(900px 380px at 15% 0,#123a7a,#0b0b12 65%);color:#fff;border-radius:28px;padding:64px 32px;text-align:center;box-shadow:0 40px 90px rgba(11,11,18,.35)}
.band h2{color:#fff;margin-bottom:14px}
.band p{color:#b8c4dd;margin-bottom:28px}
.rev{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.3,1)}
.rev.in{opacity:1;transform:none}
footer{background:#0b0b0f;color:#a1a1a6;padding:64px 0 30px;margin-top:70px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px}
footer h5{color:#fff;font-size:12px;margin-bottom:14px;text-transform:uppercase;letter-spacing:1.4px}
footer a{display:block;color:#a1a1a6;text-decoration:none;font-size:13px;margin-bottom:9px}
footer a:hover{color:#fff}
.fbot{border-top:1px solid #26262b;margin-top:44px;padding-top:20px;font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.mcta{display:none}
@media(max-width:860px){
  body{padding-bottom:76px}
  .nav .wrap{height:56px}
  .menu a{display:none}
  .hero{padding:56px 0 60px}
  .hero .wrap{grid-template-columns:1fr;gap:0}
  .stack{display:flex;flex-direction:column;gap:14px;height:auto;max-width:360px;margin:30px auto 0;padding:0 16px;position:relative}
  .fcard{position:relative;top:auto;left:auto;width:100%;margin:0;padding:16px 20px}
  .f1{rotate:-1.5deg}
  .f2{rotate:1.2deg;animation-delay:-2s}
  .f3{rotate:-0.8deg;animation-delay:-4s}
  .fcard h4{font-size:15px}
  .fcard p{font-size:13px}
  .stats{margin:-20px 16px 0;padding:20px 14px;gap:10px}
  .stat b{font-size:22px}
  .stat span{font-size:12px}
  .hero .btn-big{width:100%;max-width:380px;margin:0 0 12px!important}
  .sub{margin:18px 0 24px}
  section{padding:52px 0}
  h2{margin-bottom:28px}
  .grid3,.grid4{gap:14px}
  .card{padding:22px}
  .hi{transform:none}
  .band{margin:26px 16px;padding:44px 20px;border-radius:22px}
  footer{padding:46px 0 22px;margin-top:44px}
  .cols{gap:24px}
  .fbot{flex-direction:column;gap:6px}
  .mcta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid #e8e8ed;padding:10px 14px;gap:10px;box-shadow:0 -10px 30px rgba(20,20,60,.1)}
  .mcta .btn{flex:1}
}
@media(max-width:560px){
  div.box,div.box.wide{padding:24px 20px}
  .auth{padding:26px 14px}
}
/* ==== v4: profesional, tegas, menonjol ==== */
.logo em{font-style:normal;color:#0071e3}
.logo::after{content:".my.id";font-size:11px;color:#86868b;font-weight:600;margin-left:2px}
.prose{max-width:760px}
.prose h2{text-align:left;font-size:21px;line-height:1.35;letter-spacing:-.3px;margin:30px 0 10px;font-weight:800;color:#17171a}
.prose p{font-size:16px;line-height:1.85;color:#3c3c43;margin:0 0 14px}
.desk{min-height:64px}
.kotak{margin-top:14px}
.hero{background:linear-gradient(180deg,#eef3ff 0%,#ffffff 100%)}
.sub{color:#3f3f46}
.card p{color:#3f3f46}
.micro{color:#5b5b63}
.card{border-color:#dcdce4;box-shadow:0 12px 34px rgba(20,20,60,.10)}
.card:hover{transform:translateY(-6px);box-shadow:0 34px 80px rgba(20,20,60,.18)}
.fcard{box-shadow:0 34px 80px rgba(20,20,60,.20)}
.stats{box-shadow:0 28px 70px rgba(20,20,60,.14)}
.band{box-shadow:0 44px 100px rgba(11,11,18,.38)}
/* ==== v4: presisi, tipografi artikel, neon ==== */
.btn{white-space:nowrap}
.card{border-color:#dcdce4;box-shadow:0 16px 44px rgba(20,20,60,.12);transition:transform .3s,box-shadow .3s}
.card .btn,.card div .btn{margin-top:16px}
.card:hover{box-shadow:0 0 0 3px rgba(0,113,227,.28),0 0 30px rgba(0,113,227,.35),0 20px 50px rgba(20,20,60,.18)}
.card.nyala{box-shadow:0 0 0 4px rgba(0,113,227,.4),0 0 40px rgba(0,113,227,.6),0 20px 50px rgba(20,20,60,.2)}
.post{max-width:760px;margin:0 auto}
.post h1{font-size:clamp(28px,4.5vw,42px);text-align:left;letter-spacing:-1px;line-height:1.15;margin-bottom:10px}
.post .lead{font-size:16px;color:#6e6e73;margin-bottom:26px}
.post h2{font-size:22px;text-align:left;margin:30px 0 10px;letter-spacing:-.3px}
.post p{font-size:16px;line-height:1.85;color:#3c3c43;margin:0 0 14px}
.post .card{margin-top:26px}
.gaji{display:inline-block;background:#e8f2ff;color:#0071e3;border-radius:980px;padding:4px 12px;font-size:12px;font-weight:700;margin:6px 0}
.jobmeta{font-size:13px;color:#6e6e73}
/* ==== neon menyeluruh: semua kotak pembatas ==== */
.box,.fcard,.stats{transition:transform .3s,box-shadow .3s}
.card:hover,.box:hover,.fcard:hover,.stats:hover{box-shadow:0 0 0 3px rgba(0,113,227,.28),0 0 30px rgba(0,113,227,.35),0 20px 50px rgba(20,20,60,.18)}
.card.nyala,.box.nyala,.fcard.nyala,.stats.nyala{box-shadow:0 0 0 4px rgba(0,113,227,.4),0 0 40px rgba(0,113,227,.6),0 20px 50px rgba(20,20,60,.2);transform:scale(1.02)}
@media (max-width:700px){
  .nav .wrap{flex-wrap:wrap;row-gap:6px}
  .nav .menu{display:flex !important;width:100%;flex-wrap:wrap;gap:2px 14px;margin:0}
  .nav .menu a{margin:0;font-size:13px}
}