/* ============================================
   DESIGN SYSTEM: Airbnb-inspired Light Theme
   Fully viewport-responsive via clamp()
   Reference: 1280 × 720 (16:9)
   ============================================ */

:root {
    /* --- Colors --- */
    --canvas: #ffffff;
    --surface-soft: #f7f7f7;
    --surface-strong: #f2f2f2;
    --hairline: #dddddd;
    --hairline-soft: #ebebeb;
    --border-strong: #c1c1c1;
    --ink: #222222;
    --body: #3f3f3f;
    --muted: #6a6a6a;
    --muted-soft: #929292;
    --primary: #ff385c;
    --primary-active: #e00b41;
    --primary-disabled: #ffd1da;
    --on-primary: #ffffff;
    --shadow: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2.14px 6.40px 0, rgba(0,0,0,0.1) 0 4.22px 8.58px 0;

    /* --- Responsive scale unit --- */
    --font-display-xl:  clamp(42px, 70.40px, 90px);
    --font-display-lg:  clamp(34px, 53.76px, 70px);
    --font-display-md:  clamp(30px, 48.64px, 62px);
    --font-display-sm:  clamp(26px, 40.96px, 52px);
    --font-title:       clamp(22px, 30.72px, 40px);
    --font-body-lg:     clamp(18px, 22.40px, 28px);
    --font-heading-box: clamp(20px, 28.16px, 40px);
    --font-body:        clamp(16px, 19.20px, 28px);
    --font-body-sm:     clamp(14px, 15.36px, 22px);
    --font-caption:     clamp(12px, 12.80px, 20px);
    --font-caption-sm:  clamp(11px, 10.88px, 16px);
    --font-micro:       clamp(10px, 8.96px, 14px);

    /* --- Spacing --- */
    --sp-xs:   clamp(4px, 4.48px, 8px);
    --sp-sm:   clamp(6px, 6.40px, 12px);
    --sp-md:   clamp(10px, 10.24px, 18px);
    --sp-base: clamp(12px, 12.80px, 22px);
    --sp-lg:   clamp(16px, 19.20px, 32px);
    --sp-xl:   clamp(20px, 25.60px, 40px);
    --sp-2xl:  clamp(32px, 38.40px, 56px);
    --sp-page: clamp(28px, 44.80px, 64px);

    /* --- Component sizes --- */
    --icon-sm:   clamp(20px, 21.76px, 36px);
    --icon-md:   clamp(36px, 38.40px, 60px);
    --icon-lg:   clamp(64px, 89.60px, 140px);
    --icon-xl:   clamp(48px, 70.40px, 112px);
    --radius-sm: clamp(6px, 6.40px, 12px);
    --radius-md: clamp(10px, 11.52px, 18px);
    --radius-lg: clamp(14px, 16.64px, 26px);
    --radius-pill: 9999px;
}



*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Inter', -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif;
    background: var(--surface-soft);
    color: var(--ink);
    line-height: 1.5;
}

/* ============================================
   SLIDE CONTAINER
   ============================================ */

.presentation {
    width: 1280.00px;
    height: 720.00px;
    position: relative;
}

.slide {
    width: 1280.00px;
    height: 720.00px;
    background: var(--canvas);
    overflow: visible;
    position: absolute;
    inset: 0;
    display: none;
}

.slide.active {
    display: flex;
}

/* ============================================
   PROGRESS BAR
   ============================================ */

.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: clamp(2px, 2.94px, 4px);
    background: var(--primary);
    transition: width 0.3s ease;
    z-index: 200;
}

/* ============================================
   NAVIGATION
   ============================================ */

.nav-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-md);
    z-index: 200;
    padding: var(--sp-sm) 0 var(--sp-md);
    background: linear-gradient(to top, rgba(255,255,255,0.96) 60%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.nav-hover-zone {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 57.60px;
    z-index: 199;
}

.nav-hover-zone:hover + .nav-controls,
.nav-controls:hover {
    opacity: 1;
    pointer-events: auto;
}

.nav-btn {
    width: clamp(32px, 32.00px, 44px);
    height: clamp(32px, 32.00px, 44px);
    border-radius: 50%;
    border: 1px solid var(--hairline);
    background: var(--canvas);
    color: var(--ink);
    font-size: var(--font-caption);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    pointer-events: auto;
}

.nav-btn:hover {
    border-color: var(--ink);
    box-shadow: var(--shadow);
}

.slide-counter {
    font-size: var(--font-caption-sm);
    font-weight: 500;
    color: var(--muted);
    min-width: clamp(40px, 51.20px, 70px);
    text-align: center;
    user-select: none;
}

/* ============================================
   TITLE SLIDE
   ============================================ */

.slide-title {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--sp-page);
    padding-top: clamp(12px, 19.20px, 24px);
    background: linear-gradient(135deg, var(--canvas) 0%, var(--surface-soft) 100%);
    gap: 0;
}

