/* ==========================================
   MY PERSONAL PROFILE - A. AULIA RAMADHANI
   Penerapan CSS Modul 3, 4, 5, dan 6
   ========================================== */

/* SELECTOR HTML + background image (Modul 3 & 4) */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Century Gothic", Arial, sans-serif;
  color: #3f2b20;
  background-color: #fff7f0;
  background-image: linear-gradient(rgba(255,247,240,.94), rgba(255,247,240,.94)),
                    url("images/daun-bg.jpg");
  background-repeat: repeat;
  background-attachment: fixed;
  background-position: center;
  line-height: 1.7;
}
h1, h2, h3, p { margin-top: 0; }
h2 { color: #9a4316; }
a { color: inherit; }

/* ID selector + background image */
#beranda { scroll-margin-top: 75px; }
.hero {
  min-height: 330px;
  display: grid;
  place-items: center;
  text-align: center;
  color: white;
  background-color: #c65d16;
  background-image: linear-gradient(120deg, rgba(111,45,8,.88), rgba(230,112,31,.72)),
                    url("images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  padding: 55px 20px;
}
.hero-overlay { max-width: 850px; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 8px; }
.hero-subtitle { font-size: 1.05rem; margin-bottom: 22px; }

/* CLASS SELECTOR (Modul 3) */
.eyebrow {
  color: #e58a43;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: 3px;
  margin-bottom: 8px;
}
.hero .eyebrow { color: #ffe1c4; }
.button {
  display: inline-block;
  border: 0;
  border-radius: 24px; /* Modul 6: rounded corner */
  padding: 11px 24px;
  color: white;
  background: linear-gradient(120deg, #d96b1b, #e58a43); /* gradient */
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.button:hover { transform: translateY(-3px); box-shadow: 0 8px 18px #7c390f35; }

/* NAVIGASI HORIZONTAL + DROPDOWN (Modul 5 & 6) */
.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #71320f;
  box-shadow: 0 4px 14px #51260d1f;
}
.menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu li { position: relative; }
.menu > li > a {
  display: block;
  padding: 14px 20px;
  color: #fff;
  text-decoration: none;
  font-size: .9rem;
  transition: background .2s ease;
}
.menu a:hover { background: #b95012; color: #fff0df; }
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  padding: 0;
  margin: 0;
  list-style: none;
  background: #914313;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  box-shadow: 0 10px 20px #0002;
}
.dropdown a { display: block; padding: 10px 16px; color: white; text-decoration: none; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: block; }

/* CONTAINER + LAYOUT 2 KOLOM (Modul 5) */
.container { width: min(1120px, 92%); margin: auto; }
.section { padding: 58px 0; }
.two-column {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.7fr);
  gap: 24px;
  align-items: stretch;
}
.profile-card, .content-card, .info-card, .gallery-item {
  background: #fff;
  border: 1px solid #f0d7c4;
  border-radius: 16px;
  box-shadow: 0 8px 28px #7a3b160c;
}
.profile-card { text-align: center; padding: 28px 22px; }
.profile-photo {
  width: 145px;
  height: 185px;
  object-fit: cover;
  border: 4px solid #f3d0b2; /* Modul 4: border image */
  border-radius: 12px;
  opacity: .88; /* Modul 4: transparansi */
  transition: opacity .25s ease, transform .25s ease;
}
.profile-photo:hover { opacity: 1; transform: scale(1.03); }
.profile-card h2 { font-size: 1.2rem; margin: 14px 0 4px; }
.muted { color: #98765f; font-size: .9rem; }
.badge {
  display: inline-block;
  padding: 5px 12px;
  background: #fff0e2;
  color: #a84b12;
  border-radius: 20px;
  font-size: .78rem;
}
.content-card { padding: 30px; }
.quote-box {
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(255, 224, 196, .78); /* box transparan */
  border-left: 4px solid #e07a2d;
  border-radius: 6px;
  font-style: italic;
}

/* LAYOUT 3 KOLOM (Modul 5) */
.section-heading { text-align: center; margin-bottom: 26px; }
.section-heading h2 { margin-bottom: 6px; }
.three-column {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.info-card { padding: 25px; }
.info-card h3, .future-grid h3 { color: #a64e17; margin-bottom: 10px; }
.icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin-bottom: 15px;
  color: #fff;
  background: linear-gradient(135deg, #c65d16, #e99a59);
  font-weight: bold;
}
.skill-list { padding-left: 20px; margin-bottom: 0; }
.skill-list li::marker { color: #df762b; }

/* GALERI: ukuran gambar, border, opacity dan hover (Modul 4) */
.gallery-item { margin: 0; padding: 12px; overflow: hidden; }
.gallery-item img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  border: 3px solid #f3d3bb;
  border-radius: 10px;
  opacity: .82;
  transition: opacity .25s ease, transform .25s ease;
}
.gallery-item img:hover { opacity: 1; transform: scale(1.025); }
.gallery-item figcaption { padding: 12px 4px 2px; font-weight: bold; color: #874014; }

/* BAGIAN TARGET */
.future-section {
  padding: 42px;
  border-radius: 18px;
  color: #fff8f1;
  background: linear-gradient(125deg, #71320f, #b95012);
}
.future-section h2 { color: white; }
.future-section .eyebrow { color: #ffd4ad; }
.future-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.future-grid h3 { color: #ffe0c2; }
.future-grid p { margin-bottom: 0; }

/* FORM + FOOTER */
.contact-section { padding-bottom: 65px; }
.contact-form form { display: grid; gap: 8px; }
.contact-form label { font-size: .88rem; font-weight: bold; }
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #e8cbb4;
  border-radius: 8px;
  font: inherit;
  background: #fffaf6;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: 2px solid #e99a59;
  border-color: transparent;
}
.contact-form .button { justify-self: start; margin-top: 8px; }
.footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  padding: 22px max(4%, calc((100% - 1120px)/2));
  color: #fff0e2;
  background: #54250c;
  font-size: .85rem;
}
.footer p { margin: 0; }
.footer a { color: #ffd4ad; }

/* RESPONSIVE */
@media (max-width: 760px) {
  .two-column, .three-column, .future-grid { grid-template-columns: 1fr; }
  .menu > li > a { padding: 11px 12px; font-size: .82rem; }
  .dropdown { min-width: 165px; }
  .section { padding: 38px 0; }
  .future-section { padding: 28px 22px; }
}

#pendidikan .info-card li::marker {
    color: #e8752a;
}

/* ==========================================
   ORGANISASI: kartu pengalaman (foto + nama + penjelasan)
   ========================================== */
.org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}
.org-card {
  background: #fff;
  border: 1px solid #f0d7c4;
  border-radius: 16px;
  box-shadow: 0 8px 28px #7a3b160c;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.org-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  opacity: .88;
  transition: opacity .25s ease, transform .25s ease;
}
.org-photo:hover { opacity: 1; transform: scale(1.02); }
.org-photo-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #e58a43, #c65d16);
}
.org-body { padding: 24px; }
.org-body h3 { font-size: 1.15rem; margin-bottom: 4px; }
.org-period {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .5px;
  color: #a84b12;
  margin-bottom: 10px;
}
.org-body p { margin-bottom: 0; }
.org-card.add-more {
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed #e8ac74;
  background: #fff0e2;
  padding: 34px 24px;
  color: #98765f;
}
.org-card.add-more h3 { color: #a64e17; margin-bottom: 6px; font-size: 1.05rem; }
.org-card.add-more p { margin-bottom: 0; }