:root{
  --dark: #0d1321;
  --dark-2: #16213a;
  --blue: #2f6fed;
  --blue-dark: #1f4fc4;
  --light: #f2f6fc;
  --white: #ffffff;
  --text: #1b2430;
  --text-dim: #67758a;
  --border: #dbe4f0;

  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  color: var(--text);
  line-height:1.7;
  overflow-x:hidden;
  background: var(--white);
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.container{ max-width:1140px; margin:0 auto; padding:0 24px; }

/* ===== Navbar (dipakai di semua halaman) ===== */
.navbar{
  position:absolute; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 40px;
}
.logo{ font-family: var(--font-head); font-weight:700; font-size:20px; color:#fff; letter-spacing:.5px; }
.nav-links{ display:flex; gap:34px; }
.nav-links a{
  font-family: var(--font-head); font-size:13px; font-weight:600;
  color: rgba(255,255,255,0.85); letter-spacing:.5px; text-transform:uppercase;
  padding-bottom:6px; border-bottom:2px solid transparent;
  transition: border-color .2s, color .2s;
}
.nav-links a:hover, .nav-links a.active{ color:#fff; border-color: var(--blue); }
@media (max-width:800px){
  .nav-links{ display:none; }
}

/* ===== Hero (khusus index.html) ===== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(9,14,26,0.6), rgba(9,14,26,0.78)),
    url('https://picsum.photos/seed/portofolio-hero/1600/1000') center/cover no-repeat;
}
.hero-blob{
  position:absolute; width:230px; height:230px; border-radius:50%;
  background: var(--blue);
  z-index:1;
}
.hero-blob.top-left{ top:-90px; left:-90px; border-radius: 0 0 100% 0; width:260px; height:260px; }
.hero-blob.bottom-right{ bottom:-70px; right:-70px; }

.hero-content{ position:relative; z-index:5; padding:0 20px; }
.hero-eyebrow{ color:#a9c1f5; font-size:15px; letter-spacing:1px; margin-bottom:14px; font-family: var(--font-body); }
.hero-name{
  font-family: var(--font-head); font-weight:700;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  color:#fff; margin-bottom:16px; letter-spacing:.5px;
}
.hero-role{ font-size:17px; color:#cdd8ec; font-family: var(--font-body); }
.hero-role .accent{ color: var(--blue); text-decoration: underline; text-underline-offset:4px; }

.scroll-tag{
  position:absolute; left:40px; bottom:36px; z-index:6;
  display:flex; align-items:center; gap:10px;
  color: rgba(255,255,255,0.75); font-size:12px; letter-spacing:2px;
  writing-mode: vertical-rl;
}
.scroll-tag::after{ content:""; display:block; width:1px; height:40px; background: rgba(255,255,255,0.5); }

.social-float{
  position:absolute; right:40px; bottom:36px; z-index:6;
  display:flex; gap:12px;
}
.social-float a{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.14);
  color:#fff; font-size:13px;
  border:1px solid rgba(255,255,255,0.35);
  transition: background .2s, transform .2s;
}
.social-float a:hover{ background: var(--blue); transform: translateY(-3px); }

@media (max-width: 700px){
  .scroll-tag, .social-float{ display:none; }
}

/* ===== Home — intro singkat + statistik ===== */
.home-intro{ background: var(--white); padding:90px 0; }
.home-intro-inner{
  display:flex; align-items:center; gap:64px; flex-wrap:wrap;
}
.home-intro-photo{
  background:#fff; padding:14px; border-radius:14px;
  box-shadow: 0 30px 60px -20px rgba(13,19,33,0.25);
  flex-shrink:0;
  transition: transform .3s ease;
}
.home-intro-photo:hover{ transform: translateY(-6px) rotate(-1deg); }
.home-intro-photo img{
  display:block; width:260px; height:300px; object-fit:cover; border-radius:8px;
}
.home-intro-text{ flex:1; min-width:280px; }
.home-intro-text .services-title{ margin-bottom:16px; }
.home-intro-text p{ color: var(--text); opacity:.72; font-size:15px; max-width:520px; margin-bottom:26px; line-height:1.85; }

.home-stats{ display:flex; gap:40px; flex-wrap:wrap; margin-bottom:30px; }
.stat-num{ font-family: var(--font-head); font-weight:800; font-size:30px; color: var(--blue-dark); line-height:1; margin-bottom:6px; }
.stat-label{ font-size:12.5px; color: var(--text-dim); letter-spacing:.3px; }

@media (max-width: 700px){
  .home-intro-inner{ flex-direction:column; text-align:center; }
  .home-intro-text p{ margin-left:auto; margin-right:auto; }
  .home-stats{ justify-content:center; }
}

/* ===== Home — CTA banner ===== */
.home-cta{
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--dark), var(--dark-2));
  padding:90px 0; text-align:center;
}
.home-cta::before{
  content:""; position:absolute; top:-100px; left:-100px;
  width:280px; height:280px; border-radius:50%;
  background: radial-gradient(circle, rgba(47,111,237,0.3), transparent 70%);
}
.home-cta::after{
  content:""; position:absolute; bottom:-120px; right:-80px;
  width:280px; height:280px; border-radius:50%;
  background: radial-gradient(circle, rgba(47,111,237,0.22), transparent 70%);
}
.home-cta-inner{ position:relative; z-index:1; }
.home-cta h2{
  font-family: var(--font-head); font-weight:700; color:#fff;
  font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin-bottom:14px;
}
.home-cta p{ color:#a9c1f5; font-size:15px; max-width:480px; margin:0 auto 30px; }

/* ===== Page banner (header kecil untuk halaman selain Home) ===== */
.page-banner{
  position:relative;
  overflow:hidden;
  padding:150px 0 70px;
  text-align:center;
  background: linear-gradient(135deg, var(--dark), var(--dark-2));
}
.page-banner .hero-blob{ opacity:.9; }
.page-banner-inner{ position:relative; z-index:2; }
.page-banner h1{
  font-family: var(--font-head); font-weight:700; color:#fff;
  font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom:10px;
}
.page-banner .crumb{ color:#a9c1f5; font-size:13px; letter-spacing:.4px; }
.page-banner .crumb a{ color:#fff; font-weight:600; }
.page-banner .crumb .sep{ margin:0 6px; color: rgba(255,255,255,0.5); }

/* ===== Tentang (about, split bg + framed photo) ===== */
.about{
  position:relative;
  background: var(--white);
  padding:80px 0;
  overflow:hidden;
}
.about::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 42%, var(--white) 42%, var(--white) 100%);
  z-index:0;
}
.about-inner{
  position:relative; z-index:1;
  display:flex; align-items:flex-start; gap:64px;
  flex-wrap:wrap;
}
.about-photo{
  background:#fff; padding:14px; border-radius:14px;
  box-shadow: 0 30px 60px -20px rgba(13,19,33,0.35);
  flex-shrink:0;
  transition: transform .3s ease;
}
.about-photo:hover{ transform: translateY(-6px) rotate(-1deg); }
.about-photo img{
  display:block; width:270px; height:310px; object-fit:cover; border-radius:8px;
}
.about-text{ flex:1; min-width:260px; padding-left:56px; }
.about-eyebrow{ color: var(--blue-dark); font-weight:600; font-size:12.5px; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
.about-name{ font-family: var(--font-head); font-weight:700; font-size:30px; color:var(--text); margin-bottom:6px; letter-spacing:-.3px; }
.about-role{ color: var(--blue-dark); font-weight:600; font-size:13px; letter-spacing:.5px; text-transform:uppercase; margin-bottom:20px; }
.about-text p{ color: var(--text); opacity:.72; font-size:15px; max-width:520px; margin-bottom:16px; line-height:1.85; }
.about-btn{
  display:inline-block; margin-top:12px;
  background: var(--blue); color:#fff; font-weight:600; font-size:13.5px;
  letter-spacing:.4px; text-transform:uppercase;
  padding:14px 32px; border-radius:6px;
  box-shadow: 0 16px 30px -12px rgba(47,111,237,0.5);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.about-btn:hover{ background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 20px 36px -12px rgba(31,79,196,0.55); }

@media (max-width: 800px){
  .about::before{ background: var(--blue); }
  .about-inner{ flex-direction:column; text-align:center; }
  .about-text{ padding-left:0; }
  .about-text p{ margin-left:auto; margin-right:auto; }
}

/* ===== Pendidikan ===== */
.pendidikan{ background: var(--dark); padding:80px 0; position:relative; overflow:hidden; }
.pendidikan::before{
  content:""; position:absolute; top:-120px; right:-120px;
  width:320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, rgba(47,111,237,0.25), transparent 70%);
}
.pendidikan-eyebrow{ color:#a9c1f5; font-weight:600; letter-spacing:1px; font-size:13px; text-transform:uppercase; margin-bottom:10px; text-align:center; }
.pendidikan-title{ font-family: var(--font-head); font-weight:700; font-size: clamp(1.7rem, 3.5vw, 2.2rem); color:#fff; margin-bottom:50px; text-align:center; }

.pendidikan-card{
  position:relative; z-index:1;
  max-width:760px; margin:0 auto;
  background: var(--dark-2);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:36px 40px;
  display:flex; align-items:center; gap:28px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}
.pendidikan-logo{
  flex-shrink:0;
  width:84px; height:84px; border-radius:16px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family: var(--font-head); font-weight:800; font-size:22px;
  box-shadow: 0 16px 30px -12px rgba(47,111,237,0.55);
  overflow:hidden;
}
.pendidikan-logo img{ width:100%; height:100%; object-fit:cover; }
.pendidikan-info{ flex:1; min-width:200px; }
.pendidikan-univ{ font-family: var(--font-head); font-weight:700; font-size:19px; color:#fff; margin-bottom:4px; }
.pendidikan-prodi{ color:#a9c1f5; font-size:13.5px; font-weight:600; letter-spacing:.3px; margin-bottom:16px; }
.pendidikan-meta{ display:flex; flex-wrap:wrap; gap:24px; margin-bottom:16px; }
.pendidikan-meta div .label{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#67758a; margin-bottom:4px; }
.pendidikan-meta div .value{ font-family: var(--font-head); font-weight:600; color:#fff; font-size:14px; }
.pendidikan-progress{ width:100%; }
.pendidikan-progress .bar-track{
  width:100%; height:8px; border-radius:6px; background: rgba(255,255,255,0.08); overflow:hidden;
}
.pendidikan-progress .bar-fill{
  height:100%; width:50%; border-radius:6px;
  background: linear-gradient(90deg, var(--blue), #6fa0ff);
}
.pendidikan-progress .bar-label{ margin-top:8px; font-size:12px; color:#8395b0; }

@media (max-width: 620px){
  .pendidikan-card{ flex-direction:column; text-align:center; padding:32px 24px; }
  .pendidikan-meta{ justify-content:center; }
}

/* ===== Keahlian / Services / Hobi (kartu dipakai bersama) ===== */
.services{ background: var(--light); padding:90px 0; text-align:center; }
.services.alt{ background: var(--white); }
.services-eyebrow{ color: var(--blue-dark); font-weight:600; letter-spacing:1px; font-size:13px; text-transform:uppercase; margin-bottom:10px; }
.services-title{ font-family: var(--font-head); font-weight:700; font-size: clamp(1.7rem, 3.5vw, 2.2rem); color: var(--text); margin-bottom:14px; }
.services-desc{ color: var(--text-dim); font-size:14.5px; max-width:520px; margin:0 auto 50px; }

.services-grid, .hobi-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
  text-align:left;
}
.service-card, .hobi-card{
  background: var(--white); border-radius:10px; padding:34px 28px;
  box-shadow: 0 20px 40px -26px rgba(13,19,33,0.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover, .hobi-card:hover{ transform: translateY(-8px); box-shadow: 0 26px 50px -22px rgba(47,111,237,0.30); }
.service-icon, .hobi-icon{
  width:52px; height:52px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(47,111,237,0.12); color: var(--blue-dark);
  font-size:22px; margin-bottom:20px;
  overflow:hidden;
}
.service-icon.has-photo, .hobi-icon.has-photo{
  background: transparent; padding:0;
  width:50%; aspect-ratio:1/1; height:auto; border-radius:14px;
}
.service-icon img, .hobi-icon img{
  width:100%; height:100%; object-fit:cover; border-radius:14px; display:block;
}
.service-title, .hobi-title{ font-family: var(--font-head); font-weight:600; font-size:16.5px; color: var(--text); margin-bottom:10px; }
.service-desc, .hobi-desc{ color: var(--text-dim); font-size:13.5px; line-height:1.7; }

@media (max-width: 860px){ .services-grid, .hobi-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .services-grid, .hobi-grid{ grid-template-columns:1fr; } }


/* ===== Proyek ===== */
.proyek{ padding:90px 0; text-align:center; background: var(--white); }
.proyek-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; margin-top:50px; text-align:left; }
.proyek-card{ border-radius:10px; overflow:hidden; box-shadow: 0 20px 40px -26px rgba(13,19,33,0.18); }
.proyek-thumb{ height:200px; background: linear-gradient(135deg, var(--blue), var(--dark)); overflow:hidden; }
.proyek-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.proyek-body{ padding:22px 24px; background:#fff; }
.proyek-title{ font-family: var(--font-head); font-weight:600; font-size:17px; color:var(--text); margin-bottom:8px; }
.proyek-desc{ color: var(--text-dim); font-size:13.8px; line-height:1.8; }
@media (max-width:700px){ .proyek-grid{ grid-template-columns:1fr; } }

/* ===== Kontak ===== */
.kontak{ background: var(--white); padding:90px 0; text-align:center; }
.kontak-form{
  max-width:560px; margin:0 auto; text-align:left;
  display:flex; flex-direction:column; gap:16px;
}
.kontak-form input, .kontak-form textarea{
  width:100%; padding:14px 16px; border-radius:6px;
  border:1px solid var(--border); font-family: var(--font-body); font-size:14px;
  color: var(--text); background: var(--light);
}
.kontak-form textarea{ min-height:130px; resize:vertical; }
.kontak-form button{
  align-self:flex-start;
  background: var(--blue); color:#fff; font-weight:600; font-size:13.5px;
  letter-spacing:.4px; text-transform:uppercase;
  padding:13px 30px; border-radius:4px; border:none; cursor:pointer;
  transition: background .2s, transform .2s;
  font-family: var(--font-body);
}
.kontak-form button:hover{ background: var(--blue-dark); transform: translateY(-2px); }

.form-group{ display:flex; flex-direction:column; gap:6px; }
.kontak-form input.invalid, .kontak-form textarea.invalid{ border-color:#e5484d; background:#fff5f5; }
.form-error{ color:#e5484d; font-size:12.5px; min-height:1px; }
.form-status{ font-size:13.5px; margin-top:4px; }
.form-status.success{ color: var(--blue-dark); }
.form-status.error{ color:#e5484d; }

.kontak-info{ display:flex; justify-content:center; gap:40px; flex-wrap:wrap; margin-bottom:50px; }
.kontak-info div{ text-align:center; }
.kontak-info .label{ font-size:12px; text-transform:uppercase; letter-spacing:.5px; color: var(--text-dim); margin-bottom:6px; }
.kontak-info .value{ font-family: var(--font-head); font-weight:600; color: var(--text); }

/* ===== Footer (dipakai di semua halaman) ===== */
.site-footer{ background: var(--dark); color:#cdd8ec; padding:40px 0; text-align:center; }
.site-footer .kontak-social{ display:flex; justify-content:center; gap:14px; margin-bottom:22px; }
.site-footer .kontak-social a{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.25);
  transition: background .2s, transform .2s;
}
.site-footer .kontak-social a:hover{ background: var(--blue); transform: translateY(-3px); }
.footer-note{ color:#5b6b85; font-size:12.5px; }