* { box-sizing: border-box; }
body, html {
    margin: 0; padding: 0;
    font-family: 'Montserrat', sans-serif;
    background: #f0f2f5;
    overflow: hidden; /* Biar kayak slide beneran */
}

.presentation-wrapper {
    width: 100vw; height: 100vh;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}

.slide {
    display: none;
    width: 100%; height: 100%;
    background: #fff;
    padding: 60px 80px;
    position: relative;
    animation: fadeIn 0.4s ease;
}

.slide.active { display: block; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* SLIDE 1 - COVER */
.cover-layout { display: flex; height: 100%; position: relative; }
.top-nav { position: absolute; top: 0; left: 0; display: flex; gap: 20px; }
.logo-kemnaker { height: 50px; }
.logo-berakhlak { height: 40px; }

.content-left { width: 50%; display: flex; flex-direction: column; justify-content: center; z-index: 10; }
.content-left h1 { font-size: 5.5rem; font-weight: 800; margin: 0; color: #1a1a1a; line-height: 0.9; }
.subtitle { font-size: 1.1rem; color: #555; margin: 30px 0; max-width: 90%; line-height: 1.6; }
.author-pill { 
    background: #4b7bec; color: #fff; padding: 12px 35px; 
    border-radius: 50px; display: inline-block; width: fit-content; font-weight: 700;
}

.decoration-side { position: absolute; right: -80px; top: -60px; width: 55%; height: 120%; }
.blue-circle { 
    position: absolute; right: 0; top: 0; width: 100%; height: 100%; 
    background: #4b7bec; border-radius: 50%; z-index: 1;
}

.float-card { position: absolute; z-index: 5; border-radius: 20px; box-shadow: 0 15px 30px rgba(0,0,0,0.1); width: 220px; }
.card-1 { top: 15%; left: 10%; }
.card-2 { top: 35%; right: 15%; }
.card-3 { bottom: 20%; left: 25%; }

/* SLIDE 2 - PROFILE */
.header-slide h2 { font-size: 2.5rem; color: #1a1a1a; margin-bottom: 5px; }
.header-slide h2 span { display: block; font-size: 1rem; color: #888; font-weight: 400; }

.profile-grid { display: grid; grid-template-columns: 320px 1fr; gap: 40px; margin-top: 40px; }
.id-card-blue { background: #4b7bec; border-radius: 25px; padding: 40px; text-align: center; color: #fff; }
.profile-circle { width: 180px; height: 180px; border-radius: 50%; background: #eee; margin: 0 auto 20px; overflow: hidden; border: 5px solid rgba(255,255,255,0.2); }
.profile-circle img { width: 100%; height: 100%; object-fit: cover; }
.id-card-blue h3 { margin: 10px 0 5px; font-size: 1.4rem; }

.red-bar-card { background: #ff4d6d; color: #fff; padding: 25px 40px; border-radius: 20px; margin-bottom: 25px; }
.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.stat-card { background: #fff; border: 1px solid #eee; padding: 25px; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.03); }
.stat-card .status.green { color: #2ecc71; font-weight: 700; margin-top: 10px; }

/* SLIDE 6 - DATA */
.comparison-grid { display: flex; gap: 30px; margin-top: 30px; }
.comp-card { background: #fff; border-radius: 25px; padding: 20px; width: 380px; box-shadow: 0 15px 40px rgba(0,0,0,0.06); text-align: left; }
.comp-img { width: 100%; height: 200px; border-radius: 15px; object-fit: cover; margin-bottom: 15px; }
.point-box { margin-top: 20px; }
.point-box strong { font-size: 4rem; display: block; line-height: 1; }
.text-blue { color: #4b7bec; }
.btn-detail-pink { 
    float: right; margin-top: 20px; background: #ff4d6d; color: #fff; 
    border: none; padding: 15px 45px; border-radius: 12px; font-weight: 700; cursor: pointer;
}

/* NAV DOTS */
.nav-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.dot { width: 12px; height: 12px; background: #ccc; border-radius: 50%; cursor: pointer; }
.dot.active { background: #4b7bec; width: 30px; border-radius: 10px; }