/* ============================================================
   Nugroho Setiawan — Personal Brand Theme (profile.css)
   Profesional, bilingual-ready, navy accent. Load LAST.
   Prefix .np-* (tidak bentrok dgn tema lama .pilar-*).
   ============================================================ */
:root{
  --np-navy:#06337b; --np-navy-2:#0a1f44; --np-accent:#2563eb; --np-accent-soft:#e8f0fe;
  --np-ink:#0f172a; --np-muted:#475569; --np-muted2:#7c899c; --np-line:#e6eaf1;
  --np-bg:#ffffff; --np-bg-soft:#f5f7fc; --np-tint:rgba(6,51,123,.06);
  --np-r:16px; --np-ease:cubic-bezier(.22,1,.36,1);
}
.np-page,.np-page h1,.np-page h2,.np-page h3,.np-page h4,.np-page h5,.np-page h6,.np-page p,.np-page a,.np-page span,.np-page li,.np-page button,.np-page input,.np-page div{ font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important; }
.np-page{ color:var(--np-ink); background:var(--np-bg); -webkit-font-smoothing:antialiased; }
.np-page *{ box-sizing:border-box; }
.np-wrap{ max-width:1140px; margin:0 auto; padding:0 22px; }
.np-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--np-accent); margin-bottom:16px; }
.np-eyebrow::before{ content:""; width:24px; height:2px; background:var(--np-accent); border-radius:2px; }
.np-h2{ font-size:clamp(26px,2.3vw + 1rem,38px); font-weight:800; letter-spacing:-.03em; line-height:1.12; color:var(--np-ink); margin:0; }
.np-sub{ font-size:17px; color:var(--np-muted); line-height:1.65; margin:14px 0 0; }
.np-section{ padding:84px 0; }
.np-section.soft{ background:var(--np-bg-soft); }

/* ===== NAV override (bersih & profesional) ===== */
#site-nav{ background:rgba(255,255,255,.82)!important; backdrop-filter:blur(18px) saturate(160%)!important; -webkit-backdrop-filter:blur(18px) saturate(160%)!important; border-bottom:1px solid transparent!important; box-shadow:none!important; height:72px!important; }
#site-nav.scrolled{ background:rgba(255,255,255,.96)!important; border-bottom:1px solid var(--np-line)!important; box-shadow:0 8px 30px -22px rgba(10,31,68,.5)!important; }
#site-nav .navbar{ height:72px!important; }
#site-nav .logo span{ color:var(--np-ink)!important; } #site-nav .logo span span{ color:var(--np-navy)!important; }
#site-nav .menu-btn,#site-nav .menu-link{ color:var(--np-ink)!important; font-weight:600!important; }
#site-nav .menu-btn:hover,#site-nav .menu-link:hover{ color:var(--np-navy)!important; background:var(--np-tint)!important; }
#site-nav .menu>li.active>.menu-btn,#site-nav .menu>li.active>.menu-link{ color:var(--np-navy)!important; }
#site-nav .menu>li.active>.menu-btn::after,#site-nav .menu>li.active>.menu-link::after{ background:var(--np-navy)!important; }
#site-nav .hamburger span{ background:var(--np-ink)!important; }
#site-nav .dropdown{ background:#fff!important; border-color:var(--np-line)!important; }
#site-nav .dropdown a{ color:var(--np-muted)!important; } #site-nav .dropdown a:hover{ color:var(--np-navy)!important; background:var(--np-tint)!important; }
#site-nav .lang-btn{ color:var(--np-ink)!important; border-color:var(--np-line)!important; }
.btn-top{ background:var(--np-navy)!important; border-color:var(--np-navy)!important; border-radius:10px!important; box-shadow:none!important; }
.btn-top:hover{ background:var(--np-accent)!important; box-shadow:0 12px 26px -14px rgba(37,99,235,.6)!important; }

/* ===== Buttons ===== */
.np-btn{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:15px; padding:13px 26px; border-radius:11px; text-decoration:none; cursor:pointer; transition:all .2s var(--np-ease); border:1px solid transparent; }
.np-btn-primary{ background:var(--np-navy); color:#fff; } .np-btn-primary:hover{ background:var(--np-accent); color:#fff; transform:translateY(-2px); box-shadow:0 16px 32px -16px rgba(37,99,235,.6); }
.np-btn-ghost{ background:transparent; color:var(--np-ink); border-color:var(--np-line); } .np-btn-ghost:hover{ border-color:var(--np-navy); color:var(--np-navy); transform:translateY(-2px); }
.np-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--np-navy); text-decoration:none; transition:gap .2s ease; } .np-link:hover{ gap:13px; color:var(--np-accent); }

