← Parentia
03-carousel-designer
Run: 2026-05-31T03:59:44 · 23099 in / 17192 out tokens · 370.9s
# CAROUSEL 1: Ngomong "Jangan" = Justru Bikin Anak Makin Pengen
## METADATA
- Topic: Kenapa kata "jangan" bikin anak makin penasaran (gentle parenting reframe)
- Audience focus: Parents anak batita–TK (2-5 tahun) yang frustrasi karena anak "gak dengerin" larangan
- Slide count: 10
- Suggested caption: Si Kecil malah makin penasaran pas kita bilang "jangan"? Ternyata ini ada hubungannya sama cara kerja otak mereka lho, Parents 👀💡 Save buat pengingat kalau lagi pengen bentak "jangan!" ✨
<!-- IMAGE_BRIEF -->
```json
{
"topic": "Parenting communication dengan batita",
"subject_hint": "Toddler (2-3 tahun) curious reaching towards colorful object on table, parent hand gentle redirect (not blocking), warm home setting, soft natural light",
"emotion": "curious, exploratory (child) — calm, patient (parent)",
"headline": "Stop Bilang 'Jangan' Terus",
"headline_pre": "Stop Bilang",
"headline_serif_part": "'Jangan' Terus",
"subheadline": "Otak anak gak diciptakan buat 'dengar larangan'",
"label_top": "PARENTIA · GENTLE PARENTING SERIES",
"cta_pill": "SWIPE BUAT ALTERNATIFNYA"
}
```
<!-- /IMAGE_BRIEF -->
<!-- SLIDE_1_HTML_FALLBACK -->
<section class="slide slide-1 carousel-slide editorial-bold-serif">
<div style="position:absolute; top:60px; left:80px; font-family:'Inter',sans-serif; font-size:20px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--secondary); opacity:0.95;">PARENTIA · GENTLE PARENTING SERIES</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center; max-width:85%;">
<!-- Hero visual fallback: ABC blocks scattered + prohibition symbol overlay -->
<div style="position:relative; width:280px; height:280px; margin:0 auto 48px;">
<svg width="280" height="280" viewBox="0 0 280 280">
<!-- ABC blocks (playful, warm colors) -->
<rect x="40" y="100" width="70" height="70" fill="#fef3c7" stroke="#3f3f46" stroke-width="3" transform="rotate(-8 75 135)"/>
<text x="75" y="145" font-family="serif" font-weight="800" font-size="44" text-anchor="middle" fill="#3f3f46" transform="rotate(-8 75 135)">A</text>
<rect x="120" y="90" width="70" height="70" fill="#dbeafe" stroke="#3f3f46" stroke-width="3" transform="rotate(5 155 125)"/>
<text x="155" y="135" font-family="serif" font-weight="800" font-size="44" text-anchor="middle" fill="#3f3f46" transform="rotate(5 155 125)">B</text>
<rect x="170" y="130" width="70" height="70" fill="#dcfce7" stroke="#3f3f46" stroke-width="3" transform="rotate(-3 205 165)"/>
<text x="205" y="175" font-family="serif" font-weight="800" font-size="44" text-anchor="middle" fill="#3f3f46" transform="rotate(-3 205 165)">C</text>
<!-- Prohibition symbol overlay (red circle with slash) -->
<circle cx="140" cy="140" r="100" fill="none" stroke="var(--danger)" stroke-width="8" opacity="0.7"/>
<line x1="70" y1="70" x2="210" y2="210" stroke="var(--danger)" stroke-width="8" stroke-linecap="round" opacity="0.7"/>
</svg>
</div>
<h1 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:92px; line-height:1.05; font-weight:800; letter-spacing:-0.02em; color:var(--neutral-dark); margin-bottom:24px;">
Stop Bilang <span style="font-family:'Crimson Pro',serif; font-style:italic; font-size:98px; color:var(--danger);">'Jangan' Terus</span>
</h1>
<p style="font-size:34px; line-height:1.35; font-weight:500; color:var(--neutral-mid); max-width:90%;">
Otak anak gak diciptakan buat 'dengar larangan'
</p>
</div>
<div style="position:absolute; bottom:60px; left:80px; display:inline-block; padding:12px 28px; background:rgba(240,234,66,0.15); border-radius:999px; font-family:'Inter',sans-serif; font-size:20px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--neutral-dark);">
SWIPE BUAT ALTERNATIFNYA →
</div>
</section>
<!-- /SLIDE_1_HTML_FALLBACK -->
## HTML
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ngomong "Jangan" = Justru Bikin Anak Makin Pengen — Parentia</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&family=Bricolage+Grotesque:wght@600;800&family=Inter:wght@400;500;600;700&family=Crimson+Pro:ital,wght@1,500;1,600;1,700&family=Caveat:wght@600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #F0EA42;
--secondary: #7C3AED;
--accent: #FB923C;
--danger: #EF4444;
--neutral-light: #FDF8F3;
--neutral-dark: #3F3F46;
--neutral-mid: #71717A;
--bg: #FDF8F3;
--bg-soft: #F1ECE3;
--bg-white: #FFFFFF;
--bg-dark: #1A1A1A;
--ink: #1A1A1A;
--ink-on-dark: #FAFAFA;
--muted: #5A5A5A;
--line: #E5E0D6;
--highlight: #FEF08A;
--soft-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
--soft-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #E5E5E5; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
.slide {
width: 864px; height: 1080px;
background: var(--bg); color: var(--ink);
padding: 70px;
display: flex; flex-direction: column; justify-content: center;
page-break-after: always;
margin: 20px auto;
position: relative; overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.hero { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 86px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; }
.headline { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 52px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
.sub { font-size: 30px; line-height: 1.4; font-weight: 400; color: var(--ink); }
.body { font-size: 26px; line-height: 1.5; font-weight: 400; color: var(--ink); }
.caption { font-size: 20px; line-height: 1.5; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.stat-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 200px; line-height: 0.9; font-weight: 800; color: var(--primary); letter-spacing: -0.04em; }
.quote-text { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 40px; line-height: 1.3; font-weight: 600; }
.accent-word { color: var(--primary); font-weight: 800; }
.number-badge {
position: absolute; top: 42px; right: 42px;
font-family: 'Inter', monospace;
font-size: 20px; color: var(--muted);
letter-spacing: 0.08em; font-weight: 600;
}
.brand-ribbon {
position: absolute; bottom: 42px; left: 70px;
font-size: 20px; color: var(--muted);
letter-spacing: 0.05em; font-weight: 600;
}
.icon-mega { width: 280px; height: 280px; max-width: 280px; max-height: 280px; flex-shrink: 0; stroke-width: 2.5; display: block; }
.icon-hero { width: 220px; height: 220px; max-width: 220px; max-height: 220px; flex-shrink: 0; stroke-width: 2.5; display: block; }
.icon-inline { width: 32px; height: 32px; max-width: 32px; max-height: 32px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.icon-circle {
width: 280px; height: 280px;
max-width: 280px; max-height: 280px;
flex-shrink: 0;
background: var(--bg-soft);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 36px;
position: relative;
}
.slide svg:not([class*="icon-"]) { max-width: 64px; max-height: 64px; }
.soft-card {
background: var(--bg-white);
border-radius: 14px;
padding: 26px 30px;
box-shadow: var(--soft-shadow);
display: flex; gap: 18px; align-items: flex-start;
margin-bottom: 20px;
}
.slide.bg-cream-textured {
background:
radial-gradient(circle at 20% 80%, rgba(240,234,66,0.08), transparent 50%),
radial-gradient(circle at 80% 20%, rgba(124,58,237,0.05), transparent 40%),
var(--bg);
position: relative;
}
.slide.bg-cream-textured::before {
content: ''; position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(26,26,26,0.08) 1px, transparent 1px);
background-size: 22px 22px; opacity: 0.4; pointer-events: none;
}
.slide.bg-white-grid {
background:
linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 42px 42px,
linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 42px 42px,
var(--bg-white);
}
.slide.bg-dark-glow {
background:
radial-gradient(circle at center, rgba(124,58,237,0.35), transparent 60%),
var(--bg-dark);
color: var(--ink-on-dark);
}
@media print {
body { background: #FFFFFF; }
.slide { margin: 0; box-shadow: none; }
}
</style>
<style>
/* === Image hook slide 1 overlay (injected by carousel_composer) === */
/* Format-responsive: slide dimensions come from html data-format attribute
(set by slide_renderer via format.json). Defaults to 1:1 if no attr. */
.slide { aspect-ratio: 1 / 1; }
html[data-format="4:5"] .slide,
.slide[data-format="4:5"] { aspect-ratio: 4 / 5; }
.slide.slide-1.hook-image {
padding: 0 !important;
position: relative;
overflow: hidden;
}
.slide.slide-1 .hook-bg {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 1;
}
.slide.slide-1 .hook-overlay {
position: relative;
z-index: 2;
width: 100%; height: 100%;
padding: 80px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.32) 100%);
}
.slide.slide-1 .hook-label {
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.95;
}
.slide.slide-1 .hook-content {
display: flex; flex-direction: column; gap: 18px;
}
.slide.slide-1 .hook-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 124px;
line-height: 1.0;
letter-spacing: -0.02em;
max-width: 90%;
margin: 0;
}
.slide.slide-1 .hook-title .serif-italic {
font-family: 'Crimson Pro', 'Playfair Display', serif;
font-weight: 600;
font-style: italic;
font-size: 130px;
letter-spacing: 0;
}
.slide.slide-1 .hook-sub {
font-family: 'Inter', sans-serif;
font-size: 30px;
font-weight: 500;
max-width: 75%;
line-height: 1.3;
opacity: 0.94;
margin: 0;
}
.slide.slide-1 .hook-cta {
align-self: flex-start;
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 14px 26px;
background: rgba(255, 255, 255, 0.95);
color: #1a1a1a;
border-radius: 999px;
text-shadow: none;
}
/* Typography variants */
.slide.slide-1.modern-sans-tight .hook-title,
.slide.slide-1.modern-sans-tight .hook-title .serif-italic {
font-family: 'Inter', sans-serif;
font-weight: 800;
letter-spacing: -0.04em;
font-style: normal;
}
.slide.slide-1.minimal-display .hook-title {
font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
}
.slide.slide-1.minimal-display .hook-title .serif-italic {
font-family: 'Bricolage Grotesque', sans-serif;
font-style: italic;
}
</style>
<style>
/* === Image hook v2 typography (injected by carousel_composer) === */
:root {
--slide1-primary-font: 'Inter', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
--slide1-accent-font: 'Playfair Display', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
--slide1-primary-weight: 700;
--slide1-accent-style: italic;
}
.slide.slide-1 .hook-title {
font-family: var(--slide1-primary-font) !important;
font-weight: var(--slide1-primary-weight) !important;
}
.slide.slide-1 .hook-title .serif-italic,
.slide.slide-1 .accent {
font-family: var(--slide1-accent-font) !important;
font-style: var(--slide1-accent-style) !important;
}
</style>
</head>
<body>
<section class="slide slide-1 carousel-slide hook-image editorial-bold-serif">
<img src="/brands/parentia/file/content/carousels/2026-05-31-carousel-ngomong-jangan-justru-bikin-anak-makin-pengen-1/_assets/slide-1.png" class="hook-bg" alt="PARENTING · KOMUNIKASI ANAK" loading="eager">
<div class="hook-overlay">
<div class="hook-label">PARENTING · KOMUNIKASI ANAK</div>
<div class="hook-content">
<h1 class="hook-title">Stop Bilang <em class="serif-italic">'Jangan' Terus</em></h1>
<p class="hook-sub">Otak anak gak diciptakan buat dengar larangan</p>
</div>
<div class="hook-cta">Baca Artikel →</div>
</div>
</section>
<!-- Slide 1 SKIPPED (image hook injected by backend) -->
<!-- Slide 2: Hook restate -->
<section class="slide carousel-slide bg-cream-textured">
<div class="number-badge">02 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<!-- Hand-drawn underline decoration -->
<div style="position:relative; display:inline-block; align-self:flex-start; margin-bottom:36px;">
<span style="font-family:'Caveat',cursive; font-size:26px; font-weight:700; color:var(--secondary); transform:rotate(-2deg); display:inline-block;">pengalaman Parents 👇</span>
</div>
<h2 class="headline" style="margin-bottom:32px; max-width:90%;">
"Jangan pegang itu!"<br>
"Jangan lari-lari!"<br>
"Jangan berantakin mainan!"
</h2>
<p class="body" style="color:var(--muted); max-width:88%;">
Eh malah makin penasaran. Malah makin pengen. Kenapa sih? 😮💨
</p>
<!-- Stick figure: frustrated parent -->
<div style="margin-top:40px;">
<svg width="80" height="100" viewBox="0 0 80 100" stroke="#3f3f46" stroke-width="2.5" fill="none" stroke-linecap="round">
<circle cx="40" cy="20" r="10"/>
<line x1="40" y1="30" x2="40" y2="70"/>
<line x1="40" y1="45" x2="25" y2="55"/>
<line x1="40" y1="45" x2="55" y2="55"/>
<line x1="40" y1="70" x2="30" y2="95"/>
<line x1="40" y1="70" x2="50" y2="95"/>
<!-- Frustration lines above head -->
<line x1="30" y1="8" x2="28" y2="3" stroke="var(--danger)" stroke-width="2"/>
<line x1="50" y1="8" x2="52" y2="3" stroke="var(--danger)" stroke-width="2"/>
</svg>
</div>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 3: Science explanation -->
<section class="slide carousel-slide bg-white-grid">
<div class="number-badge">03 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<span class="caption" style="margin-bottom:28px; color:var(--secondary);">CARA KERJA OTAK ANAK</span>
<!-- Brain icon with gear overlay -->
<div style="position:relative; width:220px; height:220px; margin:0 auto 36px;">
<svg style="width:100%; height:100%;" viewBox="0 0 220 220">
<!-- Brain outline (simplified) -->
<path d="M60 80 Q50 50 80 40 Q110 30 130 50 Q150 30 170 50 Q190 70 180 100 Q190 130 170 150 Q150 170 120 165 Q90 170 70 150 Q50 130 55 100 Q45 80 60 80Z"
fill="var(--bg-soft)" stroke="var(--secondary)" stroke-width="3"/>
<!-- Gear overlay (thinking mechanism) -->
<circle cx="110" cy="100" r="30" fill="none" stroke="var(--primary)" stroke-width="4"/>
<circle cx="110" cy="100" r="15" fill="var(--primary)" opacity="0.3"/>
<!-- Gear teeth -->
<circle cx="110" cy="70" r="5" fill="var(--primary)"/>
<circle cx="140" cy="100" r="5" fill="var(--primary)"/>
<circle cx="110" cy="130" r="5" fill="var(--primary)"/>
<circle cx="80" cy="100" r="5" fill="var(--primary)"/>
</svg>
</div>
<h2 class="headline" style="margin-bottom:28px; text-align:center;">
Otak batita belum punya <span style="color:var(--danger);">rem otomatis</span>
</h2>
<p class="body" style="color:var(--muted); text-align:center; max-width:85%; margin:0 auto;">
Prefrontal cortex (bagian otak buat <span style="font-weight:700; color:var(--ink);">kontrol impuls</span>) baru mulai berkembang di usia ini. Jadi wajar kalau kata "jangan" malah jadi trigger penasaran 👀
</p>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 4: What happens in brain -->
<section class="slide carousel-slide bg-cream-textured">
<div class="number-badge">04 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<span class="caption" style="margin-bottom:28px; color:var(--accent);">YANG TERJADI DI KEPALA MEREKA</span>
<div style="background:var(--bg-white); border-radius:16px; padding:36px; box-shadow:var(--soft-shadow); margin-bottom:28px;">
<p class="sub" style="font-weight:600; margin-bottom:20px;">
Parents bilang: <span style="color:var(--danger);">"Jangan pegang vas itu!"</span>
</p>
<p class="body" style="color:var(--muted);">
↓
</p>
<p class="sub" style="font-weight:600; margin-top:20px;">
Yang si Kecil tangkap: <span style="color:var(--primary);">"Vas itu menarik banget!"</span> ✨
</p>
</div>
<p class="body" style="color:var(--muted); max-width:90%;">
Otak mereka fokusnya ke <span style="font-weight:700; color:var(--ink);">objek</span> (vas), bukan ke <span style="text-decoration:line-through;">perintah</span> (jangan). Makanya malah makin penasaran 🧠
</p>
<!-- Notebook check mark decoration -->
<div style="margin-top:28px;">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="var(--secondary)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 20 L 14 28 L 30 10"/>
</svg>
</div>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 5: Alternative approach intro -->
<section class="slide carousel-slide bg-white-grid">
<div class="number-badge">05 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<!-- Sun doodle (positivity symbol) -->
<div style="margin:0 auto 32px;">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linecap="round">
<circle cx="28" cy="28" r="11"/>
<line x1="28" y1="5" x2="28" y2="13"/>
<line x1="28" y1="43" x2="28" y2="51"/>
<line x1="5" y1="28" x2="13" y2="28"/>
<line x1="43" y1="28" x2="51" y2="28"/>
<line x1="12" y1="12" x2="17" y2="17"/>
<line x1="39" y1="39" x2="44" y2="44"/>
<line x1="12" y1="44" x2="17" y2="39"/>
<line x1="39" y1="17" x2="44" y2="12"/>
<circle cx="24" cy="26" r="1.5" fill="currentColor"/>
<circle cx="32" cy="26" r="1.5" fill="currentColor"/>
<path d="M23 31 Q28 35 33 31"/>
</svg>
</div>
<h2 class="headline" style="margin-bottom:28px; text-align:center;">
Jadi gimana cara <span style="color:var(--primary);">yang lebih efektif?</span>
</h2>
<p class="body" style="color:var(--muted); text-align:center; max-width:88%; margin:0 auto;">
Alih-alih bilang "jangan", coba ganti jadi kalimat yang kasih tau mereka <span style="font-weight:700; color:var(--ink);">apa yang BISA</span> mereka lakukan 💡
</p>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 6: Example 1 -->
<section class="slide carousel-slide">
<div class="number-badge">06 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<!-- Notebook tape label -->
<div style="display:inline-block; align-self:flex-start; padding:8px 20px; background:#fef3c7; transform:rotate(-1.5deg); font-family:'Caveat',cursive; font-size:22px; color:#3f3f46; box-shadow:0 2px 4px rgba(0,0,0,0.08); margin-bottom:32px;">
contoh #1
</div>
<div class="soft-card" style="background:rgba(239,68,68,0.08); border-left:5px solid var(--danger);">
<div style="font-size:36px;">❌</div>
<div>
<p class="sub" style="font-weight:700; margin-bottom:12px; color:var(--danger);">
"Jangan lari-lari!"
</p>
<p class="body" style="color:var(--muted); font-size:22px;">
(Si Kecil cuma denger: "lari" → malah makin kenceng larinya)
</p>
</div>
</div>
<div style="text-align:center; margin:24px 0;">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="var(--primary)" stroke-width="3" stroke-linecap="round">
<line x1="20" y1="5" x2="20" y2="35"/>
<polyline points="15 30 20 35 25 30"/>
</svg>
</div>
<div class="soft-card" style="background:rgba(240,234,66,0.12); border-left:5px solid var(--primary);">
<div style="font-size:36px;">✅</div>
<div>
<p class="sub" style="font-weight:700; margin-bottom:12px; color:var(--primary);">
"Yuk jalan pelan-pelan"
</p>
<p class="body" style="color:var(--muted); font-size:22px;">
(Kasih instruksi positif — apa yang BISA mereka lakukan)
</p>
</div>
</div>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 7: Example 2 -->
<section class="slide carousel-slide bg-cream-textured">
<div class="number-badge">07 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<div style="display:inline-block; align-self:flex-start; padding:8px 20px; background:#dbeafe; transform:rotate(1deg); font-family:'Caveat',cursive; font-size:22px; color:#3f3f46; box-shadow:0 2px 4px rgba(0,0,0,0.08); margin-bottom:32px;">
contoh #2
</div>
<div class="soft-card" style="background:rgba(239,68,68,0.08); border-left:5px solid var(--danger);">
<div style="font-size:36px;">❌</div>
<div>
<p class="sub" style="font-weight:700; margin-bottom:12px; color:var(--danger);">
"Jangan pegang vas itu!"
</p>
<p class="body" style="color:var(--muted); font-size:22px;">
(Fokus ke objek → makin pengen pegang)
</p>
</div>
</div>
<div style="text-align:center; margin:24px 0;">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="var(--secondary)" stroke-width="3" stroke-linecap="round">
<line x1="20" y1="5" x2="20" y2="35"/>
<polyline points="15 30 20 35 25 30"/>
</svg>
</div>
<div class="soft-card" style="background:rgba(124,58,237,0.1); border-left:5px solid var(--secondary);">
<div style="font-size:36px;">✅</div>
<div>
<p class="sub" style="font-weight:700; margin-bottom:12px; color:var(--secondary);">
"Vas itu buat lihat aja ya, tangannya bisa pegang mainan ini"
</p>
<p class="body" style="color:var(--muted); font-size:22px;">
(Kasih alternatif yang aman + validasi rasa penasaran mereka)
</p>
</div>
</div>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 8: Bonus tip (dark pause slide) -->
<section class="slide carousel-slide bg-dark-glow">
<div class="number-badge" style="color:var(--ink-on-dark);">08 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;">
<!-- Heart doodle -->
<svg width="48" height="42" viewBox="0 0 48 42" fill="none" stroke="var(--primary)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:32px;">
<path d="M24 38 C 12 27 3 19.5 3 12 C 3 6 7.5 3 12 3 C 18 3 21 7.5 24 12 C 27 7.5 30 3 36 3 C 40.5 3 45 6 45 12 C 45 19.5 36 27 24 38Z"/>
</svg>
<h2 class="headline" style="color:var(--ink-on-dark); margin-bottom:28px; max-width:85%;">
Bonus: Kalau mereka tetep <span style="color:var(--primary);">bandel?</span>
</h2>
<p class="body" style="color:rgba(250,250,250,0.8); max-width:82%;">
Validasi dulu perasaannya: <span style="font-weight:700; color:var(--ink-on-dark);">"Kamu pengen pegang ya? Tapi ini rapuh."</span> Terus redirect ke alternatif yang aman.
</p>
<p class="body" style="color:rgba(250,250,250,0.6); max-width:82%; margin-top:24px; font-size:23px;">
Mereka butuh merasa <span style="color:var(--primary);">didengar</span> dulu sebelum bisa dengerin kita 💛
</p>
</div>
<div class="brand-ribbon" style="color:var(--ink-on-dark);">@parentia.idn</div>
</section>
<!-- Slide 9: Connector -->
<section class="slide carousel-slide bg-white-grid">
<div class="number-badge">09 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<span class="caption" style="margin-bottom:28px; color:var(--accent);">INGAT INI</span>
<h2 class="headline" style="margin-bottom:32px; max-width:90%;">
Gentle parenting bukan berarti <span style="color:var(--danger);">gak ada boundaries</span>
</h2>
<p class="body" style="color:var(--muted); margin-bottom:24px; max-width:88%;">
Tetap ada aturan. Tetap ada konsekuensi. Cuma cara ngomongnya yang disesuaikan sama <span style="font-weight:700; color:var(--ink);">cara kerja otak mereka</span> ✨
</p>
<p class="body" style="color:var(--muted); max-width:88%;">
Bukan "jangan" terus. Tapi "lakukan ini" dengan tenang. Hasilnya? Si Kecil lebih kooperatif karena mereka tau apa yang diharapkan 🧡
</p>
<!-- Crayon underline decoration -->
<div style="margin-top:32px;">
<svg width="180" height="18" viewBox="0 0 180 18">
<path d="M5 11 Q 45 3, 90 10 T 175 7" stroke="var(--primary)" stroke-width="5" fill="none" stroke-linecap="round" opacity="0.7"/>
<path d="M7 13 Q 50 5, 95 12 T 172 9" stroke="var(--primary)" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.4"/>
</svg>
</div>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 10: CTA -->
<section class="slide carousel-slide" style="background:linear-gradient(135deg, rgba(240,234,66,0.15) 0%, var(--bg) 100%);">
<div class="number-badge">10 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;">
<!-- Bookmark icon -->
<svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:36px;">
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/>
</svg>
<h2 class="headline" style="margin-bottom:28px; max-width:85%;">
Save buat reminder pas lagi pengen bentak <span style="color:var(--danger);">"jangan!"</span>
</h2>
<p class="body" style="color:var(--muted); margin-bottom:40px; max-width:80%;">
Atau share ke Parents lain yang relate sama struggle ini 💛
</p>
<div style="display:inline-block; padding:18px 36px; background:var(--primary); color:var(--neutral-dark); border-radius:12px; font-size:26px; font-weight:800; letter-spacing:0.02em; box-shadow:0 6px 20px rgba(240,234,66,0.3);">
→ SAVE & SHARE
</div>
</div>
<div style="position:absolute; bottom:42px; left:0; right:0; text-align:center;">
<span style="font-size:24px; font-weight:800; color:var(--primary); letter-spacing:0.05em;">PARENTIA</span>
<span style="font-size:20px; color:var(--muted); margin-left:12px;">@parentia.idn</span>
</div>
</section>
</body>
</html>
```
---
# CAROUSEL 2: Screen Time Bukan Musuh — Tapi Ini Yang Harus Parents Pantau
## METADATA
- Topic: Screen time quality > quantity (reframe guilt jadi awareness)
- Audience focus: Working parents yang guilt karena kasih screen time ke anak (batita-TK)
- Slide count: 10
- Suggested caption: Ternyata yang penting bukan "berapa lama" tapi "nonton apa" sama "bareng siapa" 👀 Parents yang kasih screen time kadang-kadang, ini buat ngilangin guilt trip. Save ya 💛
<!-- IMAGE_BRIEF -->
```json
{
"topic": "Screen time parenting dengan batita",
"subject_hint": "Toddler sitting with parent on couch, watching tablet together, parent pointing at screen engaging with content, warm living room, soft afternoon light",
"emotion": "engaged, connected (both) — NOT isolated/guilty",
"headline": "Screen Time Isn't the Enemy",
"headline_pre": "Screen Time",
"headline_serif_part": "Isn't the Enemy",
"subheadline": "Yang penting bukan 'berapa lama', tapi 'bareng siapa'",
"label_top": "PARENTIA · DIGITAL PARENTING",
"cta_pill": "LIHAT 3 ATURAN SIMPLE"
}
```
<!-- /IMAGE_BRIEF -->
<!-- SLIDE_1_HTML_FALLBACK -->
<section class="slide slide-1 carousel-slide modern-sans-tight">
<div style="position:absolute; top:60px; left:70px; font-family:'Inter',sans-serif; font-size:20px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); opacity:0.95;">PARENTIA · DIGITAL PARENTING</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center; max-width:88%;">
<!-- Fallback visual: tablet icon with heart -->
<div style="position:relative; width:280px; height:280px; margin:0 auto 48px;">
<svg width="280" height="280" viewBox="0 0 280 280">
<!-- Tablet outline -->
<rect x="60" y="40" width="160" height="200" rx="12" fill="var(--bg-soft)" stroke="var(--neutral-dark)" stroke-width="4"/>
<circle cx="140" cy="230" r="6" fill="var(--neutral-mid)"/>
<!-- Screen with heart symbol -->
<rect x="75" y="60" width="130" height="150" fill="var(--bg-white)"/>
<path d="M140 180 C 120 160 100 145 100 125 C 100 115 105 110 112 110 C 120 110 125 115 140 130 C 155 115 160 110 168 110 C 175 110 180 115 180 125 C 180 145 160 160 140 180Z"
fill="var(--primary)" opacity="0.8"/>
<!-- Connection arc (parent-child bond) -->
<path d="M220 140 Q 250 140 250 110" stroke="var(--secondary)" stroke-width="3" fill="none" stroke-dasharray="6 4"/>
<circle cx="250" cy="110" r="8" fill="var(--secondary)"/>
</svg>
</div>
<h1 style="font-family:'Inter',sans-serif; font-size:88px; line-height:1.05; font-weight:800; letter-spacing:-0.04em; color:var(--neutral-dark); margin-bottom:24px;">
Screen Time <span style="font-style:italic; color:var(--secondary);">Isn't the Enemy</span>
</h1>
<p style="font-size:32px; line-height:1.35; font-weight:500; color:var(--neutral-mid); max-width:92%;">
Yang penting bukan 'berapa lama', tapi 'bareng siapa'
</p>
</div>
<div style="position:absolute; bottom:60px; left:70px; display:inline-block; padding:12px 28px; background:rgba(251,146,60,0.15); border-radius:999px; font-family:'Inter',sans-serif; font-size:20px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--neutral-dark);">
LIHAT 3 ATURAN SIMPLE →
</div>
</section>
<!-- /SLIDE_1_HTML_FALLBACK -->
## HTML
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screen Time Bukan Musuh — Parentia</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&family=Bricolage+Grotesque:wght@600;800&family=Inter:wght@400;500;600;700;800&family=Crimson+Pro:ital,wght@1,500;1,600;1,700&family=Caveat:wght@600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #F0EA42;
--secondary: #7C3AED;
--accent: #FB923C;
--danger: #EF4444;
--neutral-light: #FDF8F3;
--neutral-dark: #3F3F46;
--neutral-mid: #71717A;
--bg: #FDF8F3;
--bg-soft: #F1ECE3;
--bg-white: #FFFFFF;
--bg-dark: #1A1A1A;
--ink: #1A1A1A;
--ink-on-dark: #FAFAFA;
--muted: #5A5A5A;
--line: #E5E0D6;
--highlight: #FEF08A;
--soft-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
--soft-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #E5E5E5; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
.slide {
width: 864px; height: 1080px;
background: var(--bg); color: var(--ink);
padding: 70px;
display: flex; flex-direction: column; justify-content: center;
page-break-after: always;
margin: 20px auto;
position: relative; overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.hero { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 86px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; }
.headline { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 52px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
.sub { font-size: 30px; line-height: 1.4; font-weight: 400; color: var(--ink); }
.body { font-size: 26px; line-height: 1.5; font-weight: 400; color: var(--ink); }
.caption { font-size: 20px; line-height: 1.5; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.stat-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 200px; line-height: 0.9; font-weight: 800; letter-spacing: -0.04em; }
.quote-text { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 40px; line-height: 1.3; font-weight: 600; }
.number-badge {
position: absolute; top: 42px; right: 42px;
font-family: 'Inter', monospace;
font-size: 20px; color: var(--muted);
letter-spacing: 0.08em; font-weight: 600;
}
.brand-ribbon {
position: absolute; bottom: 42px; left: 70px;
font-size: 20px; color: var(--muted);
letter-spacing: 0.05em; font-weight: 600;
}
.icon-hero { width: 220px; height: 220px; max-width: 220px; max-height: 220px; flex-shrink: 0; stroke-width: 2.5; display: block; }
.icon-circle {
width: 280px; height: 280px;
background: var(--bg-soft);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 36px;
position: relative;
}
.soft-card {
background: var(--bg-white);
border-radius: 14px;
padding: 26px 30px;
box-shadow: var(--soft-shadow);
margin-bottom: 20px;
}
.slide.bg-cream-textured {
background:
radial-gradient(circle at 20% 80%, rgba(240,234,66,0.08), transparent 50%),
radial-gradient(circle at 80% 20%, rgba(124,58,237,0.05), transparent 40%),
var(--bg);
position: relative;
}
.slide.bg-cream-textured::before {
content: ''; position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(26,26,26,0.08) 1px, transparent 1px);
background-size: 22px 22px; opacity: 0.4; pointer-events: none;
}
.slide.bg-white-grid {
background:
linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 42px 42px,
linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 42px 42px,
var(--bg-white);
}
.slide.bg-dark-glow {
background:
radial-gradient(circle at center, rgba(251,146,60,0.35), transparent 60%),
var(--bg-dark);
color: var(--ink-on-dark);
}
@media print {
body { background: #FFFFFF; }
.slide { margin: 0; box-shadow: none; }
}
</style>
<style>
/* === Image hook slide 1 overlay (injected by carousel_composer) === */
/* Format-responsive: slide dimensions come from html data-format attribute
(set by slide_renderer via format.json). Defaults to 1:1 if no attr. */
.slide { aspect-ratio: 1 / 1; }
html[data-format="4:5"] .slide,
.slide[data-format="4:5"] { aspect-ratio: 4 / 5; }
.slide.slide-1.hook-image {
padding: 0 !important;
position: relative;
overflow: hidden;
}
.slide.slide-1 .hook-bg {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 1;
}
.slide.slide-1 .hook-overlay {
position: relative;
z-index: 2;
width: 100%; height: 100%;
padding: 80px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.32) 100%);
}
.slide.slide-1 .hook-label {
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.95;
}
.slide.slide-1 .hook-content {
display: flex; flex-direction: column; gap: 18px;
}
.slide.slide-1 .hook-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 124px;
line-height: 1.0;
letter-spacing: -0.02em;
max-width: 90%;
margin: 0;
}
.slide.slide-1 .hook-title .serif-italic {
font-family: 'Crimson Pro', 'Playfair Display', serif;
font-weight: 600;
font-style: italic;
font-size: 130px;
letter-spacing: 0;
}
.slide.slide-1 .hook-sub {
font-family: 'Inter', sans-serif;
font-size: 30px;
font-weight: 500;
max-width: 75%;
line-height: 1.3;
opacity: 0.94;
margin: 0;
}
.slide.slide-1 .hook-cta {
align-self: flex-start;
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 14px 26px;
background: rgba(255, 255, 255, 0.95);
color: #1a1a1a;
border-radius: 999px;
text-shadow: none;
}
/* Typography variants */
.slide.slide-1.modern-sans-tight .hook-title,
.slide.slide-1.modern-sans-tight .hook-title .serif-italic {
font-family: 'Inter', sans-serif;
font-weight: 800;
letter-spacing: -0.04em;
font-style: normal;
}
.slide.slide-1.minimal-display .hook-title {
font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
}
.slide.slide-1.minimal-display .hook-title .serif-italic {
font-family: 'Bricolage Grotesque', sans-serif;
font-style: italic;
}
</style>
<style>
/* === Image hook v2 typography (injected by carousel_composer) === */
:root {
--slide1-primary-font: 'Inter', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
--slide1-accent-font: 'Playfair Display', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
--slide1-primary-weight: 700;
--slide1-accent-style: italic;
}
.slide.slide-1 .hook-title {
font-family: var(--slide1-primary-font) !important;
font-weight: var(--slide1-primary-weight) !important;
}
.slide.slide-1 .hook-title .serif-italic,
.slide.slide-1 .accent {
font-family: var(--slide1-accent-font) !important;
font-style: var(--slide1-accent-style) !important;
}
</style>
</head>
<body>
<section class="slide slide-1 carousel-slide hook-image editorial-bold-serif">
<img src="/brands/parentia/file/content/carousels/2026-05-31-carousel-screen-time-bukan-musuh-tapi-ini-yang-harus-parent-2/_assets/slide-1.png" class="hook-bg" alt="PARENTING · SCREEN TIME SERIES" loading="eager">
<div class="hook-overlay">
<div class="hook-label">PARENTING · SCREEN TIME SERIES</div>
<div class="hook-content">
<h1 class="hook-title">Screen Time Isn't <em class="serif-italic">the Enemy</em></h1>
<p class="hook-sub">Yang penting bukan 'berapa lama', tapi 'barong siapa'</p>
</div>
<div class="hook-cta">Baca Lebih Lanjut →</div>
</div>
</section>
<!-- Slide 1 SKIPPED -->
<!-- Slide 2: Hook guilt validation -->
<section class="slide carousel-slide bg-cream-textured">
<div class="number-badge">02 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<div style="display:inline-block; align-self:flex-start; padding:8px 20px; background:#fef3c7; transform:rotate(-2deg); font-family:'Caveat',cursive; font-size:22px; color:#3f3f46; box-shadow:0 2px 4px rgba(0,0,0,0.08); margin-bottom:32px;">
real talk
</div>
<h2 class="headline" style="margin-bottom:32px; max-width:90%;">
Parents yang kerja, kadang <span style="color:var(--accent);">screen time</span> jadi penyelamat
</h2>
<p class="body" style="color:var(--muted); margin-bottom:24px; max-width:88%;">
Lagi zoom meeting. Si Kecil udah rewel. Kasih tablet sebentar sambil selesain kerjaan = <span style="font-weight:700; color:var(--ink);">wajar</span>.
</p>
<p class="body" style="color:var(--muted); max-width:88%;">
Tapi kok rasanya guilty ya? 😔
</p>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 3: Reframe guilt -->
<section class="slide carousel-slide bg-white-grid">
<div class="number-badge">03 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<span class="caption" style="margin-bottom:28px; color:var(--secondary);">PENELITIAN BILANG</span>
<h2 class="headline" style="margin-bottom:28px; max-width:92%;">
Bukan soal <span style="text-decoration:line-through; color:var(--muted);">"berapa jam"</span> tapi soal <span style="color:var(--primary);">"konten apa"</span> dan <span style="color:var(--secondary);">"damping atau nggak"</span>
</h2>
<p class="body" style="color:var(--muted); max-width:88%;">
AAP (American Academy of Pediatrics) update guideline 2023: screen time bukan automatic buruk kalau <span style="font-weight:700; color:var(--ink);">quality content + ada interaksi</span> 📱✨
</p>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 4: Rule 1 -->
<section class="slide carousel-slide">
<div class="number-badge">04 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<div style="display:flex; align-items:flex-start; gap:24px; margin-bottom:32px;">
<div style="width:80px; height:80px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--soft-shadow-lg);">
<span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:48px; font-weight:800; color:var(--neutral-dark);">1</span>
</div>
<div>
<h2 class="headline" style="margin-bottom:18px;">
Pilih konten yang <span style="color:var(--primary);">interaktif</span>
</h2>
<p class="body" style="color:var(--muted);">
Bukan cuma duduk pasif nonton. Cari yang ngajak anak <span style="font-weight:700; color:var(--ink);">nyanyi bareng, jawab pertanyaan, atau gerak</span>.
</p>
</div>
</div>
<div class="soft-card" style="background:rgba(240,234,66,0.1);">
<p class="sub" style="font-weight:600; margin-bottom:12px;">
Contoh OK:
</p>
<p class="body" style="color:var(--muted); font-size:24px;">
• Cocomelon (interaktif, ada repetisi bahasa)<br>
• Bluey (story-driven, problem-solving)<br>
• Khan Academy Kids (educational game)
</p>
</div>
<div class="soft-card" style="background:rgba(239,68,68,0.08);">
<p class="sub" style="font-weight:600; margin-bottom:12px; color:var(--danger);">
Hindari:
</p>
<p class="body" style="color:var(--muted); font-size:24px;">
• Video compilation random tanpa struktur<br>
• Konten cepat-cepat stimulasi berlebih<br>
• Auto-play tanpa henti
</p>
</div>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 5: Rule 2 -->
<section class="slide carousel-slide bg-cream-textured">
<div class="number-badge">05 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<div style="display:flex; align-items:flex-start; gap:24px; margin-bottom:32px;">
<div style="width:80px; height:80px; border-radius:50%; background:var(--secondary); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--soft-shadow-lg);">
<span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:48px; font-weight:800; color:#FFF;">2</span>
</div>
<div>
<h2 class="headline" style="margin-bottom:18px;">
<span style="color:var(--secondary);">Co-viewing</span> kalau bisa
</h2>
<p class="body" style="color:var(--muted);">
Nggak harus 100% nemenin. Tapi sesekali duduk bareng, tanya: <span style="font-weight:700; color:var(--ink);">"Itu siapa? Lagi ngapain?"</span>
</p>
</div>
</div>
<div style="background:var(--bg-white); border-radius:16px; padding:32px; box-shadow:var(--soft-shadow);">
<p class="body" style="margin-bottom:20px;">
<span style="font-size:36px; margin-right:12px;">💡</span>
<span style="font-weight:700;">Kenapa penting?</span>
</p>
<p class="body" style="color:var(--muted); font-size:24px;">
Screen time jadi <span style="font-weight:700; color:var(--ink);">bonding moment</span>, bukan isolasi. Si Kecil belajar dari reaksi Parents juga ("Oh mama suka karakter ini").
</p>
</div>
<!-- Stick figure: parent + child watching together -->
<div style="margin-top:28px;">
<svg width="100" height="80" viewBox="0 0 100 80" stroke="#3f3f46" stroke-width="2" fill="none" stroke-linecap="round">
<!-- Parent -->
<circle cx="30" cy="15" r="7"/>
<line x1="30" y1="22" x2="30" y2="50"/>
<line x1="30" y1="32" x2="40" y2="38"/>
<line x1="30" y1="50" x2="25" y2="70"/>
<line x1="30" y1="50" x2="35" y2="70"/>
<!-- Child -->
<circle cx="55" cy="28" r="5"/>
<line x1="55" y1="33" x2="55" y2="55"/>
<line x1="55" y1="40" x2="50" y2="38"/>
<line x1="55" y1="55" x2="50" y2="72"/>
<line x1="55" y1="55" x2="60" y2="72"/>
<!-- Screen (tablet) -->
<rect x="65" y="25" width="30" height="22" rx="2" stroke="var(--secondary)" stroke-width="2.5"/>
<circle cx="80" cy="50" r="1.5" fill="var(--secondary)"/>
</svg>
</div>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 6: Rule 3 -->
<section class="slide carousel-slide bg-white-grid">
<div class="number-badge">06 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<div style="display:flex; align-items:flex-start; gap:24px; margin-bottom:32px;">
<div style="width:80px; height:80px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--soft-shadow-lg);">
<span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:48px; font-weight:800; color:#FFF;">3</span>
</div>
<div>
<h2 class="headline" style="margin-bottom:18px;">
Kasih <span style="color:var(--accent);">jeda aktivitas fisik</span>
</h2>
<p class="body" style="color:var(--muted);">
Habis screen time 20-30 menit, ajak gerak: lompat, dance, main bola. <span style="font-weight:700; color:var(--ink);">Balance</span> itu kuncinya.
</p>
</div>
</div>
<div style="background:rgba(251,146,60,0.1); border-radius:16px; padding:32px; margin-bottom:24px;">
<p class="sub" style="font-weight:700; margin-bottom:16px;">
Pattern ideal (batita):
</p>
<p class="body" style="color:var(--muted); font-size:24px; line-height:1.6;">
• 20-30 menit screen time<br>
• → 15 menit aktivitas fisik<br>
• → Free play / snack<br>
• Repeat kalau perlu (bukan binge 2 jam nonstop)
</p>
</div>
<p class="body" style="color:var(--muted); font-size:23px;">
Otak anak butuh variety stimulasi — <span style="font-weight:700; color:var(--ink);">visual, auditory, kinesthetic</span>. Screen cuma 1 dari 3 itu ✨
</p>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 7: Guilt-free reminder -->
<section class="slide carousel-slide">
<div class="number-badge">07 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;">
<!-- Heart doodle -->
<svg width="56" height="50" viewBox="0 0 56 50" fill="none" stroke="var(--primary)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:32px;">
<path d="M28 45 C 14 32 4 23.25 4 14 C 4 7 8.75 4 14 4 C 21 4 24.5 8.75 28 14 C 31.5 8.75 35 4 42 4 C 47.25 4 52 7 52 14 C 52 23.25 42 32 28 45Z"/>
</svg>
<h2 class="headline" style="margin-bottom:28px; max-width:85%;">
Parents yang kasih screen time kadang-kadang = <span style="color:var(--primary);">bukan parents yang buruk</span>
</h2>
<p class="body" style="color:var(--muted); max-width:80%;">
Lo cuma manusia yang butuh <span style="font-weight:700; color:var(--ink);">breathing room</span>. Selama kontennya OK + ada balance aktivitas lain, <span style="font-weight:700; color:var(--ink);">it's fine</span> 💛
</p>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 8: Red flag reminder (dark slide) -->
<section class="slide carousel-slide bg-dark-glow">
<div class="number-badge" style="color:var(--ink-on-dark);">08 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<span class="caption" style="margin-bottom:28px; color:var(--accent);">TAPI WASPADA KALAU...</span>
<div style="background:rgba(255,255,255,0.08); border-radius:16px; padding:32px; border-left:5px solid var(--danger); margin-bottom:20px;">
<p class="sub" style="font-weight:700; color:var(--ink-on-dark); margin-bottom:14px;">
🚨 Si Kecil tantrum pas screen time diambil
</p>
<p class="body" style="color:rgba(250,250,250,0.7); font-size:23px;">
Tanda ketergantungan. Coba kurangin gradual + kasih alternatif engaging (main bersama, sensory play).
</p>
</div>
<div style="background:rgba(255,255,255,0.08); border-radius:16px; padding:32px; border-left:5px solid var(--danger); margin-bottom:20px;">
<p class="sub" style="font-weight:700; color:var(--ink-on-dark); margin-bottom:14px;">
🚨 Screen jadi default buat calm down
</p>
<p class="body" style="color:rgba(250,250,250,0.7); font-size:23px;">
Anak perlu belajar self-soothe tanpa device. Ajarkan nafas dalam, peluk boneka, atau duduk bareng Parents.
</p>
</div>
<p class="body" style="color:rgba(250,250,250,0.6); margin-top:24px; font-size:22px; text-align:center;">
Screen time = alat. Bukan pengganti <span style="color:var(--accent); font-weight:700;">connection</span> Parents-anak.
</p>
</div>
<div class="brand-ribbon" style="color:var(--ink-on-dark);">@parentia.idn</div>
</section>
<!-- Slide 9: Connector -->
<section class="slide carousel-slide bg-cream-textured">
<div class="number-badge">09 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<span class="caption" style="margin-bottom:28px; color:var(--secondary);">TAKEAWAY</span>
<h2 class="headline" style="margin-bottom:32px; max-width:90%;">
Screen time bukan <span style="color:var(--danger);">hitam-putih</span>
</h2>
<p class="body" style="color:var(--muted); margin-bottom:24px; max-width:88%;">
Kalau dipakai dengan <span style="font-weight:700; color:var(--ink);">mindful</span> (konten berkualitas + ada damping + diselingin aktivitas lain), screen time bisa jadi <span style="font-weight:700; color:var(--ink);">supporting tool</span>, bukan villain 📱✨
</p>
<p class="body" style="color:var(--muted); max-width:88%;">
Jadi lepas guilt-nya, Parents. Lo udah doing your best 💛
</p>
<!-- Notebook check decoration -->
<div style="margin-top:28px;">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="var(--primary)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 22 L 16 30 L 32 12"/>
</svg>
</div>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 10: CTA -->
<section class="slide carousel-slide" style="background:linear-gradient(135deg, rgba(124,58,237,0.12) 0%, var(--bg) 100%);">
<div class="number-badge">10 / 10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;">
<!-- Bookmark icon -->
<svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--secondary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:36px;">
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/>
</svg>
<h2 class="headline" style="margin-bottom:28px; max-width:85%;">
Save buat <span style="color:var(--secondary);">ngilangin guilt</span> pas kasih screen time
</h2>
<p class="body" style="color:var(--muted); margin-bottom:40px; max-width:80%;">
Tag Parents lain yang relate + butuh reminder ini 💜
</p>
<div style="display:inline-block; padding:18px 36px; background:var(--secondary); color:#FFF; border-radius:12px; font-size:26px; font-weight:800; letter-spacing:0.02em; box-shadow:0 6px 20px rgba(124,58,237,0.3);">
→ SAVE & SHARE
</div>
</div>
<div style="position:absolute; bottom:42px; left:0; right:0; text-align:center;">
<span style="font-size:24px; font-weight:800; color:var(--secondary); letter-spacing:0.05em;">PARENTIA</span>
<span style="font-size:20px; color:var(--muted); margin-left:12px;">@parentia.idn</span>
</div>
</section>
</body>
</html>
```
---
# CAROUSEL 3: 4 Kalimat Ajaib Buat Anak Yang Lagi Tantrum
## METADATA
- Topic: Gentle parenting phrases saat anak tantrum (tactical, actionable)
- Audience focus: Parents batita–TK yang overwhelmed pas anak meltdown, butuh script konkret
- Slide count: 9
- Suggested caption: Pas si Kecil lagi tantrum, kadang kita blank mau ngomong apa. Save 4 kalimat ini buat dihafalin, Parents 💛 Dijamin lebih efektif daripada "udah jangan nangis" 🥺✨
<!-- IMAGE_BRIEF -->
```json
{
"topic": "Gentle parenting tantrum response",
"subject_hint": "Toddler mid-tantrum (crying, frustrated) on floor, parent kneeling at eye level beside child (calm, empathetic posture, hand gently near but not forcing), soft warm home interior",
"emotion": "distressed (child) — calm, grounded (parent)",
"headline": "4 Kalimat Pas Anak Tantrum",
"headline_pre": "4 Kalimat Pas",
"headline_serif_part": "Anak Tantrum",
"subheadline": "Lebih efektif daripada 'udah jangan nangis'",
"label_top": "PARENTIA · GENTLE PARENTING TOOLKIT",
"cta_pill": "LIHAT 4 SCRIPTS"
}
```
<!-- /IMAGE_BRIEF -->
<!-- SLIDE_1_HTML_FALLBACK -->
<section class="slide slide-1 carousel-slide editorial-bold-serif">
<div style="position:absolute; top:60px; left:70px; font-family:'Inter',sans-serif; font-size:20px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--primary); opacity:0.95;">PARENTIA · GENTLE PARENTING TOOLKIT</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center; max-width:88%;">
<!-- Fallback visual: speech bubbles with calm icon -->
<div style="position:relative; width:280px; height:280px; margin:0 auto 48px;">
<svg width="280" height="280" viewBox="0 0 280 280">
<!-- Large speech bubble (parent) -->
<rect x="30" y="80" width="140" height="100" rx="16" fill="var(--bg-soft)" stroke="var(--neutral-dark)" stroke-width="3"/>
<path d="M60 180 L 50 210 L 80 180 Z" fill="var(--bg-soft)" stroke="var(--neutral-dark)" stroke-width="3"/>
<!-- Text placeholder in bubble -->
<line x1="50" y1="110" x2="150" y2="110" stroke="var(--primary)" stroke-width="4" stroke-linecap="round"/>
<line x1="50" y1="130" x2="130" y2="130" stroke="var(--primary)" stroke-width="4" stroke-linecap="round"/>
<line x1="50" y1="150" x2="140" y2="150" stroke="var(--primary)" stroke-width="4" stroke-linecap="round"/>
<!-- Smaller emotional bubble (child crying) -->
<circle cx="210" cy="140" r="50" fill="rgba(239,68,68,0.15)" stroke="var(--danger)" stroke-width="3"/>
<!-- Sad face -->
<circle cx="195" cy="130" r="3" fill="var(--danger)"/>
<circle cx="225" cy="130" r="3" fill="var(--danger)"/>
<path d="M195 155 Q210 145 225 155" stroke="var(--danger)" stroke-width="3" fill="none" stroke-linecap="round"/>
<!-- Connection line (empathy) -->
<path d="M170 130 L 160 130" stroke="var(--secondary)" stroke-width="2.5" stroke-dasharray="4 3"/>
</svg>
</div>
<h1 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:88px; line-height:1.05; font-weight:800; letter-spacing:-0.02em; color:var(--neutral-dark); margin-bottom:24px;">
4 Kalimat Pas <span style="font-family:'Crimson Pro',serif; font-style:italic; font-size:94px; color:var(--danger);">Anak Tantrum</span>
</h1>
<p style="font-size:32px; line-height:1.35; font-weight:500; color:var(--neutral-mid); max-width:92%;">
Lebih efektif daripada 'udah jangan nangis'
</p>
</div>
<div style="position:absolute; bottom:60px; left:70px; display:inline-block; padding:12px 28px; background:rgba(240,234,66,0.15); border-radius:999px; font-family:'Inter',sans-serif; font-size:20px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--neutral-dark);">
LIHAT 4 SCRIPTS →
</div>
</section>
<!-- /SLIDE_1_HTML_FALLBACK -->
## HTML
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4 Kalimat Ajaib Buat Anak Yang Lagi Tantrum — Parentia</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&family=Bricolage+Grotesque:wght@600;800&family=Inter:wght@400;500;600;700;800&family=Crimson+Pro:ital,wght@1,500;1,600;1,700&family=Caveat:wght@600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #F0EA42;
--secondary: #7C3AED;
--accent: #FB923C;
--danger: #EF4444;
--neutral-light: #FDF8F3;
--neutral-dark: #3F3F46;
--neutral-mid: #71717A;
--bg: #FDF8F3;
--bg-soft: #F1ECE3;
--bg-white: #FFFFFF;
--bg-dark: #1A1A1A;
--ink: #1A1A1A;
--ink-on-dark: #FAFAFA;
--muted: #5A5A5A;
--line: #E5E0D6;
--highlight: #FEF08A;
--soft-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
--soft-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #E5E5E5; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
.slide {
width: 864px; height: 1080px;
background: var(--bg); color: var(--ink);
padding: 70px;
display: flex; flex-direction: column; justify-content: center;
page-break-after: always;
margin: 20px auto;
position: relative; overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.headline { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 52px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
.sub { font-size: 30px; line-height: 1.4; font-weight: 400; color: var(--ink); }
.body { font-size: 26px; line-height: 1.5; font-weight: 400; color: var(--ink); }
.caption { font-size: 20px; line-height: 1.5; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.quote-text { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 40px; line-height: 1.3; font-weight: 600; }
.number-badge {
position: absolute; top: 42px; right: 42px;
font-family: 'Inter', monospace;
font-size: 20px; color: var(--muted);
letter-spacing: 0.08em; font-weight: 600;
}
.brand-ribbon {
position: absolute; bottom: 42px; left: 70px;
font-size: 20px; color: var(--muted);
letter-spacing: 0.05em; font-weight: 600;
}
.icon-hero { width: 220px; height: 220px; max-width: 220px; max-height: 220px; flex-shrink: 0; stroke-width: 2.5; display: block; }
.soft-card {
background: var(--bg-white);
border-radius: 14px;
padding: 28px 32px;
box-shadow: var(--soft-shadow);
margin-bottom: 22px;
}
.slide.bg-cream-textured {
background:
radial-gradient(circle at 20% 80%, rgba(240,234,66,0.08), transparent 50%),
radial-gradient(circle at 80% 20%, rgba(124,58,237,0.05), transparent 40%),
var(--bg);
position: relative;
}
.slide.bg-cream-textured::before {
content: ''; position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(26,26,26,0.08) 1px, transparent 1px);
background-size: 22px 22px; opacity: 0.4; pointer-events: none;
}
.slide.bg-white-grid {
background:
linear-gradient(to right, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 42px 42px,
linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 42px 42px,
var(--bg-white);
}
.slide.bg-dark-glow {
background:
radial-gradient(circle at center, rgba(240,234,66,0.35), transparent 60%),
var(--bg-dark);
color: var(--ink-on-dark);
}
@media print {
body { background: #FFFFFF; }
.slide { margin: 0; box-shadow: none; }
}
</style>
<style>
/* === Image hook slide 1 overlay (injected by carousel_composer) === */
/* Format-responsive: slide dimensions come from html data-format attribute
(set by slide_renderer via format.json). Defaults to 1:1 if no attr. */
.slide { aspect-ratio: 1 / 1; }
html[data-format="4:5"] .slide,
.slide[data-format="4:5"] { aspect-ratio: 4 / 5; }
.slide.slide-1.hook-image {
padding: 0 !important;
position: relative;
overflow: hidden;
}
.slide.slide-1 .hook-bg {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 1;
}
.slide.slide-1 .hook-overlay {
position: relative;
z-index: 2;
width: 100%; height: 100%;
padding: 80px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.32) 100%);
}
.slide.slide-1 .hook-label {
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.95;
}
.slide.slide-1 .hook-content {
display: flex; flex-direction: column; gap: 18px;
}
.slide.slide-1 .hook-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 124px;
line-height: 1.0;
letter-spacing: -0.02em;
max-width: 90%;
margin: 0;
}
.slide.slide-1 .hook-title .serif-italic {
font-family: 'Crimson Pro', 'Playfair Display', serif;
font-weight: 600;
font-style: italic;
font-size: 130px;
letter-spacing: 0;
}
.slide.slide-1 .hook-sub {
font-family: 'Inter', sans-serif;
font-size: 30px;
font-weight: 500;
max-width: 75%;
line-height: 1.3;
opacity: 0.94;
margin: 0;
}
.slide.slide-1 .hook-cta {
align-self: flex-start;
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 14px 26px;
background: rgba(255, 255, 255, 0.95);
color: #1a1a1a;
border-radius: 999px;
text-shadow: none;
}
/* Typography variants */
.slide.slide-1.modern-sans-tight .hook-title,
.slide.slide-1.modern-sans-tight .hook-title .serif-italic {
font-family: 'Inter', sans-serif;
font-weight: 800;
letter-spacing: -0.04em;
font-style: normal;
}
.slide.slide-1.minimal-display .hook-title {
font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
}
.slide.slide-1.minimal-display .hook-title .serif-italic {
font-family: 'Bricolage Grotesque', sans-serif;
font-style: italic;
}
</style>
<style>
/* === Image hook v2 typography (injected by carousel_composer) === */
:root {
--slide1-primary-font: 'Inter', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
--slide1-accent-font: 'Playfair Display', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
--slide1-primary-weight: 700;
--slide1-accent-style: italic;
}
.slide.slide-1 .hook-title {
font-family: var(--slide1-primary-font) !important;
font-weight: var(--slide1-primary-weight) !important;
}
.slide.slide-1 .hook-title .serif-italic,
.slide.slide-1 .accent {
font-family: var(--slide1-accent-font) !important;
font-style: var(--slide1-accent-style) !important;
}
</style>
</head>
<body>
<section class="slide slide-1 carousel-slide hook-image editorial-bold-serif">
<img src="/brands/parentia/file/content/carousels/2026-05-31-carousel-4-kalimat-ajaib-buat-anak-yang-lagi-tantrum-3/_assets/slide-1.png" class="hook-bg" alt="PARENTING · GENTLE MOMENTS" loading="eager">
<div class="hook-overlay">
<div class="hook-label">PARENTING · GENTLE MOMENTS</div>
<div class="hook-content">
<h1 class="hook-title">4 Kalimat Pas <em class="serif-italic">Anak Tantrum</em></h1>
<p class="hook-sub">Lebih efektif daripada 'udah jangan nangis'</p>
</div>
<div class="hook-cta">Baca Selengkapnya →</div>
</div>
</section>
<!-- Slide 1 SKIPPED -->
<!-- Slide 2: Hook relatable scene -->
<section class="slide carousel-slide bg-cream-textured">
<div class="number-badge">02 / 09</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<h2 class="headline" style="margin-bottom:32px; max-width:90%;">
Si Kecil lagi meltdown di supermarket. Nangis kenceng. Semua orang ngeliatin.
</h2>
<p class="body" style="color:var(--muted); margin-bottom:24px; max-width:88%;">
Lo blank. Yang kepikiran cuma: <span style="font-weight:700; color:var(--danger);">"Udah jangan nangis!"</span> tapi malah makin kenceng nangisnya 😣
</p>
<p class="body" style="color:var(--muted); max-width:88%;">
Ini bukan salah Parents. Lo cuma butuh <span style="font-weight:700; color:var(--ink);">script yang tepat</span>.
</p>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 3: Why "jangan nangis" doesn't work -->
<section class="slide carousel-slide bg-white-grid">
<div class="number-badge">03 / 09</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<span class="caption" style="margin-bottom:28px; color:var(--danger);">KENAPA "JANGAN NANGIS" GA WORK</span>
<div style="background:rgba(239,68,68,0.08); border-radius:16px; padding:32px; border-left:5px solid var(--danger); margin-bottom:28px;">
<p class="sub" style="font-weight:700; margin-bottom:16px;">
Otak anak lagi di mode <span style="color:var(--danger);">fight-or-flight</span>
</p>
<p class="body" style="color:var(--muted); font-size:24px;">
Saat tantrum, amygdala (bagian otak emosi) lagi dominan. Prefrontal cortex (logic) OFFLINE. Jadi instruksi kayak "jangan nangis" = gak nyampe 🧠❌
</p>
</div>
<p class="body" style="color:var(--muted); max-width:90%;">
Yang mereka butuhin: <span style="font-weight:700; color:var(--ink);">validasi perasaan</span> dulu, baru bisa dengar instruksi 💡
</p>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 4: Script 1 -->
<section class="slide carousel-slide">
<div class="number-badge">04 / 09</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<div style="display:flex; align-items:flex-start; gap:24px; margin-bottom:28px;">
<div style="width:70px; height:70px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--soft-shadow-lg);">
<span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; color:var(--neutral-dark);">1</span>
</div>
<div>
<span class="caption" style="color:var(--primary); margin-bottom:12px; display:block;">VALIDATION FIRST</span>
<h2 class="headline" style="margin-bottom:18px; font-size:48px;">
"Kamu lagi <span style="color:var(--primary);">kesal</span> ya?"
</h2>
</div>
</div>
<div class="soft-card">
<p class="sub" style="font-weight:600; margin-bottom:14px;">
Kenapa work:
</p>
<p class="body" style="color:var(--muted); font-size:24px; line-height:1.6;">
• Kasih nama emosi mereka (they feel SEEN)<br>
• Gak nge-judge perasaan mereka<br>
• Bikin amygdala mulai calm down karena merasa <span style="font-weight:700; color:var(--ink);">didengar</span>
</p>
</div>
<div style="background:rgba(240,234,66,0.1); border-radius:12px; padding:24px; margin-top:20px;">
<p class="body" style="font-size:23px; color:var(--muted);">
💡 <span style="font-weight:700; color:var(--ink);">Variasi:</span> "Adek lagi marah ya?" / "Sedih ya karena mainannya diambil?"
</p>
</div>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 5: Script 2 -->
<section class="slide carousel-slide bg-cream-textured">
<div class="number-badge">05 / 09</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<div style="display:flex; align-items:flex-start; gap:24px; margin-bottom:28px;">
<div style="width:70px; height:70px; border-radius:50%; background:var(--secondary); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--soft-shadow-lg);">
<span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; color:#FFF;">2</span>
</div>
<div>
<span class="caption" style="color:var(--secondary); margin-bottom:12px; display:block;">EMPATHY STATEMENT</span>
<h2 class="headline" style="margin-bottom:18px; font-size:48px;">
"Mama tau ini <span style="color:var(--secondary);">susah</span> buat kamu"
</h2>
</div>
</div>
<div class="soft-card">
<p class="sub" style="font-weight:600; margin-bottom:14px;">
Kenapa work:
</p>
<p class="body" style="color:var(--muted); font-size:24px; line-height:1.6;">
• Acknowledge struggle mereka (gak minimize feelings)<br>
• Build connection saat emosi lagi tinggi<br>
• Mereka merasa <span style="font-weight:700; color:var(--ink);">Parents di pihak mereka</span>, bukan lawan
</p>
</div>
<div style="background:rgba(124,58,237,0.1); border-radius:12px; padding:24px; margin-top:20px;">
<p class="body" style="font-size:23px; color:var(--muted);">
💡 <span style="font-weight:700; color:var(--ink);">Variasi:</span> "Papa ngerti kok ini bikin kamu frustrasi" / "Rasanya ga enak ya kalau ga bisa..."
</p>
</div>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 6: Script 3 -->
<section class="slide carousel-slide bg-white-grid">
<div class="number-badge">06 / 09</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<div style="display:flex; align-items:flex-start; gap:24px; margin-bottom:28px;">
<div style="width:70px; height:70px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--soft-shadow-lg);">
<span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; color:#FFF;">3</span>
</div>
<div>
<span class="caption" style="color:var(--accent); margin-bottom:12px; display:block;">GROUNDING PHRASE</span>
<h2 class="headline" style="margin-bottom:18px; font-size:48px;">
"Mama di sini. Kamu <span style="color:var(--accent);">aman</span>"
</h2>
</div>
</div>
<div class="soft-card">
<p class="sub" style="font-weight:600; margin-bottom:14px;">
Kenapa work:
</p>
<p class="body" style="color:var(--muted); font-size:24px; line-height:1.6;">
• Reassurance fisik + emosional<br>
• Activate <span style="font-weight:700; color:var(--ink);">parasympathetic nervous system</span> (calm-down mode)<br>
• Anak tau mereka ga ditinggal saat overwhelmed
</p>
</div>
<div style="background:rgba(251,146,60,0.1); border-radius:12px; padding:24px; margin-top:20px;">
<p class="body" style="font-size:23px; color:var(--muted);">
💡 <span style="font-weight:700; color:var(--ink);">Bonus:</span> Sambil bilang ini, duduk sejajar eye-level anak. Body language juga matter 🧡
</p>
</div>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 7: Script 4 -->
<section class="slide carousel-slide">
<div class="number-badge">07 / 09</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<div style="display:flex; align-items:flex-start; gap:24px; margin-bottom:28px;">
<div style="width:70px; height:70px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--soft-shadow-lg);">
<span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:800; color:var(--neutral-dark);">4</span>
</div>
<div>
<span class="caption" style="color:var(--primary); margin-bottom:12px; display:block;">OFFER CHOICE (after calm)</span>
<h2 class="headline" style="margin-bottom:18px; font-size:48px;">
"Mau <span style="color:var(--primary);">peluk</span> atau mau sendirian dulu?"
</h2>
</div>
</div>
<div class="soft-card">
<p class="sub" style="font-weight:600; margin-bottom:14px;">
Kenapa work:
</p>
<p class="body" style="color:var(--muted); font-size:24px; line-height:1.6;">
• Kasih mereka <span style="font-weight:700; color:var(--ink);">sense of control</span> (tantrum sering karena merasa powerless)<br>
• Two options both acceptable untuk Parents<br>
• Activate prefrontal cortex (logic brain) lagi dengan "choose"
</p>
</div>
<div style="background:rgba(240,234,66,0.1); border-radius:12px; padding:24px; margin-top:20px;">
<p class="body" style="font-size:23px; color:var(--muted);">
⚠️ <span style="font-weight:700; color:var(--ink);">Wait sampai:</span> nangis mulai mereda (bukan di peak tantrum). Timing matters.
</p>
</div>
</div>
<div class="brand-ribbon">@parentia.idn</div>
</section>
<!-- Slide 8: Bonus tip (dark slide) -->
<section class="slide carousel-slide bg-dark-glow">
<div class="number-badge" style="color:var(--ink-on-dark);">08 / 09</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;">
<svg width="56" height="50" viewBox="0 0 56 50" fill="none" stroke="var(--primary)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:32px;">
<path d="M28 45 C 14 32 4 23.25 4 14 C 4 7 8.75 4 14 4 C 21 4 24.5 8.75 28 14 C 31.5 8.75 35 4 42 4 C 47.25 4 52 7 52 14 C 52 23.25 42 32 28 45Z"/>
</svg>
<h2 class="headline" style="color:var(--ink-on-dark); margin-bottom:28px; max-width:85%;">
Inget: <span style="color:var(--primary);">Parents juga manusia</span>
</h2>
<p class="body" style="color:rgba(250,250,250,0.8); max-width:80%; margin-bottom:24px;">
Kalau lo udah overwhelmed juga, <span style="font-weight:700; color:var(--ink-on-dark);">it's OK</span> buat minta jeda 5 menit. "Mama ambil napas dulu ya, kita bahas after."
</p>
<p class="body" style="color:rgba(250,250,250,0.6); font-size:23px; max-width:80%;">
Lo gak bisa co-regulate anak kalau lo sendiri lagi dysregulated 💛
</p>
</div>
<div class="brand-ribbon" style="color:var(--ink-on-dark);">@parentia.idn</div>
</section>
<!-- Slide 9: CTA -->
<section class="slide carousel-slide" style="background:linear-gradient(135deg, rgba(240,234,66,0.15) 0%, var(--bg) 100%);">
<div class="number-badge">09 / 09</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;">
<svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:36px;">
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/>
</svg>
<h2 class="headline" style="margin-bottom:28px; max-width:85%;">
Save buat <span style="color:var(--primary);">hafalin 4 kalimat ini</span>
</h2>
<p class="body" style="color:var(--muted); margin-bottom:40px; max-width:80%;">
Screenshot atau share ke Parents lain yang butuh script ini 💛
</p>
<div style="display:inline-block; padding:18px 36px; background:var(--primary); color:var(--neutral-dark); border-radius:12px; font-size:26px; font-weight:800; letter-spacing:0.02em; box-shadow:0 6px 20px rgba(240,234,66,0.3);">
→ SAVE & SHARE
</div>
</div>
<div style="position:absolute; bottom:42px; left:0; right:0; text-align:center;">
<span style="font-size:24px; font-weight:800; color:var(--primary); letter-spacing:0.05em;">PARENTIA</span>
<span style="font-size:20px; color:var(--muted); margin-left:12px;">@parentia.idn</span>
</div>
</section>
</body>
</html>
```