/* ==========================================================================
   CANVA-GRADE DKV DESIGN SYSTEM — CBT BIDIK PTN (KONSEP MESIN PEMBELAJARAN)
   Designed by Steven (Lead QC, CBT Architect, Ahli DKV & Art Designer Programmer)
   ========================================================================== */

:root {
    /* --- Extra Canva Landing Prototype Variables --- */
    --bg-canvas: #fbf8fa;
    --bg-card: #ffffff;
    --bg-card-subtle: #f8f3f6;
    --navy-deep: #161233;
    --navy-surface: #201a45;
    --purple-vip: #701a75;
    --purple-accent: #9333ea;
    --text-main: #1e1b2e;
    --text-muted: #645e78;
    --text-light: #938ca8;
    --border-light: rgba(147, 51, 234, 0.08);
    --border-card: #f0e6ee;
    --coral-pink: #ff3e78;
    --coral-glow: rgba(255, 62, 120, 0.28);
    --sunset-grad: linear-gradient(135deg, #ff3e78 0%, #fa709a 50%, #fee140 100%);
    --aurora-grad: linear-gradient(135deg, #701a75 0%, #c026d3 50%, #ff3e78 100%);
    --amber-gold: #f59e0b;
    --emerald-win: #10b981;
    --cyan-tech: #06b6d4;
    --r-sm: 10px;
    --r-md: 18px;
    --r-lg: 26px;
    --r-xl: 36px;
    --r-full: 9999px;
    --shadow-subtle: 0 4px 20px rgba(30, 27, 46, 0.04);
    --shadow-card: 0 10px 30px rgba(30, 27, 46, 0.06), 0 2px 8px rgba(30, 27, 46, 0.02);
    --shadow-hover: 0 20px 40px rgba(112, 26, 117, 0.12), 0 4px 12px rgba(255, 62, 120, 0.08);
    --shadow-pop: 0 14px 34px rgba(255, 62, 120, 0.35);

    /* --- 60% Dominant Canvas & Foundation --- */
    --canva-canvas: #fbf8fa;
    --canva-card: #ffffff;
    --canva-card-subtle: #f9f5f8;
    --canva-surface-dark: #161233;
    --canva-surface-navy: #1f1a42;
    
    /* --- 30% Structural Authority & Typography --- */
    --navy-deep: #161233;
    --purple-authority: #4a154b;
    --purple-vip: #701a75;
    --purple-soft: #f5edfa;
    --text-primary: #19152b;
    --text-secondary: #565069;
    --text-muted: #8c85a1;
    --border-light: rgba(147, 51, 234, 0.09);
    --border-card: #f0e6ee;
    
    /* --- 10% Canva Pop Accents & Vibrancy --- */
    --sunset-pink: #ff3e78;
    --sunset-glow: rgba(255, 62, 120, 0.28);
    --sunset-grad: linear-gradient(135deg, #ff3e78 0%, #fa709a 50%, #fee140 100%);
    --vip-grad: linear-gradient(135deg, #701a75 0%, #c026d3 50%, #ff3e78 100%);
    --navy-grad: linear-gradient(135deg, #161233 0%, #292055 100%);
    --gold-grad: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --emerald-win: #10b981;
    --emerald-bg: #ecfdf5;
    --amber-gold: #f59e0b;
    --amber-bg: #fffbeb;
    --cyan-tech: #06b6d4;
    --indigo-exam: #4f46e5;

    /* --- Radii & Spacing (8pt Grid) --- */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 30px;
    --r-full: 9999px;

    /* --- Multi-Layered Soft Depth Shadows --- */
    --shadow-sm: 0 2px 6px rgba(22, 18, 51, 0.04);
    --shadow-card: 0 8px 24px -4px rgba(22, 18, 51, 0.06), 0 2px 6px -1px rgba(22, 18, 51, 0.03);
    --shadow-float: 0 16px 36px -6px rgba(22, 18, 51, 0.1), 0 4px 12px -2px rgba(22, 18, 51, 0.04);
    --shadow-hover: 0 20px 40px -8px rgba(255, 62, 120, 0.2), 0 8px 16px -4px rgba(22, 18, 51, 0.06);
    --shadow-glow-pink: 0 0 28px rgba(255, 62, 120, 0.35);

    /* --- Smooth Easing --- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animations */
@keyframes canvaFloat {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50% { transform: translateY(-6px) rotate(-0.5deg); }
}

@keyframes canvaFloatRight {
    0%, 100% { transform: translateY(0) rotate(2deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

@keyframes shimmerEffect {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}



.ptn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 6px;
    margin-bottom: 8px;
}
.ptn-card {
    background: #ffffff;
    border: 1.5px solid var(--border-soft);
    border-radius: 10px;
    padding: 8px 3px 6px;
    text-align: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ptn-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(255, 77, 143, 0.18);
    border-color: var(--pink);
    background: #fff8fa;
}
.ptn-logo-img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.07));
}
.ptn-name {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: var(--text);
    margin-top: 4px;
    letter-spacing: 0.5px;
    line-height: 1.1;
}
.ptn-motivation {
    background: var(--pink-pale);
    border: 1.5px dashed var(--pink);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    margin-top: 10px;
}
.ptn-motivation-badge {
    display: inline-block;
    background: var(--pink);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.ptn-motivation-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--pink-dark);
    line-height: 1.35;
    margin: 0;
}
.sidebar-target-card {
    background: linear-gradient(145deg, #ffffff 0%, #fff2f7 100%);
    border: 1.5px solid #ffb3d1;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(255, 77, 143, 0.08);
}
.st-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.st-title {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--pink-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-badge {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 99px;
    background: #ff4d8f;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}
.st-slot {
    background: #ffffff;
    border: 1px solid #ffd1e4;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
}
.st-slot-tag {
    font-size: 10px;
    font-weight: 800;
    color: #8b687f;
}
.st-prodi-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-chance-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 6px;
    margin-top: 3px;
}
.btn-sidebar-target {
    display: block;
    width: 100%;
    text-align: center;
    background: linear-gradient(135deg, #ff4d8f, #e63578);
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 800;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 8px;
    transition: var(--ease);
}
.btn-sidebar-target:hover {
    box-shadow: 0 4px 12px rgba(255, 77, 143, 0.35);
    transform: translateY(-1px);
    color: #ffffff !important;
}

/* Dashboard Main Content PTN Section */
.target-ptn-dashboard-section {
    background: linear-gradient(135deg, #ffffff 0%, #fff7fa 100%);
    border: 2px solid #ffd4e5;
    border-radius: 22px;
    padding: 30px 28px;
    margin-top: 30px;
    box-shadow: 0 10px 30px rgba(255, 77, 143, 0.08);
}
.tpn-head-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffe3ee;
    color: var(--pink-dark);
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 99px;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.tpn-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 22px;
}
@media (max-width: 768px) {
    .tpn-header-flex {
        flex-direction: column;
    }
}
.tpn-title-area h2 {
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.3;
}
.tpn-title-area p {
    font-size: 13px;
    color: var(--text2);
    margin: 0;
    max-width: 650px;
    line-height: 1.5;
}
.btn-tpn-explorer {
    background: linear-gradient(135deg, #ff4d8f, #e63578);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 800;
    padding: 11px 20px;
    border-radius: 12px;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(255, 77, 143, 0.3);
    transition: var(--ease);
}
.btn-tpn-explorer:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 77, 143, 0.45);
    color: #ffffff !important;
}

/* 2 Target Slots */
.tpn-slots-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}
@media (max-width: 768px) {
    .tpn-slots-grid {
        grid-template-columns: 1fr;
    }
}
.tpn-slot-card {
    background: #ffffff;
    border: 2px dashed #ffb8d4;
    border-radius: 16px;
    padding: 20px;
    transition: var(--ease);
}
.tpn-slot-card.active-target {
    border-style: solid;
    border-color: #ff85b8;
    background: linear-gradient(145deg, #ffffff 0%, #fffbfd 100%);
    box-shadow: 0 4px 18px rgba(255, 77, 143, 0.08);
}
.tpn-slot-tag {
    font-size: 11px;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 99px;
    display: inline-block;
    margin-bottom: 12px;
}
.tag-p1 {
    background: #ffe3ee;
    color: #d81b60;
}
.tag-p2 {
    background: #f3e8ff;
    color: #7e22ce;
}
.tpn-slot-body {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.tpn-slot-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #fff0f6;
    border: 1px solid #ffd1e4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 5px;
    flex-shrink: 0;
}
.tpn-slot-logo img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.tpn-slot-info h4 {
    font-size: 16px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 2px;
}
.tpn-slot-info p {
    font-size: 12px;
    font-weight: 700;
    color: #7a4f6d;
    margin: 0;
}
.tpn-chance-box {
    background: #fffafc;
    border: 1px solid #ffe0ed;
    border-radius: 10px;
    padding: 10px 12px;
}
.tpn-chance-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 6px;
}
.tpn-progress-bar {
    width: 100%;
    height: 8px;
    background: #f1f3f5;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 6px;
}
.tpn-progress-fill {
    height: 100%;
    border-radius: 99px;
}
.tpn-chance-note {
    font-size: 11px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tpn-empty-box {
    text-align: center;
    padding: 24px 15px;
    color: #99748b;
}

/* Featured Mini Grid */
.tpn-popular-section {
    margin-top: 15px;
    border-top: 1px solid #ffe0ed;
    padding-top: 20px;
}
.tpn-comparison-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 20px;
    align-items: stretch;
}
@media (max-width: 992px) {
    .tpn-comparison-split-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
}
.tpn-split-col {
    border-radius: 18px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    transition: var(--ease);
}
.tpn-split-col.col-terketat {
    background: linear-gradient(180deg, #fffafa 0%, #ffffff 100%);
    border: 2px solid #fecdd3;
    border-top: 6px solid #e11d48;
    box-shadow: 0 6px 22px rgba(225, 29, 72, 0.08);
}
.tpn-split-col.col-terketat:hover {
    box-shadow: 0 10px 28px rgba(225, 29, 72, 0.14);
}
.tpn-split-col.col-tertinggi {
    background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%);
    border: 2px solid #ddd6fe;
    border-top: 6px solid #7c3aed;
    box-shadow: 0 6px 22px rgba(124, 58, 237, 0.08);
}
.tpn-split-col.col-tertinggi:hover {
    box-shadow: 0 10px 28px rgba(124, 58, 237, 0.14);
}
.tpn-sub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    flex: 1;
}
.tpn-popular-title {
    font-size: 14px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tpn-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.tpn-mini-card {
    background: #ffffff;
    border: 1px solid #ffd6e6;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--ease);
}
.tpn-mini-card:hover {
    border-color: var(--pink);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 77, 143, 0.1);
}
.tpn-mini-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.tpn-mini-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff0f5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border: 1px solid #ffd1e4;
    flex-shrink: 0;
}
.tpn-mini-logo img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.tpn-mini-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
}
.tpn-mini-univ {
    font-size: 11px;
    color: #8b687f;
    font-weight: 700;
}
.tpn-mini-stats {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: #555;
    background: #faf4f7;
    border-radius: 6px;
    padding: 6px 8px;
    margin-top: 6px;
}

/* Strategic Urgency Footer */
.tpn-footer-cta {
    background: linear-gradient(135deg, #2b172a 0%, #3e1b38 100%);
    border-radius: 14px;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    color: #ffffff;
}
@media (max-width: 768px) {
    .tpn-footer-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}
.tpn-footer-text h4 {
    font-size: 15px;
    font-weight: 900;
    color: #ff85b8;
    margin-bottom: 4px;
}
.tpn-footer-text p {
    font-size: 12px;
    color: #edd3e4;
    margin: 0;
    line-height: 1.4;
}
.btn-tpn-tryout {
    background: linear-gradient(135deg, #ff4d8f, #e63578);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 15px rgba(255, 77, 143, 0.4);
    transition: var(--ease);
}
.btn-tpn-tryout:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 77, 143, 0.6);
}

/* Sidebar Kartu Peserta Login (Nama & Rata-rata Nilai) */
.sidebar-peserta-card {
    background: #ffffff;
    border: 1.5px solid #ffd1e4;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(255, 77, 143, 0.08);
}
.spc-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ffe3ee;
}
.spc-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff4d8f, #e63578);
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(255, 77, 143, 0.3);
    flex-shrink: 0;
}
.spc-info {
    min-width: 0;
    flex: 1;
}
.spc-name {
    font-size: 13.5px;
    font-weight: 900;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.spc-role {
    font-size: 11px;
    font-weight: 700;
    color: #7a4f6d;
    margin-top: 2px;
}
.spc-score-box {
    background: #faf4f7;
    border: 1px solid #ffe0ed;
    border-radius: 10px;
    padding: 8px 10px;
}
.spc-score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.spc-score-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #7a4f6d;
}
.spc-score-badge {
    font-size: 15px;
    font-weight: 900;
    color: #d81b60;
    background: #ffffff;
    border: 1px solid #ffd1e4;
    padding: 1px 8px;
    border-radius: 6px;
}
.spc-score-badge.spc-empty {
    font-size: 11px;
    color: #888;
    background: transparent;
    border: none;
    padding: 0;
}
.spc-bar-wrap {
    width: 100%;
    height: 6px;
    background: #eedbe5;
    border-radius: 99px;
    overflow: hidden;
    margin: 6px 0;
}
.spc-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff4d8f, #e63578);
    border-radius: 99px;
}
.spc-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    color: #666;
}
.spc-meta-row strong {
    color: #0284c7;
}

