/* ============================================================
   DOCUMENT.CSS — SlideEdu v5
   5 layout: text_only, text_image, image_only,
             image_grid_2, image_grid_4
   ============================================================ */

/* ── BASE SLIDE ── */
.slide-v5 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--slide-bg, #ffffff);
  color: var(--slide-text, #212121);
  font-family: 'Plus Jakarta Sans', sans-serif;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  /* Container query — semua ukuran font relatif terhadap lebar slide */
  container-type: size;
  container-name: slide;
}

/* ── HEADER ── */
.slide-header {
  background: var(--slide-header-bg, #1a365d);
  color: var(--slide-header-text, #ffffff);
  padding: 1.8cqh 3.5cqw;
  display: flex;
  align-items: center;
  gap: 1cqw;
  flex-shrink: 0;
  min-height: 10cqh;
}

.slide-header::before {
  content: '';
  display: block;
  width: 0.5cqw;
  height: 4cqh;
  background: var(--slide-accent, #e07b39);
  border-radius: 2px;
  flex-shrink: 0;
}

.slide-title {
  font-size: 3.6cqw;
  font-size: clamp(20pt, 3.6cqw, 30pt);
  font-weight: 800;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ── BODY BASE ── */
.slide-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ══════════════════════════════════════════
   LAYOUT 1: text_only
══════════════════════════════════════════ */
.layout-text-only .slide-body {
  padding: 2cqh 3.5cqw;
  justify-content: center;
}

.body-center {
  justify-content: center;
  align-items: flex-start;
}

.text-block {
  display: flex;
  flex-direction: column;
  gap: 1.2cqh;
  width: 100%;
}

.body-text {
  font-size: 2.2cqw;
  font-size: clamp(12pt, 2.2cqw, 18pt);
  line-height: 1.65;
  color: var(--slide-text, #212121);
  white-space: pre-line;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
}

/* Bullet list — indent rapi, teks wrap tidak ke bawah bullet */
.body-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6cqh;
}

.body-list-item {
  display: grid;
  grid-template-columns: 1.8cqw 1fr;
  gap: 0.5cqw;
  font-size: 2.2cqw;
  font-size: clamp(12pt, 2.2cqw, 18pt);
  line-height: 1.55;
  color: var(--slide-text, #212121);
  word-break: break-word;
  overflow-wrap: break-word;
}

.body-list-item::before {
  content: '•';
  color: var(--slide-accent, #e07b39);
  font-weight: 700;
  padding-top: 0.05em;
}

/* Paragraf biasa (non-bullet) */
.body-para {
  font-size: 2.2cqw;
  font-size: clamp(12pt, 2.2cqw, 18pt);
  line-height: 1.65;
  color: var(--slide-text, #212121);
  word-break: break-word;
  overflow-wrap: break-word;
}

.note-block {
  display: flex;
  align-items: flex-start;
  gap: 0.8cqw;
  padding: 1cqh 1.5cqw;
  background: var(--slide-block-bg, #EBF8FF);
  border-left: 0.4cqw solid var(--slide-accent, #e07b39);
  border-radius: 0 6px 6px 0;
  font-size: 1.8cqw;
  font-size: clamp(10pt, 1.8cqw, 16pt);
  color: var(--slide-text, #212121);
}

/* ══════════════════════════════════════════
   LAYOUT 2: text_image
══════════════════════════════════════════ */
.layout-text-image .slide-body {
  padding: 2cqh 3.5cqw;
}

.body-two-col {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: 2.5cqw;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.col-text {
  display: flex;
  flex-direction: column;
  gap: 1.2cqh;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}

.col-image {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* ══════════════════════════════════════════
   LAYOUT 3: image_only
══════════════════════════════════════════ */
.layout-image-only .slide-body {
  padding: 1.5cqh 2.5cqw 2cqh;
}

.body-image-full {
  flex: 1;
  min-height: 0;
}

.body-image-full .img-slot {
  height: 100%;
}

/* ══════════════════════════════════════════
   LAYOUT 4 & 5: image_grid_2 / image_grid_4
══════════════════════════════════════════ */
.layout-image-grid .slide-body {
  padding: 1.5cqh 2.5cqw;
  gap: 1cqh;
}

.body-grid-2,
.body-grid-4 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1cqh;
  min-height: 0;
}

.img-grid {
  flex: 1;
  display: grid;
  gap: 1.2cqw;
  min-height: 0;
}

.img-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

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

.grid-note {
  font-size: 1.6cqw;
  color: var(--slide-text, #212121);
  opacity: 0.7;
  font-style: italic;
  text-align: center;
  flex-shrink: 0;
  padding: 0.3cqh 0;
}

/* ══════════════════════════════════════════
   IMAGE SLOT — dipakai semua layout
══════════════════════════════════════════ */
.img-slot {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--slide-border, #BEE3F8);
  background: var(--slide-block-bg, #f0f4ff);
  min-height: 0;
  flex: 1;
}

.img-slot-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.img-slot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-slot-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1cqh;
  color: var(--slide-text, #212121);
  opacity: 0.4;
  font-size: 1.8cqw;
  padding: 1cqh;
}

.img-slot-placeholder i {
  font-size: 5cqw;
  opacity: 0.5;
}

.img-slot-caption {
  padding: 0.8cqh 1.2cqw;
  font-size: 1.5cqw;
  color: var(--slide-text, #212121);
  opacity: 0.7;
  text-align: center;
  background: rgba(0,0,0,0.04);
  flex-shrink: 0;
  line-height: 1.3;
}

/* ══════════════════════════════════════════
   CALLOUT BLOCKS — Info, Warning, Tip, Example
══════════════════════════════════════════ */
.callout-box {
  display: flex;
  align-items: flex-start;
  gap: 1cqw;
  padding: 1.2cqh 1.5cqw;
  border-radius: 8px;
  border-left: 0.5cqw solid;
  font-size: 1.8cqw;
  font-size: clamp(11pt, 1.8cqw, 16pt);
  line-height: 1.6;
  margin: 0.5cqh 0;
}

.callout-icon {
  font-size: 2.2cqw;
  flex-shrink: 0;
  padding-top: 0.1cqh;
}

.callout-content {
  flex: 1;
  min-width: 0;
}

.callout-content p {
  margin: 0;
}

/* Info Box — Biru */
.callout-info {
  background: rgba(21, 101, 192, 0.08);
  border-color: #1565C0;
  color: #0d47a1;
}

.callout-info .callout-icon {
  color: #1565C0;
}

/* Warning Box — Merah/Orange */
.callout-warning {
  background: rgba(230, 81, 0, 0.08);
  border-color: #E65100;
  color: #bf360c;
}

.callout-warning .callout-icon {
  color: #E65100;
}

/* Tip Box — Hijau */
.callout-tip {
  background: rgba(27, 94, 32, 0.08);
  border-color: #1B5E20;
  color: #1b5e20;
}

.callout-tip .callout-icon {
  color: #1B5E20;
}

/* Example Box — Ungu */
.callout-example {
  background: rgba(74, 20, 140, 0.08);
  border-color: #4A148C;
  color: #4a148c;
}

.callout-example .callout-icon {
  color: #4A148C;
}

/* ══════════════════════════════════════════
   NUMBERED STEPS — Langkah Berurutan
══════════════════════════════════════════ */
.step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2cqh;
  counter-reset: step-counter;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 1cqw;
  counter-increment: step-counter;
  position: relative;
}

/* Connector line antar steps */
.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 2.5cqw;
  top: 5cqw;
  bottom: -1.2cqh;
  width: 0.2cqw;
  background: var(--slide-accent, #e07b39);
  opacity: 0.3;
}

.step-number {
  width: 4cqw;
  height: 4cqw;
  min-width: 28pt;
  min-height: 28pt;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slide-accent, #e07b39);
  color: #ffffff;
  font-size: 2cqw;
  font-size: clamp(12pt, 2cqw, 18pt);
  font-weight: 800;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.step-content {
  flex: 1;
  padding-top: 0.3cqh;
  font-size: 2cqw;
  font-size: clamp(12pt, 2cqw, 17pt);
  line-height: 1.6;
  color: var(--slide-text, #212121);
}

.step-content p {
  margin: 0;
}

/* ══════════════════════════════════════════
   QUOTE BLOCK — Kutipan / Refleksi
══════════════════════════════════════════ */
.quote-block {
  padding: 2cqh 2.5cqw;
  margin: 1cqh 0;
  border-left: 0.6cqw solid var(--slide-accent, #e07b39);
  background: rgba(0, 0, 0, 0.03);
  border-radius: 0 8px 8px 0;
}

.quote-text {
  font-size: 2.4cqw;
  font-size: clamp(14pt, 2.4cqw, 20pt);
  font-style: italic;
  line-height: 1.7;
  color: var(--slide-text, #212121);
  margin: 0 0 0.8cqh 0;
  font-weight: 400;
}

.quote-text::before {
  content: '"';
  font-size: 1.5em;
  color: var(--slide-accent, #e07b39);
  font-weight: 700;
}

.quote-text::after {
  content: '"';
  font-size: 1.5em;
  color: var(--slide-accent, #e07b39);
  font-weight: 700;
}

.quote-attribution {
  font-size: 1.6cqw;
  font-size: clamp(10pt, 1.6cqw, 14pt);
  color: var(--slide-text, #212121);
  opacity: 0.65;
  text-align: right;
  font-style: italic;
  margin: 0;
}

/* ══════════════════════════════════════════
   HIGHLIGHT KEYWORDS — Bold & Accent
══════════════════════════════════════════ */
.highlight-accent {
  background: var(--slide-accent, #e07b39);
  color: #ffffff;
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-weight: 700;
}

/* ══════════════════════════════════════════
   PROGRESS INDICATOR — Di Setiap Slide
══════════════════════════════════════════ */
.slide-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.4cqh;
  background: rgba(0, 0, 0, 0.06);
  z-index: 10;
}

.slide-progress-bar {
  height: 100%;
  background: var(--slide-accent, #e07b39);
  transition: width 0.3s ease;
}

.slide-progress-text {
  position: absolute;
  bottom: 0.8cqh;
  right: 2cqw;
  font-size: 1.2cqw;
  font-size: clamp(8pt, 1.2cqw, 11pt);
  color: var(--slide-text, #212121);
  opacity: 0.4;
  font-weight: 500;
}

/* ══════════════════════════════════════════
   BACKGROUND PATTERN — Semua Slide
   Style dikontrol oleh class di .slide-v5:
   .bg-dots, .bg-lines, .bg-blocks, .bg-gradient, .bg-solid
   Default: dots (opacity rendah)
══════════════════════════════════════════ */

/* Default: Dots — sangat subtle */
.slide-v5.bg-dots::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.025'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Lines — diagonal halus */
.slide-v5.bg-lines::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000000' stroke-opacity='0.03' stroke-width='1'%3E%3Cpath d='M0 40L40 0M0 80L80 0M40 80L80 40'/%3E%3C/g%3E%3C/svg%3E");
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Blocks — kotak-kotak halus */
.slide-v5.bg-blocks::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.02'%3E%3Crect x='0' y='0' width='20' height='20'/%3E%3Crect x='20' y='20' width='20' height='20'/%3E%3C/g%3E%3C/svg%3E");
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Gradient — radial gradient subtle */
.slide-v5.bg-gradient::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at top left, var(--slide-primary, #1a365d) 0%, transparent 70%),
              radial-gradient(ellipse at bottom right, var(--slide-accent, #e07b39) 0%, transparent 70%);
  opacity: 0.06 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Solid — tanpa pattern */
.slide-v5.bg-solid::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: none;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Cover slide — override pattern dengan gradient yang lebih kuat */
.layout-cover::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: none !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════
   PARTICLE BACKGROUND — Cover Slide
══════════════════════════════════════════ */
.particles-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
  animation: particle-float linear infinite;
}

@keyframes particle-float {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.15;
  }
  90% {
    opacity: 0.15;
  }
  100% {
    transform: translateY(-100cqh) translateX(20cqw) rotate(360deg);
    opacity: 0;
  }
}

/* Generate 15 particles dengan posisi dan durasi random via inline style */
.particle:nth-child(1) { width: 4px; height: 4px; left: 10%; bottom: -10px; animation-duration: 12s; animation-delay: 0s; background: var(--slide-accent, #e07b39); }
.particle:nth-child(2) { width: 3px; height: 3px; left: 25%; bottom: -10px; animation-duration: 15s; animation-delay: 2s; background: var(--slide-primary, #1a365d); }
.particle:nth-child(3) { width: 5px; height: 5px; left: 40%; bottom: -10px; animation-duration: 10s; animation-delay: 4s; background: var(--slide-accent, #e07b39); }
.particle:nth-child(4) { width: 3px; height: 3px; left: 55%; bottom: -10px; animation-duration: 14s; animation-delay: 1s; background: var(--slide-primary, #1a365d); }
.particle:nth-child(5) { width: 4px; height: 4px; left: 70%; bottom: -10px; animation-duration: 11s; animation-delay: 3s; background: var(--slide-accent, #e07b39); }
.particle:nth-child(6) { width: 3px; height: 3px; left: 85%; bottom: -10px; animation-duration: 13s; animation-delay: 5s; background: var(--slide-primary, #1a365d); }
.particle:nth-child(7) { width: 4px; height: 4px; left: 15%; bottom: -10px; animation-duration: 16s; animation-delay: 6s; background: var(--slide-accent, #e07b39); }
.particle:nth-child(8) { width: 5px; height: 5px; left: 35%; bottom: -10px; animation-duration: 9s; animation-delay: 7s; background: var(--slide-primary, #1a365d); }
.particle:nth-child(9) { width: 3px; height: 3px; left: 50%; bottom: -10px; animation-duration: 17s; animation-delay: 8s; background: var(--slide-accent, #e07b39); }
.particle:nth-child(10) { width: 4px; height: 4px; left: 65%; bottom: -10px; animation-duration: 12s; animation-delay: 9s; background: var(--slide-primary, #1a365d); }
.particle:nth-child(11) { width: 3px; height: 3px; left: 80%; bottom: -10px; animation-duration: 14s; animation-delay: 10s; background: var(--slide-accent, #e07b39); }
.particle:nth-child(12) { width: 5px; height: 5px; left: 5%; bottom: -10px; animation-duration: 11s; animation-delay: 11s; background: var(--slide-primary, #1a365d); }
.particle:nth-child(13) { width: 4px; height: 4px; left: 45%; bottom: -10px; animation-duration: 15s; animation-delay: 12s; background: var(--slide-accent, #e07b39); }
.particle:nth-child(14) { width: 3px; height: 3px; left: 60%; bottom: -10px; animation-duration: 13s; animation-delay: 13s; background: var(--slide-primary, #1a365d); }
.particle:nth-child(15) { width: 4px; height: 4px; left: 90%; bottom: -10px; animation-duration: 10s; animation-delay: 14s; background: var(--slide-accent, #e07b39); }

/* Pastikan konten di atas pattern */
.slide-v5 > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════
   ANIMASI — Spinner, Color Shift, Decorative Circles
══════════════════════════════════════════ */

/* Animasi Spinner Icon */
@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.cover-icon.spinning {
  animation: icon-spin 15s linear infinite;
  display: inline-block;
}

.cover-icon.pulsing {
  animation: icon-pulse 3s ease-in-out infinite;
  display: inline-block;
}

/* Animasi Judul — Warna Berubah Looping */
@keyframes title-color-shift {
  0%, 100% { color: var(--slide-primary, #1a365d); }
  25% { color: var(--slide-accent, #e07b39); }
  50% { color: #dc2626; }
  75% { color: #7c3aed; }
}

.cover-title.animated-color {
  animation: title-color-shift 6s ease-in-out infinite;
}

/* Animasi 3 Lingkaran Warna */
@keyframes circle-color {
  0%, 100% { background: var(--slide-primary, #1a365d); opacity: 0.12; }
  33% { background: var(--slide-accent, #e07b39); opacity: 0.18; }
  66% { background: var(--slide-header-bg, #1a365d); opacity: 0.12; }
}

.cover-deco-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.cover-deco-circle-1 {
  width: 25cqw;
  height: 25cqw;
  top: -5cqw;
  left: -5cqw;
  animation: circle-color 7s ease-in-out infinite 0s;
}

.cover-deco-circle-2 {
  width: 18cqw;
  height: 18cqw;
  top: 10cqh;
  right: -4cqw;
  animation: circle-color 7s ease-in-out infinite 2.3s;
}

.cover-deco-circle-3 {
  width: 22cqw;
  height: 22cqw;
  bottom: -6cqw;
  left: 30cqw;
  animation: circle-color 7s ease-in-out infinite 4.6s;
}

/* Animasi Gradient Background — Cover */
@keyframes gradient-move {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.layout-cover.animated-bg::before {
  background-size: 200% 200% !important;
  animation: gradient-move 20s ease-in-out infinite !important;
}

/* ══════════════════════════════════════════
   COVER SLIDE — Desain khusus slide 1
══════════════════════════════════════════ */
.layout-cover {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.layout-cover .slide-header {
  display: none !important;
}

/* Background pattern untuk cover */
.layout-cover::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 20% 50%, var(--slide-accent, #e07b39) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, var(--slide-primary, #1a365d) 0%, transparent 40%),
    linear-gradient(135deg, var(--slide-header-bg, #1a365d) 0%, #0f2744 100%);
  opacity: 0.12 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.layout-cover > .cover-content {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2.5cqh !important;
  padding: 4cqh 5cqw !important;
  width: 100% !important;
}

.layout-cover .cover-title {
  font-size: 4.5cqw !important;
  font-size: clamp(24pt, 4.5cqw, 40pt) !important;
  font-weight: 800 !important;
  color: var(--slide-header-bg, #1a365d) !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
}

.layout-cover .cover-subtitle {
  font-size: 2.6cqw !important;
  font-size: clamp(14pt, 2.6cqw, 22pt) !important;
  font-weight: 500 !important;
  color: var(--slide-text, #212121) !important;
  opacity: 0.8 !important;
  margin: 0 !important;
  text-align: center !important;
}

.layout-cover .cover-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1cqh !important;
  font-size: 2cqw !important;
  font-size: clamp(11pt, 2cqw, 17pt) !important;
  color: var(--slide-text, #212121) !important;
  opacity: 0.65 !important;
}

.layout-cover .cover-meta-item {
  margin: 0 !important;
  text-align: center !important;
}

/* ══════════════════════════════════════════
   CLOSING SLIDE — Desain khusus slide penutup
══════════════════════════════════════════ */
.layout-closing {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 !important;
  position: relative !important;
}

.layout-closing .slide-header {
  display: none !important;
}

.layout-closing::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 50% 50%, var(--slide-accent, #e07b39) 0%, transparent 60%);
  opacity: 0.06 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.layout-closing > .closing-content {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2cqh !important;
  padding: 4cqh 5cqw !important;
  width: 100% !important;
}

.layout-closing .closing-title {
  font-size: 3.8cqw !important;
  font-size: clamp(20pt, 3.8cqw, 34pt) !important;
  font-weight: 800 !important;
  color: var(--slide-header-bg, #1a365d) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
}

.layout-closing .closing-body {
  font-size: 2.2cqw !important;
  font-size: clamp(12pt, 2.2cqw, 19pt) !important;
  line-height: 1.65 !important;
  color: var(--slide-text, #212121) !important;
  text-align: center !important;
  max-width: 80cqw !important;
}

.layout-closing .closing-note {
  font-size: 1.8cqw !important;
  font-size: clamp(10pt, 1.8cqw, 16pt) !important;
  font-style: italic !important;
  color: var(--slide-text, #212121) !important;
  opacity: 0.6 !important;
  margin-top: 1.5cqh !important;
  text-align: center !important;
}

/* ══════════════════════════════════════════
   FORMULA (LaTeX / KaTeX)
══════════════════════════════════════════ */
.slide-formula {
  margin-top: 0.8cqh;
  padding: 0.8cqh 1.5cqw;
  background: #0f172a;
  color: #f8fafc;
  border-radius: 6px;
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 1.8cqw;
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
}

/* ══════════════════════════════════════════
   PRINT
══════════════════════════════════════════ */
/* Semua print logic dihandle di style.css */

/* ══════════════════════════════════════════
   LAYOUT BARU v6.0
══════════════════════════════════════════ */

/* ── F3-01: Two Column ── */
.layout-two-column .slide-body {
  padding: 2cqh 3.5cqw;
}

.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5cqw;
  align-items: start;
  flex: 1;
  min-height: 0;
}

.two-col-panel {
  padding: 1.5cqh 2cqw;
  border-radius: 8px;
  background: var(--slide-block-bg, rgba(0,0,0,0.03));
  border-top: 0.4cqw solid var(--slide-accent, #e07b39);
  min-height: 0;
  overflow: hidden;
}

.two-col-heading {
  font-size: 2.2cqw;
  font-size: clamp(13pt, 2.2cqw, 18pt);
  font-weight: 700;
  color: var(--slide-accent, #e07b39);
  margin-bottom: 1cqh;
  line-height: 1.3;
}

.two-col-body {
  font-size: 1.8cqw;
  font-size: clamp(11pt, 1.8cqw, 15pt);
  line-height: 1.6;
  color: var(--slide-text, #212121);
}

.two-col-body .body-list,
.two-col-body .body-para {
  font-size: 1.8cqw;
  font-size: clamp(11pt, 1.8cqw, 15pt);
}

/* ── F3-02: Step by Step Layout ── */
.layout-step-by-step .slide-body {
  padding: 2cqh 4cqw;
  justify-content: center;
}

.step-by-step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2cqh;
}

.sbs-item {
  display: flex;
  align-items: flex-start;
  gap: 2cqw;
  position: relative;
}

.sbs-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 3.5cqw;
  top: 7cqw;
  bottom: -2cqh;
  width: 0.3cqw;
  background: var(--slide-accent, #e07b39);
  opacity: 0.25;
}

.sbs-number {
  width: 7cqw;
  height: 7cqw;
  min-width: 44pt;
  min-height: 44pt;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--slide-accent, #e07b39), var(--slide-primary, #1a365d));
  color: #ffffff;
  font-size: 3cqw;
  font-size: clamp(18pt, 3cqw, 28pt);
  font-weight: 900;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sbs-content {
  flex: 1;
  padding-top: 0.5cqh;
}

.sbs-title {
  font-size: 2.2cqw;
  font-size: clamp(13pt, 2.2cqw, 18pt);
  font-weight: 700;
  color: var(--slide-text, #212121);
  margin-bottom: 0.5cqh;
  line-height: 1.3;
}

.sbs-body {
  font-size: 1.8cqw;
  font-size: clamp(11pt, 1.8cqw, 15pt);
  line-height: 1.6;
  color: var(--slide-text, #212121);
}

/* ── F3-03: Quote Highlight Layout ── */
.layout-quote-highlight {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 !important;
}

.layout-quote-highlight .slide-header {
  display: none !important;
}

.layout-quote-highlight::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at center, var(--slide-accent, #e07b39) 0%, transparent 70%);
  opacity: 0.04 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.layout-quote-highlight > .quote-content {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2.5cqh !important;
  padding: 5cqh 6cqw !important;
  width: 100% !important;
}

.quote-big-icon {
  font-size: clamp(36pt, 6cqw, 56pt);
  color: var(--slide-accent, #e07b39);
  opacity: 0.3;
  line-height: 1;
}

.quote-big-text {
  font-size: 3.2cqw;
  font-size: clamp(18pt, 3.2cqw, 28pt);
  font-style: italic;
  line-height: 1.7;
  color: var(--slide-text, #212121);
  font-weight: 400;
  max-width: 80cqw;
}

.quote-big-text::before { content: '"'; font-size: 1.4em; color: var(--slide-accent, #e07b39); font-weight: 700; }
.quote-big-text::after { content: '"'; font-size: 1.4em; color: var(--slide-accent, #e07b39); font-weight: 700; }

.quote-big-divider {
  width: 8cqw;
  height: 0.4cqh;
  background: var(--slide-accent, #e07b39);
  border-radius: 2px;
}

.quote-big-author {
  font-size: 2cqw;
  font-size: clamp(12pt, 2cqw, 17pt);
  font-weight: 600;
  color: var(--slide-text, #212121);
  opacity: 0.7;
}

.quote-big-context {
  font-size: 1.6cqw;
  font-size: clamp(10pt, 1.6cqw, 14pt);
  color: var(--slide-text, #212121);
  opacity: 0.5;
  font-style: italic;
  max-width: 70cqw;
  line-height: 1.6;
}

/* ── F3-04: Timeline Layout ── */
.layout-timeline .slide-body {
  padding: 2cqh 4cqw;
  overflow-y: auto;
}

.timeline-container {
  position: relative;
  padding-left: 6cqw;
  display: flex;
  flex-direction: column;
  gap: 2cqh;
}

.timeline-container::before {
  content: '';
  position: absolute;
  left: 2.8cqw;
  top: 0;
  bottom: 0;
  width: 0.3cqw;
  background: linear-gradient(to bottom, var(--slide-accent, #e07b39), var(--slide-primary, #1a365d));
  opacity: 0.3;
}

.timeline-event {
  display: flex;
  align-items: flex-start;
  gap: 2cqw;
  position: relative;
}

.timeline-dot {
  position: absolute;
  left: -6cqw;
  width: 5cqw;
  height: 5cqw;
  min-width: 30pt;
  min-height: 30pt;
  background: var(--slide-accent, #e07b39);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.4cqw;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  z-index: 1;
}

.timeline-date {
  font-size: 1.6cqw;
  font-size: clamp(10pt, 1.6cqw, 14pt);
  font-weight: 700;
  color: var(--slide-accent, #e07b39);
  margin-bottom: 0.3cqh;
  line-height: 1.3;
}

.timeline-event-title {
  font-size: 2cqw;
  font-size: clamp(12pt, 2cqw, 17pt);
  font-weight: 700;
  color: var(--slide-text, #212121);
  margin-bottom: 0.5cqh;
  line-height: 1.3;
}

.timeline-event-body {
  font-size: 1.6cqw;
  font-size: clamp(10pt, 1.6cqw, 14pt);
  line-height: 1.55;
  color: var(--slide-text, #212121);
  opacity: 0.8;
}

/* ── F3-05: Diagram Label Layout ── */
.layout-diagram-label .slide-body {
  padding: 1.5cqh 2.5cqw;
}

.diagram-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diagram-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.diagram-label-item {
  position: absolute;
  background: var(--slide-accent, #e07b39);
  color: #ffffff;
  padding: 0.4cqh 0.8cqw;
  border-radius: 4px;
  font-size: 1.4cqw;
  font-size: clamp(9pt, 1.4cqw, 12pt);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 5;
  pointer-events: none;
}

.diagram-label-item::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--slide-accent, #e07b39);
}