diff --git a/groups/RODA/.env b/groups/RODA/.env new file mode 100644 index 0000000..ffbaf40 --- /dev/null +++ b/groups/RODA/.env @@ -0,0 +1,4 @@ +DASHBOARD_TARGET_URL=https://dashboard.informatika.untan.ac.id/index.php?penelitian +DASHBOARD_PROXY_1=https://api.allorigins.win/get?url={{url}}&ts={{ts}} +DASHBOARD_PROXY_2=https://api.codetabs.com/v1/proxy?quest={{url}} +DASHBOARD_PROXY_3=https://thingproxy.freeboard.io/fetch/{{rawUrl}} \ No newline at end of file diff --git a/groups/RODA/index.html b/groups/RODA/index.html index 720a508..276d378 100644 --- a/groups/RODA/index.html +++ b/groups/RODA/index.html @@ -1,302 +1,94 @@  - + + - Group 08 – RODA | Informatika UNTAN - - - - + Sorotan dan Prestasi Karya Mahasiswa | Informatika UNTAN + + + - + + + - - + + -
- Beranda - - -
- Tentang - Kami -
- Sejarah & Tonggak - Struktur Organisasi - Visi & Misi - Kerjasama & MoU -
-
- - -
- Program -
- Akademik - Akreditasi - Profil Lulusan - Mata Kuliah - Panduan Akademik - Informatika Angka -
-
- - -
- SDM -
- Semua Dosen - Kecerdasan Buatan - Rekayasa Perangkat Lunak - Jaringan & Keamanan - Sistem Informasi -
-
- - -
- Fasilitas -
- Laboratorium - Data Center - E-Resources - IFUNTANHUB -
-
- - -
- Karya & - Agenda -
- Semua Karya - Riset - Pengabdian Masyarakat - Prestasi - Info & Agenda -
-
- - -
- Kontak -
- Kontak Resmi - Saran & Masukan - - Instagram - - - YouTube - -
-
+ +
+
+ BERANDA / RISET & KBK
-
-
-
- Tugas Halaman Statis -

Riset & Kelompok Bidang Keahlian (KBK)

-

Kelompok 08 — RODA  ·  Informatika UNTAN 2026

+ +
+
+
+ Riset & Kelompok Bidang Keahlian
-
- -

Tulis konten halaman kelompok di sini.

-

Subjudul

-

Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.

- +

+ Riset & Kelompok Bidang Keahlian +

+

+ Kenali Kelompok Bidang Keahlian (KBK) kami. Jelajahi riset unggulan dosen dan mahasiswa di bidang + Kecerdasan Buatan (AI), Rekayasa Perangkat Lunak, hingga IoT +

+
+ + + Jelajahi KBK + + + + Cari Publikasi +
-
+ + + +
+ +
+
+
+ Kelompok Bidang Keahlian +

+ 4 Pilar Keilmuan Informatika UNTAN

+

Setiap KBK berfokus pada + topik riset spesifik, dipimpin dosen berpengalaman, dan terbuka untuk kolaborasi.

+
-
+
+ + + +
+
+
+
+
+
400+
+

+ Hasil Penelitian

+
+
+
7.555
+

Skor SINTA

+
+
+
33
+

Dosen Homebase

+
+
+
10+
+

Kerjasama Aktif

+
+
+
518
+

Mahasiswa Aktif

+
+
+
+
+ + +
+
+
+
+ Academic + Achievements +

Publikasi & Penelitian Terkini

+
+
+ + +
+ +
+ + + +
+
+
+ + + + + + +
+ +
+ Tampilkan: +
+ + + + + +
+
+
+
+ Menghitung data... +
+
+
+ +
+ +
+ + +
+
+ + +
+
+
+ Experts + Directory +

+ Peneliti & Dosen per Kelompok Keahlian

+

Bagian ini menampilkan + ketua setiap KBK. Pilih kartu untuk melihat dosen lain di kelompok keahlian tersebut.

+
+ +
+ +
+
+
+ + +
+
+
+
+

Laboratorium Pendukung Riset

+

5 laboratorium modern dengan 93 unit PC All-in-One + yang mendukung kegiatan riset strategis dan pengembangan teknologi dosen serta mahasiswa. +

+
+
+
+
05
+
Labs Modern +
+
+
+
+ +
+ +
+
+
+ +
+
+ + 25 PC + + + 25 Mahasiswa + +
+
+

Lab Komputer & Pemrograman

