.kartu {
  margin: 16px;              /* keempat sisi sama: 16px */
  margin: 16px 8px;         /* atas-bawah 16px, kiri-kanan 8px */
  margin: 16px 8px 4px 8px; /* atas kanan bawah kiri (searah jarum jam) */

  margin-top: 16px;        /* atau atur satu sisi saja */
  padding: 20px;
  border: 1px solid #ccc;  /* ketebalan, gaya garis, warna */
  border-radius: 8px;     /* sudut membulat */
}

.kotak {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}
/* lebar SEBENARNYA = 300 + 20+20 (padding) + 2+2 (border) = 344px!
   width di CSS cuma mengatur CONTENT-nya, padding & border DITAMBAHKAN di luar */

* {
  box-sizing: border-box;   /* terapkan ke SEMUA elemen */
}

.kotak {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}
/* lebar SEBENARNYA = TETAP 300px — padding & border dihitung DI DALAM 300px itu */

.kartu p { }        /* descendant: SEMUA 
 di DALAM .kartu, berapa pun levelnya */
.kartu > p { }      /* child: HANYA 
 yang langsung anak .kartu */
h2 + p { }          /* adjacent sibling: 
 yang PERSIS setelah 
 */
h2 ~ p { }          /* general sibling: SEMUA 
 setelah 
 (sejajar, sama induk) */

input[type="email"] { }       /* hanya input dengan type="email" */
a[target="_blank"] { }        /* link yang buka tab baru */
a[href^="https"] { }          /* href yang DIAWALI "https" */
img[src$=".png"] { }          /* src yang DIAKHIRI ".png" */

p { color: blue; }
.teks { color: red; }

/* elemen 
 — warnanya MERAH, class lebih "spesifik" dari tag */

.teks { color: red !important; }
/* ini akan MENGALAHKAN aturan apa pun, termasuk yang lebih spesifik */
/* makin banyak !important dipakai, makin sulit CSS di-debug nantinya */

.a { position: static; }     /* default — mengikuti alur normal, top/left dll DIABAIKAN */

.b { position: relative; }   /* tetap di alur normal, TAPI bisa digeser relatif posisi aslinya */
.b { top: 10px; left: 20px; }   /* geser 10px ke bawah, 20px ke kanan DARI posisi normal */

.c { position: absolute; }   /* LEPAS dari alur, posisi relatif ke induk terdekat yang position-nya BUKAN static */
.c { top: 0; right: 0; }        /* nempel di pojok kanan atas induknya */

.d { position: fixed; }      /* LEPAS dari alur, posisi relatif ke LAYAR, tetap di tempat saat di-scroll */

.kartu {
  position: relative;   /* jadi "acuan" untuk badge di dalamnya */
  padding: 16px;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: red;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
}

a { color: blue; }
a:hover { color: darkblue; }      /* saat kursor di atasnya */
a:active { color: red; }          /* saat SEDANG diklik */
a:focus { outline: 2px solid blue; }  /* saat fokus keyboard (Tab) — JANGAN dihilangkan! */

