:root{--bg:#0A0A0B;--panel:rgba(255,255,255,.04);--line:rgba(255,255,255,.12);--text:#fff;--muted:rgba(255,255,255,.72);--accent1:#6ee7b7;--accent2:#67e8f9}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block;height:auto}

header{position:sticky;top:0;z-index:10;backdrop-filter:blur(6px);background:rgba(10,10,11,.8);border-bottom:1px solid var(--line)}
header .inner{max-width:1100px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:12px 20px}
header nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

.btn{padding:10px 14px;border-radius:12px;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#04130f;font-weight:700}
.btn.ghost{background:transparent;border:1px solid var(--line);color:#fff}

.lang{display:flex;gap:8px;align-items:center}
.lang button{border:1px solid var(--line);background:var(--panel);color:#fff;padding:6px 10px;border-radius:10px;cursor:pointer}
.lang button.active{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#04130f;border-color:transparent;font-weight:800}

section{padding:64px 20px}
.container{max-width:1100px;margin:0 auto}

.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
@media(max-width:900px){.hero{grid-template-columns:1fr}.avatarWrap{max-width:360px;margin:0 auto}}
.headline{font-size:clamp(32px,6vw,62px);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:10px 0 0}
.gradient{background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.cta{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.avatar{width:116px;height:116px;border-radius:50%;object-fit:cover;border:4px solid var(--accent1);box-shadow:0 2px 16px rgba(110,231,183,.35)}

.toolsRow{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:30px}
.toolIcon{width:64px;height:64px;border-radius:16px;background:var(--panel);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease, border-color .2s ease}
.toolIcon:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.22)}
.toolIcon img{width:36px;height:36px;display:block;opacity:.95}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.statVal{font-size:26px;font-weight:800;transform:translateY(6px);opacity:.8;transition:opacity .4s ease, transform .4s ease}
.statVal.live{opacity:1;transform:translateY(0)}
.statLab{color:var(--muted);margin-top:4px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;content-visibility:auto;contain-intrinsic-size:800px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{border:1px solid var(--line);background:var(--panel);border-radius:16px;overflow:hidden}
.card-body{padding:14px 14px 16px}
.card h3{margin:0 0 6px;font-size:1.04rem}
.muted{color:var(--muted);font-size:.95rem}

/* Lite YouTube */
.yt-lite{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer}
.yt-lite::before{content:'';position:absolute;inset:0;background:var(--panel);transition:opacity .3s}
.yt-lite::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:linear-gradient(90deg,var(--accent1),var(--accent2));box-shadow:0 4px 20px rgba(0,0,0,.35)}
.yt-lite.playing::before,.yt-lite:hover::before{opacity:.2}
.yt-lite>span.thumb{position:absolute;inset:0;background-position:center;background-size:cover;filter:saturate(.95)}
.yt-lite>span.label{position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);font-weight:700}

/* Review & Contact */
.review{border:1px solid var(--line);border-left:6px solid var(--accent1);border-radius:12px;background:var(--panel);padding:16px}
.stars{color:#f59e0b;font-size:.95rem;margin-bottom:6px}
.contact{border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:20px;text-align:center}
.links a{display:inline-block;margin:0 8px;font-weight:700}

footer{border-top:1px solid var(--line);text-align:center;padding:24px;color:var(--muted)}
h2{font-size:1.35rem;margin:0 0 12px}

/* ===== FIXES ===== */
/* 1) Posisi & ukuran foto hero (desktop) */
@media (min-width: 901px){
  .hero{ align-items: start; }      /* sejajarkan konten ke atas */
  .avatarWrap{
    align-self: start;              /* kunci di atas */
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-top: 6px;
  }
  .avatar{ width:150px; height:150px; } /* sesuaikan 140–164px */
}
/* Mobile tetap center */
@media (max-width: 900px){
  .hero{ align-items: center; }
  .avatarWrap{ margin-top: 12px; }
  .avatar{ width:116px; height:116px; }
}

/* 2) Hilangkan lingkaran di thumbnail video */
.yt-lite::after { content: none !important; }
/* overlay lebih tipis */
.yt-lite::before { background: rgba(0,0,0,.12); }
/* Sembunyikan baris statistik "98% Job Success • ..." */
#meta{ display:none !important; }
/* ====== Kartu Profil (Hero) ====== */
@media (min-width: 901px){
  .hero{ align-items: start; } /* sejajarkan kolom ke atas */
}

.profileCard{
  align-self: start;               /* nempel ke atas pada grid hero */
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}

.profileCard .avatar{
  width: 96px; height: 96px;      /* ubah 84–120px sesuai selera */
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent1);
  box-shadow:
    0 0 0 4px rgba(110,231,183,.22),  /* ring glow */
    0 2px 12px rgba(0,0,0,.35);
}

.profName{
  margin: 0 0 4px;
  font-weight: 800;
  font-size: 1.1rem;
}

.profRole{ margin: 0; }

/* Mobile: kartu ditengah & bertumpuk */
@media (max-width: 900px){
  .profileCard{
    margin-top: 12px;
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }
}
/* Hero: hanya kartu profil yang ditengah, kolom kiri tetap di atas */
@media (min-width: 901px){
  .hero{ align-items: start; }                 /* kiri tetap top */
  .profileCard{ align-self: center !important; /* kanan center */
                margin-top: 0 !important; }
}
/* ===== HERO PROFILE BADGE ===== */
:root{ --hp-align:center; }       /* atur vertical align: start | center | end */

@media (min-width: 901px){
  .hero{ align-items: start; }    /* kiri tetap nempel ke atas */
}

.heroProfile{
  align-self: var(--hp-align);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}

/* foto selalu bulat 1:1 + ring gradasi */
.hp-photo{
  position: relative;
  width: clamp(92px, 10vw, 112px);
  aspect-ratio: 1/1;
  flex: 0 0 auto;
}
.hp-photo::before{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  z-index:0;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.hp-photo img{
  position: relative; z-index:1;
  width:100%; height:100%; object-fit:cover;
  border-radius:50%;
  border: 3px solid rgba(0,0,0,.65);         /* inner cut agar ring terlihat clean */
  box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset;
}

.hp-meta{ line-height:1.35 }
.hp-name{ margin:0 0 4px; font-weight:800; font-size:1.08rem }
.hp-role,.hp-loc{ margin:0; color:var(--muted) }
.hp-loc::before{ content:"📍 "; }

/* Mobile: kartu di-center & ditumpuk */
@media (max-width: 900px){
  .heroProfile{
    margin-top: 14px;
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }
}
/* Fallback huruf kalau ikon gambar diblokir/404 */
.toolIcon{ position:relative; }
.toolIcon .ti{ display:none; font-weight:800; }
.toolIcon.noimg img{ display:none; }
.toolIcon.noimg .ti{ display:block; }   /* huruf muncul dan otomatis center */

/* === 1) Hero word: gradient bergerak pelan === */
.headline .gradient{
  background-size: 200% 100%;
  animation: gradientShift 12s linear infinite;
}
@keyframes gradientShift{
  0%{background-position: 0% 50%}
  100%{background-position: 200% 50%}
}

/* === 2) Ring foto profil bernafas (untuk markup heroProfile yang kemarin) === */
.hp-photo::before{ animation: ringPulse 6s ease-in-out infinite; }
@keyframes ringPulse{
  0%,100%{ transform: scale(1); opacity:.9 }
  50%{ transform: scale(1.06); opacity:1 }
}

/* === 3) Micro-interactions (hover) === */
.btn{ transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s }
.btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.28) }

.card{ transition: transform .25s ease, box-shadow .25s ease }
.card:hover{ transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0,0,0,.25) }

.toolIcon{ transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease }
.toolIcon:hover{ transform: translateY(-3px) rotate(-2deg); box-shadow: 0 12px 24px rgba(0,0,0,.22) }

/* === 4) Reveal-on-scroll (fade + slide-up) === */
.reveal{
  opacity:0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.inview{ opacity:1; transform:none }
.reveal[data-delay]{ transition-delay: var(--delay, 0ms) }

/* === 5) Aksesibilitas: matikan animasi jika user prefer reduce motion === */
@media (prefers-reduced-motion: reduce){
  .headline .gradient, .hp-photo::before{ animation:none }
  .reveal, .reveal.inview{ transition:none; opacity:1; transform:none }
}