/* Header bar: logos + pertemuan badge */
.slide-title .title-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 72em;
    padding-bottom: clamp(12px, 19.20px, 24px);
    margin-bottom: clamp(24px, 38.40px, 48px);
    border-bottom: 1px solid var(--hairline);
}

.slide-title .title-header .header-logos {
    display: flex;
    align-items: center;
    gap: clamp(12px, 19.20px, 24px);
}

.slide-title .title-header .header-logos img {
    height: clamp(64px, 102.40px, 120px);
    width: auto;
    object-fit: contain;
    opacity: 0.85;
}

.slide-title .title-header .pertemuan-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    font-size: var(--font-caption);
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-disabled);
    border: 1px solid rgba(255, 56, 92, 0.15);
    border-radius: 999px;
    padding: clamp(4px, 6.40px, 8px) clamp(12px, 19.20px, 20px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.slide-title .overline {
    font-size: var(--font-caption);
    font-weight: 500;
    color: var(--muted);
    margin-bottom: var(--sp-md);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.slide-title h1 {
    font-size: var(--font-display-xl);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.15;
    margin-bottom: var(--sp-md);
    letter-spacing: -0.02em;
}

.slide-title .subtitle {
    font-size: var(--font-body);
    font-weight: 400;
    color: var(--body);
    max-width: 50em;
    margin-bottom: clamp(20px, 32.00px, 40px);
}

.slide-title .meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-lg);
    font-size: var(--font-caption);
    color: var(--muted);
}

.slide-title .meta-item {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
}

/* ============================================
   UNIFIED HEADING
   ============================================ */

.slide h2 {
    font-size: var(--font-display-sm);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: var(--sp-lg);
    flex-shrink: 0;
}

/* ============================================
   FULL-WIDTH CONTENT
   ============================================ */

.slide-full {
    flex-direction: column;
    padding: var(--sp-page) var(--sp-page) clamp(80px, 102.40px, 120px);
    position: relative;
    min-height: 720.00px;
}

.slide-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    gap: var(--sp-md);
}

.slide-center .diagram-container {
    flex: 0 1 auto;
}

.slide-full > *:not(.slide-footer) {
    width: 100%;
}

.slide-full h2 {
    font-size: var(--font-display-md);
}

.slide-full h3 {
    font-size: var(--font-body-lg);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--sp-sm);
}

.slide-full .two-col h3 {
    font-size: var(--font-heading-box);
}

.slide-full > .slide-footer {
    position: absolute;
    bottom: var(--sp-base);
    left: var(--sp-page);
    right: var(--sp-page);
}

/* ============================================
   TWO-COLUMN CONTENT
   ============================================ */

.slide-content {
    flex-direction: row;
}

.content-left {
    flex: 1;
    padding: var(--sp-page);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    overflow-y: auto;
}

.content-right {
    flex: 1;
    background: var(--surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-width: 0;
}

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

.content-left p,
.slide-full p.body-text {
    font-size: var(--font-body);
    color: var(--body);
    line-height: 1.6;
    margin-bottom: var(--sp-md);
}

.content-left strong {
    color: var(--ink);
}

/* ============================================
   CARDS GRID
   ============================================ */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-xl);
    flex: 1;
    min-height: 0;
}

.cards-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-lg);
    flex: 1;
    min-height: 0;
}

.cards-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 19.20px, 24px);
    flex: 1;
    min-height: 0;
}

.card {
    background: var(--canvas);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-lg);
    padding: var(--sp-xl);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2.18px);
}

.card-icon {
    width: var(--icon-md);
    height: var(--icon-md);
    min-height: var(--icon-md);
    background: var(--surface-soft);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 21.76px, 26px);
    margin-bottom: var(--sp-base);
}