input:focus { border-color: #1D6FA5; }
input:disabled { opacity: 0.5; }
input:checked { accent-color: green; }   /* checkbox/radio yang tercentang */

li:first-child { }      /* elemen PERTAMA di antara saudaranya */
li:last-child { }       /* elemen TERAKHIR */
tr:nth-child(even) { background: #f5f5f5; }  /* baris GENAP — "zebra stripes" tabel */
tr:nth-child(odd) { }   /* baris GANJIL */
p:not(.intro) { }       /* SEMUA 
 KECUALI yang berclass .intro */

p::first-letter { font-size: 2em; font-weight: bold; }  /* huruf pertama */
p::first-line { font-weight: bold; }                       /* baris pertama */

/* ::before dan ::after — menyisipkan KONTEN lewat CSS, tanpa menambah HTML */
.wajib::after {
  content: " *";
  color: red;
}
/* elemen Nama akan tampil: Nama * (asterisk merah) */

.tombol {
  background: #1D6FA5;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  transition: background 0.2s;   /* perubahan background jadi HALUS, bukan instan */
}
.tombol:hover { background: #154f78; }

.container {
  display: flex;   /* anak-anak langsungnya otomatis sejajar HORIZONTAL */
}

.container { flex-direction: row; }      /* default — horizontal, kiri ke kanan */
.container { flex-direction: column; }   /* vertikal, atas ke bawah */

.container {
  display: flex;
  gap: 16px;   /* jarak OTOMATIS antar anak, tanpa perlu margin manual tiap item */
}

.container { justify-content: flex-start; }    /* rapat di awal (default) */
.container { justify-content: center; }        /* di tengah */
.container { justify-content: flex-end; }      /* rapat di akhir */
.container { justify-content: space-between; }  /* jarak sama rata, tanpa jarak di tepi luar */
.container { justify-content: space-around; }   /* jarak sama rata, DENGAN setengah jarak di tepi luar */

.container {
  display: flex;
  height: 200px;
  align-items: center;    /* anak di-TENGAH-kan SECARA VERTIKAL */
}
/* nilai lain: flex-start, flex-end, stretch (default, anak memanjang penuh tinggi container) */

.container {
  display: flex;
  flex-wrap: wrap;   /* jika tidak muat satu baris, lanjut ke baris berikutnya */
  gap: 12px;
}
.kartu { flex: 1 1 200px; }   /* tumbuh, menyusut, lebar dasar 200px — lihat di bawah */

.a { flex: 1; }      /* ambil 1 "bagian" dari ruang sisa yang tersedia */
.b { flex: 2; }      /* ambil 2 bagian — DUA KALI LEBIH LEBAR dari .a */
.c { flex: 0 0 150px; }   /* TIDAK tumbuh, TIDAK menyusut, selalu tepat 150px (sidebar tetap) */

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;   /* 3 kolom, masing-masing 200px */
  gap: 16px;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   /* 3 kolom SAMA LEBAR, mengisi ruang tersedia */
}
.layout {
  grid-template-columns: 250px 1fr;   /* sidebar TETAP 250px, sisanya untuk konten */
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* sama persis dengan "1fr 1fr 1fr" */
  gap: 16px;
}

/* kolom OTOMATIS menyesuaikan jumlahnya berdasarkan lebar layar! */
.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
/* setiap kolom MINIMAL 180px, mengisi SISA ruang (1fr), dan JUMLAH kolom
   otomatis berkurang di layar sempit — tanpa satu baris media query pun! */

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.unggulan {
  grid-column: span 2;   /* elemen ini membentang LEBAR 2 kolom */
}

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar konten"
    "footer footer";
  gap: 12px;
}
header  { grid-area: header; }
aside   { grid-area: sidebar; }
main   { grid-area: konten; }
footer  { grid-area: footer; }
/* "gambar" layout langsung terlihat dari susunan string grid-template-areas! */

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   /* default: 3 kolom (asumsi desktop) */
}

@media (max-width: 768px) {
  /* aturan DI DALAM blok ini HANYA berlaku saat lebar layar ≤ 768px */
  .container {
    grid-template-columns: 1fr;   /* jadi 1 kolom di layar sempit */
  }
}

.galeri { grid-template-columns: repeat(4, 1fr); }  /* default: desktop, 4 kolom */

@media (max-width: 1024px) {
  .galeri { grid-template-columns: repeat(3, 1fr); }  /* tablet besar: 3 kolom */
}
@media (max-width: 768px) {
  .galeri { grid-template-columns: repeat(2, 1fr); }  /* tablet: 2 kolom */
}
@media (max-width: 480px) {
  .galeri { grid-template-columns: 1fr; }          /* HP: 1 kolom */
}

.menu-mobile { display: none; }       /* sembunyi di desktop (default) */
.menu-desktop { display: flex; }

@media (max-width: 768px) {
  .menu-mobile { display: block; }     /* tampil di HP */
  .menu-desktop { display: none; }    /* sembunyi di HP */
}

