@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

:root{
  --bg:#fff; --bg-elevated:#fff;
  --text:#0f172a; --muted-text:#475569; --line:#e2e8f0;
  --primary:#0ea5e9; --primary-600:#0284c7; --primary-contrast:#fff;
  --soft-primary:rgba(14,165,233,.12);
  --radius:14px; --radius-pill:999px;
  --container-max:1200px;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Helvetica Neue",sans-serif; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
.container{ width:min(100%,var(--container-max)); margin-inline:auto; padding-inline:clamp(16px,2vw,28px); }

/* ===== Header ===== */
.site-header{ position:sticky; top:0; z-index:1000; background:var(--bg-elevated); border-bottom:1px solid var(--line); backdrop-filter:saturate(180%) blur(8px); box-shadow:0 2px 18px rgba(2,8,23,.04); }
.site-header .nav{ display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:1rem; }
.site-header .left{ display:flex; align-items:center; gap:1rem; }
.brand{ font-weight:700; white-space:nowrap; }
.lang-toggle{ display:inline-flex; align-items:center; gap:2px; padding:2px; border:1px solid var(--line); border-radius:var(--radius-pill); background:#f8fafc; }
.lang-btn{ appearance:none; border:0; background:transparent; color:var(--muted-text); padding:.45rem .75rem; font-weight:500; border-radius:var(--radius-pill); cursor:pointer; transition:background .2s,color .2s,transform .06s; }
.lang-btn:hover{ background:#f1f5f9; } .lang-btn:active{ transform:translateY(1px); }
.lang-btn.is-active{ background:var(--primary); color:var(--primary-contrast); box-shadow:0 2px 10px rgba(14,165,233,.25); }
.lang-btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

.menu{ display:none; align-items:center; gap:clamp(12px,2vw,24px); }
.menu a{ padding:.5rem .5rem; border-radius:calc(var(--radius) - 6px); font-weight:500; opacity:.9; transition:color .2s,background .2s,opacity .2s; }
.menu a:hover{ color:var(--primary); background:var(--soft-primary); }
.menu .btn.blog-btn,.mobile-menu .btn.blog-btn{ background:var(--primary); color:var(--primary-contrast); padding:.6rem 1rem; border-radius:var(--radius-pill); font-weight:600; box-shadow:0 6px 20px rgba(14,165,233,.25); }
.menu .btn.blog-btn:hover,.mobile-menu .btn.blog-btn:hover{ background:var(--primary-600); }

.menu-toggle{ width:44px; height:44px; display:grid; place-items:center; background:transparent; border:0; border-radius:10px; cursor:pointer; }
.menu-toggle:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.menu-toggle .bar{ display:block; width:22px; height:2px; background:var(--text); border-radius:2px; margin:3px 0; transition:transform .2s,opacity .2s; }

.mobile-menu{ display:grid; gap:6px; padding:.75rem clamp(16px,2vw,28px) 1rem; border-bottom:1px solid var(--line); background:var(--bg-elevated); }
.mobile-menu a{ padding:.75rem .5rem; border-radius:10px; font-weight:500; }
.mobile-menu a:hover{ background:var(--soft-primary); }
.mobile-menu[hidden]{ display:none; }
@media (min-width:900px){ .menu{ display:flex; } .menu-toggle{ display:none; } .mobile-menu{ display:none !important; } }

/* ===== Hero ===== */
.hero{ padding:clamp(32px,6vw,80px) 0; background:
  radial-gradient(1200px 600px at 0% -10%, rgba(14,165,233,.08), transparent 60%),
  radial-gradient(800px 400px at 100% 10%, rgba(2,132,199,.06), transparent 60%);
  border-top:1px solid var(--line);
}
.hero-wrap{ display:grid; gap:clamp(20px,3vw,36px); align-items:start; }
@media (min-width:900px){ .hero-wrap{ grid-template-columns:1.35fr .65fr; } }

.kicker{ margin:0 0 .5rem 0; color:var(--muted-text); font-weight:600; font-size:.9rem; letter-spacing:.3px; }
.hero-title{ margin:0 0 .5rem 0; font-size:clamp(28px,4.5vw,44px); line-height:1.15; }
.hero-desc{ margin:0 0 1.25rem 0; color:var(--muted-text); max-width:58ch; font-size:clamp(.98rem,1.2vw,1.05rem); }

/* Stats */
.stats-grid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:clamp(14px,2.5vw,18px); }
@media (min-width:640px){ .stats-grid{ gap:14px; } }
@media (min-width:900px){ .stats-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stat{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:0 6px 18px rgba(2,8,23,.05); transition:transform .15s, box-shadow .2s; min-width:0; }
.stat:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(2,8,23,.08); }
.stat-value,.stat-value .stat-num{ font-variant-numeric:tabular-nums lining-nums; overflow-wrap:anywhere; word-break:break-word; line-height:1.15; font-weight:700; font-size:clamp(18px,2.9vw,24px); }
.stat-label{ margin-top:4px; color:var(--muted-text); font-size:.9rem; }
@media (max-width:360px){ .stats-grid{ grid-template-columns:1fr; } }

/* Photo card — tightened bottom spacing */
.hero-right{ display:flex; justify-content:center; align-self:start; }
.profile-card{
  margin:0; margin-inline:auto; background:#fff; border:1px solid var(--line);
  border-radius:20px;
  padding:10px 10px 6px;      /* ↓ kurang ruang bawah */
  box-shadow:0 12px 36px rgba(2,8,23,.07);
  display:grid;
  gap:8px;                    /* ↓ gap antara foto & ikon */
  justify-items:center;
  text-align:center;
  max-width:420px;
}
.hero-photo{
  width:min(100%, 320px);
  aspect-ratio:7/8; object-fit:cover; object-position:50% 50%;
  border-radius:16px; box-shadow:0 10px 30px rgba(2,8,23,.12);
  margin-inline:auto;
}
@media (min-width:900px){
  .profile-card{ max-width:440px; padding:10px 10px 6px; }
  .hero-photo{ width:min(100%, 340px); }
}
@media (min-width:1200px){
  .profile-card{ max-width:460px; padding:10px 10px 6px; }
  .hero-photo{ width:min(100%, 360px); }
}

/* Socials */
:root{ --linkedin:#0a66c2; --youtube:#ff0033; --facebook:#1877f2; }
.socials{ display:flex; gap:10px; align-items:center; justify-content:center; padding:4px 0 0; } /* ↓ buang padding bawah */
.social-btn{ width:42px; height:42px; display:grid; place-items:center; border-radius:999px; background:#fff; border:1px solid var(--line); box-shadow:0 6px 18px rgba(2,8,23,.06); transition:transform .15s, box-shadow .2s, background .2s; }
.social-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(2,8,23,.1); }
.icon{ width:22px; height:22px; fill:currentColor; }
.socials a:nth-child(1){ color:var(--linkedin); } .socials a:nth-child(2){ color:var(--youtube); } .socials a:nth-child(3){ color:var(--facebook); }
.socials a:nth-child(1):hover{ box-shadow:0 12px 28px rgba(10,102,194,.25); }
.socials a:nth-child(2):hover{ box-shadow:0 12px 28px rgba(255,0,51,.25); }
.socials a:nth-child(3):hover{ box-shadow:0 12px 28px rgba(24,119,242,.25); }

/* ===== About ===== */
.about{ padding:clamp(32px,6vw,80px) 0; border-top:1px solid var(--line); background:
  radial-gradient(900px 400px at 0% 0%, rgba(14,165,233,.05), transparent 60%),
  radial-gradient(900px 400px at 100% 50%, rgba(2,132,199,.04), transparent 60%);
}
.about-grid{ display:grid; gap:clamp(12px,2.5vw,20px); grid-template-columns:1fr; }
@media (min-width:900px){ .about-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); } .about-card--wide{ grid-column:1 / -1; } .about-card:not(.about-card--wide){ grid-column:span 6; } }
.about-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:clamp(16px,2.4vw,22px); box-shadow:0 6px 18px rgba(2,8,23,.05); transition:transform .15s, box-shadow .2s, border-color .2s; min-width:0; }
.about-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(2,8,23,.08); border-color:rgba(14,165,233,.35); }
.about-card--wide{ padding:clamp(18px,3vw,28px); background:linear-gradient(180deg, rgba(14,165,233,.06), transparent 55%), #fff; }
.about-card h2,.about-card h3{ margin:0 0 .6rem 0; font-weight:700; line-height:1.2; }
.about-card h2{ font-size:clamp(22px,3.2vw,28px); }
.about-card h3{ font-size:clamp(18px,2.2vw,22px); }
.about-card p{ margin:0 0 .9rem 0; color:var(--muted-text); font-size:clamp(.98rem,1.1vw,1.03rem); }
.modern-list{ list-style:none; margin:.2rem 0 0 0; padding:0; display:grid; gap:.5rem; }
.modern-list li{ position:relative; padding-left:1.35rem; color:var(--text); line-height:1.35; }
.modern-list li::before{ content:""; position:absolute; left:0; top:.35rem; width:.65rem; height:.65rem; border-radius:999px; background:var(--primary); box-shadow:0 0 0 4px rgba(14,165,233,.12); }

/* ===== Expertise ===== */
.expertise{ padding:clamp(32px,6vw,80px) 0; border-top:1px solid var(--line); background:
  radial-gradient(900px 420px at 100% 0%, rgba(14,165,233,.05), transparent 60%),
  radial-gradient(900px 420px at 0% 60%, rgba(2,132,199,.04), transparent 60%);
}
.expertise-grid{ display:grid; gap:clamp(12px,2.5vw,20px); grid-template-columns:1fr; }
@media (min-width:900px){ .expertise-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); } .expertise-card:first-child{ grid-column:1 / -1; } .expertise-card:not(:first-child){ grid-column:span 6; } }
@media (min-width:1200px){ .expertise-card:not(:first-child){ grid-column:span 3; } }
.expertise-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:clamp(16px,2.4vw,22px); box-shadow:0 6px 18px rgba(2,8,23,.05); transition:transform .15s, box-shadow .2s, border-color .2s; min-width:0; }
.expertise-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(2,8,23,.08); border-color:rgba(14,165,233,.35); }
.expertise-card:first-child{ padding:clamp(18px,3vw,28px); background:linear-gradient(180deg, rgba(14,165,233,.06), transparent 55%), #fff; }
.expertise-card h2,.expertise-card h3{ margin:0 0 .6rem 0; font-weight:700; line-height:1.2; }
.expertise-card h2{ font-size:clamp(22px,3.2vw,28px); }
.expertise-card h3{ font-size:clamp(18px,2.2vw,22px); }
.expertise .lead{ margin:.2rem 0 0 0; color:var(--muted-text); font-size:clamp(.98rem,1.1vw,1.05rem); max-width:72ch; text-wrap:balance; }

/* ===== Experience ===== */
.experience{ padding:clamp(32px,6vw,80px) 0; border-top:1px solid var(--line); background:
  radial-gradient(900px 420px at 0% 0%, rgba(14,165,233,.05), transparent 60%),
  radial-gradient(900px 420px at 100% 60%, rgba(2,132,199,.04), transparent 60%);
}
.section-title{ margin:0 0 clamp(14px,2.5vw,18px) 0; font-size:clamp(22px,3.2vw,28px); font-weight:700; }
.experience-list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(12px,2.4vw,18px); }
.experience-item{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:clamp(16px,2.4vw,22px); box-shadow:0 6px 18px rgba(2,8,23,.05); transition:transform .15s, box-shadow .2s, border-color .2s; min-width:0; }
.experience-item:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(2,8,23,.08); border-color:rgba(14,165,233,.35); }
.exp-head{ display:flex; align-items:baseline; gap:10px 14px; flex-wrap:wrap; }
.exp-role{ order:1; margin:0; font-size:clamp(18px,2.2vw,22px); font-weight:700; }
.exp-range{ order:2; margin-left:auto; padding:.28rem .6rem; border-radius:var(--radius-pill); background:var(--soft-primary); border:1px solid rgba(14,165,233,.35); color:var(--primary-600); font-weight:600; font-size:.9rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.exp-org{ margin-top:.35rem; color:var(--text); font-weight:600; line-height:1.3; }
.exp-desc{ margin-top:.35rem; color:var(--muted-text); font-size:clamp(.98rem,1.1vw,1.03rem); line-height:1.55; }

/* ===== Footer ===== */
.site-footer{ padding:clamp(36px,7vw,90px) 0 clamp(20px,4vw,40px); border-top:1px solid var(--line); background:
  radial-gradient(1200px 520px at 50% -20%, rgba(14,165,233,.06), transparent 65%),
  radial-gradient(900px 420px at 100% 100%, rgba(2,132,199,.05), transparent 60%), #fff;
}
.footer-grid{ display:grid; gap:clamp(12px,2.6vw,22px); grid-template-columns:1fr; }
@media (min-width:900px){ .footer-grid{ grid-template-columns:1.2fr .8fr; align-items:start; } }
.footer-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(16px,2.6vw,24px); box-shadow:0 6px 18px rgba(2,8,23,.06); transition:transform .15s, box-shadow .2s, border-color .2s; min-width:0; }
.footer-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(2,8,23,.1); border-color:rgba(14,165,233,.35); }
.footer-title{ margin:0 0 .5rem 0; font-size:clamp(22px,3.2vw,28px); font-weight:700; }
.footer-lead{ margin:0 0 .8rem 0; color:var(--muted-text); font-size:clamp(.98rem,1.1vw,1.05rem); max-width:65ch; }
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.contact-link{ display:inline-flex; align-items:center; gap:.6rem; padding:.55rem .75rem; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--text); font-weight:600; transition:background .2s, box-shadow .2s, transform .15s, border-color .2s; }
.contact-link:hover{ background:var(--soft-primary); border-color:rgba(14,165,233,.35); box-shadow:0 8px 24px rgba(14,165,233,.15); transform:translateY(-1px); }
.contact-link:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.contact-icon{ width:20px; height:20px; fill:var(--primary-600); }
.footer-cta{ background:linear-gradient(180deg, rgba(14,165,233,.06), transparent 55%), #fff; }
.cta-title{ margin:0 0 .4rem 0; font-weight:700; font-size:clamp(18px,2.2vw,22px); }
.cta-text{ margin:0 0 .75rem 0; color:var(--muted-text); font-size:clamp(.98rem,1.1vw,1.03rem); }
.site-footer .btn.blog-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.7rem 1.1rem; border-radius:var(--radius-pill); background:var(--primary); color:var(--primary-contrast); font-weight:700; box-shadow:0 8px 26px rgba(14,165,233,.28); border:1px solid rgba(14,165,233,.4); transition:transform .12s, box-shadow .2s, background .2s; }
.site-footer .btn.blog-btn:hover{ background:var(--primary-600); box-shadow:0 12px 34px rgba(2,132,199,.35); transform:translateY(-1px); }
.footer-bottom{ margin-top:clamp(12px,2.8vw,24px); padding-top:clamp(10px,2vw,16px); border-top:1px solid var(--line); text-align:center; color:var(--muted-text); }
.footer-bottom small{ font-size:.9rem; }

/* Motion preferences */
@media (prefers-reduced-motion:reduce){
  .stat:hover,.social-btn:hover,.about-card:hover,.expertise-card:hover,.experience-item:hover,.footer-card:hover{ transform:none; box-shadow:0 6px 18px rgba(2,8,23,.06); }
}