.card-icon.primary {
    background: var(--primary-disabled);
}

.card h3 {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--sp-sm);
    line-height: 1.3;
}

.card p {
    font-size: var(--font-body-sm);
    color: var(--body);
    line-height: 1.5;
}

/* ============================================
   LIST ITEMS
   ============================================ */

.list-items {
    display: flex;
    flex-direction: column;
    gap: var(--sp-base);
}

.list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-md);
}

.list-number {
    width: clamp(28px, 35.97px, 44px);
    height: clamp(28px, 35.97px, 44px);
    min-width: clamp(28px, 35.97px, 44px);
    background: var(--primary);
    color: var(--on-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-body-sm);
    font-weight: 600;
}

.list-item h4 {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--sp-xs);
}

.list-item p {
    font-size: var(--font-caption) !important;
    color: var(--body);
    margin-bottom: 0 !important;
}

/* ============================================
   PILL TAGS
   ============================================ */

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
    margin-top: var(--sp-md);
}

.tag {
    display: inline-block;
    padding: var(--sp-xs) var(--sp-md);
    background: var(--surface-soft);
    border-radius: var(--radius-pill);
    font-size: var(--font-caption-sm);
    font-weight: 500;
    color: var(--body);
}

/* ============================================
   VISUAL PANEL
   ============================================ */

.visual-block {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-lg);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
}

.visual-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.visual-icon-large {
    width: var(--icon-lg);
    height: var(--icon-lg);
    background: var(--canvas);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--icon-xl);
    box-shadow: var(--shadow);
}

.visual-label {
    font-size: var(--font-body-sm);
    font-weight: 500;
    color: var(--muted);
    text-align: center;
    line-height: 1.4;
}

/* ============================================
   TIMELINE
   ============================================ */

.timeline {
    display: flex;
    align-items: flex-start;
    width: 100%;
    position: relative;
    padding: 0 var(--sp-2xl);
}

.timeline::before {
    content: '';
    position: absolute;
    top: clamp(18px, 24.06px, 30px);
    left: calc(var(--sp-2xl) + clamp(18px, 24.06px, 30px));
    right: calc(var(--sp-2xl) + clamp(18px, 24.06px, 30px));
    height: 2px;
    background: var(--hairline);
}

.timeline-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

.timeline-dot {
    width: clamp(24px, 35.84px, 44px);
    height: clamp(24px, 35.84px, 44px);
    border-radius: 50%;
    background: var(--canvas);
    border: clamp(2px, 2.56px, 4px) solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(12px, 15.36px, 20px);
    margin-bottom: var(--sp-md);
}

.timeline-dot.active {
    background: var(--primary);
    border-color: var(--primary);
}

.timeline-item h4 {
    font-size: var(--font-body-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--sp-xs);
}

.timeline-item p {
    font-size: var(--font-caption-sm) !important;
    color: var(--muted);
    line-height: 1.4;
    margin-bottom: 0 !important;
}

/* ============================================
   STAT BOXES
   ============================================ */

.stats-row {
    display: flex;
    gap: var(--sp-lg);
}

.stat-box {
    flex: 1;
    background: var(--surface-soft);
    border-radius: var(--radius-lg);
    padding: var(--sp-xl);
    text-align: center;
}

.stat-number {
    font-size: clamp(22px, 35.84px, 48px);
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    margin-bottom: var(--sp-xs);
}

.stat-label {
    font-size: var(--font-caption-sm);
    font-weight: 500;
    color: var(--muted);
    line-height: 1.3;
}

/* ============================================
   DIAGRAM FLOW
   ============================================ */

.diagram-container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(8px, 16.00px, 20px);
    flex: 1;
}

.diagram-box {
    background: var(--canvas);
    border: 2px solid var(--hairline);
    border-radius: var(--radius-lg);
    padding: var(--sp-lg) var(--sp-xl);
    text-align: center;
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.diagram-box-top {
    justify-content: flex-start;
}

.diagram-box-top h3 {
    align-self: stretch;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: var(--sp-xs) var(--sp-md);
    margin-bottom: var(--sp-xs);
    flex-shrink: 0;
    font-size: var(--font-heading-box);
}

.diagram-box-top p {
    margin-top: 0 !important;
    margin-bottom: auto !important;
}

.diagram-box.primary {
    border-color: var(--primary);
    background: rgba(255, 56, 92, 0.04);
}

.diagram-box h4 {
    font-size: var(--font-body-lg);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--sp-sm);
}

