feat(popup): tambah modul popup flyer pmb native dengan kontrol dashboard dan session handler

style.css

@@ -880,3 +880,141 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl
     content: none !important;
     display: none !important;
 }
+
+/* 23. NATIVE POP-UP FLYER MODAL */
+body.edukarsa-popup-open {
+    overflow: hidden;
+}
+.edukarsa-popup-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(15, 23, 42, 0.78);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    z-index: 99999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
+}
+.edukarsa-popup-overlay.is-visible {
+    opacity: 1;
+    visibility: visible;
+}
+.edukarsa-popup-card {
+    position: relative;
+    background: #ffffff;
+    border-radius: 18px;
+    max-width: 520px;
+    width: 100%;
+    max-height: 90vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4);
+    transform: scale(0.92) translateY(15px);
+    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.edukarsa-popup-overlay.is-visible .edukarsa-popup-card {
+    transform: scale(1) translateY(0);
+}
+.edukarsa-popup-close {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: rgba(15, 23, 42, 0.75);
+    color: #ffffff;
+    border: 2px solid #ffffff;
+    font-size: 24px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 10;
+    transition: background 0.2s, transform 0.2s;
+}
+.edukarsa-popup-close:hover {
+    background: #e11d48;
+    transform: scale(1.1);
+}
+.edukarsa-popup-media {
+    width: 100%;
+    background: #0f172a;
+    display: block;
+    line-height: 0;
+}
+.edukarsa-popup-media img {
+    width: 100%;
+    height: auto;
+    max-height: 380px;
+    object-fit: contain;
+    display: block;
+    margin: 0 auto;
+}
+.edukarsa-popup-img-link {
+    display: block;
+    cursor: pointer;
+}
+.edukarsa-popup-details {
+    padding: 24px 28px;
+    text-align: center;
+    background: #ffffff;
+}
+.edukarsa-popup-badge {
+    display: inline-block;
+    padding: 4px 14px;
+    background: #e0f2fe;
+    color: var(--primary-color);
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    border-radius: 20px;
+    margin-bottom: 10px;
+}
+.edukarsa-popup-heading {
+    font-size: 20px;
+    font-weight: 800;
+    color: var(--heading-color);
+    margin: 0 0 10px;
+    line-height: 1.35;
+}
+.edukarsa-popup-desc {
+    font-size: 14px;
+    color: var(--text-color);
+    line-height: 1.6;
+    margin: 0 0 20px;
+}
+.edukarsa-popup-action {
+    margin-top: 15px;
+}
+.edukarsa-popup-btn {
+    display: inline-block;
+    padding: 12px 32px;
+    font-size: 15px;
+    font-weight: 800;
+    border-radius: 50px;
+    box-shadow: 0 6px 18px rgba(11, 74, 142, 0.25);
+}
+.edukarsa-popup-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(11, 74, 142, 0.35);
+}
+
+@media (max-width: 600px) {
+    .edukarsa-popup-card { max-width: 95%; border-radius: 14px; }
+    .edukarsa-popup-details { padding: 18px 16px; }
+    .edukarsa-popup-heading { font-size: 18px; }
+    .edukarsa-popup-desc { font-size: 13px; }
+    .edukarsa-popup-btn { padding: 10px 24px; font-size: 14px; }
+    .edukarsa-popup-close { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 20px; }
+}