/* ========================================================
   CBT MODULES HUB — SPECIAL BACKGROUND CONTAINER & FOCUSED LAYOUT
   ======================================================== */
.cbt-modules-hub {
    background: linear-gradient(145deg, #ffffff 0%, #fff7fb 55%, #fdf2f7 100%);
    border: 1.5px solid #ffccd9;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(216, 27, 96, 0.06), 0 2px 6px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
}

.cbt-modules-hub::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 77, 143, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.cmh-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ffe5ee;
}

.cmh-header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cmh-title-area {
    flex: 1 1 58%;
    min-width: 280px;
}

.cmh-diagnostik-card {
    flex: 0 0 410px;
    max-width: 440px;
    background: linear-gradient(145deg, #ffffff 0%, #fff7f9 45%, #fff1f2 100%);
    border: 2px solid #ff4d8f;
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 8px 30px rgba(255, 77, 143, 0.22), 0 2px 8px rgba(225, 29, 72, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cmh-diagnostik-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(255, 77, 143, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.cmh-diagnostik-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 14px 38px rgba(255, 77, 143, 0.32), 0 4px 12px rgba(225, 29, 72, 0.18);
    border-color: #e11d48;
}

.cdc-badge-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.cdc-badge-free {
    background: linear-gradient(135deg, #e11d48, #ff0080);
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 9px;
    border-radius: 99px;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cdc-badge-bp3 {
    background: #0f172a;
    color: #fef08a;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 99px;
    letter-spacing: 0.3px;
    border: 1px solid rgba(254, 240, 138, 0.3);
}

.cdc-title {
    font-size: 15.5px;
    font-weight: 950;
    color: #881337;
    margin: 0 0 6px 0;
    line-height: 1.28;
    letter-spacing: -0.2px;
}

.cdc-title span.hl {
    background: linear-gradient(135deg, #e11d48, #7e22ce);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cdc-bullets {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 8px 0 12px 0;
    padding: 0;
    list-style: none;
}

.cdc-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 11.5px;
    color: #334155;
    line-height: 1.35;
}

.cdc-bullet-icon {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #dcfce7;
    color: #15803d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 1px;
}

.cdc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(135deg, #e11d48 0%, #ff4d8f 50%, #7e22ce 100%);
    color: #ffffff !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.3px;
    padding: 10px 16px;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(225, 29, 72, 0.4);
    transition: all 0.25s ease;
    border: none;
    cursor: pointer;
}

.cdc-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.6);
    background: linear-gradient(135deg, #be123c 0%, #e11d48 50%, #6b21a8 100%);
    color: #ffffff !important;
}

.cdc-guarantee {
    font-size: 10px;
    font-weight: 700;
    color: #9f1239;
    text-align: center;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.cmh-header-bottom-row {
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 900px) {
    .cmh-header-main {
        flex-direction: column;
        align-items: stretch;
    }
    .cmh-diagnostik-card {
        flex: 1 1 100%;
        max-width: 100%;
        order: -1;
        margin-bottom: 18px;
        box-shadow: 0 4px 16px rgba(217, 119, 6, 0.2);
    }
    .cdc-btn {
        padding: 12px 18px;
        font-size: 14px;
        min-height: 48px;
    }
}

.cmh-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--pink-dark);
    background: #ffffff;
    border: 1px solid #ffd1e4;
    padding: 3px 10px;
    border-radius: 99px;
    margin-bottom: 4px;
}

.cmh-title-area h2 {
    font-size: 20px;
    font-weight: 900;
    color: var(--text);
    margin: 4px 0 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cmh-title-area p {
    font-size: 13px;
    color: var(--text2);
    margin: 0;
}

.cmh-view-switch {
    display: flex;
    background: #ffffff;
    border: 1.5px solid #ffd1e4;
    border-radius: 10px;
    padding: 3px;
    gap: 4px;
}

.cmh-view-btn {
    border: none;
    background: transparent;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
    color: #7a4f6d;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cmh-view-btn.active {
    background: linear-gradient(135deg, #ff4d8f, #d81b60);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(216, 27, 96, 0.3);
}

/* --- GRID VIEW STYLING --- */
.cmh-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .cmh-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    .cmh-grid {
        grid-template-columns: 1fr;
    }
}

.cmh-card {
    background: #ffffff;
    border: 1.5px solid #ffe0ed;
    border-radius: 16px;
    padding: 22px 18px 18px;
    display: flex;
    flex-direction: column;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 10px rgba(255, 77, 143, 0.05);
    overflow: hidden;
}

.cmh-card:hover {
    transform: translateY(-4px);
    border-color: #ff4d8f;
    box-shadow: 0 10px 25px rgba(216, 27, 96, 0.15);
}

.cmh-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cmh-card-badge.unlocked {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.cmh-card-badge.premium {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #b45309;
}

.cmh-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff2f7;
    border: 1px solid #ffd1e4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 14px;
    box-shadow: 0 4px 10px rgba(255, 77, 143, 0.12);
    transition: transform 0.2s ease;
}

.cmh-card:hover .cmh-card-icon {
    transform: scale(1.1);
}

.cmh-card-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--text);
    margin: 0 0 4px;
    line-height: 1.3;
}

.cmh-card-subtitle {
    font-size: 12px;
    color: #7a4f6d;
    font-weight: 700;
    margin: 0 0 12px;
}

.cmh-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    border-top: 1px dashed #ffe8f1;
    padding-top: 10px;
    flex: 1;
}

.cmh-card-features li {
    font-size: 11.5px;
    color: #666;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cmh-card-features li span {
    color: #16a34a;
    font-weight: 900;
    font-size: 12px;
}

.cmh-card-btn {
    width: 100%;
    padding: 9px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 800;
    background: #faf4f7;
    color: var(--pink-dark);
    border: 1px solid #ffd1e4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.cmh-card:hover .cmh-card-btn {
    background: linear-gradient(135deg, #ff4d8f, #d81b60);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(216, 27, 96, 0.25);
}

.cmh-card:active, .cmh-list-item:active {
    transform: scale(0.985);
    opacity: 0.9;
}

/* --- LIST VIEW STYLING --- */
.cmh-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cmh-list-item {
    background: #ffffff;
    border: 1.5px solid #ffe0ed;
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(255, 77, 143, 0.04);
}

.cmh-list-item:hover {
    transform: translateY(-2px) translateX(3px);
    border-color: #ff4d8f;
    box-shadow: 0 6px 18px rgba(216, 27, 96, 0.12);
}

.cmh-list-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.cmh-list-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff2f7;
    border: 1px solid #ffd1e4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(255, 77, 143, 0.1);
}

.cmh-list-info {
    min-width: 0;
}

.cmh-list-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.cmh-list-name {
    font-size: 15px;
    font-weight: 900;
    color: var(--text);
    margin: 0;
}

.cmh-list-desc {
    font-size: 12px;
    color: #7a4f6d;
    margin: 0;
    line-height: 1.4;
}

.cmh-list-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.cmh-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    background: #faf4f7;
    border: 1px solid #ffe3ee;
    color: #8b687f;
}

