feat(core): integrasi navigasi hamburger mobile, single-program template, floating whatsapp, dan back-to-top

2026-09-15 23:08:59 +07:00
parent 77819e7d1f
commit 9786cd515a
4 changed files with 224 additions and 41 deletions
@@ -285,3 +285,81 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
    .cta-floating-card { padding: 25px; }
    .cta-floating-title { font-size: 20px; }
 }
+
+/* 13. MOBILE MENU TOGGLE & DRAWER */
+.menu-toggle { display: none; background: transparent; border: none; cursor: pointer; padding: 10px; flex-direction: column; gap: 5px; z-index: 1001; }
+.menu-toggle span { display: block; width: 26px; height: 3px; background-color: #ffffff; border-radius: 3px; transition: all 0.3s ease; }
+.menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
+.menu-toggle.active span:nth-child(2) { opacity: 0; }
+.menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
+
+@media (max-width: 768px) {
+    .menu-toggle { display: flex; }
+    .main-navigation {
+        position: fixed;
+        top: 0;
+        right: -100%;
+        width: 280px;
+        height: 100vh;
+        background: var(--primary-color);
+        box-shadow: -5px 0 25px rgba(0,0,0,0.3);
+        padding: 85px 25px 40px;
+        transition: right 0.35s ease-in-out;
+        z-index: 1000;
+        overflow-y: auto;
+    }
+    .main-navigation.active { right: 0; }
+    .nav-menu-custom { flex-direction: column; gap: 15px; align-items: flex-start; }
+    .nav-menu-custom li a { font-size: 15px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); width: 100%; }
+    .header-container { flex-direction: row; }
+}
+
+/* 14. FLOATING WHATSAPP HOTLINE */
+.edukarsa-wa-float {
+    position: fixed;
+    bottom: 25px;
+    right: 25px;
+    background-color: #25d366;
+    color: #ffffff !important;
+    padding: 10px 18px;
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 700;
+    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
+    z-index: 998;
+    transition: all 0.3s ease;
+}
+.edukarsa-wa-float:hover {
+    background-color: #1ebc57;
+    transform: translateY(-3px) scale(1.03);
+    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.5);
+}
+
+/* 15. BACK TO TOP BUTTON */
+.back-to-top-btn {
+    position: fixed;
+    bottom: 25px;
+    left: 25px;
+    width: 44px;
+    height: 44px;
+    background-color: var(--primary-color);
+    color: #ffffff;
+    border: 2px solid rgba(255,255,255,0.2);
+    border-radius: 50%;
+    font-size: 14px;
+    cursor: pointer;
+    box-shadow: var(--shadow);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(15px);
+    transition: all 0.3s ease;
+    z-index: 997;
+}
+.back-to-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }
+.back-to-top-btn:hover { background-color: var(--secondary-color); transform: translateY(-3px); }