.diagram-box p {
    font-size: var(--font-body) !important;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 0 !important;
}

.diagram-arrow {
    font-size: clamp(14px, 15.36px, 20px);
    color: var(--muted-soft);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   TWO-COL LIST (for comparison slides)
   ============================================ */

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-2xl);
    flex: 1;
    min-height: 0;
}

.two-col .col {
    display: flex;
    flex-direction: column;
}

.two-col .col h3 {
    font-size: var(--font-title);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--sp-md);
}

.two-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.two-col ul li {
    font-size: var(--font-body);
    color: var(--body);
    line-height: 1.5;
    padding-left: var(--sp-lg);
    position: relative;
}

.two-col ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    background: var(--primary);
}

/* ============================================
   QUOTE BLOCK
   ============================================ */

.quote-block {
    background: var(--surface-soft);
    border-left: clamp(3px, 3.97px, 5px) solid var(--primary);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: var(--sp-lg) var(--sp-xl);
    margin: var(--sp-md) auto;
    max-width: clamp(32em, 960.00px, 70em);
}

.quote-block p {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--font-body);
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink);
}

.quote-block cite {
    display: block;
    margin-top: var(--sp-sm);
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    font-size: var(--font-caption-sm);
    font-style: normal;
    color: var(--muted);
}

/* ============================================
   HIGHLIGHT BOX
   ============================================ */

.highlight-box {
    background: rgba(255, 56, 92, 0.04);
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: var(--sp-md) var(--sp-lg);
    margin: var(--sp-sm) 0;
}
.highlight-title {
    font-size: var(--font-body-sm);
    font-weight: 600;
    color: var(--primary);
    text-transform: initial;
    letter-spacing: 0.04em;
    margin-bottom: var(--sp-xs);
}
.highlight-content {
    font-size: var(--font-body);
    color: var(--body);
    line-height: 1.6;
}
.highlight-content strong {
    color: var(--ink);
}

/* ============================================
   ADDITIONAL COMPONENTS
   ============================================ */

/* --- Reusable text utilities --- */
.slide-full p.text-caption {
    text-align: center;
    color: var(--muted);
    font-size: var(--font-caption-sm);
}

.slide-full p.text-caption-highlight {
    text-align: center;
    color: var(--muted);
    font-size: var(--font-body-lg);
}

.slide-full p.text-source {
    text-align: center;
    font-size: var(--font-micro);
    color: var(--muted-soft);
    margin-top: var(--sp-sm);
    margin-bottom: 0;
    line-height: 1.4;
}

.reference-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    text-align: left;
    font-size: var(--font-caption-sm);
    color: var(--body);
    line-height: 1.6;
}

/* --- Spacing utilities --- */
.mt-sm  { margin-top: var(--sp-sm) !important; }
.mt-md  { margin-top: var(--sp-md) !important; }
.mt-lg  { margin-top: var(--sp-lg) !important; }
.mt-xl  { margin-top: var(--sp-xl) !important; }
.mb-sm  { margin-bottom: var(--sp-sm) !important; }
.mb-md  { margin-bottom: var(--sp-md) !important; }
.mb-lg  { margin-bottom: var(--sp-lg) !important; }
.mb-xl  { margin-bottom: var(--sp-xl) !important; }
.text-left { text-align: left !important; }

.mono {
    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
    background: var(--surface-soft);
    padding: 0 4px;
    border-radius: 3px;
}

.data-table {
    width: 100%;
    margin: var(--sp-sm) 0;
}
.data-table table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th {
    background: var(--surface-soft);
    font-size: var(--font-body-sm);
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    padding: clamp(8px, 10.24px, 14px) clamp(10px, 12.80px, 18px);
    border: 1px solid var(--hairline-soft);
}
.data-table td {
    font-size: var(--font-body-sm);
    color: var(--body);
    padding: clamp(6px, 7.68px, 10px) clamp(10px, 12.80px, 18px);
    border: 1px solid var(--hairline-soft);
}