.cmh-list-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cmh-action-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    background: #ffffff;
    color: var(--pink-dark);
    border: 1.5px solid #ffd1e4;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.cmh-list-item:hover .cmh-action-btn {
    background: linear-gradient(135deg, #ff4d8f, #d81b60);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(216, 27, 96, 0.25);
    transform: translateX(2px);
}

@media (max-width: 768px) {
    .cmh-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .cmh-list-right {
        width: 100%;
        justify-content: space-between;
    }
}

/* ========================================================
   ACADEMIC DISCLAIMER BANNER (REVIEW KAMPUS & PREDIKSI SKOR)
   ======================================================== */
.academic-disclaimer-card {
    background: #fff8fb;
    border: 1px solid #ffd6e6;
    border-left: 4px solid #d81b60;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 18px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 11.5px;
    line-height: 1.55;
    color: #6d4a61;
    box-shadow: 0 2px 8px rgba(255, 77, 143, 0.04);
}

.academic-disclaimer-card .adc-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.2;
    margin-top: 1px;
}

.academic-disclaimer-card .adc-content {
    flex: 1;
}

.academic-disclaimer-card strong {
    color: #b91c1c;
    font-weight: 800;
}

/* ========================================================
   SIMULASI SKOR PELUANG MASUK PTN (SIDEBAR & MODAL)
   ======================================================== */