+

LAB/D48 — Kepala: Helen Sastypratiwi, S.T., M.Eng.

+

Mendukung mata kuliah pemrograman dasar hingga lanjut, pengembangan aplikasi web, mobile, dan rekayasa perangkat lunak.

+
+ VS Code + Node.js + Android Studio + Python 3 +
+
+ + +
+
+
+ +
+
+

Lab Jaringan, Keamanan & IoT

+

LAB/02 — Kepala: Heri Priyanto, ST., MT.

+

Sarana praktik jaringan, konfigurasi router/switch, keamanan siber, administrasi sistem, dan pengembangan perangkat IoT.

+
+ Cisco Packet + Wireshark + Raspberry Pi +
+
+ + +
+
+
+ +
+
+ + 25 PC + + + 25 Mahasiswa + +
+
+

Lab Rekayasa PL & Data

+

LAB/03 — Kepala: Rudy Dwi Nyoto, ST., M.Eng.

+

Mendukung pembelajaran basis data, pemodelan data, data warehousing, dan analitik data skala besar.

+
+ MySQL + PostgreSQL + MongoDB + RapidMiner +
+
+ + +
+
+
+ +
+
+ + 21 PC + + + 21 Mahasiswa + +
+
+

Lab Teknologi & Sistem Informasi

+

LAB/04 — Kepala: Anggi Srimurdianti Sukamto, ST., MT.

+

Merancang arsitektur sistem informasi, memodelkan proses bisnis digital, serta menumbuhkan jiwa technopreneurship.

+
+ Bizagi + Power BI + Figma +
+
+ + +
+
+
+ +
+
+ + 22 PC + + + 22 Mahasiswa + +
+
+

Lab Komputasi & Kecerdasan Buatan

+

LAB/05 — Kepala: Tursina, ST, M.Cs.

+

Pusat riset machine learning, deep learning, computer vision, NLP, dan pengembangan sistem kecerdasan buatan berbasis data.

+
+ TensorFlow + PyTorch + OpenCV + Jupyter +
+
+
+
+
+ + +
+
+
+ +
+

Tertarik Berkolaborasi dengan KBK Kami?

+

+ Kami membuka peluang kerja sama riset lintas institusi, kemitraan strategis dengan industri, serta + riset mahasiswa (skripsi/tesis) di bawah supervisi ahli kami. +

