:root {
    --pink-dark: #d81b60;
    --pink-main: #ff85a1;
    --pink-light: #ffc1d1; /* Warna stabilo pink */
    --pink-soft: #fff0f3;
    /* Font otomatis membesar sesuai lebar layar */
    --font-size-base: clamp(16px, 1vw + 14px, 20px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body { 
    font-family: 'Segoe UI', Roboto, sans-serif; 
    margin: 0; padding: 0; color: #333; line-height: 1.8;
    background-color: white;
    font-size: var(--font-size-base);
    -webkit-user-select: none; user-select: none;
}

.container { width: 100%; max-width: 900px; margin: 0 auto; padding: 40px 20px; }

/* --- GLOBAL HEADING STYLING (THE PINK BACKGROUND FIX) --- */
/* Class ini yang memberikan efek stabilo pink. */
.pink-text-bg {
    display: inline;
    background-color: var(--pink-light);
    padding: 3px 10px;
    border-radius: 5px;
    line-height: 1.6; /* Wajib ada untuk memberi ruang background */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    color: inherit; 
    font-weight: bold;
}

/* Penyesuaian margin untuk elemen heading */
h1, h2, h3, h4 {
    margin-top: 25px;
    margin-bottom: 25px;
    color: #111; 
}

/* Tag Styling (Warna Solid) */
.tag { 
    background-color: var(--pink-dark) !important; 
    color: white !important; 
    padding: 5px 15px; 
    font-weight: bold; 
    text-transform: uppercase; 
    font-size: 14px; 
    display: inline-block;
    border-radius: 50px;
}

/* --- LAYOUT --- */
header { background: var(--pink-dark); color: white; text-align: center; padding: 60px 20px; }
.card-grid { display: flex; flex-direction: column; gap: 50px; }
.card { border-bottom: 2px solid var(--pink-soft); padding-bottom: 40px; }
.card img, .detail-img { width: 100%; border-radius: 20px; aspect-ratio: 16/9; object-fit: cover; }

.btn { 
    display: inline-block; background: var(--pink-dark); color: white; 
    padding: 15px 35px; text-decoration: none; border-radius: 50px; font-weight: bold; margin-top: 20px;
}

.img-konten { width: 100%; border-radius: 20px; margin: 30px 0; }
.video-container { aspect-ratio: 16/9; background: #000; border-radius: 20px; overflow: hidden; margin: 30px 0; }
.video-container iframe { width: 100%; height: 100%; border: 0; }
footer { text-align: center; padding: 50px; border-top: 1px solid #eee; color: #999; }

@media (max-width: 600px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
}