.sidebar-simulasi-box {
    margin-top: 10px;
    padding: 12px;
    background: linear-gradient(135deg, #fff5f8 0%, #ffffff 100%);
    border: 1.5px solid #ffccd9;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(255, 77, 143, 0.08);
}
.sim-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.sim-badge-pulse {
    font-size: 11px;
    font-weight: 900;
    color: #d81b60;
    display: flex;
    align-items: center;
    gap: 4px;
}
.sim-badge-hint {
    font-size: 9px;
    font-weight: 800;
    background: #ffd1e4;
    color: #a21249;
    padding: 1px 6px;
    border-radius: 6px;
}
.sim-desc-text {
    font-size: 10.5px;
    color: #7a4f6d;
    margin: 0 0 8px;
    line-height: 1.35;
}
.sim-input-row {
    display: flex;
    gap: 6px;
}
.sim-skor-field {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 800;
    color: #2d1b2e;
    border: 1.5px solid #ffccd9;
    border-radius: 8px;
    background: #ffffff;
    outline: none;
    transition: var(--ease);
}
.sim-skor-field:focus {
    border-color: #ff4d8f;
    box-shadow: 0 0 0 3px rgba(255, 77, 143, 0.15);
}
.btn-sim-action {
    padding: 7px 12px;
    background: linear-gradient(135deg, #7e22ce, #a855f7);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(126, 34, 206, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--ease);
}
.btn-sim-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(126, 34, 206, 0.4);
}
.sim-quick-row {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    align-items: center;
}
.sim-quick-label {
    font-size: 10px;
    color: #99748b;
    font-weight: 700;
}
.sim-pill-btn {
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 800;
    background: #ffffff;
    border: 1px solid #ffd1e4;
    border-radius: 6px;
    color: #7e22ce;
    cursor: pointer;
    transition: var(--ease);
}
.sim-pill-btn:hover {
    background: #fdf4ff;
    border-color: #a855f7;
    color: #581c87;
}

/* Button Main Section */
.btn-tpn-simulasi {
    background: linear-gradient(135deg, #7e22ce, #a855f7);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 800;
    padding: 11px 18px;
    border-radius: 12px;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(126, 34, 206, 0.3);
    border: none;
    cursor: pointer;
    transition: var(--ease);
}
.btn-tpn-simulasi:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(126, 34, 206, 0.45);
}

/* Modal Simulasi Peluang */
.modal-simulasi-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(35, 18, 36, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.modal-simulasi-overlay.active {
    display: flex;
    opacity: 1;
}
.modal-simulasi-box {
    background: #ffffff;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 24px;
    border: 2px solid #ffd1e4;
    box-shadow: 0 25px 60px rgba(45, 27, 46, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    animation: simModalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes simModalSlideUp {
    from { transform: translateY(20px) scale(0.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.sim-modal-header {
    padding: 16px 22px;
    background: linear-gradient(135deg, #fff0f5 0%, #ffffff 100%);
    border-bottom: 1.5px solid #ffe3ec;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.sim-modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 900;
    color: #2d1b2e;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-sim-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ffccd9;
    background: #ffffff;
    color: #7a4f6d;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--ease);
}
.btn-sim-modal-close:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fca5a5;
    transform: rotate(90deg);
}
.sim-modal-toolbar {
    padding: 14px 22px;
    background: #ffffff;
    border-bottom: 1px solid #f0e6ec;
    flex-shrink: 0;
}
.sim-toolbar-top {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sim-score-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #faf4f7;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1.5px solid #ffccd9;
}
.sim-score-input-wrap label {
    font-size: 12px;
    font-weight: 800;
    color: #2d1b2e;
}
.sim-score-btn-step {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid #ffb3d1;
    background: #ffffff;
    color: #d81b60;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sim-score-btn-step:hover {
    background: #ff4d8f;
    color: #ffffff;
}
.sim-score-main-input {
    width: 65px;
    text-align: center;
    font-size: 16px;
    font-weight: 900;
    color: #d81b60;
    border: none;
    background: transparent;
    outline: none;
}
.sim-chips-group {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}
.sim-chip-tag {
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 800;
    background: #ffffff;
    border: 1px solid #ffccd9;
    border-radius: 99px;
    color: #7a4f6d;
    cursor: pointer;
    transition: var(--ease);
}
.sim-chip-tag:hover, .sim-chip-tag.active {
    background: linear-gradient(135deg, #7e22ce, #a855f7);
    color: #ffffff;
    border-color: #7e22ce;
}
.sim-toolbar-bottom {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.sim-search-input {
    flex: 1;
    min-width: 180px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1.5px solid #ffccd9;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: var(--ease);
}
.sim-search-input:focus {
    border-color: #ff4d8f;
    box-shadow: 0 0 0 3px rgba(255, 77, 143, 0.12);
}
.sim-rumpun-select {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1.5px solid #ffccd9;
    font-size: 12px;
    font-weight: 700;
    color: #4a2942;
    background: #ffffff;
    outline: none;
    cursor: pointer;
}

/* Stat Counter Banner */
.sim-stat-banner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 22px;
    background: #faf4f7;
    border-bottom: 1.5px solid #ffe3ec;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .sim-stat-banner {
        grid-template-columns: 1fr;
    }
}
.sim-stat-card {
    padding: 7px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--ease);
}
.sim-stat-card:hover, .sim-stat-card.active {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}
.sim-stat-card.card-aman {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.sim-stat-card.card-komp {
    background: #fffbeb;
    border-color: #fde68a;
}
.sim-stat-card.card-tant {
    background: #fef2f2;
    border-color: #fecaca;
}
.sim-stat-num {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}
.card-aman .sim-stat-num { color: #16a34a; }
.card-komp .sim-stat-num { color: #d97706; }
.card-tant .sim-stat-num { color: #dc2626; }
.sim-stat-label {
    font-size: 11px;
    font-weight: 800;
    color: #4a2942;
    line-height: 1.2;
}
.sim-stat-sub {
    font-size: 9px;
    color: #7a4f6d;
}

/* Prodi List Cards */
.sim-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 22px;
    background: #ffffff;
}
.sim-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 10px;
}
@media (max-width: 500px) {
    .sim-results-grid {
        grid-template-columns: 1fr;
    }
}
.sim-res-card {
    background: #ffffff;
    border: 1.5px solid #ffe0ed;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--ease);
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.sim-res-card:hover {
    border-color: #ff4d8f;
    box-shadow: 0 6px 18px rgba(255, 77, 143, 0.12);
    transform: translateY(-2px);
}
.sim-res-card-top {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.sim-res-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #fff0f5;
    border: 1px solid #ffd1e4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
}
.sim-res-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.sim-res-info {
    flex: 1;
    min-width: 0;
}
.sim-res-univ {
    font-size: 11px;
    font-weight: 800;
    color: #7a4f6d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sim-res-prodi {
    font-size: 13px;
    font-weight: 900;
    color: #2d1b2e;
    margin-top: 1px;
    line-height: 1.3;
}
.sim-res-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 3px;
    font-size: 10px;
    color: #888;
}
.sim-badge-rumpun {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
}
.rumpun-saintek {
    background: #e0f2fe;
    color: #0369a1;
}
.rumpun-soshum {
    background: #fef3c7;
    color: #b45309;
}
.sim-res-stats {
    display: flex;
    justify-content: space-between;
    background: #faf4f7;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 10.5px;
    margin-bottom: 8px;
}
.sim-res-stat-item {
    text-align: center;
}
.sim-res-stat-label {
    font-size: 9px;
    color: #7a4f6d;
    display: block;
}
.sim-res-stat-val {
    font-weight: 900;
    color: #2d1b2e;
}
.sim-res-chance-bar {
    margin-bottom: 10px;
}
.sim-chance-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 800;
    margin-bottom: 3px;
}
.sim-chance-track {
    height: 5px;
    background: #f0e6ec;
    border-radius: 99px;
    overflow: hidden;
}
.sim-chance-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.3s ease;
}
.sim-res-actions {
    display: flex;
    gap: 5px;
}
.btn-sim-target {
    flex: 1;
    padding: 6px 8px;
    font-size: 10.5px;
    font-weight: 800;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: var(--ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.btn-sim-p1 {
    background: #fff0f5;
    color: #d81b60;
    border: 1px solid #ffccd9;
}
.btn-sim-p1:hover {
    background: #d81b60;
    color: #ffffff;
}
.btn-sim-p2 {
    background: #faf5ff;
    color: #7e22ce;
    border: 1px solid #e9d5ff;
}
.btn-sim-p2:hover {
    background: #7e22ce;
    color: #ffffff;
}
.sim-modal-footer {
    padding: 10px 22px;
    background: #fff8fb;
    border-top: 1px solid #ffe3ec;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    font-size: 10.5px;
    color: #7a4f6d;
}

/* ===== TANTANGAN HOTS HARIAN & FOMO CONVERSION ENGINE ===== */
.sidebar-hots-card {
    background: linear-gradient(165deg, #ffffff 0%, #fff5f8 100%);
    border: 1.5px solid #ffccd9;
    border-radius: 14px;
    padding: 13px 12px;
    margin-top: 6px;
    margin-bottom: 14px;
    box-shadow: 0 4px 16px rgba(255, 77, 143, 0.09);
    position: relative;
    overflow: hidden;
}
.sidebar-hots-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #ff4d8f, #ff758c, #7e22ce);
}
.dhots-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 4px;
}
.dhots-pill-live {
    font-size: 9.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #ffe4e6;
    color: #e11d48;
    padding: 2px 7px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #fecdd3;
}
.dhots-pulse-dot {
    width: 6px;
    height: 6px;
    background: #e11d48;
    border-radius: 50%;
    display: inline-block;
    animation: dhotsPulse 1.4s infinite;
}
@keyframes dhotsPulse {
    0% { transform: scale(0.85); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.85); opacity: 0.7; }
}
.dhots-pill-fail {
    font-size: 9px;
    font-weight: 800;
    color: #be123c;
    background: #fff1f2;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px dashed #fda4af;
}
.dhots-btn-reset {
    background: #ffffff;
    border: 1px solid #ffccd9;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 9.5px;
    font-weight: 800;
    color: #be123c;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.2;
}
.dhots-btn-reset:hover {
    background: #fff0f5;
    border-color: #ff4d8f;
    color: #e11d48;
    transform: scale(1.06);
}
.dhots-btn-reset:active {
    transform: scale(0.95);
}
.dhots-toast-notice {
    display: none;
    background: #1e1b4b;
    color: #ffffff;
    font-size: 10px;
    padding: 6px 9px;
    border-radius: 6px;
    margin-bottom: 7px;
    line-height: 1.35;
    animation: dhotsFadeDown 0.25s ease;
}
    padding: 6px 9px;
    border-radius: 6px;
    margin-bottom: 7px;
    line-height: 1.35;
    animation: dhotsFadeDown 0.25s ease;
}
.dhots-subtest-label {
    font-size: 10px;
    font-weight: 800;
    color: #9d174d;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.dhots-soal-text {
    font-size: 11px;
    line-height: 1.48;
    color: #374151;
    font-weight: 600;
    margin-bottom: 10px;
    background: #ffffff;
    padding: 9px 8px;
    border-radius: 8px;
    border: 1px solid #ffe4e6;
}
.dhots-options {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 6px;
}
.dhots-opt-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    background: #ffffff;
    border: 1.2px solid #ffd4e5;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #4b5563;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    width: 100%;
}
.dhots-opt-btn:hover:not(:disabled) {
    background: #fff0f5;
    border-color: #ff4d8f;
    color: #d81b60;
    transform: translateX(2px);
}
.dhots-opt-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #faf5ff;
    color: #7e22ce;
    font-size: 10px;
    font-weight: 900;
    flex-shrink: 0;
    border: 1px solid #e9d5ff;
}
.dhots-opt-btn.correct {
    background: #ecfdf5 !important;
    border-color: #10b981 !important;
    color: #065f46 !important;
}
.dhots-opt-btn.correct .dhots-opt-key {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
}
.dhots-opt-btn.wrong {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
}
.dhots-opt-btn.wrong .dhots-opt-key {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}
.dhots-feedback-box {
    display: none;
    margin-top: 8px;
    padding: 9px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.45;
    animation: dhotsFadeDown 0.3s ease;
}
.dhots-feedback-box.correct-fb {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}
.dhots-feedback-box.wrong-fb {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

/* TAWARAN PAKET PREMIUM (Hanya Muncul Saat Kesempatan Berakhir) */
.dhots-premium-offer-box {
    display: none;
    margin-top: 12px;
    background: linear-gradient(145deg, #ffffff 0%, #fff0f5 100%);
    border: 1.5px solid #ff4d8f;
    border-radius: 12px;
    padding: 12px 10px;
    box-shadow: 0 6px 20px rgba(255, 77, 143, 0.16);
    animation: dhotsFadeDown 0.35s ease;
    position: relative;
    overflow: hidden;
}
.dhots-premium-offer-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #ff4d8f, #e11d48, #7e22ce);
}
.dhots-offer-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
    flex-wrap: wrap;
    gap: 4px;
}
.dhots-offer-pill-lock {
    background: #ffe4e6;
    color: #be123c;
    font-size: 8.5px;
    font-weight: 900;
    padding: 2.5px 7px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid #fecdd3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.dhots-offer-pill-pro {
    background: linear-gradient(135deg, #7e22ce, #a855f7);
    color: #ffffff;
    font-size: 8.5px;
    font-weight: 900;
    padding: 2.5px 7px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.dhots-offer-title {
    font-size: 11.5px;
    font-weight: 900;
    color: #881337;
    margin-bottom: 4px;
    line-height: 1.35;
}
.dhots-offer-desc {
    font-size: 10px;
    line-height: 1.45;
    color: #4b5563;
    margin-bottom: 8px;
}
.dhots-offer-desc strong {
    color: #9f1239;
}
.dhots-offer-benefits {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px dashed #fda4af;
    border-radius: 8px;
    padding: 7px 8px;
    margin-bottom: 9px;
}
.dhots-benefit-item {
    font-size: 9.5px;
    font-weight: 700;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 5px;
}
.dhots-benefit-item span.b-icon {
    color: #16a34a;
    font-weight: 900;
}
.dhots-cta-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 8px;
    background: linear-gradient(135deg, #ff4d8f, #e11d48);
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 900;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.3);
    transition: all 0.2s ease;
    margin-bottom: 5px;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
}
.dhots-cta-primary:hover {
    background: linear-gradient(135deg, #e11d48, #be123c);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.4);
    color: #ffffff !important;
}
.dhots-cta-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 7px 8px;
    background: #ffffff;
    color: #7e22ce !important;
    border: 1.2px solid #d8b4fe;
    font-size: 10px;
    font-weight: 800;
    border-radius: 7px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.dhots-cta-secondary:hover {
    background: #faf5ff;
    border-color: #7e22ce;
    color: #6b21a8 !important;
}
.dhots-offer-guarantee {
    font-size: 9px;
    color: #9d174d;
    text-align: center;
    margin-top: 6px;
    font-weight: 700;
}

/* Pre-Start Cover State (Soal disembunyikan sebelum tombol Start) */
.dhots-start-cover {
    background: linear-gradient(135deg, rgba(255, 240, 245, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
    border: 1.5px dashed #ffb3d1;
    border-radius: 10px;
    padding: 16px 12px;
    text-align: center;
    margin-top: 6px;
    margin-bottom: 6px;
    box-shadow: 0 2px 10px rgba(255, 77, 143, 0.08);
}
.dhots-cover-icon {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 6px;
    animation: dhotsTimerPulse 1.2s infinite ease-in-out;
}
@keyframes dhotsTimerPulse {
    0% { transform: scale(0.95); }
    50% { transform: scale(1.1); }
    100% { transform: scale(0.95); }
}
.dhots-cover-title {
    font-size: 11.5px;
    font-weight: 900;
    color: #9d174d;
    margin-bottom: 5px;
}
.dhots-cover-desc {
    font-size: 10.5px;
    line-height: 1.45;
    color: #4b5563;
    margin-bottom: 12px;
}
.btn-dhots-start {
    width: 100%;
    padding: 10px 12px;
    background: linear-gradient(135deg, #ff4d8f 0%, #e11d48 50%, #be123c 100%);
    color: #ffffff !important;
    font-size: 11.5px;
    font-weight: 900;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.35);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: 0.3px;
    box-sizing: border-box;
}
.btn-dhots-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(225, 29, 72, 0.45);
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
}

/* 30s Countdown Timer Bar */
.dhots-timer-wrap {
    background: #fff0f5;
    border: 1px solid #ffd4e5;
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 10px;
}
.dhots-timer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    font-weight: 800;
    color: #831843;
    margin-bottom: 4px;
}
.dhots-timer-header strong {
    font-size: 13px;
    color: #e11d48;
    font-family: monospace;
}
.dhots-timer-track {
    width: 100%;
    height: 6px;
    background: #ffe4e6;
    border-radius: 99px;
    overflow: hidden;
}
.dhots-timer-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444);
    border-radius: 99px;
    transition: width 1s linear, background-color 0.3s ease;
}

/* Modal Pop-up Tawaran Paket Premium */
.dhots-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: dhotsModalFadeIn 0.25s ease-out;
}
@keyframes dhotsModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.dhots-modal-card {
    background: #ffffff;
    width: 100%;
    max-width: 440px;
    border-radius: 18px;
    border: 2px solid #ff4d8f;
    box-shadow: 0 20px 45px rgba(225, 29, 72, 0.28), 0 8px 18px rgba(0, 0, 0, 0.15);
    padding: 22px 20px 18px;
    position: relative;
    overflow: hidden;
    animation: dhotsModalZoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
}
@keyframes dhotsModalZoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.dhots-modal-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, #ff4d8f, #e11d48, #7e22ce);
}
.dhots-modal-close {
    position: absolute;
    top: 12px; right: 14px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}
.dhots-modal-close:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fca5a5;
    transform: rotate(90deg);
}
.dhots-modal-badge-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.dhots-modal-badge-lock {
    background: #ffe4e6;
    color: #be123c;
    font-size: 9.5px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #fecdd3;
    letter-spacing: 0.5px;
}
.dhots-modal-badge-pro {
    background: linear-gradient(135deg, #7e22ce, #a855f7);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.dhots-modal-title {
    font-size: 16px;
    font-weight: 900;
    color: #881337;
    margin: 0 0 6px 0;
    line-height: 1.3;
}
.dhots-modal-subtitle {
    font-size: 11.5px;
    line-height: 1.5;
    color: #4b5563;
    margin: 0 0 14px 0;
}
.dhots-modal-benefits {
    background: #fff8fa;
    border: 1.5px dashed #fbcfe8;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.dhots-m-benefit {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    line-height: 1.4;
    color: #374151;
}
.dhots-m-benefit .bm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #dcfce7;
    color: #166534;
    font-size: 10px;
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 1px;
}
.dhots-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 8px;
}
.dhots-modal-cta-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    background: linear-gradient(135deg, #ff4d8f, #e11d48);
    color: #ffffff !important;
    font-size: 12.5px;
    font-weight: 900;
    border-radius: 9px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(225, 29, 72, 0.35);
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.dhots-modal-cta-primary:hover {
    background: linear-gradient(135deg, #e11d48, #be123c);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(225, 29, 72, 0.45);
    color: #ffffff !important;
}
.dhots-modal-cta-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 12px;
    background: #ffffff;
    color: #7e22ce !important;
    border: 1.5px solid #d8b4fe;
    font-size: 11.5px;
    font-weight: 800;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.dhots-modal-cta-secondary:hover {
    background: #faf5ff;
    border-color: #7e22ce;
    color: #6b21a8 !important;
}
.dhots-modal-footer-note {
    font-size: 10px;
    color: #9d174d;
    text-align: center;
    font-weight: 700;
}



/* ==========================================================================
   CANVA HERO BANNER & LIVING BENTO UPGRADES
   ========================================================================== */

.canva-hero-banner {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #fff7fb 60%, #fef2f8 100%);
    border: 1.5px solid rgba(255, 62, 120, 0.2);
    border-radius: var(--r-xl, 26px);
    padding: 36px 36px 32px;
    margin-bottom: 28px;
    box-shadow: 0 16px 40px -10px rgba(255, 62, 120, 0.12), 0 4px 16px -2px rgba(22, 18, 51, 0.04);
    overflow: hidden;
}

.canva-hero-banner::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 62, 120, 0.12) 0%, rgba(255, 62, 120, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.chb-content {
    position: relative;
    z-index: 1;
}

.chb-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.chb-sticker-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: #ffffff;
    border: 1.5px solid #ffe4ed;
    border-radius: 9999px;
    box-shadow: 0 4px 14px rgba(255, 62, 120, 0.12);
    font-size: 12px;
    font-weight: 800;
    color: #ff3e78;
    transform: rotate(-1.5deg);
    transition: transform 0.25s ease;
}

.chb-sticker-badge:hover {
    transform: rotate(0deg) scale(1.02);
}

.chb-sub-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chb-pill {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 9999px;
    background: rgba(112, 26, 117, 0.07);
    color: #701a75;
    border: 1px solid rgba(112, 26, 117, 0.15);
}

.chb-title {
    font-size: 34px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #161233;
    margin: 0 0 12px 0;
}

.chb-title .highlight-brush {
    background: linear-gradient(135deg, #ff3e78 0%, #e11d48 50%, #9333ea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.chb-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #565069;
    max-width: 780px;
    margin: 0 0 24px 0;
    font-weight: 500;
}

.chb-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
}

.btn-canva-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    background: linear-gradient(135deg, #ff3e78 0%, #fa709a 100%);
    border: none;
    border-radius: 14px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 24px -2px rgba(255, 62, 120, 0.42);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-canva-primary:hover {
    transform: translateY(-2.5px);
    box-shadow: 0 14px 32px -4px rgba(255, 62, 120, 0.55);
    color: #ffffff;
}

.btn-canva-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: #ffffff;
    border: 1.5px solid #f0e4ee;
    border-radius: 14px;
    color: #701a75;
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(22, 18, 51, 0.04);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-canva-secondary:hover {
    background: #faf4fb;
    border-color: #d8b4fe;
    transform: translateY(-2px);
    color: #701a75;
}

.chb-social-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 18px;
    border-top: 1.5px dashed rgba(255, 62, 120, 0.18);
}

.chb-avatar-stack {
    display: flex;
    align-items: center;
}

.chb-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.chb-avatar-img:first-child {
    margin-left: 0;
}

.chb-social-text {
    font-size: 12.5px;
    color: #565069;
    font-weight: 600;
}

.chb-social-text strong {
    color: #161233;
}

/* Floating Sticker Right */
.canva-floating-sticker {
    position: absolute;
    right: 28px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #ffffff;
    border: 1.5px solid #e0e7ff;
    border-radius: 9999px;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.14);
    font-size: 12px;
    font-weight: 800;
    color: #4338ca;
    transform: rotate(2deg);
    animation: canvaFloatRight 5s ease-in-out infinite;
}

