/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #c3ff00; /* hijau neon */
  font-family: 'Instrument Sans', sans-serif;
  overflow-x: hidden;
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 20px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  background: transparent;
  z-index: 1000;
}

.navbar ul {
  display: flex;
  list-style: none;
  gap: 120px; /* jarak antar tombol */
}

.navbar ul li img {
  width: 140px;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.navbar ul li img:hover {
  transform: scale(1.1);
  filter: brightness(1.15);
}

/* ===== HERO SECTION ===== */
.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-folder {
  max-width: 75%;
  height: auto;
  filter: drop-shadow(0px 0px 20px rgba(150, 0, 255, 0.4));
}

.scroll-btn {
  position: absolute;
  bottom: 60px;
}

.scroll-btn img {
  width: 180px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.scroll-btn img:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* ---------------- FONTS ---------------- */
@font-face {
  font-family: 'Instrument Serif';
      src: url(Font/InstrumentSerif-Regular.ttf) format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif Italic';
      src: url(Font/InstrumentSerif-Italic.ttf) format('truetype');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
      src: url(Font/InstrumentSans-VariableFont_wdth\,wght.ttf) format('truetype');
      font-weight: 400;
      font-style: normal; 
      font-display: swap;
}

@font-face {
      font-family: 'Instrument Sans Italic';
      src: url(Font/InstrumentSans-Italic-VariableFont_wdth\,wght.ttf) format('truetype');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
}

/* fallback optional */
:root {
  --serif: "Instrument Serif", serif;
  --sans: "Instrument Sans"
}

/* ABOUT */
.about-section {
  padding: 80px 0;
  min-height: 100vh;
}

.about-inner {
  display: grid;
  grid-template-columns: 420px 1fr 440px;
  grid-template-rows: auto auto; /* 2 baris: baris atas & bawah */
  gap: 60px;
  align-items: start;
  width: min(1400px, 95%);
  margin: 0 auto;
}

.about-left {
  grid-column: 1; /* kiri */
}

.about-middle {
  grid-column: 2; /* tengah */
}

.about-right {
  grid-column: 3;
}

.right-heading {
  width: 340px;
  display: block;
  margin-bottom: 14px;
}

/* LEFT */
.about-left {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.profile-photo {
  width: 1000px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  grid-column: 1;
  grid-row: 1;
}

/* MIDDLE */
.about-middle {
  grid-column: 2;
  grid-row: 1;
}
.hello-text{ font-family: 'Instrument Serif Italic';
  font-size: 120px;
  line-height: 1;
  color: #0b0b0b;
  max-width: 200px;}
.about-desc{ font-family: 'Instrument Sans';
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #0b0b0b;
  max-width: 360px; line-height:1.6; color:#0b0b0b; margin-bottom:14px; }

.edukasi {
  grid-column: 1;
  grid-row: 2;
  width: 240px;
  margin-top: 20px;   /* atur jarak vertikal jika perlu */
  margin-left: -400px;
  justify-self: center; /* posisikan di tengah kolom 1 */
}

.skills {
  width: 360px;
  margin-top: 40px;
  margin-left: 150px;
  justify-self: start;
}

/* RIGHT */
.about-right {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.right-heading{
  width: 340px;
  display: block;
  margin-bottom: 14px;}

/* CV download */
.cv-download{ margin-top:18px; display:flex; justify-content:flex-end; width:100%; }
.press-cv{ width: 180px; max-width:100%; height:auto; cursor:pointer; border-radius:28px; }

/* spacing from page edges */
.container{ padding-left:28px; padding-right:28px; }

/* ---------------- My Work ---------------- */
.work-page {
  padding: 100px 0 120px; /* beri ruang dari navbar */
  display: flex;
  justify-content: center;
  background: transparent;
}

/* grid 2 kolom + bottom centered third */
.work-grid {
  width: min(1300px, 95%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 360px 300px;
  gap: 60px 80px;
  align-items: center;
  justify-items: center;
  margin: 0 auto;
}

/* buat kartu bisa di-klik penuh */
.work-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  display: block;
  text-decoration: none;
  transition: transform .28s cubic-bezier(.2,.9,.3,1), filter .22s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* posisikan kartu ketiga menempati dua kolom di baris bawah */
.work-card.bottom-center {
  grid-column: 1 / span 2;
  justify-self: center;
  max-width: 530px;
}

/* gambar folder sebagai background visual */
.card-folder {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 18px;
  filter: drop-shadow(0 30px 60px rgba(172,0,255,0.28));
  transition: filter .22s ease, transform .22s ease;
}

/* hover — glow dan sedikit naik */
.work-card:hover .card-folder,
.work-card:focus .card-folder{
  transform: translateY(-8px) scale(1.02);
  filter: drop-shadow(0 45px 110px rgba(172,0,255,0.30));
}

/* fokus keyboard */
.work-card:focus {
  outline: none;
  box-shadow: 0 0 0 6px rgba(172,0,255,0.12);
  transform: translateY(-6px);
}

/* responsive: stack single column on narrow screens */
@media (max-width: 900px) {
  .work-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 36px;
    padding: 0 20px;
  }
  .work-card.bottom-center { grid-column: auto; max-width: 100%; }
  .work-card { max-width: 900px; }
  .card-folder { object-fit: cover; }
}

/* kecilkan gambar di very large screens agar tidak over-zoom */
@media (min-width: 1600px) {
  .work-grid { width: min(1500px, 95%); }
}

/* ===== CONTACT / FOOTER SECTION (di bawah My Work) ===== */
.contact-section {
  background: linear-gradient(180deg, #b45cff 0%, #a23bff 100%);
  padding: 44px 0 64px;
  color: #fff;
  border-top: 2px solid rgba(0,0,0,0.06);
  font-family: var(--sans, "Instrument Sans", sans-serif);
}

/* layout grid 3 kolom like mockup */
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 520px 360px;
  gap: 28px 36px;
  align-items: start;
  width: min(1400px, 95%);
  margin: 0 auto;
  padding: 8px 0;
}

/* column base */
.footer-col { padding: 6px 12px; }

/* Titles use serif italic + neon green color */
.footer-title {
  font-family: var(--serif, "Instrument Serif", serif);
  font-style: italic;
  font-weight: 400;
  color: #BFFF00;               /* neon green */
  font-size: 40px;
  margin: 0 0 16px;
  text-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* center title slightly smaller */
.center-title { font-size: 36px; }

/* paragraph text */
.footer-text {
  color: rgba(255,255,255,0.95);
  font-size: 14px;
  line-height: 1.6;
  max-width: 560px;
}

/* FEEDBACK / SEARCH input */
.feedback-form { display:flex; justify-content:center; align-items:center; }
.search-box {
  display:flex;
  align-items:center;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 28px;
  padding: 10px 12px;
  box-shadow: 0 8px 26px rgba(172,0,255,0.12);
}

.search-box input[type="text"]{
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
  padding: 8px 10px;
  background: transparent;
  color: #111;
  border-radius: 20px;
}
.search-box input::placeholder { color: #999; }

.search-btn{
  border: none;
  background: transparent;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 8px;
  margin-left: 8px;
  cursor: pointer;
}

.feedback-toast{
  position: fixed;
  right: 20px;
  bottom: 24px;
  background: rgba(0,0,0,0.86);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  z-index: 3000;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease;
}
.feedback-toast.show{
  opacity: 1;
  transform: translateY(0);
}


/* CONTACT LIST (right) */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Icon image */
.contact-list .icon {
  display: inline-flex;
  width: 22px;  /* ukuran icon */
  height: 22px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.contact-list .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.contact-line {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.4;
}


/* Accessibility helper (visually hidden) */
.visually-hidden {
  position:absolute!important;
  height:1px; width:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* Responsive adjustments */
@media (max-width: 1000px) {
  .footer-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 22px;
    padding: 0 20px;
  }
  .footer-title { font-size: 34px; text-align:center; }
  .footer-left, .footer-center, .footer-right { text-align:center; }
  .contact-list { align-items:center; }
  .search-box { margin: 0 auto; }
  .footer-text { max-width: 100%; }
}