/* =========================================================
   style.css — Personal Website (5 halaman)
   Materi: Minggu 4 (CSS & Typography), 5 (Box Model &
   Positioning), 6 (Flexbox)
   ========================================================= */

/* ---------- 1. Variabel warna (mudah diubah di satu tempat) ---------- */
:root {
  --bg: #05070d;          /* hitam sedikit kebiruan */
  --surface: #0e131f;     /* warna kartu */
  --border: #1f2a3d;
  --text: #ececee;
  --muted: #9aa5b8;
  --accent: #3b82f6;      /* biru utama (sebelumnya merah #e5383b) */
  --radius: 16px;
}

/* ---------- 2. Reset dasar + box-sizing (Minggu 5) ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* ---------- 3. Base typography (Minggu 4) ---------- */
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", Arial, Helvetica, sans-serif; /* font stack + fallback */
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background-color: var(--bg);
  /* glow merah di pojok kiri bawah, seperti pada contoh */
  background-image: radial-gradient(ellipse at 0% 100%, rgba(59, 130, 246, 0.28), transparent 55%);
  background-attachment: fixed;

  /* Flexbox: footer selalu menempel di bawah (Minggu 6) */
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3 {
  font-family: "Syne", "Arial Black", Arial, sans-serif;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 1rem;
}

h1 { font-size: clamp(2.5rem, 7vw, 5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; }

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;   /* gambar responsif (Minggu 5) */
  height: auto;
  display: block;
}

.kicker {
  font-size: 0.8rem;
  letter-spacing: 0.15em;      /* letter-spacing (Minggu 4) */
  text-transform: uppercase;   /* text-transform (Minggu 4) */
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.muted { color: var(--muted); }

/* ---------- 4. Layout umum: container (margin auto, Minggu 5) ---------- */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

main {
  flex: 1;                 /* main mengisi ruang sisa */
  padding: 3rem 0 4rem;
}

/* ---------- 5. Header + Navigation (Flexbox, Minggu 6) ---------- */
.site-header {
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;      /* cross axis: tengah vertikal */
  flex-wrap: wrap;          /* aman di layar sempit */
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.logo {
  font-family: "Syne", "Arial Black", sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 0 auto;       /* margin-left: auto -> menu terdorong ke kanan */
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--muted);
  transition: color 0.2s, background-color 0.2s;
}

.nav-list a:hover {
  color: var(--text);
  background-color: var(--surface);
}

/* halaman yang sedang dibuka */
.nav-list a[aria-current="page"] {
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border);
}

/* ---------- 6. Tombol ---------- */
.btn {
  display: inline-block;     /* inline-block (Minggu 5) */
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--accent);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.2s;
}

.btn:hover { background-color: var(--accent); }
.btn-solid { background-color: var(--accent); }
.btn-solid:hover { background-color: #2563eb; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* ---------- 7. HOME: hero + nested flexbox ---------- */
.hero {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3rem;
}

.hero-text {
  flex: 1 1 380px;    /* tumbuh/menyusut, ukuran awal 380px */
}

.hero-photo {
  flex: 0 1 280px;
}

.avatar {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid var(--accent);
  border-radius: 24px;
}

.facts {
  display: flex;               /* nested flex container */
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
}

.fact {
  flex: 1 1 200px;
  display: flex;               /* nested lagi: fact adalah item sekaligus container */
  flex-direction: column;
  padding: 1.25rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.fact strong {
  font-family: "Syne", "Arial Black", sans-serif;
  font-size: 1.15rem;
}

.fact span { color: var(--muted); font-size: 0.9rem; }

/* ---------- 8. ABOUT: dua kolom seperti contoh + float ---------- */
.page-title { margin-bottom: 3rem; }

.about {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.about-info {
  flex: 0 1 300px;           /* kolom kiri: data diri */
}

.about-text {
  flex: 1 1 400px;           /* kolom kanan: cerita */
}

.info-list { margin: 0; }

.info-list div {
  display: flex;             /* label + nilai sejajar */
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
}

.info-list dt {
  flex: 0 0 110px;
  color: var(--muted);
  font-size: 0.85rem;
}

.info-list dd {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

/* float + text wrapping (Minggu 5) */
.photo-float {
  width: 100%;
  max-width: 220px;             /* ubah angka ini kalau mau lebih besar/kecil */
  margin: 0 0 1.5rem 0;         /* jarak ke bawah, ke daftar data diri */
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
}

.clear-both { clear: both; }  /* mengakhiri efek float */

/* ---------- 9. Kartu (Skills, Works) ---------- */
.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 240px;            /* pola dari slide Minggu 6 */
  position: relative;         /* acuan untuk badge absolute */
  display: flex;
  flex-direction: column;     /* nested flex: isi kartu disusun vertikal */
  padding: 1.5rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s, transform 0.2s;
}

.card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.card p { color: var(--muted); font-size: 0.95rem; }

.card .card-link {
  margin-top: auto;           /* link selalu terdorong ke dasar kartu */
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
}

/* badge: relative (parent) + absolute (child), Minggu 5 */
.badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 0.2rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--accent);
  border-radius: 999px;
}

.thumb {
  height: 140px;
  margin-bottom: 1.25rem;
  border-radius: 12px;
  background-image: linear-gradient(135deg, #1e293b, #3b82f6);
}
.thumb.t2 { background-image: linear-gradient(135deg, #0f2a33, #06b6d4); }
.thumb.t3 { background-image: linear-gradient(135deg, #1e1b3a, #6366f1); }
.section-block { margin-top: 3.5rem; }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-list li {
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--surface);
}

/* ---------- 10. CONTACT: form ---------- */
.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.contact-form { flex: 1 1 420px; }
.contact-side { flex: 0 1 300px; }

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}

.field label {
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.field input,
.field textarea {
  padding: 0.8rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-actions {
  display: flex;
  align-items: center;
}

.form-actions .btn { margin-left: auto; }   /* tombol terdorong ke kanan */

.contact-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-links li {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border);
}

.contact-links span {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---------- 11. Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
  font-size: 0.85rem;
  color: var(--muted);
  clear: both;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;   /* kiri-kanan */
  gap: 0.5rem;
}

/* ---------- 12. Tombol "ke atas" (position: fixed, Minggu 5) ---------- */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  background-color: var(--accent);
  border-radius: 999px;
}

/* ---------- 13. Responsif sederhana ---------- */
@media (max-width: 640px) {
  .nav-list { margin-left: 0; }
  .photo-float { float: none; margin: 0 0 1rem; }
  .info-list div { flex-direction: column; gap: 0.2rem; }
}