/* ===== HERO ===== */
.np-hero{ padding:140px 0 70px; background:radial-gradient(1100px 480px at 78% -8%, var(--np-accent-soft), transparent 70%), var(--np-bg); position:relative; overflow:hidden; }
.np-hero-grid{ display:grid; grid-template-columns:1.25fr .9fr; gap:56px; align-items:center; }
.np-greeting{ font-size:18px; font-weight:600; color:var(--np-muted); margin:0 0 6px; }
.np-name{ font-size:clamp(40px,5vw + 1rem,68px); font-weight:800; letter-spacing:-.04em; line-height:1.02; color:var(--np-ink); margin:0; }
.np-role{ font-size:clamp(15px,1vw + .6rem,18px); font-weight:700; color:var(--np-navy); margin:16px 0 0; letter-spacing:-.01em; }
.np-intro{ font-size:18px; color:var(--np-muted); line-height:1.7; max-width:560px; margin:20px 0 0; }
.np-hero-cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:30px; }
.np-socials{ display:flex; gap:12px; margin-top:26px; }
.np-socials a{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; border:1px solid var(--np-line); color:var(--np-muted); font-size:17px; transition:all .2s var(--np-ease); text-decoration:none; }
.np-socials a:hover{ background:var(--np-navy); color:#fff; border-color:var(--np-navy); transform:translateY(-3px); }
.np-badge{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#0b8a3e; background:#e7f7ee; border:1px solid #bfe9cf; padding:7px 14px; border-radius:999px; margin-bottom:20px; }
.np-badge .dot{ width:8px; height:8px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.18); }
/* hero portrait card */
.np-portrait{ position:relative; }
.np-portrait .photo{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:22px; background:linear-gradient(160deg,var(--np-navy),var(--np-navy-2)); box-shadow:0 40px 80px -40px rgba(10,31,68,.55); display:block; }
.np-portrait .ph-fallback{ width:100%; aspect-ratio:4/5; border-radius:22px; background:linear-gradient(160deg,var(--np-navy),var(--np-navy-2)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:88px; font-weight:800; letter-spacing:-.04em; box-shadow:0 40px 80px -40px rgba(10,31,68,.55); }
.np-portrait .chip{ position:absolute; left:-18px; bottom:26px; background:#fff; border:1px solid var(--np-line); border-radius:14px; padding:12px 16px; box-shadow:0 20px 44px -24px rgba(10,31,68,.4); }
.np-portrait .chip .v{ font-size:20px; font-weight:800; color:var(--np-navy); line-height:1; } .np-portrait .chip .l{ font-size:11.5px; color:var(--np-muted2); margin-top:3px; }

/* ===== STATS ===== */
.np-stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--np-line); margin-top:64px; }
.np-stats .st{ padding:26px 24px 0; border-left:1px solid var(--np-line); } .np-stats .st:first-child{ border-left:none; padding-left:0; }
.np-stats .v{ font-size:34px; font-weight:800; letter-spacing:-.02em; color:var(--np-ink); line-height:1; } .np-stats .l{ font-size:13px; color:var(--np-muted); margin-top:8px; }

/* ===== ABOUT ===== */
.np-about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }
.np-about-grid p{ font-size:17px; color:var(--np-muted); line-height:1.75; margin:0 0 16px; }
.np-facts{ display:flex; flex-direction:column; gap:14px; }
.np-fact{ display:flex; gap:12px; align-items:center; font-size:15px; color:var(--np-ink); } .np-fact i{ color:var(--np-navy); width:20px; text-align:center; }

