← Klip Auto
03-carousel-designer
Run: 2026-06-04T12:36:38 · 19408 in / 5701 out tokens · 119.0s
# CAROUSEL 1: GPU Gak Kepake Full — Ini Yang Lo Salah Setting
## METADATA
- Topic: GPU utilization optimization di video editing workflow (Premiere/DaVinci)
- Audience focus: Video editor pemula-menengah yang ngerasa export lama padahal punya GPU bagus
- Slide count: 10 (1 AI hook image + 8 HTML content + 1 CTA)
- Suggested caption: GPU lo mahal tapi cuma kepake 30%? Save ini — ada 1 setting yang editor jarang tau tapi impact-nya gede. 🎬
<!-- IMAGE_BRIEF -->
```json
{
"topic": "GPU underutilization in video editing",
"subject_hint": "frustrated video editor staring at slow export progress bar on screen, GPU sitting idle with low usage indicator visible on monitor",
"emotion": "frustrated, confused, concerned about wasted hardware",
"headline": "GPU Lo Cuma Kepake 30%",
"headline_pre": "GPU Lo Cuma Kepake",
"headline_serif_part": "30%",
"subheadline": "Ini 4 setting yang bikin mahal sia-sia",
"label_top": "KLIP AUTO · EDITING SERIES",
"cta_pill": "FIX SEKARANG"
}
```
<!-- /IMAGE_BRIEF -->
<!-- SLIDE_1_HTML_FALLBACK -->
<section class="slide slide-1 carousel-slide bg-cream-textured">
<div style="position:absolute; top:60px; left:80px;">
<div style="font-family:'Inter',sans-serif; font-size:22px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--primary); opacity:0.9;">KLIP AUTO · EDITING SERIES</div>
</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;">
<!-- GPU icon mega with usage indicator -->
<div style="position:relative; width:320px; height:320px; margin-bottom:48px;">
<svg class="icon-mega" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
</svg>
<!-- Usage bar overlay -->
<div style="position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:280px;">
<div style="background:rgba(168,85,247,0.15); border-radius:8px; height:32px; overflow:hidden;">
<div style="background:var(--accent); width:30%; height:100%; display:flex; align-items:center; padding:0 12px; font-family:'JetBrains Mono',monospace; font-size:16px; color:#fff; font-weight:700;">30%</div>
</div>
</div>
<!-- Burst dots -->
<svg style="position:absolute; top:-30px; right:-30px; width:100px; height:100px;" viewBox="0 0 100 100">
<circle cx="20" cy="20" r="6" fill="var(--primary)" opacity="0.6"/>
<circle cx="70" cy="35" r="4" fill="var(--accent)" opacity="0.5"/>
<circle cx="45" cy="75" r="5" fill="var(--secondary)" opacity="0.4"/>
</svg>
</div>
<h1 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:96px; line-height:1.05; font-weight:800; letter-spacing:-0.02em; margin-bottom:24px;">
GPU Lo Cuma Kepake <span style="font-family:'Crimson Pro',serif; font-style:italic; font-size:104px; color:var(--accent);">30%</span>
</h1>
<p style="font-family:'Inter',sans-serif; font-size:32px; line-height:1.3; color:var(--neutral-mid); max-width:800px; font-weight:500;">Ini 4 setting yang bikin mahal sia-sia</p>
</div>
<div style="position:absolute; bottom:60px; left:50%; transform:translateX(-50%); display:flex; gap:16px; align-items:center;">
<div style="font-family:'Inter',sans-serif; font-size:22px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; padding:14px 26px; background:var(--primary); color:#fff; border-radius:999px;">FIX SEKARANG</div>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</div>
<div class="number-badge" style="top:60px; right:80px;">01/10</div>
<div class="brand-ribbon">@klipauto.id</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>GPU Gak Kepake Full — Klip Auto</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=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #4620CF;
--secondary: #06B6D4;
--accent: #A855F7;
--danger: #EF4444;
--neutral-light: #FFFFFF;
--neutral-dark: #0A0A0A;
--neutral-mid: #525252;
--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: 1080px; height: 1350px;
background: var(--bg); color: var(--ink);
padding: 80px;
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);
}
.slide.bg-cream-textured {
background:
radial-gradient(circle at 20% 80%, rgba(70,32,207,0.08), transparent 50%),
radial-gradient(circle at 80% 20%, rgba(70,32,207,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: 24px 24px; 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 / 48px 48px,
linear-gradient(to bottom, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 48px 48px,
var(--bg-white);
}
.slide.bg-dark-glow {
background:
radial-gradient(circle at center, rgba(70,32,207,0.35), transparent 60%),
var(--bg-dark);
color: var(--ink-on-dark);
}
.slide.bg-white { background: var(--bg-white); }
.hero { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 96px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; }
.headline { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 64px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
.sub { font-size: 36px; line-height: 1.4; font-weight: 500; color: var(--ink); }
.body { font-size: 32px; line-height: 1.5; font-weight: 400; color: var(--ink); }
.caption { font-size: 22px; 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: 220px; 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: 80px; line-height: 1.1; font-weight: 600; }
.highlight {
background: linear-gradient(180deg, transparent 60%, var(--highlight) 60%);
padding: 0 6px;
font-weight: 700;
}
.accent-word { color: var(--primary); font-weight: 800; }
.number-badge {
position: absolute; top: 48px; right: 48px;
font-family: 'Inter', monospace;
font-size: 22px; color: var(--muted);
letter-spacing: 0.08em; font-weight: 600;
}
.brand-ribbon {
position: absolute; bottom: 48px; left: 80px;
font-size: 22px; color: var(--muted);
letter-spacing: 0.05em; font-weight: 600;
}
.stripe { height: 6px; width: 64px; background: var(--primary); border-radius: 3px; }
.icon-mega { width: 320px; height: 320px; max-width: 320px; max-height: 320px; flex-shrink: 0; stroke-width: 2.5; display: block; }
.icon-hero { width: 240px; height: 240px; max-width: 240px; max-height: 240px; flex-shrink: 0; stroke-width: 2.5; display: block; }
.icon-inline { width: 36px; height: 36px; max-width: 36px; max-height: 36px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.icon-circle {
width: 320px; height: 320px;
max-width: 320px; max-height: 320px;
flex-shrink: 0;
background: radial-gradient(circle at 30% 30%, var(--bg-soft), rgba(168,85,247,0.08));
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 40px;
box-shadow: var(--soft-shadow-lg);
position: relative;
}
.icon-circle::before {
content: ''; position: absolute; inset: -8px;
border: 2px dashed rgba(70,32,207,0.3);
border-radius: 50%;
animation: rotate-slow 60s linear infinite;
}
.icon-circle::after {
content: ''; position: absolute; top: -20px; right: -20px;
width: 24px; height: 24px; background: var(--accent); border-radius: 50%;
box-shadow: 40px 30px 0 -8px var(--secondary), -10px 50px 0 -12px var(--primary);
}
@keyframes rotate-slow { to { transform: rotate(360deg); } }
.slide svg:not([class*="icon-"]) { max-width: 64px; max-height: 64px; }
.slide.bg-dark-glow .icon-circle { background: rgba(255,255,255,0.08); }
.slide.bg-dark-glow .icon-hero,
.slide.bg-dark-glow .icon-mega { color: var(--ink-on-dark); }
.soft-card {
background: var(--bg-white);
border-radius: 16px;
padding: 32px;
box-shadow: var(--soft-shadow);
margin-bottom: 24px;
}
.terminal-bar {
font-family: 'JetBrains Mono', monospace;
padding: 12px 18px;
background: #1a1a1a;
color: #10b981;
border-radius: 6px;
font-size: 16px;
margin: 24px 0;
display: inline-block;
}
.code-accent { color: var(--secondary); }
.code-muted { color: #5a5a5a; }
@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>
</head>
<body>
<section class="slide slide-1 carousel-slide hook-image editorial-bold-serif">
<img src="/brands/klip-auto/file/content/carousels/2026-06-04-carousel-gpu-gak-kepake-full-ini-yang-lo-salah-setting-1/_assets/slide-1.png" class="hook-bg" alt="CREATOR TOOLS · GPU OPTIMIZATION" loading="eager">
<div class="hook-overlay">
<div class="hook-label">CREATOR TOOLS · GPU OPTIMIZATION</div>
<div class="hook-content">
<h1 class="hook-title">GPU Lo Cuma Kepake <em class="serif-italic">30%</em></h1>
<p class="hook-sub">Ini 4 setting yang bikin mahal sia-sia</p>
</div>
<div class="hook-cta">Lihat Tips →</div>
</div>
</section>
<!-- Slide 1 SKIPPED — backend inject image hook here -->
<!-- Slide 2: Hook restate -->
<section class="slide slide-2 carousel-slide bg-cream-textured">
<div class="number-badge">02/10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<!-- Code brackets decorative -->
<div style="font-family:'JetBrains Mono',monospace; font-size:140px; line-height:0.8; color:rgba(70,32,207,0.12); font-weight:800; margin-bottom:32px;">{ }</div>
<h2 class="headline">Lo punya RTX 3060,<br>tapi Task Manager<br>nunjukin <span class="highlight">30% usage.</span></h2>
<p class="body" style="margin-top:32px; color:var(--muted);">Render 4K lama. Export 10 menit buat 2 menit video. GPU duduk manis. Ada 4 setting yang bikin ini terjadi.</p>
</div>
<div class="brand-ribbon">@klipauto.id</div>
</section>
<!-- Slide 3: Setup context -->
<section class="slide slide-3 carousel-slide bg-white-grid">
<div class="number-badge">03/10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<div class="caption" style="margin-bottom:32px; color:var(--primary);">KONTEKS</div>
<h2 class="headline">GPU acceleration bukan<br>otomatis on di semua task.</h2>
<p class="body" style="margin-top:40px;">Premiere sama DaVinci punya layer setting yang bisa <span class="accent-word">block GPU</span> dari kerja maksimal — even kalau lo udah enable di preferences.</p>
<p class="body" style="margin-top:24px; color:var(--muted);">Ini 4 culprit paling sering:</p>
</div>
<div class="brand-ribbon">@klipauto.id</div>
</section>
<!-- Slide 4: Problem 1 -->
<section class="slide slide-4 carousel-slide">
<div class="number-badge">04/10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<!-- Composition A — icon burst -->
<div class="icon-circle">
<svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
<line x1="8" y1="21" x2="16" y2="21"/>
<line x1="12" y1="17" x2="12" y2="21"/>
</svg>
</div>
<svg style="position:absolute; top:140px; right:100px; width:120px; height:120px; pointer-events:none;" viewBox="0 0 120 120">
<circle cx="20" cy="20" r="6" fill="var(--primary)" opacity="0.7"/>
<circle cx="80" cy="40" r="4" fill="var(--accent)" opacity="0.5"/>
<circle cx="50" cy="85" r="5" fill="var(--secondary)" opacity="0.4"/>
</svg>
<h2 class="headline" style="margin-bottom:28px;"><span style="font-family:'JetBrains Mono',monospace; font-size:72px; color:var(--accent);">01</span> Mercury Playback<br>Engine masih <span class="highlight">Software Only</span></h2>
<p class="body" style="color:var(--muted);">Di Premiere: Project Settings → General → Renderer. Kalau masih "Mercury Software", GPU lo nganggur. Switch ke "GPU Acceleration (CUDA/Metal)".</p>
</div>
<div class="brand-ribbon">@klipauto.id</div>
</section>
<!-- Slide 5: Problem 2 -->
<section class="slide slide-5 carousel-slide bg-white">
<div class="number-badge">05/10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<!-- Number + icon hybrid composition -->
<div style="position:relative; text-align:center; margin-bottom:40px;">
<div style="font-family:'Plus Jakarta Sans',sans-serif; font-size:280px; line-height:0.9; font-weight:800; color:rgba(6,182,212,0.12); letter-spacing:-0.04em;">02</div>
<div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);">
<svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--secondary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
<polyline points="7.5 4.21 12 6.81 16.5 4.21"/>
<polyline points="7.5 19.79 7.5 14.6 3 12"/>
<polyline points="21 12 16.5 14.6 16.5 19.79"/>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
<line x1="12" y1="22.08" x2="12" y2="12"/>
</svg>
</div>
</div>
<h2 class="headline">Lo pake codec yang<br><span class="highlight">GPU-unfriendly</span></h2>
<p class="body" style="margin-top:32px; color:var(--muted);">H.264/H.265 footage langsung di timeline = GPU kerja keras buat decode. Bikin proxy dulu (ProRes/DNxHR) atau ganti ke "Use Proxies" mode.</p>
<div class="terminal-bar" style="margin-top:28px;">
<span class="code-accent">$</span> transcode --codec prores_proxy <span class="code-muted">input.mp4</span>
</div>
</div>
<div class="brand-ribbon">@klipauto.id</div>
</section>
<!-- Slide 6: Problem 3 -->
<section class="slide slide-6 carousel-slide">
<div class="number-badge">06/10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<!-- Arc rings composition -->
<div style="position:relative; width:380px; height:380px; margin:0 auto 40px;">
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 380 380">
<circle cx="190" cy="190" r="180" stroke="var(--primary)" stroke-width="2" fill="none" opacity="0.2"/>
<circle cx="190" cy="190" r="140" stroke="var(--accent)" stroke-width="3" fill="none" opacity="0.4"/>
<circle cx="190" cy="190" r="100" fill="var(--bg-soft)"/>
</svg>
<div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center;">
<svg style="width:200px; height:200px;" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
</svg>
</div>
</div>
<h2 class="headline"><span style="font-family:'JetBrains Mono',monospace; font-size:72px; color:var(--accent);">03</span> VRAM lo<br>keburu <span class="highlight">penuh</span></h2>
<p class="body" style="color:var(--muted);">4K footage + heavy effects = VRAM overflow. GPU fallback ke system RAM (lambat). Turunin playback resolution ke 1/2 atau 1/4 pas edit. Full res cuma buat export.</p>
</div>
<div class="brand-ribbon">@klipauto.id</div>
</section>
<!-- Slide 7: Problem 4 -->
<section class="slide slide-7 carousel-slide bg-white-grid">
<div class="number-badge">07/10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<!-- Iconic burst -->
<div class="icon-circle">
<svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--secondary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
</svg>
</div>
<h2 class="headline" style="margin-bottom:28px;"><span style="font-family:'JetBrains Mono',monospace; font-size:72px; color:var(--secondary);">04</span> Driver lo <span class="highlight">outdated</span></h2>
<p class="body" style="color:var(--muted);">NVIDIA/AMD release driver baru buat optimize Premiere/Resolve tiap 2-3 bulan. Driver lama = compatibility issues. Update via GeForce Experience atau AMD Software.</p>
<!-- Window chrome decorative -->
<div style="margin-top:32px;">
<svg width="60" height="14" viewBox="0 0 60 14">
<circle cx="7" cy="7" r="5" fill="#ef4444"/>
<circle cx="22" cy="7" r="5" fill="#fbbf24"/>
<circle cx="37" cy="7" r="5" fill="#10b981"/>
</svg>
</div>
</div>
<div class="brand-ribbon">@klipauto.id</div>
</section>
<!-- Slide 8: Dark pause — punchline -->
<section class="slide slide-8 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; text-align:center;">
<div class="quote-text" style="color:var(--ink-on-dark);">
GPU mahal bukan jaminan export cepat kalau <span style="color:var(--accent);">setting</span> lo salah.
</div>
<div style="width:48px; height:48px; background:var(--accent); border-radius:50%; margin:48px auto 0;"></div>
</div>
<div class="brand-ribbon" style="color:var(--ink-on-dark);">@klipauto.id</div>
</section>
<!-- Slide 9: Connector / summary -->
<section class="slide slide-9 carousel-slide">
<div class="number-badge">09/10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<div class="caption" style="margin-bottom:32px; color:var(--primary);">TL;DR</div>
<h2 class="headline">4 langkah cek<br>sebelum export:</h2>
<div class="soft-card">
<div style="font-family:'JetBrains Mono',monospace; font-size:28px; color:var(--primary); font-weight:700; margin-right:20px;">✓</div>
<p class="body" style="flex:1;">Mercury Playback = GPU Acceleration</p>
</div>
<div class="soft-card">
<div style="font-family:'JetBrains Mono',monospace; font-size:28px; color:var(--secondary); font-weight:700; margin-right:20px;">✓</div>
<p class="body" style="flex:1;">Codec native atau proxy mode</p>
</div>
<div class="soft-card">
<div style="font-family:'JetBrains Mono',monospace; font-size:28px; color:var(--accent); font-weight:700; margin-right:20px;">✓</div>
<p class="body" style="flex:1;">Playback resolution turun pas edit</p>
</div>
<div class="soft-card">
<div style="font-family:'JetBrains Mono',monospace; font-size:28px; color:var(--danger); font-weight:700; margin-right:20px;">✓</div>
<p class="body" style="flex:1;">Driver up-to-date</p>
</div>
</div>
<div class="brand-ribbon">@klipauto.id</div>
</section>
<!-- Slide 10: CTA -->
<section class="slide slide-10 carousel-slide" style="background:var(--primary); color:#fff;">
<div class="number-badge" style="color:rgba(255,255,255,0.7);">10/10</div>
<div style="flex:1; display:flex; flex-direction:column; justify-content:center;">
<svg style="width:96px; height:96px; margin-bottom:40px;" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/>
</svg>
<h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:72px; line-height:1.1; font-weight:800; margin-bottom:32px;">Save kalau lo<br>sering nge-render lama.</h2>
<p style="font-size:36px; line-height:1.4; opacity:0.9; margin-bottom:48px;">Atau share ke editor yang GPU-nya nganggur.</p>
<div style="display:inline-flex; align-items:center; gap:16px; padding:20px 32px; background:rgba(255,255,255,0.15); border-radius:12px; backdrop-filter:blur(10px); align-self:flex-start;">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
<span style="font-family:'Inter',sans-serif; font-size:28px; font-weight:700; letter-spacing:0.02em;">SAVE & SHARE</span>
</div>
</div>
<div style="position:absolute; bottom:48px; left:80px; display:flex; align-items:center; gap:24px;">
<span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:32px; font-weight:800; color:#fff;">Klip Auto</span>
<span style="font-size:22px; color:rgba(255,255,255,0.7); letter-spacing:0.05em; font-weight:600;">@klipauto.id</span>
</div>
</section>
</body>
</html>
```