/* ============ Base ============ */
:root{
  --bg:#00052E;
  --white-60:rgba(255,255,255,.6);
  --font-brand:'Bagel Fat One','Segoe UI',cursive;
  --font-body:'DM Sans','Segoe UI',system-ui,sans-serif;
  --font-display:'Momo Trust Display','Poppins','Segoe UI',sans-serif;
  --font-script:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:#fff;
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}

/* ============ Hero ============ */
.hero{
  position:relative;
  min-height:100svh;
  max-height:960px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 100%, #1e038c 5%, transparent 70%),
    radial-gradient(circle at 0% 0%, #00052e 5%, transparent 70%),
    linear-gradient(135deg,#0a0a0f 0%,#1a0a2e 100%);
}

/* --- Header --- */
.hero__header{
  position:absolute;
  inset:0 0 auto 0;
  z-index:3;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:28px 80px;
}
.brand{
  font-family:var(--font-brand);
  font-size:39px;
  line-height:.95;
  letter-spacing:.07em;
  color:var(--white-60);
}
.nav{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  font-size:21px;
  color:var(--white-60);
}
.nav a{transition:color .2s ease}
.nav a:hover,.nav a:focus-visible{color:#fff}


/* --- Photo --- */
.hero__photo{
  position:absolute;
  left:50%;
  bottom:-0.6%;
  transform:translateX(-50%);
  z-index:1;
  height:94%;
  display:block;
  pointer-events:none;
}
.hero__photo img{
  height:100%;
  width:auto;
  max-width:none;
  display:block;
  object-fit:contain;
  object-position:bottom center;
}

/* --- Judul --- */
.hero__title{
  position:absolute;
  left:80px;
  bottom:84px;
  z-index:2;
  margin:0;
  display:flex;
  flex-direction:column;
}
.hero__title-main{
  font-family:var(--font-display);
  font-weight:700;
  font-size:80px;
  line-height:.85;
  letter-spacing:-.06em;
  white-space:nowrap;
  color:#fff;
}
.hero__title-script{
  font-family:var(--font-script);
  font-size:60px;
  letter-spacing:-.06em;
  white-space:nowrap;
  line-height:.9;
  margin-top:-2px;
  color:#fff;
}

/* --- CTA --- */
.hero__cta{
  position:absolute;
  right:80px;
  bottom:180px;
  z-index:2;
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
  font-size:28px;
  color:var(--white-60);
  transition:color .2s ease;
}
.hero__cta span{
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}
.hero__cursor{
  width:36px;
  height:36px;
  flex:none;
  fill:currentColor;
  margin-bottom:-6px;
}
.hero__cta:hover,.hero__cta:focus-visible{color:#fff}

/* ============ Responsive ============ */
@media (max-width:1200px){
  .hero__header{padding:32px 40px}
  .hero__title{left:40px}
  .hero__cta{right:40px}
  .hero__title-main{font-size:54px}
  .hero__title-script{font-size:40px}
}

@media (max-width:860px){
  .hero{min-height:100svh;max-height:none}
  .hero__header{padding:24px 24px}
  .brand{font-size:26px}
  .nav{font-size:16px;gap:6px}

  .hero__photo{height:auto;width:125%;bottom:-0.6%}
  .hero__photo img{width:100%;height:auto}

  .hero__title{left:24px;right:24px;bottom:36px;align-items:flex-start}
  .hero__title-main{font-size:calc((100vw - 48px) / 7.5)}
  .hero__title-script{font-size:calc((100vw - 48px) / 10.0)}

  .hero__cta{
    right:24px;
    bottom:34%;
    font-size:17px;
  }
  .hero__cursor{width:22px;height:22px;margin-bottom:-4px}
}

@media (max-width:420px){
  .brand{font-size:22px}
  .nav{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ============ Preloader ============ */
#preloader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 50%, #1e038c 25%, transparent 70%),
    linear-gradient(135deg,#0a0a0f 0%,#1a0a2e 100%);
  transform:translateY(0);
  transition:transform .415s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
#preloader.is-done{transform:translateY(-100%)}

.preloader__text{
  margin:0;
  display:flex;
  align-items:center;
  gap:.06em;
  white-space:nowrap;          /* satu baris, tidak pernah turun */
  font-family:var(--font-body);
  font-size:clamp(20px,3.4vw,42px);
  line-height:1.2;
  letter-spacing:.03em;
  color:#fff;
}
.preloader__caret{
  width:.07em;
  height:1em;
  background:#fff;
  animation:caretBlink .7s steps(1,end) infinite;
}
#preloader.is-typed .preloader__caret{animation:none;opacity:0}

@keyframes caretBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  #preloader{transition:transform .2s linear}
  .preloader__caret{animation:none}
}

/* ============ Animasi masuk Hero ============ */
/* Kondisi awal hanya dipasang saat JS aktif, agar tanpa JS semuanya tetap terlihat. */
.js .anim-left,
.js .anim-right,
.js .hero__title-script,
.js .hero__cta{opacity:0}

/* Judul yang diketik: sembunyikan sampai proses mengetik dimulai,
   agar teks lengkap tidak sempat berkedip saat tirai preloader naik. */
.js .hero__title-main{opacity:0}
.js .hero__title-main.is-typing,
.js .hero__title-main.is-in{opacity:1}

.js .anim-left{transform:translateX(-48px)}
.js .anim-right{transform:translateX(48px)}
.js .hero__photo{opacity:0;transform:translateX(-50%) translateY(56px)}

.js .anim-left,
.js .anim-right{transition:opacity .365s ease-in-out,transform .365s ease-in-out}
.js .hero__title-script,
.js .hero__cta{transition:opacity .31s ease-in-out}
.js .hero__photo{transition:opacity .47s ease-out,transform .47s cubic-bezier(.22,.61,.36,1)}

.js .anim-left.is-in,
.js .anim-right.is-in{opacity:1;transform:translateX(0)}
.js .hero__title-script.is-in,
.js .hero__cta.is-in{opacity:1}
.js .hero__photo.is-in{opacity:1;transform:translateX(-50%) translateY(0)}

/* Kursor saat judul diketik */
.type-caret{
  display:none;
  width:.055em;
  height:.78em;
  margin-left:.06em;
  background:#fff;
  animation:caretBlink .7s steps(1,end) infinite;
}
.js .is-typing .type-caret{display:inline-block}

@media (prefers-reduced-motion:reduce){
  .js .hero__title-main{opacity:1}
  .js .anim-left,.js .anim-right,.js .hero__title-script,
  .js .hero__cta,.js .hero__photo{opacity:1;transform:none;transition:none}
  .js .hero__photo{transform:translateX(-50%)}
  .type-caret{display:none!important}
}

/* ============ Scroll per section ============ */
/* Perpindahan antar section dikendalikan main.js (satu gerakan = satu section).
   scroll-snap dilepas agar tidak beradu dengan animasi scroll dari JS. */
.hero,.about{scroll-snap-align:start}

/* ============ Tentang Saya ============ */
.about{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--bg);
}
.about__inner{
  position:relative;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:0 80px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  align-items:center;
  gap:40px;
}
.about__content{max-width:680px}

.about__title{
  margin:0 0 26px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:86px;
  line-height:1;
  letter-spacing:-.06em;
  color:#fff;
}
.about__text p{
  margin:0 0 20px;
  font-size:19px;
  line-height:1.2;
  letter-spacing:0;
  color:rgba(255,255,255,.8);
}
.about__text p:last-child{margin-bottom:0}

.about__stats-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:34px;
  line-height:1;
  letter-spacing:-.06em;
  color:#fff;
}

/* --- Angka pencapaian --- */
.stats{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  align-items:flex-start;
  gap:48px;
}
.stat{display:flex;flex-direction:column;align-items:flex-start}
.stat__num{
  font-family:var(--font-brand);
  font-size:64px;
  line-height:1;
  letter-spacing:-.06em;
  color:rgba(255,255,255,.8);
  white-space:nowrap;
}
/* Label mengikuti lebar angka di atasnya — ukurannya dihitung di main.js */
.stat__label{
  display:block;
  font-family:var(--font-brand);
  line-height:1.05;
  letter-spacing:-.06em;
  color:rgba(255,255,255,.8);
  font-size:24px;            /* nilai awal, ditimpa JS */
}
.stat__label span{display:block;white-space:nowrap}

/* --- Foto --- */
.about__photo{
  position:absolute;
  right:5%;
  bottom:-14%;
  z-index:2;
  height:103%;
  display:block;
  pointer-events:none;
}
.about__photo img{
  height:100%;
  width:auto;
  max-width:none;
  display:block;
  object-fit:contain;
  object-position:bottom right;
}

/* --- Blob --- */
.blob{
  position:absolute;
  top:50%;
  left:50%;
  z-index:0;
  width:700px;
  height:700px;
  margin:-350px 0 0 -350px;
  filter:blur(58px);
  background-image:linear-gradient(#320a6b,#1b2cc1);
  opacity:.9;
  border-radius:30% 70% 70% 30%/30% 30% 70% 70%;
  animation:blobRotate 13s linear infinite;
  pointer-events:none;
}
@keyframes blobRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .blob{animation:none}
}

/* ============ Tentang Saya — tablet & mobile ============ */
@media (max-width:1100px){
  .about__inner{padding:0 40px;gap:24px}
  .about__title{font-size:58px}
  .about__text p{font-size:17px}
}

@media (max-width:860px){
  .about{align-items:flex-start}
  .about__inner{
    grid-template-columns:1fr;
    padding:32px 24px 0;
    gap:0;
  }
  .about__content{max-width:none}

  .about__title{font-size:calc((100vw - 48px) / 7.3);margin-bottom:16px}
  .about__text p{
    font-size:13.5px;
    line-height:1.35;
    text-align:justify;
    margin-bottom:14px;
  }
  .about__stats-title{font-size:28px}

  .stats{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
  .stat__num{font-size:46px}

  .about__photo{
    height:auto;
    width:62%;
    right:-4%;
    bottom:0;
  }
  .about__photo img{width:100%;height:auto}
}

/* ============ Animasi masuk Tentang Saya ============ */
.js .about__photo{transform:translateX(100%)}
.js .about__title,
.js .about__text,
.js .about__stats-title,
.js .stat__label,
.js .stat__num{opacity:0}

.js .about__photo{transition:transform .6s ease-in-out}
.js .about__title,
.js .about__text,
.js .about__stats-title,
.js .stat__label,
.js .stat__num{transition:opacity .38s ease-in-out}

.js .about__photo.is-in{transform:translateX(0)}
.js .about__title.is-in,
.js .about__text.is-in,
.js .about__stats-title.is-in,
.js .stat__label.is-in,
.js .stat__num.is-in{opacity:1}

@media (prefers-reduced-motion:reduce){
  .js .about__photo,
  .js .about__title,.js .about__text,.js .about__stats-title,
  .js .stat__label,.js .stat__num{opacity:1;transform:none;transition:none}
}

/* ============ "Angka Pencapaian" bertumpuk (mobile) ============ */
/* Lapisan dasar berada di belakang foto, lapisan outline di depan foto. */
.stats-title-wrap{position:relative;margin:44px 0 18px}
.about__stats-title{margin:0;position:relative;z-index:1}

.about__title,
.about__text{position:relative;z-index:3}
.stats{position:relative;z-index:3}

.about__stats-title--outline{
  position:absolute;
  top:0;
  left:0;
  z-index:4;
  display:none;                        /* hanya dipakai di mobile */
  pointer-events:none;
  color:transparent;
  -webkit-text-stroke:1px #fff;
  text-stroke:1px #fff;
}

@media (max-width:860px){
  .stats-title-wrap{margin:26px 0 14px}
  .about__stats-title--outline{display:block}
}

/* ============ Keahlian ============ */
.skills{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  background:var(--bg);
  overflow:hidden;
}
.skills__inner{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:0 80px;
  display:flex;
  flex-direction:column;
  gap:56px;
}

.skills__row{display:grid;align-items:start;gap:30px}
.skills__row--top{grid-template-columns:420px 245px minmax(0,1fr)}
.skills__row--bottom{grid-template-columns:245px minmax(0,1fr) 245px minmax(0,1fr)}

.skills__heading{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:64px;
  line-height:1.05;
  letter-spacing:0;
  color:#fff;
}
.skills__heading-mobile{display:none}

.skill__media{
  margin:0;
  line-height:0;
  background:#000;
}
.skill__media img{
  display:block;
  width:100%;
  height:auto;
}

.skill__title{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:27px;
  line-height:1.1;
  letter-spacing:-.06em;
  color:#fff;
}
.skill__list{
  margin:0 0 16px;
  padding-left:20px;
  list-style:disc;
}
.skill__list li{
  margin-bottom:4px;
  font-size:17px;
  line-height:1.2;
  color:rgba(255,255,255,.8);
}
.skill__proof{
  margin:0;
  font-size:17px;
  line-height:1.2;
  color:rgba(255,255,255,.8);
}

.skills__tools{
  margin:0;
  text-align:center;
  font-size:17px;
  line-height:1.2;
  color:rgba(255,255,255,.7);
}
.skills__tools strong{font-weight:500}

/* ============ Keahlian — tablet ============ */
@media (max-width:1200px){
  .skills__inner{padding:0 40px;gap:40px}
  .skills__heading{font-size:52px}
  .skills__row--top{grid-template-columns:300px 200px minmax(0,1fr)}
  .skills__row--bottom{grid-template-columns:200px minmax(0,1fr) 200px minmax(0,1fr);gap:22px}
  .skill__title{font-size:23px}
  .skill__list li,.skill__proof{font-size:15px}
}

/* ============ Keahlian — mobile ============ */
@media (max-width:860px){
  .skills{align-items:center}
  .skills__inner{
    padding:32px 24px;
    gap:22px;
  }

  .skills__heading{
    font-size:calc((100vw - 48px) / 7.1);
    line-height:1;
    letter-spacing:-.06em;
    color:#fff;
  }
  .skills__heading-desktop{display:none}
  .skills__heading-mobile{display:block;white-space:nowrap}

  /* Tiap keahlian jadi satu baris: gif di kiri, teks di kanan. */
  .skills__row{display:contents}
  .skill__media{
    grid-column:1;
    width:104px;
  }
  .skills__inner{
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    align-items:start;
    column-gap:14px;
    row-gap:22px;
  }
  .skills__heading,
  .skills__tools{grid-column:1 / -1}

  .skill__title{font-size:16px;margin-bottom:7px}
  .skill__list{padding-left:16px;margin-bottom:9px}
  .skill__list li{font-size:11px;margin-bottom:2px}
  .skill__proof{font-size:11px}
  .skills__tools{font-size:13px;margin-top:6px}
}

/* Urutan di mobile mengikuti desain: Event -> Creative -> Marketing. */
@media (max-width:860px){
  .skills__heading{order:0}
  .skills__row--top > .skill__media,
  .skills__row--top > .skill__body{order:1}
  .skills__row--bottom > *:nth-child(n+3){order:2}   /* Creative */
  .skills__row--bottom > *:nth-child(-n+2){order:3}  /* Marketing */
  .skills__tools{order:9}
}

/* ============ Animasi masuk Keahlian ============ */
.js .skills__heading{opacity:0;transform:translateX(-48px)}
.js .skill__media,
.js .skill__body,
.js .skills__tools{opacity:0}

.js .skills__heading{transition:opacity .56s ease-in-out,transform .56s ease-in-out}
.js .skill__media,
.js .skill__body,
.js .skills__tools{transition:opacity .38s ease-in-out}

.js .skills__heading.is-in{opacity:1;transform:translateX(0)}
.js .skill__media.is-in,
.js .skill__body.is-in,
.js .skills__tools.is-in{opacity:1}

@media (prefers-reduced-motion:reduce){
  .js .skills__heading,
  .js .skill__media,.js .skill__body,.js .skills__tools{opacity:1;transform:none;transition:none}
}

/* ============ Pengalaman ============ */
.exp{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  background:var(--bg);
  overflow:hidden;
}
.exp__inner{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:0 80px;
}
.exp__title{
  margin:0 0 46px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:76px;
  line-height:1;
  letter-spacing:-.06em;
  color:#fff;
}

/* Garis waktu horizontal */
.exp__rail{
  position:relative;
  margin:0;
  padding:38px 0 0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;
}
.exp__rail::before{
  content:"";
  position:absolute;
  top:4px;
  left:0;
  right:0;
  height:1px;
  background:rgba(255,255,255,.16);
}

.exp__item{position:relative}
.exp__dot{
  position:absolute;
  top:-38px;
  left:0;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#fff;
}
.exp__item--now .exp__dot{box-shadow:0 0 0 5px rgba(255,255,255,.16)}

.exp__period{
  margin:0 0 12px;
  font-size:14px;
  line-height:1.2;
  color:rgba(255,255,255,.55);
}
.exp__co{
  margin:0 0 5px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-.04em;
  color:#fff;
}
.exp__role{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.2;
  color:rgba(255,255,255,.8);
}
.exp__role span{display:block;color:rgba(255,255,255,.55)}

.exp__list{margin:0;padding:0;list-style:none}
.exp__list li{
  position:relative;
  margin-bottom:7px;
  padding-left:14px;
  font-size:14px;
  line-height:1.2;
  color:rgba(255,255,255,.8);
}
.exp__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.5em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
}

.exp__badge{margin:14px 0 0}
.exp__badge span{
  display:inline-block;
  padding:3px 10px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  font-size:12px;
  color:rgba(255,255,255,.7);
}
.exp__hint{display:none}

/* ============ Pengalaman — tablet ============ */
@media (max-width:1200px){
  .exp__inner{padding:0 40px}
  .exp__title{font-size:58px;margin-bottom:36px}
  .exp__rail{gap:20px}
  .exp__co{font-size:19px}
  .exp__role{font-size:15px}
  .exp__list li{font-size:13px}
}

/* ============ Pengalaman — mobile (tumpuk ke bawah) ============ */
@media (max-width:860px){
  .exp{align-items:center}
  .exp__inner{padding:28px 24px}
  .exp__title{
    font-size:calc((100vw - 48px) / 6.8);
    margin-bottom:20px;
  }

  /* Garis waktu jadi vertikal, urutan dibalik: terbaru di atas. */
  .exp__rail{
    display:flex;
    flex-direction:column-reverse;
    justify-content:flex-end;
    gap:16px;
    padding:0 0 0 20px;
  }
  .exp__rail::before{
    top:5px;
    bottom:5px;
    left:3px;
    right:auto;
    width:1px;
    height:auto;
    transform-origin:center top;
  }

  .exp__item{padding-top:0}
  .exp__dot{top:5px;left:-20px;width:7px;height:7px}

  .exp__period{font-size:11.5px;margin-bottom:4px}
  .exp__co{font-size:17px;margin-bottom:2px}
  .exp__role{font-size:13px;margin-bottom:7px}
  .exp__list li{font-size:12px;margin-bottom:3px;padding-left:12px}
  .exp__list li::before{width:3px;height:3px}
  .exp__badge{margin-top:8px}
  .exp__badge span{font-size:11px;padding:2px 8px}

  .exp__hint{display:none}
}

/* Garis vertikal tumbuh dari atas ke bawah saat animasi masuk. */
@media (max-width:860px){
  .js .exp__rail::before{transform:scaleY(0)}
  .js .exp__rail.is-in::before{transform:scaleY(1)}
}

/* ============ Animasi masuk Pengalaman ============ */
.js .exp__title{opacity:0;transform:translateX(-48px)}
.js .exp__item,
.js .exp__hint{opacity:0}
.js .exp__item{transform:translateY(18px)}

/* Garis waktu tumbuh dari kiri ke kanan */
.js .exp__rail::before{transform:scaleX(0);transform-origin:left center}

.js .exp__title{transition:opacity .56s ease-in-out,transform .56s ease-in-out}
.js .exp__rail::before{transition:transform .7s ease-in-out}
.js .exp__item{transition:opacity .38s ease-in-out,transform .38s ease-out}
.js .exp__hint{transition:opacity .38s ease-in-out}

.js .exp__title.is-in{opacity:1;transform:translateX(0)}
.js .exp__rail.is-in::before{transform:scaleX(1)}
.js .exp__item.is-in{opacity:1;transform:translateY(0)}
.js .exp__hint.is-in{opacity:1}

@media (prefers-reduced-motion:reduce){
  .js .exp__title,.js .exp__item,.js .exp__hint{opacity:1;transform:none;transition:none}
  .js .exp__rail::before{transform:none}
}

/* ============ Pendidikan & Sertifikasi ============ */
.edu{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  background:var(--bg);
  overflow:hidden;
}
.edu__inner{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:0 80px;
}
.edu__title{
  margin:0 0 52px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:76px;
  line-height:1;
  letter-spacing:-.06em;
  color:#fff;
}

.edu__grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:70px;
  align-items:start;
}
.edu__label{
  margin:0 0 18px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.edu__uni{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:38px;
  line-height:1.05;
  letter-spacing:-.04em;
  color:#fff;
}
.edu__prodi{
  margin:0;
  font-size:21px;
  line-height:1.2;
  color:rgba(255,255,255,.85);
}
.edu__period{
  margin:6px 0 0;
  font-size:15px;
  line-height:1.2;
  color:rgba(255,255,255,.55);
}

.edu__stats{
  margin:30px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  gap:52px;
}
.edu__num{
  display:block;
  font-family:var(--font-brand);
  font-size:54px;
  line-height:1;
  letter-spacing:-.04em;
  color:rgba(255,255,255,.85);
}
.edu__num-label{
  display:block;
  margin-top:8px;
  font-size:13px;
  line-height:1.2;
  color:rgba(255,255,255,.55);
}

.edu__rows{margin:0;padding:0;list-style:none}
.edu__row{
  padding:17px 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.edu__row:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.edu__row-title{
  margin:0;
  font-size:17px;
  line-height:1.25;
  color:#fff;
}
.edu__row-sub{
  margin:4px 0 0;
  font-size:14px;
  line-height:1.2;
  color:rgba(255,255,255,.55);
}

/* ============ Pendidikan — tablet ============ */
@media (max-width:1200px){
  .edu__inner{padding:0 40px}
  .edu__title{font-size:58px;margin-bottom:38px}
  .edu__grid{gap:44px}
  .edu__uni{font-size:31px}
  .edu__prodi{font-size:19px}
  .edu__num{font-size:46px}
}

/* ============ Pendidikan — mobile ============ */
@media (max-width:860px){
  .edu{align-items:center}
  .edu__inner{padding:32px 24px}
  .edu__title{
    font-size:calc((100vw - 48px) / 9.6);
    margin-bottom:26px;
  }
  .edu__grid{grid-template-columns:1fr;gap:32px}
  .edu__label{margin-bottom:12px;font-size:11px}
  .edu__uni{font-size:24px}
  .edu__prodi{font-size:16px}
  .edu__period{font-size:13px}
  .edu__stats{margin-top:22px;gap:40px}
  .edu__num{font-size:40px}
  .edu__num-label{font-size:11.5px;margin-top:6px}
  .edu__row{padding:13px 0}
  .edu__row-title{font-size:14.5px}
  .edu__row-sub{font-size:12.5px}
}

/* ============ Animasi masuk Pendidikan ============ */
.js .edu__title{opacity:0;transform:translateX(-48px)}
.js .edu__col--formal,
.js .edu__label,
.js .edu__stat,
.js .edu__row{opacity:0}
.js .edu__row{transform:translateY(14px)}

.js .edu__title{transition:opacity .56s ease-in-out,transform .56s ease-in-out}
.js .edu__col--formal,
.js .edu__label,
.js .edu__stat{transition:opacity .38s ease-in-out}
.js .edu__row{transition:opacity .38s ease-in-out,transform .38s ease-out}

.js .edu__title.is-in{opacity:1;transform:translateX(0)}
.js .edu__col--formal.is-in,
.js .edu__label.is-in,
.js .edu__stat.is-in{opacity:1}
.js .edu__row.is-in{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  .js .edu__title,.js .edu__col--formal,.js .edu__label,
  .js .edu__stat,.js .edu__row{opacity:1;transform:none;transition:none}
}

/* ============ Galeri ============ */
.gal{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  background:var(--bg);
  overflow:hidden;
}
.gal__grid{
  width:100%;
  height:100svh;
  padding:36px;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr .8fr;
  grid-template-rows:repeat(3,1fr);
  gap:14px;
}
.gal__item{
  margin:0;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.gal__item img{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  object-fit:cover;
  display:block;
}
.gal__item--big {grid-column:1/2;grid-row:1/3}
.gal__item--wide{grid-column:2/4;grid-row:1/2}
.gal__item--tall{grid-column:4/5;grid-row:1/3}
.gal__item--m1  {grid-column:2/3;grid-row:2/3}
.gal__item--m2  {grid-column:3/4;grid-row:2/3}
.gal__item--b1  {grid-column:1/2;grid-row:3/4}
.gal__item--b2  {grid-column:2/3;grid-row:3/4}
.gal__item--b3  {grid-column:3/4;grid-row:3/4}
.gal__item--b4  {grid-column:4/5;grid-row:3/4}

/* ============ Galeri — tablet ============ */
@media (max-width:1200px){
  .gal__grid{padding:24px;gap:10px}
}

/* ============ Galeri — mobile ============ */
@media (max-width:860px){
  .gal__grid{
    padding:18px;
    gap:8px;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:repeat(5,1fr);
  }
  .gal__item--big {grid-column:1/3;grid-row:1/3}
  .gal__item--tall{grid-column:3/5;grid-row:1/3}
  .gal__item--wide{grid-column:1/3;grid-row:3/4}
  .gal__item--m1  {grid-column:3/5;grid-row:3/4}
  .gal__item--m2  {grid-column:1/3;grid-row:4/5}
  .gal__item--b1  {grid-column:3/5;grid-row:4/5}
  .gal__item--b2  {grid-column:1/2;grid-row:5/6}
  .gal__item--b3  {grid-column:2/4;grid-row:5/6}
  .gal__item--b4  {grid-column:4/5;grid-row:5/6}
}

/* ============ Animasi masuk Galeri ============ */
/* Statis setelah muncul — hanya fade + sedikit skala saat pertama terlihat. */
.js .gal__item{opacity:0;transform:scale(1.04)}
.js .gal__item{transition:opacity .5s ease-out,transform .5s ease-out}
.js .gal__item.is-in{opacity:1;transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  .js .gal__item{opacity:1;transform:none;transition:none}
}

/* ============ Kontak ============ */
.kon{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:stretch;
  background:var(--bg);
  overflow:hidden;
}

/* Gradient + blur ditaruh di lapisan sendiri, bukan di section,
   agar teks di atasnya tetap tajam. */
.kon__glow{
  position:absolute;
  inset:-60px;
  z-index:0;
  /* Warna dasar tetap dari body, hanya ditimpa cahaya biru tipis di bawah. */
  background-image:radial-gradient(120% 72% at 50% 100%,
    rgba(27,44,193,.42) 0%,
    rgba(27,44,193,.16) 38%,
    rgba(27,44,193,0) 70%);
  filter:blur(10px);
  pointer-events:none;
}

.kon__inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:56px 80px 30px;
  display:flex;
  flex-direction:column;
}
.kon__body{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.kon__kicker{
  margin:0 0 26px;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.kon__title{
  margin:0 0 20px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:92px;
  line-height:.95;
  letter-spacing:-.06em;
  color:#fff;
}
.kon__mail{margin:0}
.kon__mail a{
  font-size:25px;
  line-height:1.2;
  color:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:6px;
  transition:color .2s ease,border-color .2s ease;
}
.kon__mail a:hover,.kon__mail a:focus-visible{color:#fff;border-bottom-color:#fff}

.kon__pills{
  margin:44px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
.kon__pill{
  display:inline-block;
  padding:11px 26px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  font-size:16px;
  line-height:1.2;
  color:rgba(255,255,255,.85);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.kon__pill:hover,.kon__pill:focus-visible{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.5);
  color:#fff;
}

.kon__foot{
  margin:0;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  text-align:center;
  font-size:14px;
  line-height:1.3;
  color:rgba(255,255,255,.5);
}
.kon__foot a{
  color:rgba(255,255,255,.8);
  border-bottom:1px solid rgba(255,255,255,.45);
  transition:color .2s ease,border-color .2s ease;
}
.kon__foot a:hover,.kon__foot a:focus-visible{color:#fff;border-bottom-color:#fff}

/* ============ Kontak — tablet & mobile ============ */
@media (max-width:1200px){
  .kon__inner{padding:48px 40px 26px}
  .kon__title{font-size:72px}
}
@media (max-width:860px){
  .kon__inner{padding:40px 24px 22px}
  .kon__kicker{margin-bottom:18px;font-size:11px}
  .kon__title{font-size:calc((100vw - 48px) / 5.9);margin-bottom:16px}
  .kon__mail a{font-size:16px}
  .kon__pills{margin-top:30px;gap:10px}
  .kon__pill{padding:10px 20px;font-size:14px}
  .kon__foot{font-size:12px;padding-top:16px}
}

/* ============ Animasi masuk Kontak ============ */
.js .kon__kicker,
.js .kon__mail,
.js .kon__pills li,
.js .kon__foot{opacity:0}
.js .kon__title{opacity:0;transform:translateY(20px)}
.js .kon__pills li{transform:translateY(12px)}

.js .kon__kicker,
.js .kon__mail,
.js .kon__foot{transition:opacity .42s ease-in-out}
.js .kon__title{transition:opacity .56s ease-out,transform .56s ease-out}
.js .kon__pills li{transition:opacity .38s ease-out,transform .38s ease-out}

.js .kon__kicker.is-in,
.js .kon__mail.is-in,
.js .kon__foot.is-in{opacity:1}
.js .kon__title.is-in{opacity:1;transform:translateY(0)}
.js .kon__pills li.is-in{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  .js .kon__kicker,.js .kon__title,.js .kon__mail,
  .js .kon__pills li,.js .kon__foot{opacity:1;transform:none;transition:none}
}

/* Video menggantikan GIF di kartu keahlian (ukurannya jauh lebih kecil). */
.skill__video{
  display:block;
  width:100%;
  height:auto;
}