/* ===== SERVICES ===== */
.np-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.np-card{ background:#fff; border:1px solid var(--np-line); border-radius:var(--np-r); padding:26px 22px; transition:all .2s var(--np-ease); }
.np-card:hover{ border-color:rgba(37,99,235,.4); box-shadow:0 28px 50px -34px rgba(10,31,68,.4); transform:translateY(-4px); }
.np-card .ic{ width:48px; height:48px; border-radius:13px; background:var(--np-tint); color:var(--np-navy); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:16px; }
.np-card h3{ font-size:17px; font-weight:800; color:var(--np-ink); margin:0 0 7px; } .np-card p{ font-size:14px; color:var(--np-muted); line-height:1.6; margin:0; }

/* ===== TECH ===== */
.np-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.np-pill{ font-size:14px; font-weight:600; color:var(--np-ink); background:#fff; border:1px solid var(--np-line); padding:9px 16px; border-radius:999px; transition:all .15s ease; }
.np-pill:hover{ border-color:var(--np-navy); color:var(--np-navy); }

/* ===== EXPERIENCE ===== */
.np-timeline{ border-top:1px solid var(--np-line); }
.np-exp{ display:grid; grid-template-columns:220px 1fr; gap:28px; padding:28px 0; border-bottom:1px solid var(--np-line); }
.np-exp .when{ font-size:14px; font-weight:700; color:var(--np-navy); } .np-exp .org{ font-size:13.5px; color:var(--np-muted2); margin-top:4px; }
.np-exp h3{ font-size:19px; font-weight:800; color:var(--np-ink); margin:0 0 6px; } .np-exp p{ font-size:15px; color:var(--np-muted); line-height:1.65; margin:0; }

/* ===== ARTICLES ===== */
.np-arts{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.np-art{ background:#fff; border:1px solid var(--np-line); border-radius:var(--np-r); overflow:hidden; display:flex; flex-direction:column; transition:all .2s var(--np-ease); }
.np-art:hover{ border-color:rgba(37,99,235,.35); box-shadow:0 28px 50px -34px rgba(10,31,68,.4); transform:translateY(-4px); }
.np-art .thumb{ aspect-ratio:16/9; overflow:hidden; } .np-art .thumb img{ width:100%; height:100%; object-fit:cover; }
.np-art .body{ padding:18px; display:flex; flex-direction:column; flex:1; }
.np-art .tag{ align-self:flex-start; font-size:11px; font-weight:700; color:var(--np-navy); background:var(--np-tint); padding:4px 11px; border-radius:999px; margin-bottom:10px; }
.np-art h3{ font-size:16px; font-weight:800; line-height:1.35; margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.np-art h3 a{ color:var(--np-ink); text-decoration:none; } .np-art h3 a:hover{ color:var(--np-navy); }
.np-art .ex{ font-size:13.5px; color:var(--np-muted); line-height:1.6; margin:0 0 12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.np-art .meta{ font-size:12px; color:var(--np-muted2); display:flex; gap:12px; border-top:1px solid var(--np-line); padding-top:11px; }

/* ===== CONTACT CTA ===== */
.np-contact{ background:linear-gradient(150deg,var(--np-navy-2),var(--np-navy)); color:#fff; border-radius:24px; padding:54px 48px; text-align:center; }
.np-contact .np-eyebrow{ color:#9cc0ff; justify-content:center; } .np-contact .np-eyebrow::before{ background:#9cc0ff; }
.np-contact h2{ font-size:clamp(26px,2.4vw + 1rem,40px); font-weight:800; letter-spacing:-.03em; margin:0 0 12px; }
.np-contact p{ font-size:17px; color:rgba(255,255,255,.8); max-width:560px; margin:0 auto 28px; line-height:1.6; }
.np-contact .np-btn-primary{ background:#fff; color:var(--np-navy); } .np-contact .np-btn-primary:hover{ background:var(--np-accent-soft); color:var(--np-navy); }

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .np-hero{ padding:116px 0 52px; } .np-hero-grid{ grid-template-columns:1fr; gap:36px; } .np-portrait{ max-width:340px; }
  .np-about-grid{ grid-template-columns:1fr; gap:26px; } .np-cards{ grid-template-columns:repeat(2,1fr); } .np-arts{ grid-template-columns:1fr; }
  .np-stats{ grid-template-columns:repeat(2,1fr); } .np-stats .st{ padding:22px 16px; border-top:1px solid var(--np-line); } .np-stats .st:nth-child(odd){ border-left:none; padding-left:0; }
  .np-exp{ grid-template-columns:1fr; gap:8px; } .np-section{ padding:60px 0; } .np-contact{ padding:40px 24px; }
}
@media(max-width:560px){ .np-cards{ grid-template-columns:1fr; } }