@media (max-width: 900px) {
    .canva-hero-banner {
        padding: 24px 20px;
    }
    .chb-title {
        font-size: 26px;
    }
    .canva-floating-sticker {
        display: none;
    }
}


/* ========================================================
   MOBILE USER EXPERIENCE ENHANCEMENT (P1 - SCROLL FATIGUE FIX)
   Ensures Main Content (Canva Hero & CBT Modules) appears first
   ======================================================== */
@media (max-width: 768px) {
    .dashboard {
        flex-direction: column !important;
    }
    .dashboard > .content {
        order: 1 !important;
    }
    .dashboard > .sidebar {
        order: 2 !important;
        margin-top: 24px;
    }
}


/* ========================================================
   CANVA BENTO-GRID DESIGN SYSTEM (IMPORTED FROM PROTOTYPE)
   ======================================================== */



/* ==========================================================================
   CANVA BENTO GRID & HERO COMPONENTS (INTEGRATED FROM PROTOTYPE)
   ========================================================================== */

/* ========================================================
           HERO SECTION: CANVA-GRADE PEJUANG PTN
           ======================================================== */
        .hero-section {
            padding: 40px 0 60px;
            position: relative;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 40px;
            align-items: center;
        }

        /* Left Side: Punchy Copywriting & Floating Stickers */
        .hero-left {
            position: relative;
        }

        /* Sticker Accents (Canva Signature Look) */
        .sticker-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 16px;
            background: #ffffff;
            border: 1.5px solid #ffe4ed;
            border-radius: var(--r-full);
            box-shadow: 0 6px 16px rgba(255, 62, 120, 0.08);
            font-size: 12.5px;
            font-weight: 800;
            color: var(--coral-pink);
            margin-bottom: 22px;
            transform: rotate(-1.5deg);
            transition: transform 0.25s ease;
        }
        .sticker-badge:hover {
            transform: rotate(0deg) scale(1.03);
        }

        .hero-title {
            font-size: 52px;
            font-weight: 900;
            line-height: 1.12;
            letter-spacing: -1.5px;
            color: var(--navy-deep);
            margin-bottom: 20px;
        }

        .hero-title .highlight-brush {
            position: relative;
            display: inline-block;
            background: linear-gradient(135deg, var(--coral-pink) 0%, #fa709a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .hero-title .highlight-brush::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 4px;
            width: 100%;
            height: 12px;
            background: rgba(255, 62, 120, 0.15);
            z-index: -1;
            border-radius: 4px;
            transform: rotate(-0.5deg);
        }

        .hero-lead {
            font-size: 17px;
            line-height: 1.6;
            color: var(--text-muted);
            margin-bottom: 32px;
            max-width: 540px;
            font-weight: 500;
        }

        .hero-cta-group {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 36px;
        }

        .btn-hero-primary {
            background: var(--coral-pink);
            background: linear-gradient(135deg, #ff3e78 0%, #e11d48 100%);
            color: #ffffff;
            font-size: 15px;
            font-weight: 800;
            padding: 16px 32px;
            border-radius: var(--r-full);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            box-shadow: var(--shadow-pop);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: none;
            cursor: pointer;
        }
        .btn-hero-primary:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 20px 42px rgba(255, 62, 120, 0.45);
        }

        .btn-hero-secondary {
            background: #ffffff;
            color: var(--navy-deep);
            font-size: 14.5px;
            font-weight: 800;
            padding: 16px 26px;
            border-radius: var(--r-full);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1.5px solid var(--border-card);
            box-shadow: var(--shadow-subtle);
            transition: all 0.25s ease;
        }
        .btn-hero-secondary:hover {
            border-color: var(--purple-accent);
            color: var(--purple-accent);
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(112, 26, 117, 0.08);
        }

        /* Trust Stats Strip */
        .trust-strip {
            display: flex;
            align-items: center;
            gap: 24px;
            padding-top: 18px;
            border-top: 1.5px dashed #ebdce6;
        }

        .trust-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .trust-icon-box {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: #ffffff;
            box-shadow: 0 4px 10px rgba(0,0,0,0.04);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .trust-text strong {
            display: block;
            font-size: 14px;
            font-weight: 900;
            color: var(--navy-deep);
            line-height: 1.1;
        }
        .trust-text span {
            font-size: 11.5px;
            color: var(--text-muted);
            font-weight: 600;
        }

        /* Right Side: Canva Interactive Visual Stage */
        .hero-stage {
            position: relative;
        }

        .stage-backdrop {
            position: absolute;
            inset: -20px;
            background: linear-gradient(135deg, rgba(255, 62, 120, 0.12) 0%, rgba(147, 51, 234, 0.12) 100%);
            border-radius: var(--r-xl);
            filter: blur(40px);
            z-index: 0;
        }

        /* Main Glass Card in Stage */
        .hero-dashboard-preview {
            position: relative;
            z-index: 1;
            background: #ffffff;
            border: 2px solid #ffffff;
            border-radius: var(--r-lg);
            box-shadow: var(--shadow-card);
            overflow: hidden;
            transition: transform 0.4s ease;
        }
        .hero-dashboard-preview:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }

        .hdp-header {
            background: linear-gradient(135deg, var(--navy-deep) 0%, #2e1065 100%);
            padding: 22px 26px;
            color: #ffffff;
            position: relative;
            overflow: hidden;
        }
        .hdp-header::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 160px;
            height: 160px;
            background: radial-gradient(circle, rgba(255, 62, 120, 0.4) 0%, transparent 70%);
            border-radius: 50%;
        }

        .hdp-student-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }

        .hdp-profile-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .hdp-avatar {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: var(--sunset-grad);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 900;
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(255, 62, 120, 0.35);
        }

        .hdp-name strong {
            display: block;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: -0.2px;
        }
        .hdp-name span {
            font-size: 11.5px;
            color: #fbcfe8;
            font-weight: 600;
        }

        .hdp-badge-status {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.25);
            padding: 5px 12px;
            border-radius: var(--r-full);
            font-size: 11px;
            font-weight: 800;
            color: #fdf2f8;
            letter-spacing: 0.3px;
        }

        .hdp-score-gauge {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: var(--r-md);
            padding: 14px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .gauge-metric small {
            display: block;
            font-size: 11px;
            color: #cbd5e1;
            font-weight: 700;
            text-transform: uppercase;
        }
        .gauge-metric span {
            font-size: 26px;
            font-weight: 900;
            color: #38bdf8;
            letter-spacing: -0.5px;
        }

        .hdp-body {
            padding: 24px 26px;
            background: #ffffff;
        }

        .hdp-target-pair {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 20px;
        }

        .hdp-target-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-radius: var(--r-md);
            background: var(--bg-card-subtle);
            border: 1.5px solid var(--border-light);
            transition: all 0.25s ease;
        }
        .hdp-target-item:hover {
            border-color: rgba(147, 51, 234, 0.3);
            background: #ffffff;
            box-shadow: 0 4px 14px rgba(0,0,0,0.03);
        }

        .hdp-target-label strong {
            display: block;
            font-size: 13.5px;
            font-weight: 800;
            color: var(--navy-deep);
        }
        .hdp-target-label span {
            font-size: 11.5px;
            color: var(--text-muted);
            font-weight: 600;
        }

        .hdp-target-badge {
            font-size: 11px;
            font-weight: 800;
            padding: 5px 12px;
            border-radius: var(--r-full);
        }
        .badge-aman {
            background: #ecfdf5;
            color: #059669;
            border: 1px solid #a7f3d0;
        }
        .badge-kompetitif {
            background: #fffbeb;
            color: #d97706;
            border: 1px solid #fde68a;
        }

        /* Floating Canva Stickers Around Card */
        .float-sticker-top {
            position: absolute;
            top: -18px;
            right: -15px;
            z-index: 2;
            background: #ffffff;
            padding: 9px 16px;
            border-radius: var(--r-full);
            box-shadow: 0 10px 24px rgba(0,0,0,0.1);
            border: 2px solid #fef08a;
            font-size: 12px;
            font-weight: 900;
            color: #854d0e;
            display: flex;
            align-items: center;
            gap: 6px;
            transform: rotate(4deg);
            animation: gentleFloat 4s ease-in-out infinite alternate;
        }

        .float-sticker-bottom {
            position: absolute;
            bottom: -15px;
            left: -18px;
            z-index: 2;
            background: #ffffff;
            padding: 10px 18px;
            border-radius: var(--r-full);
            box-shadow: 0 10px 24px rgba(255, 62, 120, 0.15);
            border: 2px solid #fbcfe8;
            font-size: 12px;
            font-weight: 900;
            color: var(--coral-pink);
            display: flex;
            align-items: center;
            gap: 6px;
            transform: rotate(-3deg);
            animation: gentleFloat 3.5s ease-in-out infinite alternate-reverse;
        }

        @keyframes gentleFloat {
            0% { transform: translateY(0px) rotate(-3deg); }
            100% { transform: translateY(-8px) rotate(-1deg); }
        }

        /* ========================================================
           BENTO GRID SECTION: MODUL UTBK & FITUR UNIK
           ======================================================== */
        .bento-section {
            padding: 60px 0;
        }

        .section-header {
            text-align: center;
            margin-bottom: 46px;
        }

        .section-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            color: var(--purple-accent);
            background: #f3e8ff;
            padding: 6px 16px;
            border-radius: var(--r-full);
            margin-bottom: 12px;
        }

        .section-title {
            font-size: 38px;
            font-weight: 900;
            letter-spacing: -1px;
            color: var(--navy-deep);
            margin-bottom: 12px;
        }

        .section-desc {
            font-size: 16px;
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto;
        }

        /* The Bento Layout */
        .bento-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 24px;
        }

        /* Bento Card Styling */
        .bento-card {
            background: var(--bg-card);
            border-radius: var(--r-lg);
            border: 1.5px solid var(--border-card);
            box-shadow: var(--shadow-card);
            padding: 32px;
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .bento-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
            border-color: rgba(255, 62, 120, 0.25);
        }

        /* Bento 1: Featured Main Engine (Span 7 cols) */
        .bento-card-main {
            grid-column: span 7;
            background: linear-gradient(135deg, #ffffff 0%, #fff7fa 100%);
            border: 2px solid #ffd4e5;
        }

        .bcm-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 800;
            padding: 5px 12px;
            border-radius: var(--r-full);
            background: #ffe4ed;
            color: var(--coral-pink);
            margin-bottom: 16px;
        }

        .bcm-title {
            font-size: 26px;
            font-weight: 900;
            color: var(--navy-deep);
            margin-bottom: 10px;
            line-height: 1.25;
        }

        .bcm-desc {
            font-size: 14px;
            color: var(--text-muted);
            margin-bottom: 24px;
            line-height: 1.6;
        }

        .subtest-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 28px;
        }

        .subtest-chip {
            font-size: 11.5px;
            font-weight: 700;
            padding: 6px 12px;
            border-radius: 8px;
            background: #ffffff;
            border: 1px solid #ffd6e6;
            color: #881337;
        }

        /* Bento 2: AI Tutor 24 Jam ("BNO BIDIK PTN") (Span 5 cols) */
        .bento-card-ai {
            grid-column: span 5;
            background: linear-gradient(135deg, #2e1065 0%, #1e1b4b 100%);
            color: #ffffff;
            border: 2px solid rgba(168, 85, 247, 0.4);
            box-shadow: 0 14px 34px rgba(46, 16, 101, 0.25);
        }

        .ai-status-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
        }

        .ai-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 800;
            padding: 5px 12px;
            border-radius: var(--r-full);
            background: rgba(16, 185, 129, 0.2);
            color: #34d399;
            border: 1px solid rgba(16, 185, 129, 0.4);
        }
        .ai-pulse-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #34d399;
            box-shadow: 0 0 10px #34d399;
            animation: pulseDot 2s infinite;
        }
        @keyframes pulseDot {
            0% { transform: scale(0.95); opacity: 0.8; }
            50% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(0.95); opacity: 0.8; }
        }

        .ai-chat-bubble {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: var(--r-md);
            padding: 16px;
            font-size: 13px;
            line-height: 1.55;
            color: #f1f5f9;
            margin-bottom: 20px;
        }
        .ai-chat-bubble strong {
            color: #fbcfe8;
        }

        /* Bento 3: Tantangan HOTS 30 Detik Harian (Span 6 cols) */
        .bento-card-hots {
            grid-column: span 6;
            background: #ffffff;
            border: 1.5px solid #fed7aa;
        }

        .hots-header-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .hots-timer-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 12px;
            background: #fef3c7;
            border-radius: var(--r-full);
            font-size: 12px;
            font-weight: 800;
            color: #b45309;
        }

        .hots-question-sample {
            font-size: 14px;
            font-weight: 600;
            color: var(--navy-deep);
            background: #fffbeb;
            padding: 16px;
            border-radius: var(--r-md);
            border-left: 4px solid var(--amber-gold);
            margin-bottom: 18px;
        }

        .hots-opt-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 18px;
        }

        .hots-opt-mini {
            padding: 8px 12px;
            border-radius: 8px;
            background: #ffffff;
            border: 1.5px solid #f1f5f9;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
        }
        .hots-opt-mini:hover {
            border-color: var(--coral-pink);
            background: #fff1f2;
            color: var(--coral-pink);
        }

        /* Bento 4: Rasionalisasi 5.140+ Prodi (Span 6 cols) */
        .bento-card-prodi {
            grid-column: span 6;
            background: #ffffff;
            border: 1.5px solid #e2e8f0;
        }

        .prodi-mini-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12.5px;
            margin-bottom: 20px;
        }
        .prodi-mini-table th {
            text-align: left;
            padding: 8px 12px;
            color: var(--text-muted);
            font-weight: 700;
            border-bottom: 1.5px solid #f1f5f9;
        }
        .prodi-mini-table td {
            padding: 10px 12px;
            border-bottom: 1px solid #f8fafc;
            color: var(--navy-deep);
            font-weight: 600;
        }
        .prodi-mini-table tr:hover td {
            background: #faf5ff;
        }

        /* ========================================================
           CTA BANNER: TIKET DIAGNOSTIK SENILAI RP 150.000
           ======================================================== */
        .lead-magnet-banner {
            margin: 40px 0 80px;
            background: linear-gradient(135deg, #1e1b4b 0%, #701a75 50%, #be123c 100%);
            border-radius: var(--r-xl);
            padding: 44px 50px;
            color: #ffffff;
            box-shadow: 0 20px 50px rgba(112, 26, 117, 0.3);
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }

        .lmb-content {
            max-width: 650px;
            position: relative;
            z-index: 2;
        }

        .lmb-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255, 255, 255, 0.18);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 6px 14px;
            border-radius: var(--r-full);
            font-size: 12px;
            font-weight: 800;
            color: #fde047;
            margin-bottom: 14px;
        }

        .lmb-title {
            font-size: 32px;
            font-weight: 900;
            line-height: 1.2;
            letter-spacing: -0.5px;
            margin-bottom: 12px;
        }

        .lmb-desc {
            font-size: 15px;
            color: #f1f5f9;
            line-height: 1.6;
            margin-bottom: 24px;
        }

        .lmb-btn {
            background: #ffffff;
            color: #be123c;
            font-size: 15px;
            font-weight: 900;
            padding: 16px 36px;
            border-radius: var(--r-full);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.25);
            transition: all 0.25s ease;
            cursor: pointer;
            border: none;
        }
        .lmb-btn:hover {
            transform: translateY(-3px) scale(1.03);
            background: #fdf2f8;
            box-shadow: 0 16px 40px rgba(0,0,0,0.35);
        }

        /* Footer Notes */
        footer.prototype-footer {
            border-top: 1.5px solid var(--border-card);
            padding: 30px 0;
            text-align: center;
            font-size: 12.5px;
            color: var(--text-muted);
        }

        /* Responsive Mobile Breakpoint */
        @media (max-width: 992px) {
            .hero-grid {
                grid-template-columns: 1fr;
            }
            .bento-card-main, .bento-card-ai, .bento-card-hots, .bento-card-prodi {
                grid-column: span 12;
            }
            .hero-title {
                font-size: 38px;
            }
            .nav-pill-menu {
                display: none;
            }
            .lead-magnet-banner {
                flex-direction: column;
                padding: 30px;
                text-align: center;
                gap: 24px;
            }
        }
    


