03-carousel-designer

Run: 2026-05-24T12:18:53 · 21968 in / 22572 out tokens · 404.6s

Re-run

# CAROUSEL 1: Dosen Lo Nggak Peduli Lo Pakai ChatGPT ## METADATA - Topic: Realita dosen terhadap penggunaan AI dalam skripsi — bukan tentang deteksi, tapi tentang substance - Audience focus: Mahasiswa tingkat akhir yang takut ketahuan pakai AI, overthinking deteksi plagiarisme - Slide count: 10 - Suggested caption: Plot twist: dosen lo sebenernya tau kok. Mereka cuma mau liat lo paham apa nggak. Save buat pengingat pas lagi parno sendiri 🎓  ```json { "topic": "Dosen tidak peduli AI usage — fokus ke pemahaman", "subject_hint": "Mahasiswa anxious di depan laptop dengan layar penuh ChatGPT prompt, ekspresi nervous, setting kamar kos malam hari dengan tumpukan buku teori di samping", "emotion": "anxious, paranoid, overthinking", "headline": "Dosen Lo Nggak Peduli", "headline_pre": "Dosen Lo", "headline_serif_part": "Nggak Peduli", "subheadline": "Lo Pakai ChatGPT Atau Nggak", "label_top": "LULUSCEPAT AI · REALITY CHECK", "cta_pill": "SWIPE BUAT TRUTH" } ```   <section class="slide slide-1 carousel-slide cover"> <div class="top-bar"> <span class="brand-ribbon">@luluscepat_ai</span> <span class="slide-num">01 / 10</span> </div> <div class="center-content" style="align-items: center; text-align: center;"> <div style="position: relative; width: 320px; height: 320px; margin: 0 auto 48px;"> <svg style="position: absolute; inset: 0; width: 100%; height: 100%;" viewBox="0 0 320 320"> <circle cx="160" cy="160" r="140" stroke="var(--primary)" stroke-width="3" fill="none" opacity="0.15"/> <circle cx="160" cy="160" r="100" stroke="var(--secondary)" stroke-width="4" fill="none" opacity="0.25"/> <circle cx="160" cy="160" r="60" fill="var(--accent)" opacity="0.1"/> </svg> <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;"> <svg class="icon-mega" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/> <path d="M19 10v2a7 7 0 0 1-14 0v-2"/> <line x1="12" y1="19" x2="12" y2="22"/> </svg> </div> </div> <div class="hero-eyebrow" style="font-size: 24px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); font-weight: 700; margin-bottom: 32px;">REALITY CHECK</div> <h1 class="hero" style="max-width: 90%;">Dosen Lo <span style="font-family: 'Crimson Pro', serif; font-style: italic; color: var(--accent);">Nggak Peduli</span></h1> <p class="sub" style="margin-top: 24px; color: var(--muted);">Lo Pakai ChatGPT Atau Nggak</p> </div> <div class="bottom-bar"> <span class="caption">Swipe →</span> </div> </section>  ## HTML ```html <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dosen Lo Nggak Peduli Lo Pakai ChatGPT — Luluscepat AI</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=Inter:wght@400;500;600;700&family=Crimson+Pro:ital,wght@1,500;1,600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> <style> :root { --primary: #1746A0; --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-white { background: var(--bg-white); } .slide.bg-dark { background: var(--bg-dark); color: var(--ink-on-dark); } .slide.bg-primary { background: var(--primary); color: var(--neutral-light); } .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: 32px; line-height: 1.4; font-weight: 500; color: var(--ink); } .body { font-size: 28px; 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: 52px; line-height: 1.3; 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: var(--bg-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 40px; box-shadow: var(--soft-shadow-lg); position: relative; } .slide.bg-dark .icon-circle { background: rgba(255,255,255,0.08); } .slide svg:not([class*="icon-"]) { max-width: 64px; max-height: 64px; } .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; } .bottom-bar { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .center-content { flex: 1; display: flex; flex-direction: column; justify-content: center; } .code-block { font-family: 'JetBrains Mono', monospace; padding: 20px 24px; background: #1a1a1a; color: #10b981; border-radius: 8px; font-size: 16px; line-height: 1.6; } .terminal-prompt { color: var(--secondary); } .tag-chip { display: inline-block; padding: 6px 12px; background: rgba(168,85,247,0.1); color: var(--accent); border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; } @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: 'Plus Jakarta Sans', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-accent-font: 'Inter', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-primary-weight: 600; --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 modern-sans-tight"> <img src="/brands/skripsi-kilat-ai/file/content/carousels/2026-05-24-carousel-dosen-lo-nggak-peduli-lo-pakai-chatgpt-1/_assets/slide-1.png" class="hook-bg" alt="SKRIPSI · AI ETHICS" loading="eager"> <div class="hook-overlay"> <div class="hook-label">SKRIPSI · AI ETHICS</div> <div class="hook-content"> <h1 class="hook-title">Dosen Lo <em class="serif-italic">Nggak Peduli</em></h1> <p class="hook-sub">Lo pakai ChatGPT atau nggak—fokus ke pemahaman</p> </div> <div class="hook-cta">Mulai Sekarang →</div> </div> </section>  <section class="slide carousel-slide"> <div class="number-badge">02 / 10</div> <div class="center-content"> <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(--secondary)" stroke-width="2" fill="none" opacity="0.2"/> <circle cx="190" cy="190" r="140" stroke="var(--secondary)" 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 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="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/> <circle cx="12" cy="12" r="10"/> <line x1="12" y1="17" x2="12.01" y2="17"/> </svg> </div> </div> <h2 class="headline">Lo kira dosen lo<br>nggak tau <span class="highlight">cara kerja AI?</span></h2> <p class="body" style="margin-top: 40px; color: var(--muted);">Spoiler: mereka udah baca puluhan skripsi yang dibantu ChatGPT. Yang mereka cek bukan tools-nya — tapi <span class="accent-word">isi kepala lo.</span></p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">03 / 10</div> <div class="center-content"> <span class="caption" style="margin-bottom: 32px; color: var(--secondary);">YANG SEBENERNYA TERJADI</span> <h2 class="headline">Dosen lo <span style="color: var(--accent);">lebih pintar</span><br>dari yang lo kira.</h2> <p class="body" style="margin-top: 40px;">Mereka bisa bedain:</p> <div style="margin-top: 32px; display: flex; flex-direction: column; gap: 20px;"> <div style="display: flex; align-items: flex-start; gap: 16px;"> <div style="width: 8px; height: 8px; background: var(--primary); border-radius: 50%; margin-top: 12px; flex-shrink: 0;"></div> <p class="body">Mahasiswa yang <span class="highlight">paham konsep</span> tapi pakai AI buat efisiensi</p> </div> <div style="display: flex; align-items: flex-start; gap: 16px;"> <div style="width: 8px; height: 8px; background: var(--accent); border-radius: 50%; margin-top: 12px; flex-shrink: 0;"></div> <p class="body">Mahasiswa yang copas AI <span class="accent-word">tanpa ngerti apa-apa</span></p> </div> </div> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide"> <div class="number-badge">04 / 10</div> <div class="center-content"> <div style="font-family: 'JetBrains Mono', monospace; font-size: 120px; line-height: 0.9; color: rgba(23,70,160,0.12); font-weight: 800; text-align: center; margin-bottom: 32px;">01</div> <h2 class="headline" style="text-align: center;">Pas lo bimbingan,<br>dosen <span class="highlight">tanya konsep</span> dasar.</h2> <p class="body" style="margin-top: 40px; text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; color: var(--muted);">"Kenapa lo pilih metode ini?" — kalau lo cuma bisa jawab "katanya bagus", ya ketahuan.</p> <div style="margin-top: 48px; text-align: center;"> <span class="tag-chip">CRITICAL QUESTION</span> </div> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">05 / 10</div> <div class="center-content"> <div style="position: relative; margin-bottom: 40px;"> <svg width="80" height="14" viewBox="0 0 80 14" style="display: block; margin: 0 auto 32px;"> <circle cx="7" cy="7" r="5" fill="var(--danger)"/> <circle cx="26" cy="7" r="5" fill="#fbbf24"/> <circle cx="45" cy="7" r="5" fill="#10b981"/> </svg> <div style="font-family: 'Plus Jakarta Sans', sans-serif; font-size: 200px; line-height: 0.9; font-weight: 800; color: rgba(6,182,212,0.15); letter-spacing: -0.04em; text-align: center;">02</div> </div> <h2 class="headline" style="text-align: center;">Mereka nggak cari<br><span style="color: var(--secondary);">tulisan sempurna.</span></h2> <p class="body" style="margin-top: 40px; text-align: center; max-width: 780px; margin-left: auto; margin-right: auto;">Yang mereka cari: <span class="highlight">pemahaman lo</span> tentang topik yang lo tulis. Bukan grammar sempurna atau struktur kalimat robot.</p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-dark"> <div class="number-badge" style="color: var(--neutral-light); opacity: 0.6;">06 / 10</div> <div class="center-content" style="text-align: center;"> <svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--neutral-light)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin: 0 auto 48px; opacity: 0.9;"> <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/> <line x1="12" y1="9" x2="12" y2="13"/> <line x1="12" y1="17" x2="12.01" y2="17"/> </svg> <h2 class="headline" style="color: var(--neutral-light); font-size: 72px;">Yang bahaya:<br>lo <span style="color: var(--accent);">nggak paham</span><br>apa yang lo tulis.</h2> <div style="margin-top: 56px;"> <div style="width: 12px; height: 12px; background: var(--accent); border-radius: 50%; margin: 0 auto;"></div> </div> </div> <div class="brand-ribbon" style="color: var(--neutral-light); opacity: 0.6;">@luluscepat_ai</div> </section>  <section class="slide carousel-slide"> <div class="number-badge">07 / 10</div> <div class="center-content"> <div class="code-block" style="margin-bottom: 40px;"> <div><span class="terminal-prompt">$</span> dosen_mode --detect "student_understanding"</div> <div style="color: #5a5a5a; margin-top: 8px;">Running comprehension_test.sh...</div> </div> <h2 class="headline">Sidang bukan tentang<br><span class="highlight">hafalin slides.</span></h2> <p class="body" style="margin-top: 40px;">Itu tentang lo bisa <span class="accent-word">jelasin alur pikir</span> dari awal sampai kesimpulan. AI bisa nulis — tapi nggak bisa mikir <span style="font-style: italic;">buat</span> lo.</p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">08 / 10</div> <div class="center-content"> <svg style="position: absolute; top: 60px; right: 80px; width: 120px; height: 120px; pointer-events: none; opacity: 0.4;" viewBox="0 0 120 120"> <circle cx="20" cy="20" r="6" fill="var(--primary)"/> <circle cx="80" cy="40" r="4" fill="var(--secondary)"/> <circle cx="50" cy="85" r="3" fill="var(--accent)"/> <circle cx="100" cy="70" r="5" fill="var(--primary)" opacity="0.5"/> </svg> <div style="position: relative; text-align: center; margin-bottom: 40px;"> <div style="font-family: 'Plus Jakarta Sans', sans-serif; font-size: 260px; line-height: 0.9; font-weight: 800; color: rgba(168,85,247,0.15); letter-spacing: -0.04em;">03</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(--accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width: 160px; height: 160px;"> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> <polyline points="22 4 12 14.01 9 11.01"/> </svg> </div> </div> <h2 class="headline" style="text-align: center;">Pakai AI = <span style="color: var(--accent);">OK.</span><br>Copas buta = <span style="color: var(--danger);">FAIL.</span></h2> <p class="body" style="margin-top: 40px; text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; color: var(--muted);">Dosen <span class="highlight">nggak anti-teknologi.</span> Mereka anti mahasiswa yang nggak effort buat paham materinya sendiri.</p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide"> <div class="number-badge">09 / 10</div> <div class="center-content"> <div class="stripe" style="margin-bottom: 40px; background: var(--secondary);"></div> <h2 class="quote-text" style="color: var(--ink); max-width: 880px;">"AI itu alat. Yang diuji tetep <span style="color: var(--primary); font-weight: 700;">otak lo."</span></h2> <p class="body" style="margin-top: 40px; color: var(--muted); max-width: 820px;">Jadi stop parno. Mulai fokus ke yang penting: <span class="highlight">lo ngerti nggak</span> apa yang lo tulis?</p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-primary"> <div class="number-badge" style="color: var(--neutral-light); opacity: 0.8;">10 / 10</div> <div class="center-content" style="text-align: center;"> <svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--neutral-light)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin: 0 auto 48px; opacity: 0.95;"> <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="color: var(--neutral-light); font-size: 68px; line-height: 1.1; margin-bottom: 32px;">Save buat reminder<br>pas lo lagi overthinking.</h2> <p class="body" style="color: var(--neutral-light); opacity: 0.9; max-width: 780px; margin: 0 auto;">Atau share ke temen lo yang masih takut-takut pakai AI — padahal dosen cuma mau tau mereka paham atau nggak.</p> </div> <div class="bottom-bar"> <span class="brand-ribbon" style="color: var(--neutral-light); font-weight: 800; font-size: 26px; opacity: 1;">Luluscepat AI</span> <span class="caption" style="color: var(--neutral-light); opacity: 0.8;">@luluscepat_ai</span> </div> </section> </body> </html> ``` --- # CAROUSEL 2: Lo Nggak Butuh Referensi 50 Jurnal ## METADATA - Topic: Kualitas referensi lebih penting dari kuantitas — mahasiswa sering salah prioritas - Audience focus: Mahasiswa yang stress ngumpulin puluhan jurnal tanpa baca, bingung mana yang relevan - Slide count: 9 - Suggested caption: Dosen lo lebih seneng baca 10 jurnal yang lo pahamin daripada 50 jurnal yang cuma lo masukin daftar pustaka. Geser kiri buat tau kenapa 📚  ```json { "topic": "Kualitas referensi vs kuantitas dalam skripsi", "subject_hint": "Tumpukan buku dan laptop dengan tab browser penuh PDF jurnal yang belum dibaca, mahasiswa overwhelmed dengan sticky notes dimana-mana, setting perpustakaan kampus sore hari", "emotion": "overwhelmed, stressed, drowning in information", "headline": "Lo Nggak Butuh 50 Jurnal", "headline_pre": "Lo Nggak Butuh", "headline_serif_part": "50 Jurnal", "subheadline": "Lo Butuh 10 yang Bener-Bener Lo Baca", "label_top": "LULUSCEPAT AI · SKRIPSI TIPS", "cta_pill": "SWIPE BUAT TRUTH" } ```   <section class="slide slide-1 carousel-slide cover"> <div class="top-bar"> <span class="brand-ribbon">@luluscepat_ai</span> <span class="slide-num">01 / 09</span> </div> <div class="center-content" style="align-items: center; text-align: center;"> <div style="position: relative; width: 320px; height: 320px; margin: 0 auto 48px;"> <svg style="position: absolute; inset: 0; width: 100%; height: 100%;" viewBox="0 0 320 320"> <path d="M40 160 A120 120 0 0 1 280 160" stroke="var(--secondary)" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.3"/> <path d="M70 160 A90 90 0 0 1 250 160" stroke="var(--secondary)" stroke-width="6" fill="none" stroke-linecap="round" opacity="0.6"/> <circle cx="160" cy="160" r="50" fill="var(--primary)"/> <circle cx="160" cy="60" r="8" fill="var(--accent)" opacity="0.8"/> <circle cx="240" cy="100" r="6" fill="var(--secondary)" opacity="0.5"/> </svg> </div> <div class="hero-eyebrow" style="font-size: 24px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--secondary); font-weight: 700; margin-bottom: 32px;">SKRIPSI TIPS</div> <h1 class="hero" style="max-width: 90%;">Lo Nggak Butuh<br><span style="font-family: 'Crimson Pro', serif; font-style: italic; color: var(--accent);">50 Jurnal</span></h1> <p class="sub" style="margin-top: 24px; color: var(--muted);">Lo Butuh 10 yang Bener Lo Baca</p> </div> <div class="bottom-bar"> <span class="caption">Swipe →</span> </div> </section>  ## HTML ```html <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lo Nggak Butuh Referensi 50 Jurnal — Luluscepat AI</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=Inter:wght@400;500;600;700&family=Crimson+Pro:ital,wght@1,500;1,600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> <style> :root { --primary: #1746A0; --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-white { background: var(--bg-white); } .slide.bg-dark { background: var(--bg-dark); color: var(--ink-on-dark); } .slide.bg-secondary { background: var(--secondary); color: var(--neutral-light); } .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: 32px; line-height: 1.4; font-weight: 500; color: var(--ink); } .body { font-size: 28px; 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; letter-spacing: -0.04em; } .quote-text { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 52px; line-height: 1.3; font-weight: 600; } .highlight { background: linear-gradient(180deg, transparent 60%, var(--highlight) 60%); padding: 0 6px; font-weight: 700; } .accent-word { 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: var(--bg-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 40px; box-shadow: var(--soft-shadow-lg); position: relative; } .slide.bg-dark .icon-circle { background: rgba(255,255,255,0.08); } .slide svg:not([class*="icon-"]) { max-width: 64px; max-height: 64px; } .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; } .bottom-bar { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .center-content { flex: 1; display: flex; flex-direction: column; justify-content: center; } @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: 'Plus Jakarta Sans', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-accent-font: 'Inter', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-primary-weight: 600; --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 cover"> <div class="top-bar"> <span class="brand-ribbon">@luluscepat_ai</span> <span class="slide-num">01 / 09</span> </div> <div class="center-content" style="align-items: center; text-align: center;"> <div style="position: relative; width: 320px; height: 320px; margin: 0 auto 48px;"> <svg style="position: absolute; inset: 0; width: 100%; height: 100%;" viewBox="0 0 320 320"> <path d="M40 160 A120 120 0 0 1 280 160" stroke="var(--secondary)" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.3"/> <path d="M70 160 A90 90 0 0 1 250 160" stroke="var(--secondary)" stroke-width="6" fill="none" stroke-linecap="round" opacity="0.6"/> <circle cx="160" cy="160" r="50" fill="var(--primary)"/> <circle cx="160" cy="60" r="8" fill="var(--accent)" opacity="0.8"/> <circle cx="240" cy="100" r="6" fill="var(--secondary)" opacity="0.5"/> </svg> </div> <div class="hero-eyebrow" style="font-size: 24px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--secondary); font-weight: 700; margin-bottom: 32px;">SKRIPSI TIPS</div> <h1 class="hero" style="max-width: 90%;">Lo Nggak Butuh<br><span style="font-family: 'Crimson Pro', serif; font-style: italic; color: var(--accent);">50 Jurnal</span></h1> <p class="sub" style="margin-top: 24px; color: var(--muted);">Lo Butuh 10 yang Bener Lo Baca</p> </div> <div class="bottom-bar"> <span class="caption">Swipe →</span> </div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">02 / 09</div> <div class="center-content"> <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"> <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/> <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/> </svg> </div> <h2 class="headline">Kenapa lo kumpulin<br>jurnal yang <span class="highlight">nggak lo baca?</span></h2> <p class="body" style="margin-top: 40px; color: var(--muted);">Daftar pustaka 50 jurnal tapi pas ditanya dosen "inti dari penelitian X apa?", lo blank. Itu bukan impressive — <span style="color: var(--danger); font-weight: 700;">itu red flag.</span></p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide"> <div class="number-badge">03 / 09</div> <div class="center-content" style="text-align: center;"> <span class="caption" style="margin-bottom: 32px; color: var(--accent);">DATA POINT</span> <div class="stat-num" style="color: var(--accent);">73<span style="font-size: 120px; vertical-align: super;">%</span></div> <p class="body" style="margin-top: 32px; max-width: 820px; margin-left: auto; margin-right: auto;">mahasiswa cuma baca <span class="highlight">abstrak + kesimpulan</span> doang dari jurnal yang mereka sitasi.</p> <p class="caption" style="margin-top: 40px; font-style: italic; text-transform: none; letter-spacing: 0.02em;">Dosen bisa detect ini dari cara lo ngomong di bab 2.</p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">04 / 09</div> <div class="center-content"> <span class="caption" style="margin-bottom: 32px; color: var(--secondary);">MASALAHNYA</span> <h2 class="headline">Kuantitas <span style="color: var(--danger);">≠</span> Kualitas.</h2> <p class="body" style="margin-top: 40px;">Yang dosen cari:</p> <div style="margin-top: 32px; display: flex; flex-direction: column; gap: 24px;"> <div style="padding: 24px 28px; background: rgba(23,70,160,0.06); border-left: 4px solid var(--primary); border-radius: 8px;"> <p class="body" style="font-weight: 600;">Lo <span class="highlight">paham</span> apa yang lo sitasi</p> </div> <div style="padding: 24px 28px; background: rgba(6,182,212,0.06); border-left: 4px solid var(--secondary); border-radius: 8px;"> <p class="body" style="font-weight: 600;">Referensi lo <span style="color: var(--secondary); font-weight: 800;">relevan</span> sama argumen lo</p> </div> <div style="padding: 24px 28px; background: rgba(168,85,247,0.06); border-left: 4px solid var(--accent); border-radius: 8px;"> <p class="body" style="font-weight: 600;">Lo bisa <span style="color: var(--accent); font-weight: 800;">jelasin</span> kenapa jurnal itu penting</p> </div> </div> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide"> <div class="number-badge">05 / 09</div> <div class="center-content"> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;"> <div style="text-align: center;"> <svg viewBox="0 0 24 24" fill="none" stroke="var(--danger)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width: 80px; height: 80px; margin: 0 auto 24px;"> <circle cx="12" cy="12" r="10"/> <line x1="15" y1="9" x2="9" y2="15"/> <line x1="9" y1="9" x2="15" y2="15"/> </svg> <p class="body" style="font-weight: 700; color: var(--danger); margin-bottom: 16px;">50 jurnal</p> <p class="body" style="font-size: 24px; line-height: 1.5; color: var(--muted);">yang cuma lo masukin daftar pustaka</p> </div> <div style="text-align: center;"> <svg viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width: 80px; height: 80px; margin: 0 auto 24px;"> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> <polyline points="22 4 12 14.01 9 11.01"/> </svg> <p class="body" style="font-weight: 700; color: var(--accent); margin-bottom: 16px;">10 jurnal</p> <p class="body" style="font-size: 24px; line-height: 1.5; color: var(--muted);">yang lo baca + <span class="highlight">pahamin</span> isinya</p> </div> </div> <div style="margin-top: 48px; padding: 24px; background: var(--bg-soft); border-radius: 12px; text-align: center;"> <p class="body" style="font-weight: 600;">Dosen pilih yang kanan. <span style="color: var(--accent);">Selalu.</span></p> </div> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-dark"> <div class="number-badge" style="color: var(--neutral-light); opacity: 0.6;">06 / 09</div> <div class="center-content" style="text-align: center;"> <h2 class="headline" style="color: var(--neutral-light); font-size: 80px; max-width: 880px; margin: 0 auto;">Jurnal itu bukan <span style="color: var(--accent);">koleksi.</span><br>Itu <span style="color: var(--secondary);">argumen</span> lo.</h2> <div style="margin-top: 56px;"> <div style="width: 12px; height: 12px; background: var(--secondary); border-radius: 50%; margin: 0 auto;"></div> </div> </div> <div class="brand-ribbon" style="color: var(--neutral-light); opacity: 0.6;">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">07 / 09</div> <div class="center-content"> <span class="caption" style="margin-bottom: 32px; color: var(--primary);">CARA BENERNYA</span> <h2 class="headline">Baca jurnal<br>dengan <span class="highlight">pertanyaan spesifik.</span></h2> <div style="margin-top: 40px; display: flex; flex-direction: column; gap: 28px;"> <div style="display: flex; align-items: flex-start; gap: 20px;"> <div style="width: 48px; height: 48px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: var(--neutral-light);">1</div> <p class="body" style="padding-top: 6px;">Jurnal ini jawab <span style="color: var(--primary); font-weight: 700;">pertanyaan penelitian lo</span> yang mana?</p> </div> <div style="display: flex; align-items: flex-start; gap: 20px;"> <div style="width: 48px; height: 48px; background: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: var(--neutral-light);">2</div> <p class="body" style="padding-top: 6px;">Metode yang dia pakai <span style="color: var(--secondary); font-weight: 700;">bisa lo tiru</span> nggak?</p> </div> <div style="display: flex; align-items: flex-start; gap: 20px;"> <div style="width: 48px; height: 48px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: var(--neutral-light);">3</div> <p class="body" style="padding-top: 6px;">Hasil dia <span style="color: var(--accent); font-weight: 700;">support atau kontradiksi</span> hipotesis lo?</p> </div> </div> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide"> <div class="number-badge">08 / 09</div> <div class="center-content"> <div class="stripe" style="margin-bottom: 40px; background: var(--accent);"></div> <h2 class="quote-text" style="color: var(--ink); max-width: 900px;">"Lebih baik <span style="color: var(--secondary); font-weight: 700;">10 jurnal</span> yang lo quote dengan percaya diri, daripada <span style="color: var(--danger); font-weight: 700;">50 jurnal</span> yang lo sebut tanpa konteks."</h2> <p class="body" style="margin-top: 48px; color: var(--muted); max-width: 840px;">Kualitas > Kuantitas. <span class="highlight">Selalu.</span></p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-secondary"> <div class="number-badge" style="color: var(--neutral-light); opacity: 0.8;">09 / 09</div> <div class="center-content" style="text-align: center;"> <svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--neutral-light)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin: 0 auto 48px; opacity: 0.95;"> <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="color: var(--neutral-light); font-size: 68px; line-height: 1.1; margin-bottom: 32px;">Save buat reminder<br>next time lo buka<br>Google Scholar.</h2> <p class="body" style="color: var(--neutral-light); opacity: 0.9; max-width: 780px; margin: 0 auto;">Atau tag temen lo yang masih nyari jurnal ke-47 padahal yang 10 pertama aja belum dibaca sampai diskusi.</p> </div> <div class="bottom-bar"> <span class="brand-ribbon" style="color: var(--neutral-light); font-weight: 800; font-size: 26px; opacity: 1;">Luluscepat AI</span> <span class="caption" style="color: var(--neutral-light); opacity: 0.8;">@luluscepat_ai</span> </div> </section> </body> </html> ``` --- # CAROUSEL 3: Skripsi Lo Nggak Harus Original 100% ## METADATA - Topic: Misconception tentang "originality" dalam skripsi — replikasi valid, pengembangan riset existing OK - Audience focus: Mahasiswa yang stuck karena takut "ide gue mirip penelitian orang lain", overthinking originality - Slide count: 10 - Suggested caption: Original bukan berarti lo harus nemuin teori baru. Replikasi dengan konteks berbeda = valid research. Swipe kiri buat paham bedanya 🔬  ```json { "topic": "Misconception tentang research originality", "subject_hint": "Mahasiswa duduk dengan laptop dan banyak sticky notes berisi ide yang dicoret-coret, ekspresi frustrasi karena merasa semua ide sudah pernah diteliti, setting ruang kerja malam hari dengan tumpukan jurnal penelitian terbuka", "emotion": "frustrated, stuck, impostor syndrome", "headline": "Skripsi Lo Nggak Harus", "headline_pre": "Skripsi Lo", "headline_serif_part": "Nggak Harus", "subheadline": "Original 100%", "label_top": "LULUSCEPAT AI · MINDSET SHIFT", "cta_pill": "SWIPE BUAT CLARITY" } ```   <section class="slide slide-1 carousel-slide cover"> <div class="top-bar"> <span class="brand-ribbon">@luluscepat_ai</span> <span class="slide-num">01 / 10</span> </div> <div class="center-content" style="align-items: center; text-align: center;"> <div style="position: relative; width: 320px; height: 320px; margin: 0 auto 48px;"> <svg style="position: absolute; inset: 0; width: 100%; height: 100%;" viewBox="0 0 280 280"> <circle cx="140" cy="140" r="130" stroke="var(--accent)" stroke-width="2" fill="none" opacity="0.2" stroke-dasharray="8 8"/> <circle cx="140" cy="140" r="90" stroke="var(--primary)" stroke-width="3" fill="none" opacity="0.4"/> <circle cx="140" cy="140" r="50" fill="var(--secondary)" opacity="0.15"/> </svg> <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;"> <svg class="icon-mega" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"/> <line x1="21" y1="21" x2="16.65" y2="16.65"/> <line x1="11" y1="8" x2="11" y2="14"/> <line x1="8" y1="11" x2="14" y2="11"/> </svg> </div> </div> <div class="hero-eyebrow" style="font-size: 24px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 32px;">MINDSET SHIFT</div> <h1 class="hero" style="max-width: 90%;">Skripsi Lo <span style="font-family: 'Crimson Pro', serif; font-style: italic; color: var(--secondary);">Nggak Harus</span><br>Original 100%</h1> </div> <div class="bottom-bar"> <span class="caption">Swipe →</span> </div> </section>  ## HTML ```html <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Skripsi Lo Nggak Harus Original 100% — Luluscepat AI</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=Inter:wght@400;500;600;700&family=Crimson+Pro:ital,wght@1,500;1,600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> <style> :root { --primary: #1746A0; --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-white { background: var(--bg-white); } .slide.bg-dark { background: var(--bg-dark); color: var(--ink-on-dark); } .slide.bg-accent { background: var(--accent); color: var(--neutral-light); } .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: 32px; line-height: 1.4; font-weight: 500; color: var(--ink); } .body { font-size: 28px; 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; letter-spacing: -0.04em; } .quote-text { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 52px; line-height: 1.3; font-weight: 600; } .highlight { background: linear-gradient(180deg, transparent 60%, var(--highlight) 60%); padding: 0 6px; font-weight: 700; } .accent-word { 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; 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: var(--bg-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 40px; box-shadow: var(--soft-shadow-lg); position: relative; } .slide.bg-dark .icon-circle { background: rgba(255,255,255,0.08); } .slide svg:not([class*="icon-"]) { max-width: 64px; max-height: 64px; } .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; } .bottom-bar { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .center-content { flex: 1; display: flex; flex-direction: column; justify-content: center; } @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: 'Plus Jakarta Sans', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-accent-font: 'Inter', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-primary-weight: 600; --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/skripsi-kilat-ai/file/content/carousels/2026-05-24-carousel-skripsi-lo-nggak-harus-original-100-3/_assets/slide-1.png" class="hook-bg" alt="SKRIPSI SERIES · MISCONCEPTION" loading="eager"> <div class="hook-overlay"> <div class="hook-label">SKRIPSI SERIES · MISCONCEPTION</div> <div class="hook-content"> <h1 class="hook-title">Skripsi Lo <em class="serif-italic">Nggak Harus</em></h1> <p class="hook-sub">Original 100%</p> </div> <div class="hook-cta">Baca Selengkapnya →</div> </div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">02 / 10</div> <div class="center-content"> <div class="icon-circle"> <svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/> <line x1="12" y1="9" x2="12" y2="13"/> <line x1="12" y1="17" x2="12.01" y2="17"/> </svg> </div> <h2 class="headline">Lo nggak perlu<br>nemuin <span class="highlight">teori baru</span><br>buat lulus S1.</h2> <p class="body" style="margin-top: 40px; color: var(--muted);">Skripsi S1 bukan disertasi doktor. Yang penting: <span style="color: var(--primary); font-weight: 700;">kontribusi kecil</span> tapi valid.</p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide"> <div class="number-badge">03 / 10</div> <div class="center-content"> <span class="caption" style="margin-bottom: 32px; color: var(--secondary);">REALITA</span> <h2 class="headline">90% skripsi itu<br><span style="color: var(--secondary);">replikasi</span> dengan<br>twist kecil.</h2> <p class="body" style="margin-top: 40px;">Contoh twist yang valid:</p> <div style="margin-top: 32px; display: flex; flex-direction: column; gap: 20px;"> <div style="display: flex; align-items: flex-start; gap: 16px;"> <div style="width: 8px; height: 8px; background: var(--primary); border-radius: 50%; margin-top: 12px; flex-shrink: 0;"></div> <p class="body">Riset yang sama tapi di <span class="highlight">konteks Indonesia</span></p> </div> <div style="display: flex; align-items: flex-start; gap: 16px;"> <div style="width: 8px; height: 8px; background: var(--secondary); border-radius: 50%; margin-top: 12px; flex-shrink: 0;"></div> <p class="body">Variabel yang sama tapi <span style="color: var(--secondary); font-weight: 700;">sampel berbeda</span> (Gen Z, UMKM, dsb)</p> </div> <div style="display: flex; align-items: flex-start; gap: 16px;"> <div style="width: 8px; height: 8px; background: var(--accent); border-radius: 50%; margin-top: 12px; flex-shrink: 0;"></div> <p class="body">Metode lama tapi <span style="color: var(--accent); font-weight: 700;">tools baru</span> (misal: analisis dengan Python instead of SPSS)</p> </div> </div> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">04 / 10</div> <div class="center-content"> <div style="padding: 32px; background: rgba(239,68,68,0.08); border-left: 6px solid var(--danger); border-radius: 12px; margin-bottom: 40px;"> <p class="body" style="font-weight: 700; color: var(--danger); margin-bottom: 16px;">MITOS:</p> <p class="body">"Kalau ide lo mirip penelitian orang, itu plagiat."</p> </div> <div style="padding: 32px; background: rgba(168,85,247,0.08); border-left: 6px solid var(--accent); border-radius: 12px;"> <p class="body" style="font-weight: 700; color: var(--accent); margin-bottom: 16px;">FAKTA:</p> <p class="body">Replikasi = <span class="highlight">fondasi sains.</span> Yang plagiat itu kalau lo copas <span style="font-style: italic;">kata-katanya</span> tanpa kutip, bukan idenya.</p> </div> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide"> <div class="number-badge">05 / 10</div> <div class="center-content"> <div style="padding: 32px; background: rgba(239,68,68,0.08); border-left: 6px solid var(--danger); border-radius: 12px; margin-bottom: 40px;"> <p class="body" style="font-weight: 700; color: var(--danger); margin-bottom: 16px;">MITOS:</p> <p class="body">"Lo harus bikin framework baru buat lolos."</p> </div> <div style="padding: 32px; background: rgba(6,182,212,0.08); border-left: 6px solid var(--secondary); border-radius: 12px;"> <p class="body" style="font-weight: 700; color: var(--secondary); margin-bottom: 16px;">FAKTA:</p> <p class="body">Pakai framework <span style="color: var(--secondary); font-weight: 700;">existing</span> tapi <span class="highlight">aplikasiin dengan benar</span> = udah cukup. Dosen seneng kalau lo paham kenapa lo pakai framework itu.</p> </div> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-dark"> <div class="number-badge" style="color: var(--neutral-light); opacity: 0.6;">06 / 10</div> <div class="center-content" style="text-align: center;"> <h2 class="headline" style="color: var(--neutral-light); font-size: 80px; max-width: 900px; margin: 0 auto;">Originalitas<br>bukan tentang<br><span style="color: var(--accent);">beda total.</span><br><br>Tapi tentang<br><span style="color: var(--secondary);">angle lo.</span></h2> <div style="margin-top: 56px;"> <div style="width: 12px; height: 12px; background: var(--secondary); border-radius: 50%; margin: 0 auto;"></div> </div> </div> <div class="brand-ribbon" style="color: var(--neutral-light); opacity: 0.6;">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">07 / 10</div> <div class="center-content"> <span class="caption" style="margin-bottom: 32px; color: var(--primary);">YANG PENTING</span> <h2 class="headline">Dosen cuma mau tau:</h2> <div style="margin-top: 40px; display: flex; flex-direction: column; gap: 28px;"> <div style="display: flex; align-items: flex-start; gap: 20px;"> <div style="width: 48px; height: 48px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: var(--neutral-light);">1</div> <p class="body" style="padding-top: 6px;">Kenapa lo <span class="highlight">pilih topik ini?</span></p> </div> <div style="display: flex; align-items: flex-start; gap: 20px;"> <div style="width: 48px; height: 48px; background: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: var(--neutral-light);">2</div> <p class="body" style="padding-top: 6px;">Apa <span style="color: var(--secondary); font-weight: 700;">kontribusi</span> lo (meski kecil)?</p> </div> <div style="display: flex; align-items: flex-start; gap: 20px;"> <div style="width: 48px; height: 48px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: var(--neutral-light);">3</div> <p class="body" style="padding-top: 6px;">Lo <span style="color: var(--accent); font-weight: 700;">paham nggak</span> metode yang lo pakai?</p> </div> </div> <p class="body" style="margin-top: 48px; color: var(--muted);">Nggak ada yang nanya "apakah ini ide paling original di dunia?"</p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide"> <div class="number-badge">08 / 10</div> <div class="center-content"> <span class="caption" style="margin-bottom: 32px; color: var(--accent);">CONTOH NYATA</span> <div style="padding: 36px; background: var(--bg-soft); border-radius: 16px;"> <p class="body" style="font-weight: 700; color: var(--primary); margin-bottom: 20px;">Riset existing:</p> <p class="body" style="margin-bottom: 32px;">"Pengaruh Social Media Marketing terhadap Brand Awareness (studi: brand fashion global)"</p> <div style="height: 2px; background: var(--line); margin: 32px 0;"></div> <p class="body" style="font-weight: 700; color: var(--secondary); margin-bottom: 20px;">Twist lo:</p> <p class="body">"Pengaruh Social Media Marketing terhadap Brand Awareness (studi: <span class="highlight">UMKM fashion lokal Bandung</span>)"</p> </div> <p class="body" style="margin-top: 36px; color: var(--muted); text-align: center;">Cukup. Valid. Lolos.</p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">09 / 10</div> <div class="center-content"> <div class="stripe" style="margin-bottom: 40px; background: var(--accent);"></div> <h2 class="quote-text" style="color: var(--ink); max-width: 900px;">"Originalitas itu tentang <span style="color: var(--accent); font-weight: 700;">cara lo lihat</span> masalah yang udah ada, bukan tentang nemuin masalah yang <span style="color: var(--danger); font-weight: 700;">belum pernah ada."</span></h2> <p class="body" style="margin-top: 48px; color: var(--muted); max-width: 840px;">Stop stuck di "ini udah pernah diteliti." Tanya: <span class="highlight">"gimana gue bisa lihat ini dari angle baru?"</span></p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-accent"> <div class="number-badge" style="color: var(--neutral-light); opacity: 0.8;">10 / 10</div> <div class="center-content" style="text-align: center;"> <svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--neutral-light)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin: 0 auto 48px; opacity: 0.95;"> <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="color: var(--neutral-light); font-size: 68px; line-height: 1.1; margin-bottom: 32px;">Save buat reminder<br>pas lo lagi stuck<br>nyari "ide original."</h2> <p class="body" style="color: var(--neutral-light); opacity: 0.9; max-width: 780px; margin: 0 auto;">Atau share ke temen lo yang udah 3 bulan belum mulai skripsi gara-gara "semua ide udah pernah diteliti."</p> </div> <div class="bottom-bar"> <span class="brand-ribbon" style="color: var(--neutral-light); font-weight: 800; font-size: 26px; opacity: 1;">Luluscepat AI</span> <span class="caption" style="color: var(--neutral-light); opacity: 0.8;">@luluscepat_ai</span> </div> </section> </body> </html> ``` --- # CAROUSEL 4: Bab 4 Bukan Cuma Tabel SPSS ## METADATA - Topic: Common mistake di Bab 4 (Hasil & Pembahasan) — mahasiswa cuma ngedump output SPSS tanpa interpretasi - Audience focus: Mahasiswa yang lagi ngerjain Bab 4, bingung bedain "hasil" vs "pembahasan" - Slide count: 9 - Suggested caption: Bab 4 lo harus bisa cerita — bukan cuma screenshot output software. Kalau dosen baca dan nggak ngerti maksud lo, itu red flag besar. Swipe buat tau caranya 📊  ```json { "topic": "Interpretasi data vs dump tabel di Bab 4 skripsi", "subject_hint": "Laptop dengan layar penuh screenshot SPSS output dan tabel-tabel statistik tanpa penjelasan, mahasiswa confused melihat angka-angka tanpa tau artinya, setting kamar malam dengan kertas draft berceceran", "emotion": "confused, lost in numbers, overwhelmed by data", "headline": "Bab 4 Lo Bukan", "headline_pre": "Bab 4 Lo", "headline_serif_part": "Bukan", "subheadline": "Cuma Tabel SPSS", "label_top": "LULUSCEPAT AI · BAB 4 TIPS", "cta_pill": "SWIPE BUAT CARA" } ```   <section class="slide slide-1 carousel-slide cover"> <div class="top-bar"> <span class="brand-ribbon">@luluscepat_ai</span> <span class="slide-num">01 / 09</span> </div> <div class="center-content" style="align-items: center; text-align: center;"> <div style="position: relative; width: 320px; height: 320px; margin: 0 auto 48px;"> <div style="position: absolute; inset: 0; background: var(--bg-soft); border-radius: 16px; transform: rotate(-6deg);"></div> <div style="position: absolute; inset: 20px; background: var(--neutral-light); border: 3px solid var(--primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 24px;"> <div style="width: 100%; height: 8px; background: var(--primary); border-radius: 4px;"></div> <div style="width: 80%; height: 8px; background: var(--secondary); border-radius: 4px;"></div> <div style="width: 60%; height: 8px; background: var(--accent); border-radius: 4px;"></div> <div style="margin-top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 48px; font-weight: 800; color: var(--primary);">p < 0.05</div> </div> </div> <div class="hero-eyebrow" style="font-size: 24px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); font-weight: 700; margin-bottom: 32px;">BAB 4 TIPS</div> <h1 class="hero" style="max-width: 90%;">Bab 4 Lo <span style="font-family: 'Crimson Pro', serif; font-style: italic; color: var(--secondary);">Bukan</span><br>Cuma Tabel SPSS</h1> </div> <div class="bottom-bar"> <span class="caption">Swipe →</span> </div> </section>  ## HTML ```html <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bab 4 Bukan Cuma Tabel SPSS — Luluscepat AI</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=Inter:wght@400;500;600;700&family=Crimson+Pro:ital,wght@1,500;1,600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> <style> :root { --primary: #1746A0; --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-white { background: var(--bg-white); } .slide.bg-dark { background: var(--bg-dark); color: var(--ink-on-dark); } .slide.bg-primary { background: var(--primary); color: var(--neutral-light); } .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: 32px; line-height: 1.4; font-weight: 500; color: var(--ink); } .body { font-size: 28px; 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; letter-spacing: -0.04em; } .quote-text { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 52px; line-height: 1.3; font-weight: 600; } .highlight { background: linear-gradient(180deg, transparent 60%, var(--highlight) 60%); padding: 0 6px; font-weight: 700; } .accent-word { 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; 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: var(--bg-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 40px; box-shadow: var(--soft-shadow-lg); position: relative; } .slide.bg-dark .icon-circle { background: rgba(255,255,255,0.08); } .slide svg:not([class*="icon-"]) { max-width: 64px; max-height: 64px; } .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; } .bottom-bar { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .center-content { flex: 1; display: flex; flex-direction: column; justify-content: center; } .code-block { font-family: 'JetBrains Mono', monospace; padding: 20px 24px; background: #1a1a1a; color: #10b981; border-radius: 8px; font-size: 16px; line-height: 1.6; } .terminal-prompt { color: var(--secondary); } @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: 'Plus Jakarta Sans', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-accent-font: 'Inter', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-primary-weight: 600; --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 modern-sans-tight"> <img src="/brands/skripsi-kilat-ai/file/content/carousels/2026-05-24-carousel-bab-4-bukan-cuma-tabel-spss-4/_assets/slide-1.png" class="hook-bg" alt="INTERPRETASI DATA · CHAPTER GUIDES" loading="eager"> <div class="hook-overlay"> <div class="hook-label">INTERPRETASI DATA · CHAPTER GUIDES</div> <div class="hook-content"> <h1 class="hook-title">Bab 4 Lo Bukan <em class="serif-italic">Cuma Tabel SPSS</em></h1> <p class="hook-sub">Dari dump data ke narasi bermakna</p> </div> <div class="hook-cta">Buka Panduan →</div> </div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">02 / 09</div> <div class="center-content"> <div class="icon-circle"> <svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"/> <line x1="15" y1="9" x2="9" y2="15"/> <line x1="9" y1="9" x2="15" y2="15"/> </svg> </div> <h2 class="headline">Kalau dosen baca<br>Bab 4 lo dan bilang<br><span class="highlight">"maksudnya apa?"</span></h2> <p class="body" style="margin-top: 40px; color: var(--muted);">Bukan karena mereka nggak ngerti statistik. Tapi karena <span style="color: var(--danger); font-weight: 700;">lo nggak jelasin</span> apa arti angka-angka itu.</p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide"> <div class="number-badge">03 / 09</div> <div class="center-content"> <span class="caption" style="margin-bottom: 32px; color: var(--secondary);">MASALAH KLASIK</span> <h2 class="headline">Bab 4 lo kayak gini:</h2> <div style="margin-top: 40px; padding: 36px; background: var(--bg-soft); border-radius: 16px; font-family: 'JetBrains Mono', monospace; font-size: 20px; line-height: 1.8; color: var(--muted);"> <p style="margin-bottom: 12px;">4.1 Hasil Penelitian</p> <p style="margin-bottom: 12px; padding-left: 24px;">Tabel 4.1 Output SPSS</p> <p style="margin-bottom: 12px; padding-left: 24px; color: var(--danger); font-weight: 700;">[screenshot tabel]</p> <p style="margin-bottom: 12px; padding-left: 24px;">Berdasarkan tabel di atas...</p> <p style="padding-left: 24px; color: var(--danger); font-weight: 700;">[terus nggak ada penjelasan]</p> </div> <p class="body" style="margin-top: 36px; text-align: center; color: var(--danger); font-weight: 700;">Dosen: "Terus?"</p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">04 / 09</div> <div class="center-content"> <span class="caption" style="margin-bottom: 32px; color: var(--primary);">YANG SALAH</span> <h2 class="headline">Lo cuma <span style="color: var(--danger);">ngedump</span> data,<br>nggak <span class="highlight">interpret.</span></h2> <div style="margin-top: 40px; display: flex; flex-direction: column; gap: 24px;"> <div style="padding: 24px 28px; background: rgba(239,68,68,0.08); border-left: 4px solid var(--danger); border-radius: 8px;"> <p class="body"><span style="font-weight: 700;">✗</span> "Nilai sig. = 0.003"</p> </div> <div style="padding: 24px 28px; background: rgba(168,85,247,0.08); border-left: 4px solid var(--accent); border-radius: 8px;"> <p class="body"><span style="font-weight: 700; color: var(--accent);">✓</span> "Nilai sig. = 0.003 <span class="highlight">(< 0.05)</span>, artinya ada pengaruh signifikan antara X terhadap Y."</p> </div> </div> <p class="body" style="margin-top: 40px; color: var(--muted); text-align: center;">Dosen butuh <span style="color: var(--accent); font-weight: 700;">narasi</span>, bukan cuma angka.</p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide"> <div class="number-badge">05 / 09</div> <div class="center-content"> <span class="caption" style="margin-bottom: 32px; color: var(--secondary);">STRUKTUR YANG BENER</span> <h2 class="headline">Setiap tabel harus:</h2> <div style="margin-top: 40px; display: flex; flex-direction: column; gap: 28px;"> <div style="display: flex; align-items: flex-start; gap: 20px;"> <div style="width: 48px; height: 48px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: var(--neutral-light);">1</div> <p class="body" style="padding-top: 6px;"><span class="highlight">Dijelasin</span> apa yang ditunjukkin angka itu</p> </div> <div style="display: flex; align-items: flex-start; gap: 20px;"> <div style="width: 48px; height: 48px; background: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: var(--neutral-light);">2</div> <p class="body" style="padding-top: 6px;"><span style="color: var(--secondary); font-weight: 700;">Diinterpret</span> kenapa itu terjadi</p> </div> <div style="display: flex; align-items: flex-start; gap: 20px;"> <div style="width: 48px; height: 48px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: var(--neutral-light);">3</div> <p class="body" style="padding-top: 6px;"><span style="color: var(--accent); font-weight: 700;">Dikoneksi</span> ke teori di Bab 2</p> </div> </div> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-dark"> <div class="number-badge" style="color: var(--neutral-light); opacity: 0.6;">06 / 09</div> <div class="center-content" style="text-align: center;"> <svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--neutral-light)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin: 0 auto 48px; opacity: 0.9;"> <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/> <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/> </svg> <h2 class="headline" style="color: var(--neutral-light); font-size: 80px; max-width: 880px; margin: 0 auto;">Bab 4 = <span style="color: var(--secondary);">story</span><br>tentang data lo,<br>bukan <span style="color: var(--danger);">katalog</span> tabel.</h2> <div style="margin-top: 56px;"> <div style="width: 12px; height: 12px; background: var(--secondary); border-radius: 50%; margin: 0 auto;"></div> </div> </div> <div class="brand-ribbon" style="color: var(--neutral-light); opacity: 0.6;">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">07 / 09</div> <div class="center-content"> <span class="caption" style="margin-bottom: 32px; color: var(--accent);">CONTOH INTERPRETASI</span> <div style="padding: 36px; background: var(--bg-soft); border-radius: 16px;"> <p class="body" style="font-weight: 700; color: var(--primary); margin-bottom: 20px;">❌ Salah:</p> <p class="body" style="margin-bottom: 32px; color: var(--muted);">"Berdasarkan Tabel 4.2, nilai koefisien regresi X1 = 0.432 dengan sig. 0.001."</p> <div style="height: 2px; background: var(--line); margin: 32px 0;"></div> <p class="body" style="font-weight: 700; color: var(--accent); margin-bottom: 20px;">✓ Benar:</p> <p class="body">"Berdasarkan Tabel 4.2, <span class="highlight">social media marketing (X1) berpengaruh positif signifikan</span> terhadap brand awareness (Y) dengan koefisien 0.432 (p < 0.05). Artinya, setiap <span style="color: var(--accent); font-weight: 700;">peningkatan 1 unit</span> aktivitas social media marketing akan meningkatkan brand awareness sebesar 0.432 unit. Hasil ini <span style="color: var(--secondary); font-weight: 700;">sejalan dengan teori Kotler (2020)</span> yang menyatakan..."</p> </div> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide"> <div class="number-badge">08 / 09</div> <div class="center-content"> <div class="stripe" style="margin-bottom: 40px; background: var(--primary);"></div> <h2 class="quote-text" style="color: var(--ink); max-width: 900px;">"Dosen nggak butuh lo jago SPSS. Dosen butuh lo bisa <span style="color: var(--primary); font-weight: 700;">cerita</span> apa yang lo temuin dari data."</h2> <p class="body" style="margin-top: 48px; color: var(--muted); max-width: 840px;">Software itu tools. <span class="highlight">Pemahaman lo</span> yang diuji.</p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-primary"> <div class="number-badge" style="color: var(--neutral-light); opacity: 0.8;">09 / 09</div> <div class="center-content" style="text-align: center;"> <svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--neutral-light)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin: 0 auto 48px; opacity: 0.95;"> <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="color: var(--neutral-light); font-size: 68px; line-height: 1.1; margin-bottom: 32px;">Save buat diinget<br>pas lo lagi nulis<br>Bab 4.</h2> <p class="body" style="color: var(--neutral-light); opacity: 0.9; max-width: 780px; margin: 0 auto;">Atau share ke temen lo yang masih copas screenshot SPSS tanpa tau artinya apa.</p> </div> <div class="bottom-bar"> <span class="brand-ribbon" style="color: var(--neutral-light); font-weight: 800; font-size: 26px; opacity: 1;">Luluscepat AI</span> <span class="caption" style="color: var(--neutral-light); opacity: 0.8;">@luluscepat_ai</span> </div> </section> </body> </html> ``` --- # CAROUSEL 5: Hipotesis Lo Ditolak? Itu Bukan Gagal ## METADATA - Topic: Reframing rejected hypothesis sebagai valid finding, bukan kegagalan penelitian - Audience focus: Mahasiswa yang stress karena hasil penelitian tidak sesuai hipotesis, takut dianggap gagal - Slide count: 10 - Suggested caption: Hipotesis ditolak = tetep valid research. Yang gagal itu metodologi, bukan hasil yang nggak sesuai ekspektasi lo. Geser buat paham kenapa 🔬  ```json { "topic": "Rejected hypothesis adalah valid scientific finding", "subject_hint": "Mahasiswa melihat hasil SPSS dengan ekspresi disappointed karena hipotesis ditolak, laptop dengan output statistik yang menunjukkan 'tidak signifikan', setting perpustakaan kampus dengan pencahayaan dramatic", "emotion": "disappointed but contemplating, stressed, worried about failure", "headline": "Hipotesis Lo Ditolak?", "headline_pre": "Hipotesis Lo", "headline_serif_part": "Ditolak?", "subheadline": "Itu Bukan Gagal", "label_top": "LULUSCEPAT AI · MINDSET SHIFT", "cta_pill": "SWIPE BUAT TRUTH" } ```   <section class="slide slide-1 carousel-slide cover"> <div class="top-bar"> <span class="brand-ribbon">@luluscepat_ai</span> <span class="slide-num">01 / 10</span> </div> <div class="center-content" style="align-items: center; text-align: center;"> <div style="position: relative; width: 320px; height: 320px; margin: 0 auto 48px;"> <svg style="position: absolute; inset: 0; width: 100%; height: 100%;" viewBox="0 0 320 320"> <path d="M60 160 Q90 100, 160 100 T260 160" stroke="var(--danger)" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.3" stroke-dasharray="12 8"/> <path d="M60 160 L260 160" stroke="var(--accent)" stroke-width="6" fill="none" stroke-linecap="round"/> <circle cx="160" cy="160" r="50" fill="var(--secondary)" opacity="0.2"/> <circle cx="160" cy="160" r="30" fill="var(--primary)"/> </svg> </div> <div class="hero-eyebrow" style="font-size: 24px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--secondary); font-weight: 700; margin-bottom: 32px;">MINDSET SHIFT</div> <h1 class="hero" style="max-width: 90%;">Hipotesis Lo <span style="font-family: 'Crimson Pro', serif; font-style: italic; color: var(--danger);">Ditolak?</span></h1> <p class="sub" style="margin-top: 24px; color: var(--muted);">Itu Bukan Gagal</p> </div> <div class="bottom-bar"> <span class="caption">Swipe →</span> </div> </section>  ## HTML ```html <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hipotesis Lo Ditolak? Itu Bukan Gagal — Luluscepat AI</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=Inter:wght@400;500;600;700&family=Crimson+Pro:ital,wght@1,500;1,600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> <style> :root { --primary: #1746A0; --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-white { background: var(--bg-white); } .slide.bg-dark { background: var(--bg-dark); color: var(--ink-on-dark); } .slide.bg-secondary { background: var(--secondary); color: var(--neutral-light); } .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: 32px; line-height: 1.4; font-weight: 500; color: var(--ink); } .body { font-size: 28px; 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; letter-spacing: -0.04em; } .quote-text { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 52px; line-height: 1.3; font-weight: 600; } .highlight { background: linear-gradient(180deg, transparent 60%, var(--highlight) 60%); padding: 0 6px; font-weight: 700; } .accent-word { 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; 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: var(--bg-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 40px; box-shadow: var(--soft-shadow-lg); position: relative; } .slide.bg-dark .icon-circle { background: rgba(255,255,255,0.08); } .slide svg:not([class*="icon-"]) { max-width: 64px; max-height: 64px; } .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; } .bottom-bar { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .center-content { flex: 1; display: flex; flex-direction: column; justify-content: center; } @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: 'Plus Jakarta Sans', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-accent-font: 'Inter', 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', system-ui, sans-serif; --slide1-primary-weight: 600; --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 cover"> <div class="top-bar"> <span class="brand-ribbon">@luluscepat_ai</span> <span class="slide-num">01 / 10</span> </div> <div class="center-content" style="align-items: center; text-align: center;"> <div style="position: relative; width: 320px; height: 320px; margin: 0 auto 48px;"> <svg style="position: absolute; inset: 0; width: 100%; height: 100%;" viewBox="0 0 320 320"> <path d="M60 160 Q90 100, 160 100 T260 160" stroke="var(--danger)" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.3" stroke-dasharray="12 8"/> <path d="M60 160 L260 160" stroke="var(--accent)" stroke-width="6" fill="none" stroke-linecap="round"/> <circle cx="160" cy="160" r="50" fill="var(--secondary)" opacity="0.2"/> <circle cx="160" cy="160" r="30" fill="var(--primary)"/> </svg> </div> <div class="hero-eyebrow" style="font-size: 24px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--secondary); font-weight: 700; margin-bottom: 32px;">MINDSET SHIFT</div> <h1 class="hero" style="max-width: 90%;">Hipotesis Lo <span style="font-family: 'Crimson Pro', serif; font-style: italic; color: var(--danger);">Ditolak?</span></h1> <p class="sub" style="margin-top: 24px; color: var(--muted);">Itu Bukan Gagal</p> </div> <div class="bottom-bar"> <span class="caption">Swipe →</span> </div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">02 / 10</div> <div class="center-content"> <div class="icon-circle"> <svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"/> <line x1="15" y1="9" x2="9" y2="15"/> <line x1="9" y1="9" x2="15" y2="15"/> </svg> </div> <h2 class="headline">Lo liat hasil statistik:<br><span class="highlight">"sig. = 0.234"</span></h2> <p class="body" style="margin-top: 40px; color: var(--muted);">Langsung panik: "Gue gagal. Hipotesis gue salah. Gue harus <span style="color: var(--danger); font-weight: 700;">ngulang dari awal."</span></p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide"> <div class="number-badge">03 / 10</div> <div class="center-content" style="text-align: center;"> <span class="caption" style="margin-bottom: 32px; color: var(--secondary);">PLOT TWIST</span> <h2 class="headline">Hipotesis ditolak<br><span style="color: var(--accent);">≠</span> penelitian gagal.</h2> <p class="body" style="margin-top: 40px; max-width: 840px; margin-left: auto; margin-right: auto;">Ini <span class="highlight">tetep valid finding.</span> Bahkan kadang lebih menarik dari hipotesis yang diterima.</p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">04 / 10</div> <div class="center-content"> <span class="caption" style="margin-bottom: 32px; color: var(--primary);">KENAPA?</span> <h2 class="headline">Sains itu tentang<br><span class="highlight">menemukan kebenaran,</span><br>bukan <span style="color: var(--danger);">membuktikan dugaan.</span></h2> <p class="body" style="margin-top: 40px;">Kalau semua penelitian hasilnya sesuai hipotesis, <span style="color: var(--accent); font-weight: 700;">buat apa</span> penelitian? Tinggal tulis kesimpulan aja dari awal.</p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide"> <div class="number-badge">05 / 10</div> <div class="center-content"> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;"> <div style="text-align: center;"> <svg viewBox="0 0 24 24" fill="none" stroke="var(--danger)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width: 80px; height: 80px; margin: 0 auto 24px;"> <circle cx="12" cy="12" r="10"/> <line x1="15" y1="9" x2="9" y2="15"/> <line x1="9" y1="9" x2="15" y2="15"/> </svg> <p class="body" style="font-weight: 700; color: var(--danger); margin-bottom: 16px;">INI YANG GAGAL</p> <p class="body" style="font-size: 24px; line-height: 1.5; color: var(--muted);">Metodologi lo salah (sampel bias, alat ukur nggak valid, analisis keliru)</p> </div> <div style="text-align: center;"> <svg viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width: 80px; height: 80px; margin: 0 auto 24px;"> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/> <polyline points="22 4 12 14.01 9 11.01"/> </svg> <p class="body" style="font-weight: 700; color: var(--accent); margin-bottom: 16px;">INI BUKAN GAGAL</p> <p class="body" style="font-size: 24px; line-height: 1.5; color: var(--muted);">Hasil lo <span class="highlight">nggak sesuai ekspektasi</span> tapi metodologinya solid</p> </div> </div> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-dark"> <div class="number-badge" style="color: var(--neutral-light); opacity: 0.6;">06 / 10</div> <div class="center-content" style="text-align: center;"> <h2 class="headline" style="color: var(--neutral-light); font-size: 80px; max-width: 900px; margin: 0 auto;">"H0 diterima"<br>tetep bisa jadi<br><span style="color: var(--secondary);">kontribusi ilmiah</span><br>yang valuable.</h2> <div style="margin-top: 56px;"> <div style="width: 12px; height: 12px; background: var(--secondary); border-radius: 50%; margin: 0 auto;"></div> </div> </div> <div class="brand-ribbon" style="color: var(--neutral-light); opacity: 0.6;">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">07 / 10</div> <div class="center-content"> <span class="caption" style="margin-bottom: 32px; color: var(--accent);">CONTOH NYATA</span> <div style="padding: 36px; background: var(--bg-soft); border-radius: 16px;"> <p class="body" style="font-weight: 700; color: var(--primary); margin-bottom: 20px;">Hipotesis lo:</p> <p class="body" style="margin-bottom: 32px;">"Social media ads meningkatkan <span class="highlight">brand awareness</span> UMKM fashion Bandung."</p> <div style="height: 2px; background: var(--line); margin: 32px 0;"></div> <p class="body" style="font-weight: 700; color: var(--danger); margin-bottom: 20px;">Hasil: Hipotesis ditolak (p > 0.05)</p> <div style="height: 2px; background: var(--line); margin: 32px 0;"></div> <p class="body" style="font-weight: 700; color: var(--accent); margin-bottom: 20px;">Interpretasi yang BENAR:</p> <p class="body">"Temuan ini menunjukkan bahwa <span style="color: var(--accent); font-weight: 700;">di konteks UMKM lokal Bandung</span>, investasi social media ads belum efektif untuk meningkatkan brand awareness. Hal ini <span class="highlight">berbeda</span> dengan temuan [penelitian X] pada brand global, mengindikasikan bahwa <span style="color: var(--secondary); font-weight: 700;">awareness UMKM lebih dipengaruhi word-of-mouth</span> dibanding paid ads."</p> </div> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide"> <div class="number-badge">08 / 10</div> <div class="center-content"> <span class="caption" style="margin-bottom: 32px; color: var(--secondary);">YANG HARUS LO LAKUIN</span> <h2 class="headline">Pas hipotesis ditolak:</h2> <div style="margin-top: 40px; display: flex; flex-direction: column; gap: 28px;"> <div style="display: flex; align-items: flex-start; gap: 20px;"> <div style="width: 48px; height: 48px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: var(--neutral-light);">1</div> <p class="body" style="padding-top: 6px;"><span class="highlight">Jangan</span> manipulasi data atau metodologi</p> </div> <div style="display: flex; align-items: flex-start; gap: 20px;"> <div style="width: 48px; height: 48px; background: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: var(--neutral-light);">2</div> <p class="body" style="padding-top: 6px;"><span style="color: var(--secondary); font-weight: 700;">Cari tahu</span> kenapa hasil lo beda dari teori/penelitian sebelumnya</p> </div> <div style="display: flex; align-items: flex-start; gap: 20px;"> <div style="width: 48px; height: 48px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: var(--neutral-light);">3</div> <p class="body" style="padding-top: 6px;">Diskusiin <span style="color: var(--accent); font-weight: 700;">kenapa</span> di Bab 5 — itu yang bikin penelitian lo menarik</p> </div> </div> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-white"> <div class="number-badge">09 / 10</div> <div class="center-content"> <div class="stripe" style="margin-bottom: 40px; background: var(--accent);"></div> <h2 class="quote-text" style="color: var(--ink); max-width: 900px;">"Dosen lo lebih respect sama mahasiswa yang bisa <span style="color: var(--accent); font-weight: 700;">jelasin kenapa</span> hipotesis ditolak, daripada mahasiswa yang 'kebetulan' semua hipotesisnya <span style="color: var(--danger); font-weight: 700;">diterima."</span></h2> <p class="body" style="margin-top: 48px; color: var(--muted); max-width: 840px;">Karena itu tanda lo <span class="highlight">paham prosesnya</span>, bukan cuma kejar hasil.</p> </div> <div class="brand-ribbon">@luluscepat_ai</div> </section>  <section class="slide carousel-slide bg-secondary"> <div class="number-badge" style="color: var(--neutral-light); opacity: 0.8;">10 / 10</div> <div class="center-content" style="text-align: center;"> <svg class="icon-hero" viewBox="0 0 24 24" fill="none" stroke="var(--neutral-light)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin: 0 auto 48px; opacity: 0.95;"> <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="color: var(--neutral-light); font-size: 68px; line-height: 1.1; margin-bottom: 32px;">Save buat reminder<br>pas lo panik liat<br>hasil nggak sesuai<br>ekspektasi.</h2> <p class="body" style="color: var(--neutral-light); opacity: 0.9; max-width: 780px; margin: 0 auto;">Atau share ke temen lo yang lagi stres mikirin "hasilnya nggak signifikan, gimana dong?"</p> </div> <div class="bottom-bar"> <span class="brand-ribbon" style="color: var(--neutral-light); font-weight: 800; font-size: 26px; opacity: 1;">Luluscepat AI</span> <span class="caption" style="color: var(--neutral-light); opacity: 0.8;">@luluscepat_ai</span> </div> </section> </body> </html> ```

Hapus

Error

Report a bug