.container { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) { .container { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .container { grid-template-columns: 1fr; } }

.container { grid-template-columns: 1fr; }   /* DEFAULT = tampilan HP, paling sederhana */

@media (min-width: 480px)  { .container { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px)  { .container { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .container { grid-template-columns: repeat(4, 1fr); } }

<meta name="viewport" content="width=device-width, initial-scale=1.0">

.hero {
  padding: 5vw;        /* padding ikut proporsional dengan lebar layar */
  font-size: clamp(1.5rem, 4vw, 3rem);  /* minimal, ideal, maksimal — teks menyesuaikan OTOMATIS */
}

img {
  max-width: 100%;    /* TIDAK PERNAH melebihi lebar induknya */
  height: auto;     /* tinggi menyesuaikan OTOMATIS, rasio tetap terjaga */
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}
.navbar ul { display: flex; gap: 1.5rem; list-style: none; }

@media (max-width: 768px) {
  .navbar ul { flex-direction: column; }   /* menu jadi vertikal di HP */
}

.kartu {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;    /* gambar ikut rounded corner kartunya */
  transition: transform 0.2s, box-shadow 0.2s;
}
.kartu:hover {
  transform: translateY(-4px);    /* naik sedikit saat hover */
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.kartu img { width: 100%; display: block; }
.kartu .isi { padding: 16px; }

.hero {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, #1D6FA5, #5CB3E8);
  color: white;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); }

.footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
  padding: 3rem 2rem;
  background: #121A20;
  color: #DCE4E8;
}
/* pakai pola auto-fit dari Materi 17 — kolom otomatis responsif tanpa media query tambahan */

.tombol {
  background: #1D6FA5;
  transition: background 0.3s ease;
  /*                 properti  durasi  gaya percepatan */
}
.tombol:hover { background: #154f78; }

/* beberapa properti sekaligus */
.kartu {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* atau singkat: SEMUA properti yang berubah, durasi sama */
.kartu { transition: all 0.2s ease; }

@keyframes muncul {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.toast {
  animation: muncul 0.3s ease-out;
  /*           nama-keyframe  durasi   easing */
}

@keyframes denyut {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.badge-live {
  animation: denyut 1.5s ease-in-out infinite;   /* infinite = ulang terus-menerus */
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

:root {
  /* :root = seluruh dokumen — variabel ini berlaku GLOBAL */
  --warna-primer: #1D6FA5;
  --warna-aksen: #C2501F;
  --jarak-standar: 16px;
  --radius-kartu: 10px;
}

.tombol {
  background: var(--warna-primer);
  padding: var(--jarak-standar);
  border-radius: var(--radius-kartu);
}
.badge { background: var(--warna-aksen); }

.kartu {
  padding: var(--jarak-kartu, 20px);
  /* kalau --jarak-kartu belum didefinisikan di mana pun, pakai 20px */
}

:root {
  --bg: #FFFFFF;
  --teks: #121A20;
}

[data-theme="dark"] {
  --bg: #121A20;
  --teks: #F1F4F6;
}

body {
  background: var(--bg);
  color: var(--teks);
  transition: background 0.2s, color 0.2s;
}

const tombolTema = document.querySelector('#toggle-tema');
tombolTema.addEventListener('click', () => {
  const html = document.documentElement;
  const temaSaatIni = html.getAttribute('data-theme');
  html.setAttribute('data-theme', temaSaatIni === 'dark' ? 'light' : 'dark');
});

document.documentElement.style.setProperty('--warna-primer', '#FF0000');
// mengubah custom property lewat JS, berguna untuk fitur seperti
// "pilih warna tema" interaktif yang dikontrol pengguna

.a { transform: translateX(20px); }     /* geser 20px ke kanan — TIDAK mengubah layout elemen lain */
.b { transform: translateY(-10px); }    /* geser 10px ke atas */
.c { transform: scale(1.1); }          /* perbesar 110% */
.d { transform: rotate(15deg); }        /* putar 15 derajat */
.e { transform: translateY(-4px) scale(1.03); }  /* GABUNG beberapa transform sekaligus */

.kartu {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /*               x   y  blur    warna+transparansi */
}

/* beberapa shadow ditumpuk untuk efek lebih halus */
.kartu-elevated {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    0 8px 24px rgba(0,0,0,0.08);
}

.overlay { opacity: 0.6; }   /* 0 = tak terlihat, 1 = pekat penuh — berlaku ke SELURUH elemen termasuk isinya */

.hero {
  background: linear-gradient(135deg, #1D6FA5, #5CB3E8);
  /*                         sudut    warna awal  warna akhir */
}
.radial {
  background: radial-gradient(circle, #5CB3E8, #1D6FA5);  /* dari tengah menyebar keluar */
}

img { filter: grayscale(100%); }       /* hitam-putih */
img { filter: blur(4px); }             /* buram */
img { filter: brightness(1.2) contrast(1.1); }  /* gabung beberapa efek */

.kartu-nonaktif img { filter: grayscale(100%); }
.kartu-nonaktif img:hover { filter: grayscale(0%); }   /* kembali berwarna saat hover */

* {
  box-sizing: border-box;   /* dari Materi 12 — jadikan standar di SETIAP project */
  margin: 0;
  padding: 0;
}

img, video { max-width: 100%; display: block; }

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

css/
├── reset.css        # reset dasar
├── variables.css     # semua custom property (:root)
├── layout.css        # navbar, footer, grid halaman
├── components.css    # kartu, tombol, badge — elemen yang dipakai berulang
└── pages.css         # style khusus satu halaman tertentu

/* BEM: Block__Element--Modifier — konvensi penamaan yang populer */
.kartu { }                 /* Block — komponen utama */
.kartu__judul { }          /* Element — bagian DI DALAM block */
.kartu__harga { }
.kartu--diskon { }         /* Modifier — VARIAN dari block */