/* --- Halaman About Me --- */
.about-hero{padding-top:170px;padding-bottom:30px}
.about-hero h1{
  font-size:clamp(2.4rem,6.5vw,3.8rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.05;
}
.pernyataan{
  margin-top:22px;
  font-size:clamp(1.15rem,2.6vw,1.45rem);
  line-height:1.55;font-weight:500;
  color:var(--teks);
  max-width:46ch;
}
.meta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.meta{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;
  padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  color:var(--redup);background:rgba(40,42,47,.5);
}
.meta b{color:var(--aksen);font-weight:500}

/* --- Bab kisah --- */
.bab{
  display:grid;grid-template-columns:70px 1fr;gap:18px;
  padding:26px 0;border-top:1px solid var(--line);
}
.bab-tahun{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;color:var(--aksen);padding-top:6px;
}
.bab p{margin-top:0}

.quote{
  margin:44px 0 0;
  padding:28px 30px;
  border-left:2px solid var(--aksen);
  background:rgba(40,42,47,.5);
  border-radius:0 14px 14px 0;
}
.quote .latin{
  display:block;
  font-size:clamp(1.4rem,3.4vw,2rem);
  font-weight:650;letter-spacing:-.01em;color:var(--teks);
}
.quote .arti{display:block;margin-top:10px;color:var(--redup);font-size:.95rem}

/* --- Timeline pendidikan --- */
.timeline{list-style:none;margin-top:30px;position:relative;padding-left:30px}
.timeline::before{
  content:"";position:absolute;left:9px;top:8px;bottom:8px;
  width:1px;background:var(--line);
}
.timeline li{position:relative;padding:0 0 28px 0}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:-25px;top:7px;
  width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:2px solid var(--aksen);
}
.t-tahun{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;color:var(--aksen);margin-bottom:4px;
}
.timeline h3{font-size:1.05rem;font-weight:600}
.t-note{color:var(--redup);font-size:.9rem;margin-top:4px}

/* --- Kartu skill --- */
.skill-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;margin-top:30px;
}
.skill{
  padding:22px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:14px;
}
.skill-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.skill h3{font-size:1rem;font-weight:600}
.dots{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8rem;color:var(--aksen);letter-spacing:.15em;white-space:nowrap;
}
.dots .off{color:var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font-size:.75rem;padding:4px 10px;
  border:1px solid var(--line);border-radius:999px;color:var(--redup);
}
.cat-note{font-size:.8rem;margin-top:14px}

/* --- Penutup --- */
.penutup{padding-top:40px}

/* --- Scroll reveal --- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.muncul{opacity:1;transform:none}

@media (max-width:720px){
  .about-hero{padding-top:150px}
  .bab{grid-template-columns:1fr;gap:6px}
  .bab-tahun{padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}