/* ==========================================================================
   HERO PROOF STRIP & 3 FEATURE BADGES (CANVA SPEC)
   ========================================================================== */
.hero-proof-strip {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid #ffe4ed;
    border-radius: 9999px;
    box-shadow: 0 4px 16px rgba(255, 62, 120, 0.08);
    width: fit-content;
}
.proof-avatars {
    display: flex;
    align-items: center;
}
.proof-avatar-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -8px;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.proof-avatars .proof-avatar-dot:first-child {
    margin-left: 0;
}
.proof-text {
    font-size: 12.5px;
    color: #334155;
    font-weight: 600;
}
.proof-text strong {
    color: #0f172a;
    font-weight: 800;
}
.proof-divider {
    width: 1px;
    height: 18px;
    background: #e2e8f0;
}
.proof-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 800;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    padding: 3px 10px;
    border-radius: 9999px;
}

/* 3 Feature Micro Badges under Hero */
.hero-feature-badges {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.hfb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1.5px solid #f1f5f9;
    padding: 8px 14px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: all 0.2s ease;
}
.hfb-item:hover {
    border-color: #ffd6e6;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 62, 120, 0.08);
}
.hfb-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #fff5f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 1px solid #fed7e2;
}
.hfb-item strong {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #161233;
    line-height: 1.2;
}
.hfb-item span {
    font-size: 10.5px;
    color: #64748b;
    font-weight: 600;
}