.diagram-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-sm);
    flex: 1;
}
.diagram-icon {
    width: clamp(56px, 76.80px, 90px);
    height: clamp(56px, 76.80px, 90px);
    background: var(--canvas);
    border: 2px solid var(--hairline);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(20px, 28.16px, 36px);
    font-weight: 700;
    color: var(--ink);
}
.diagram-item strong {
    font-size: var(--font-caption);
    color: var(--ink);
}
.diagram-item div:not(.diagram-icon) {
    font-size: var(--font-caption-sm);
    color: var(--muted);
}

.card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}
.card-num {
    width: clamp(48px, 57.60px, 72px);
    height: clamp(48px, 57.60px, 72px);
    min-height: clamp(48px, 57.60px, 72px);
    background: var(--primary-disabled);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-title);
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0;
}

/* ============================================
   BULLET LIST (standalone in full slides)
   ============================================ */

.slide-full ul.bullet-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.slide-full ul.bullet-list li {
    font-size: var(--font-body);
    color: var(--body);
    line-height: 1.5;
    padding-left: var(--sp-xl);
    position: relative;
}

.slide-full ul.bullet-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4em;
    width: clamp(12px, 19.20px, 24px);
    height: clamp(12px, 19.20px, 24px);
    border-radius: 50%;
    background: var(--primary);
}

/* ============================================
   SLIDE FOOTER
   ============================================ */

.slide-footer {
    position: absolute;
    bottom: var(--sp-base);
    left: var(--sp-page);
    right: var(--sp-page);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-micro);
    color: var(--muted-soft);
    z-index: 10;
}

/* POST-TEST QUIZ */
.slide-quiz {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-page) var(--sp-page) clamp(80px, 102.40px, 120px);
    gap: clamp(12px, 19.20px, 24px);
    overflow: hidden;
}
.slide-quiz h2 {
    font-size: var(--font-display-sm);
    color: var(--ink);
    margin-bottom: var(--sp-xs);
}
.quiz-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(6px, 10.24px, 12px);
    width: 100%;
    max-width: 60em;
}
.quiz-q {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: clamp(6px, 10.24px, 12px);
}
.quiz-q .q-text {
    font-size: var(--font-body-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--sp-xs);
}
.quiz-q .q-options {
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 3.84px, 6px);
}
.quiz-q .q-opt {
    font-size: var(--font-caption);
    color: var(--body);
    padding: clamp(2px, 3.20px, 4px) 0;
}
.quiz-q .q-opt.correct {
    color: #0d9f6e;
    font-weight: 600;
}

/* RANGKUMAN */
.slide-rangkuman {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--sp-page) var(--sp-page) clamp(80px, 102.40px, 120px);
    text-align: center;
    gap: var(--sp-sm);
    background: linear-gradient(135deg, var(--canvas) 0%, #f0fdf4 100%);
    min-height: 720.00px;
}
.slide-rangkuman h2 {
    font-size: var(--font-display-sm);
    color: var(--ink);
    margin-bottom: var(--sp-lg);
    width: 100%;
}
.rangkuman-list {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 10.24px, 12px);
    text-align: left;
    max-width: clamp(30em, 896.00px, 55em);
    width: 100%;
    flex: 1;
}
.rangkuman-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
    font-size: var(--font-body);
    color: var(--body);
    line-height: 1.5;
}
.rangkuman-item .rnum {
    flex-shrink: 0;
    width: clamp(28px, 35.97px, 44px);
    height: clamp(28px, 35.97px, 44px);
    min-width: clamp(28px, 35.97px, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 50%;
    font-size: var(--font-body-sm);
    font-weight: 600;
}

/* PENUTUP */
.slide-closing {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-page) var(--sp-page) clamp(80px, 102.40px, 120px);
    text-align: center;
    gap: var(--sp-md);
    background: linear-gradient(135deg, var(--canvas) 0%, var(--surface-soft) 100%);
}
.slide-closing h1 {
    font-size: var(--font-display-lg);
    color: var(--ink);
}
.slide-closing .closing-subtitle {
    font-size: var(--font-body);
    color: var(--body);
    max-width: 40em;
}
.slide-closing .closing-meta {
    font-size: var(--font-caption);
    color: var(--muted);
    margin-top: var(--sp-md);
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */




/* PRINT / PDF EXPORT */


.nav-btn.print-btn-nav { font-size: clamp(12px, 12.80px, 16px); }

/* logo-row removed — now in .title-header */