+
+ + + Hubungi Kami + + + Direktori Dosen + +
+
+
+ + + + + + + + - - - + + \ No newline at end of file diff --git a/groups/RODA/package-lock.json b/groups/RODA/package-lock.json new file mode 100644 index 0000000..41aefa8 --- /dev/null +++ b/groups/RODA/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "roda", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "roda", + "version": "1.0.0", + "license": "ISC" + } + } +} \ No newline at end of file diff --git a/groups/RODA/package.json b/groups/RODA/package.json new file mode 100644 index 0000000..8602450 --- /dev/null +++ b/groups/RODA/package.json @@ -0,0 +1,14 @@ +{ + "name": "roda", + "version": "1.0.0", + "description": "Project website untuk menampilkan sorotan dan prestasi karya mahasiswa program studi Informatika Universitas Tanjungpura.", + "main": "server.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "node server.js", + "dev": "node server.js" + }, + "keywords": [], + "author": "", + "license": "ISC" +} diff --git a/groups/RODA/server.js b/groups/RODA/server.js new file mode 100644 index 0000000..42dd119 --- /dev/null +++ b/groups/RODA/server.js @@ -0,0 +1,279 @@ +const fs = require('fs'); +const http = require('http'); +const path = require('path'); +const { URL } = require('url'); + +const ROOT_DIR = __dirname; +const PARENT_DIR = path.join(__dirname, '..', '..'); +const INDEX_PATH = path.join(ROOT_DIR, 'index.html'); +const ENV_PATH = path.join(ROOT_DIR, '.env'); +const HOST = '127.0.0.1'; +const PORT = Number(process.env.PORT || 3000); + +function logServerError(scope, error, extra = {}) { + console.error(`[${scope}]`, error && error.stack ? error.stack : error, extra); +} + +function parseEnvFile(filePath) { + if (!fs.existsSync(filePath)) { + return {}; + } + + const env = {}; + const lines = fs.readFileSync(filePath, 'utf8').split(/\r?\n/); + + for (const rawLine of lines) { + const line = rawLine.trim(); + if (!line || line.startsWith('#')) { + continue; + } + + const separatorIndex = line.indexOf('='); + if (separatorIndex === -1) { + continue; + } + + const key = line.slice(0, separatorIndex).trim(); + let value = line.slice(separatorIndex + 1).trim(); + + if ( + (value.startsWith('"') && value.endsWith('"')) || + (value.startsWith("'") && value.endsWith("'")) + ) { + value = value.slice(1, -1); + } + + env[key] = value; + } + + return env; +} + +function getAppConfig() { + const env = { + ...parseEnvFile(ENV_PATH), + ...process.env + }; + + const dashboardProxyTemplates = [ + env.DASHBOARD_PROXY_1, + env.DASHBOARD_PROXY_2, + env.DASHBOARD_PROXY_3 + ].filter(Boolean); + + return { + dashboardTargetUrl: env.DASHBOARD_TARGET_URL || '', + dashboardProxyTemplates + }; +} + +const DASHBOARD_CACHE_TTL_MS = 5 * 60 * 1000; +let dashboardCache = { html: null, timestamp: 0 }; + +async function fetchDashboardHtml() { + const targetUrl = getAppConfig().dashboardTargetUrl; + if (!targetUrl) { + throw new Error('DASHBOARD_TARGET_URL kosong'); + } + + const now = Date.now(); + if (dashboardCache.html && (now - dashboardCache.timestamp) < DASHBOARD_CACHE_TTL_MS) { + return { html: dashboardCache.html, cached: 'HIT' }; + } + + const controller = new AbortController(); + const timeoutId = setTimeout(() => controller.abort(), 12000); + try { + const response = await fetch(targetUrl, { + signal: controller.signal, + headers: { + 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0 Safari/537.36' + } + }); + if (!response.ok) { + throw new Error(`HTTP_ERROR_${response.status}`); + } + const html = await response.text(); + dashboardCache = { html, timestamp: Date.now() }; + return { html, cached: 'MISS' }; + } catch (error) { + if (dashboardCache.html) { + return { html: dashboardCache.html, cached: 'STALE' }; + } + throw error; + } finally { + clearTimeout(timeoutId); + } +} + +function validateAppConfig(config) { + const errors = []; + + if (!config.dashboardTargetUrl) { + errors.push('DASHBOARD_TARGET_URL belum diisi.'); + } + + if (!Array.isArray(config.dashboardProxyTemplates) || !config.dashboardProxyTemplates.length) { + errors.push('Minimal satu DASHBOARD_PROXY_* harus diisi.'); + } + + return errors; +} + +function injectConfig(html) { + const configScript = ``; + const defaultConfigScript = ''; + + if (html.includes(defaultConfigScript)) { + return html.replace(defaultConfigScript, configScript); + } + + return html.replace('', ` ${configScript}\n`); +} + +function sendHtml(res) { + try { + const html = fs.readFileSync(INDEX_PATH, 'utf8'); + const configErrors = validateAppConfig(getAppConfig()); + if (configErrors.length) { + logServerError('config', new Error('Invalid app config'), { configErrors }); + } + + const withConfig = injectConfig(html); + res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }); + res.end(withConfig); + } catch (error) { + logServerError('sendHtml', error); + res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' }); + res.end('Internal Server Error'); + } +} + +function getMimeType(pathname) { + const ext = path.extname(pathname).toLowerCase(); + const mimeTypes = { + '.html': 'text/html; charset=utf-8', + '.css': 'text/css; charset=utf-8', + '.js': 'application/javascript; charset=utf-8', + '.json': 'application/json; charset=utf-8', + '.png': 'image/png', + '.jpg': 'image/jpeg', + '.jpeg': 'image/jpeg', + '.gif': 'image/gif', + '.svg': 'image/svg+xml', + '.ico': 'image/x-icon', + '.webp': 'image/webp', + '.woff': 'font/woff', + '.woff2': 'font/woff2', + '.ttf': 'font/ttf', + '.eot': 'application/vnd.ms-fontobject' + }; + return mimeTypes[ext] || 'application/octet-stream'; +} + +function sendStaticFile(res, filepath) { + try { + if (!fs.existsSync(filepath)) { + res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' }); + res.end('Not found'); + return; + } + + const content = fs.readFileSync(filepath); + const mimeType = getMimeType(filepath); + res.writeHead(200, { 'Content-Type': mimeType }); + res.end(content); + } catch (error) { + logServerError('sendStaticFile', error, { filepath }); + res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' }); + res.end('Internal Server Error'); + } +} + +function sendNotFound(res) { + res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' }); + res.end('Not found'); +} + +const server = http.createServer((req, res) => { + try { + const requestUrl = new URL(req.url, `http://${req.headers.host}`); + const pathname = requestUrl.pathname; + + if (pathname === '/' || pathname === '/index.html') { + sendHtml(res); + return; + } + + if (pathname === '/api/dashboard') { + fetchDashboardHtml() + .then(({ html, cached }) => { + res.writeHead(200, { + 'Content-Type': 'text/html; charset=utf-8', + 'X-Cache': cached + }); + res.end(html); + }) + .catch((error) => { + logServerError('api-dashboard', error); + res.writeHead(502, { 'Content-Type': 'text/plain; charset=utf-8' }); + res.end('DASHBOARD_FETCH_FAILED'); + }); + return; + } + + // Handle /assets/ from parent directory + if (pathname.startsWith('/assets/')) { + const assetsFilepath = path.join(PARENT_DIR, pathname); + const normalizedAssetsPath = path.normalize(assetsFilepath); + + if (!normalizedAssetsPath.startsWith(path.normalize(PARENT_DIR))) { + sendNotFound(res); + return; + } + + sendStaticFile(res, normalizedAssetsPath); + return; + } + + // Serve static files from ROOT_DIR + const filepath = path.join(ROOT_DIR, pathname); + const normalizedPath = path.normalize(filepath); + + // Security check: ensure the requested file is within ROOT_DIR + if (!normalizedPath.startsWith(path.normalize(ROOT_DIR))) { + sendNotFound(res); + return; + } + + sendStaticFile(res, normalizedPath); + } catch (error) { + logServerError('request-handler', error, { url: req.url }); + res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' }); + res.end('Internal Server Error'); + } +}); + +server.on('clientError', (error, socket) => { + logServerError('clientError', error); + socket.end('HTTP/1.1 400 Bad Request\r\n\r\n'); +}); + +server.listen(PORT, HOST, () => { + console.log(`Server ready at http://${HOST}:${PORT}`); +}); + +server.on('error', (error) => { + logServerError('server', error, { host: HOST, port: PORT }); + process.exitCode = 1; +}); + +process.on('uncaughtException', (error) => { + logServerError('uncaughtException', error); + process.exitCode = 1; +}); + +process.on('unhandledRejection', (reason) => { + logServerError('unhandledRejection', reason instanceof Error ? reason : new Error(String(reason))); + process.exitCode = 1; +}); diff --git a/groups/RODA/style.css b/groups/RODA/style.css index 2bc5542..653b8d6 100644 --- a/groups/RODA/style.css +++ b/groups/RODA/style.css @@ -1,48 +1,305 @@ -:root { - --brand-navy: #003150; - --brand-yellow: #feb401; - --text-main: #1e293b; - --text-soft: #64748b; - --bg-soft: #f8fafc; - --line: #e2e8f0; +.bg-pattern { + background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } -* { box-sizing: border-box; } -html, body { margin: 0; padding: 0; } -body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; } -.container { width: min(1100px, 92%); margin-inline: auto; } +/* Navbar & Accessibility Fixes */ +#nav-wrapper { + position: fixed !important; + top: 0; + left: 0; + right: 0; + z-index: 50; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + will-change: box-shadow; +} -.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; } -.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; } +#nav-wrapper>div:first-child { + transform: translateZ(0); + -webkit-transform: translateZ(0); +} -.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; } -.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); } -.hero-inner { position: relative; z-index: 1; padding: 36px 0; } -.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; } -.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; } +@media (max-width: 1023px) { + #nav-wrapper>div:first-child { + min-height: 0 !important; + max-height: none; + } +} -.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; } -@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } } +html { + scroll-behavior: smooth; +} -.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; } -.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; } -.cover img { width: 100%; height: auto; display: block; } +.ticker-wrap { + mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); + -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); +} -.article-body > * + * { margin-top: 1.1em; } -.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; } -.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; } -.article-body p { margin: 0 0 1em; } -.article-body ul, .article-body ol { padding-left: 1.4rem; } -.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; } -.article-body a { color: #005eb8; } -.article-body img { max-width: 100%; border-radius: 8px; } -.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } +.ticker-track { + display: inline-flex; + white-space: nowrap; + min-width: max-content; + animation: tickerMove 30s linear infinite; + will-change: transform; +} -.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; } -.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; } +.ticker-wrap:hover .ticker-track { + animation-play-state: paused; +} -.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); } -.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; } -.footer-logo { height: 28px; width: auto; } -.footer-ornament { width: 100%; display: block; opacity: .9; } +@keyframes tickerMove { + 0% { + transform: translateX(0); + } + + 100% { + transform: translateX(-50%); + } +} + +/* Responsive animation timing */ +@media (max-width: 768px) { + .ticker-track { + animation-duration: 25s; + } +} + +@media (min-width: 1366px) { + .ticker-track { + animation-duration: 35s; + } +} + +.line-clamp-1 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; +} + +.line-clamp-2 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.line-clamp-3 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} + +.reveal { + opacity: 1; + transform: none; +} + +.reveal-ready .reveal { + opacity: 0; + transform: translateY(24px); + transition: opacity 0.65s ease, transform 0.65s ease; +} + +.reveal-ready .reveal.is-visible { + opacity: 1; + transform: translateY(0); +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + + .ticker-track { + animation: none; + } + + .reveal { + opacity: 1; + transform: none; + transition: none; + } +} + +/* Dosen grid: subgrid rows agar header & footer setiap card sejajar */ +@media (min-width: 1024px) { + #dosen-grid { + grid-template-rows: auto auto; + } + #dosen-grid > a { + grid-row: span 2; + display: grid; + grid-template-rows: subgrid; + } + /* White section: flex column so expertise sits at top, rank/link pinned to bottom */ + #dosen-grid > a > div:last-child { + display: flex !important; + flex-direction: column !important; + padding-top: 1rem !important; + } + #dosen-grid > a > div:last-child > div:last-child { + margin-top: auto; + } +} + +/* Custom responsive breakpoints - overriding Tailwind CDN defaults */ +/* Mobile: 390px and up */ +@media (min-width: 390px) { + body { + font-size: 14px; + } +} + +/* Tablet: 768px and up */ +@media (min-width: 768px) { + #kbk-card-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +/* Laptop/Desktop: 1024px and up */ +@media (min-width: 1024px) { + nav.bg-\[#feb401\] { + display: block !important; + } + + #lang-toggle-btn { + display: flex !important; + } + + .hidden.lg\:flex { + display: flex !important; + } + + #kbk-card-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + #dosen-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + #riset-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +/* Desktop: 1366px and up */ +@media (min-width: 1366px) { + #kbk-card-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + #riset-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + #dosen-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} + +/* Extra Large Desktop: 1920px and up */ +@media (min-width: 1920px) { + body { + font-size: 16px; + } +} + +/* ===== MEGA MENU STYLES FROM LIMAEM ===== */ +.mega-panel { + opacity: 0; + visibility: hidden; + transition: opacity 0.2s ease, visibility 0.2s ease; + position: absolute; + top: 100%; + left: 0; + right: 0; +} + +.mega-panel.active { + opacity: 1; + visibility: visible; +} + +#mega-overlay { + opacity: 0; + visibility: hidden; + transition: opacity 0.2s ease, visibility 0.2s ease; + pointer-events: none; +} + +#mega-overlay.active { + opacity: 1; + visibility: visible; + pointer-events: auto; +} + +.mega-link-card { + display: flex; + align-items: flex-start; + gap: 1rem; + padding: 1rem; + border-radius: 0.75rem; + border: 1px solid #e2e8f0; + background: white; + transition: all 0.2s ease; +} + +.mega-link-card:hover { + border-color: #3b82f6; + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); + transform: translateY(-2px); +} + +.mega-link-icon { + width: 2.5rem; + height: 2.5rem; + border-radius: 0.5rem; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + transition: all 0.2s ease; +} + +.nav-menu-btn.active { + background: rgba(255, 255, 255, 0.9); + color: #1e40af; +} + +.nav-menu-btn:hover { + background: rgba(255, 255, 255, 0.8); +} + +#main-nav { + position: relative; +} + +#mega-menu-container { + position: absolute; + top: 100%; + left: 0; + right: 0; + pointer-events: none; +} + +#mega-menu-container .mega-panel { + pointer-events: auto; +} + +.nav-menu-item { + position: relative; +} + +.nav-menu-item::after { + content: ''; + position: absolute; + bottom: -12px; + left: 0; + right: 0; + height: 12px; +}