* {margin: 0;padding: 0;box-sizing: border-box;}:root {--bg-primary: #0f0f13;--bg-secondary: #1a1a24;--bg-card: #22222e;--border: #2d2d3d;--primary: #6366f1;--primary-dark: #4f46e5;--primary-light: #818cf8;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--text-primary: #ffffff;--text-secondary: #a1a1aa;--text-muted: #71717a;--shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);--gradient-1: linear-gradient(135deg, #6366f1, #8b5cf6);}body {font-family: 'Plus Jakarta Sans', sans-serif;background: var(--bg-primary);color: var(--text-primary);line-height: 1.6;}::-webkit-scrollbar {width: 8px;}::-webkit-scrollbar-track {background: var(--bg-secondary);}::-webkit-scrollbar-thumb {background: var(--primary);border-radius: 10px;}.navbar {position: fixed;top: 0;left: 0;width: 100%;padding: 1.2rem 2rem;background: rgba(15, 15, 19, 0.95);backdrop-filter: blur(12px);z-index: 1000;border-bottom: 1px solid rgba(99, 102, 241, 0.15);transition: all 0.3s;}.navbar.scrolled {padding: 0.8rem 2rem;}.nav-container {max-width: 1400px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}.logo {font-size: 1.5rem;font-weight: 800;background: var(--gradient-1);background-clip: text;-webkit-background-clip: text;color: transparent;}.logo i {background: none;color: var(--primary);margin-right: 5px;}.nav-links {display: flex;gap: 2.5rem;list-style: none;}.nav-links a {text-decoration: none;color: var(--text-secondary);font-weight: 500;transition: 0.2s;font-size: 1rem;}.nav-links a:hover,.nav-links a.active {color: var(--primary);}.admin-badge {background: rgba(99, 102, 241, 0.2);padding: 0.3rem 1rem;border-radius: 30px;font-size: 0.8rem;color: var(--primary-light);}.admin-badge i {margin-right: 5px;}.menu-toggle {display: none;font-size: 1.5rem;cursor: pointer;}.hero {min-height: 55vh;display: flex;align-items: center;justify-content: center;text-align: center;padding: 8rem 2rem 4rem;background: radial-gradient(circle at 50% 30%, rgba(99, 102, 241, 0.12), transparent 60%);}.hero h1 {font-size: 3.5rem;font-weight: 800;letter-spacing: -1px;}.hero h2 {font-size: 2rem;font-weight: 700;letter-spacing: -1px;margin-bottom: 1rem;}.hero h1 span, h2 span {color: var(--primary);}.greeting-box { padding: 0.5rem 1rem; background: rgba(99,102,241,0.1); border-radius: 60px; display: inline-block; border: 1px solid rgba(99,102,241,0.3); }.greeting-text { font-size: 1.2rem; color: var(--primary-light); }.greeting-emoji { font-size: 1.5rem; margin-left: 0.5rem; }.hero p {color: var(--text-secondary);font-size: 1.1rem;max-width: 600px;margin: 0 auto;}.stats {display: flex;gap: 3rem;justify-content: center;margin-top: 2.5rem;}.stat {text-align: center;}.stat-number {font-size: 2rem;font-weight: 800;color: var(--primary);}.stat-label {font-size: 0.8rem;color: var(--text-muted);}section {padding: 5rem 2rem;}.container {max-width: 1400px;margin: 0 auto;}.section-header {text-align: center;margin-bottom: 3rem;}.section-header h2 {font-size: 2rem;font-weight: 700;margin-bottom: 0.5rem;}.section-header h2 span {color: var(--primary);}.section-header p {color: var(--text-secondary);}.filter-buttons {display: flex;gap: 1rem;justify-content: center;flex-wrap: wrap;margin-bottom: 3rem;}.filter-btn {padding: 0.5rem 1.5rem;border-radius: 40px;background: var(--bg-secondary);border: 1px solid var(--border);color: var(--text-secondary);cursor: pointer;transition: 0.2s;font-weight: 500;}.filter-btn:hover,.filter-btn.active {background: var(--primary);border-color: var(--primary);color: white;}.projects-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));gap: 2rem;}.project-card {background: var(--bg-card);border-radius: 24px;overflow: hidden;border: 1px solid var(--border);transition: all 0.3s ease;}.project-card:hover {transform: translateY(-8px);border-color: var(--primary);box-shadow: var(--shadow);}.project-image {width: 100%;height: 200px;object-fit: cover;background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card));}.project-info {padding: 1.5rem;}.project-title {font-size: 1.3rem;font-weight: 700;margin-bottom: 0.5rem;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 0.5rem;}.project-category {font-size: 0.7rem;padding: 0.2rem 0.8rem;border-radius: 20px;background: rgba(99, 102, 241, 0.2);color: var(--primary-light);}.project-desc {color: var(--text-secondary);font-size: 0.9rem;margin-bottom: 1rem;}.project-tech {display: flex;flex-wrap: wrap;gap: 0.5rem;margin-bottom: 1.2rem;}.project-tech span {background: var(--bg-secondary);padding: 0.2rem 0.8rem;border-radius: 20px;font-size: 0.7rem;color: var(--text-muted);}.project-link {display: inline-flex;align-items: center;gap: 0.5rem;background: var(--primary);color: white;padding: 0.6rem 1.2rem;border-radius: 40px;text-decoration: none;font-size: 0.85rem;font-weight: 500;transition: 0.2s;}.project-link:hover {background: var(--primary-dark);transform: translateX(5px);}.feedback-section {margin-top: 1rem;padding-top: 1rem;border-top: 1px solid var(--border);}.feedback-header {display: flex;align-items: center;gap: 0.5rem;margin-bottom: 0.8rem;color: var(--text-muted);font-size: 0.8rem;}.feedback-list {max-height: 180px;overflow-y: auto;margin-bottom: 0.8rem;}.feedback-item {background: var(--bg-secondary);border-radius: 12px;padding: 0.7rem;margin-bottom: 0.5rem;}.feedback-author {font-size: 0.7rem;font-weight: 600;color: var(--primary-light);margin-bottom: 0.2rem;}.feedback-text {font-size: 0.8rem;color: var(--text-secondary);}.feedback-date {font-size: 0.6rem;color: var(--text-muted);margin-top: 0.2rem;}.feedback-form {display: flex;gap: 0.5rem;margin-top: 0.5rem;flex-wrap: wrap;}.feedback-form input {flex: 1;padding: 0.6rem;border-radius: 30px;border: 1px solid var(--border);background: var(--bg-secondary);color: var(--text-primary);font-size: 0.8rem;}.feedback-form button {padding: 0.6rem 1rem;border-radius: 30px;border: none;background: var(--primary);color: white;cursor: pointer;font-size: 0.8rem;}.suggestion-box {background: rgba(99, 102, 241, 0.1);border-radius: 12px;padding: 0.5rem 0.8rem;font-size: 0.75rem;color: var(--primary-light);display: flex;align-items: center;gap: 0.5rem;}.sensor-warning {font-size: 0.65rem;color: var(--warning);margin-top: 0.3rem;display: flex;align-items: center;gap: 0.3rem;}.request-section {background: var(--bg-card);border-radius: 24px;padding: 2rem;margin-top: 2rem;margin-bottom: 2rem;border: 1px solid var(--border);}.request-header {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 1rem;margin-bottom: 1.5rem;}.request-header h3 {font-size: 1.3rem;display: flex;align-items: center;gap: 0.5rem;}.request-form {display: flex;flex-direction: column;gap: 1rem;margin-bottom: 2rem;padding-bottom: 1.5rem;border-bottom: 1px solid var(--border);}.request-form input,.request-form textarea {padding: 0.8rem;border-radius: 12px;border: 1px solid var(--border);background: var(--bg-secondary);color: var(--text-primary);font-family: inherit;}.request-form textarea {resize: vertical;min-height: 80px;}.request-form button {background: var(--primary);color: white;border: none;padding: 0.8rem;border-radius: 12px;cursor: pointer;font-weight: 600;transition: 0.2s;}.request-list {display: flex;flex-direction: column;gap: 1rem;max-height: 400px;overflow-y: auto;}.request-item {background: var(--bg-secondary);border-radius: 16px;padding: 1rem;border-left: 4px solid var(--primary);}.request-item h4 {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;margin-bottom: 0.5rem;}.request-name {color: var(--primary-light);font-size: 0.85rem;}.request-date {color: var(--text-muted);font-size: 0.7rem;}.request-desc {color: var(--text-secondary);font-size: 0.9rem;margin-top: 0.3rem;}.request-status {display: inline-block;padding: 0.2rem 0.6rem;border-radius: 20px;font-size: 0.7rem;margin-top: 0.5rem;}/* Forum/Guest Book Styles */.forum-section {background: var(--bg-card);border-radius: 24px;padding: 1.5rem;border: 1px solid var(--border);}.forum-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 1.2rem;padding-bottom: 0.8rem;border-bottom: 1px solid var(--border);}.forum-list {display: flex;flex-direction: column;gap: 0.8rem;max-height: 400px;overflow-y: auto;padding: 0.5rem;margin-bottom: 1rem;}.forum-message {display: flex;flex-direction: column;max-width: 85%;animation: fadeInUp 0.3s ease;}.message-bubble {padding: 0.8rem 1.2rem;border-radius: 20px;word-wrap: break-word;}.message-bubble.user-0 { background: #1e3a5f; }.message-bubble.user-1 { background: #2d3748; }.message-bubble.user-2 { background: #22543d; }.message-bubble.user-3 { background: #4c1d95; }.message-bubble.user-4 { background: #be123c; }.message-bubble.user-5 { background: #b45309; }.message-bubble.user-6 { background: #0e5e6f; }.message-bubble.user-7 { background: #334155; }.message-bubble.owner-bubble {background: linear-gradient(135deg, #1a1a2e, #975100);border-bottom-right-radius: 4px;box-shadow: 0 2px 12px rgba(245,158,11,0.4);}.message-name {font-size: 0.7rem;font-weight: 600;margin-bottom: 0.3rem;display: flex;align-items: center;gap: 0.3rem;}.owner-name { color: #fff3e0; }.owner-badge {background: white;color: #d97706;font-size: 0.6rem;padding: 0.15rem 0.5rem;border-radius: 20px;margin-left: 0.5rem;font-weight: bold;}.message-text { font-size: 0.85rem; line-height: 1.4; }.message-time {font-size: 0.6rem;color: var(--text-muted);margin-top: 0.3rem;text-align: right;color: white}.forum-form {margin-top: 1rem;padding-top: 1rem;border-top: 1px solid var(--border);}.form-row { display: flex; flex-direction: column; gap: 0.8rem; }.forum-name-input, .forum-message-input {padding: 0.8rem 1rem;border-radius: 30px;border: 1px solid var(--border);background: var(--bg-secondary);color: var(--text-primary);font-family: inherit;font-size: 0.9rem;}.message-row { display: flex; gap: 0.8rem; }.forum-message-input { flex: 1; }.forum-send-btn {padding: 0.8rem 1.5rem;border-radius: 30px;background: var(--primary);color: white;border: none;cursor: pointer;transition: 0.2s;}.reply-indicator {background: rgba(99,102,241,0.1);padding: 0.5rem 1rem;border-radius: 30px;display: flex;justify-content: space-between;align-items: center;font-size: 0.8rem;color: var(--primary-light);}.cancel-reply { background: none; border: none; color: var(--text-muted); cursor: pointer; }.reply-preview {font-size: 0.7rem;color: var(--primary-light);margin-bottom: 0.3rem;padding-left: 0.5rem;border-left: 2px solid var(--primary);}.forum-info {display: flex;justify-content: space-between;margin-top: 0.8rem;font-size: 0.7rem;color: var(--text-muted);flex-wrap: wrap;gap: 0.5rem;}.forum-empty { text-align: center; color: var(--text-muted); padding: 2rem; }.status-pending {background: rgba(245, 158, 11, 0.2);color: var(--warning);}.status-done {background: rgba(16, 185, 129, 0.2);color: var(--success);}.empty-request {text-align: center;color: var(--text-muted);padding: 2rem;}.toast {position: fixed;bottom: 2rem;right: 2rem;padding: 0.8rem 1.5rem;background: var(--success);border-radius: 12px;transform: translateX(400px);transition: 0.3s;z-index: 3000;font-size: 0.85rem;}.toast.show {transform: translateX(0);}.toast.error {background: var(--danger);}.toast.warning {background: var(--warning);}footer {padding: 2rem;text-align: center;border-top: 1px solid var(--border);color: var(--text-muted);font-size: 0.8rem;}@keyframes fadeInUp {from {opacity: 0;transform: translateY(30px);}to {opacity: 1;transform: translateY(0);}}.project-card {animation: fadeInUp 0.5s ease forwards;}@media (max-width: 768px) {.menu-toggle {display: block;}.nav-links {position: fixed;top: 70px;left: -100%;width: 70%;height: calc(100vh - 70px);background: var(--bg-card);flex-direction: column;padding: 2rem;transition: 0.3s;gap: 1.5rem;border-right: 1px solid var(--border);}.nav-links.active {left: 0;}.hero h1 {font-size: 2rem;}.projects-grid {grid-template-columns: 1fr;}.stats {gap: 1.5rem;}.filter-buttons {display: flex;gap: 0.8rem;justify-content: center;flex-wrap: wrap;margin-bottom: 3rem;max-height: 120px;overflow-y: auto;padding: 0.5rem;}.filter-btn {padding: 0.5rem 1.2rem;border-radius: 40px;background: var(--bg-secondary);border: 1px solid var(--border);color: var(--text-secondary);cursor: pointer;transition: 0.2s;font-weight: 500;font-size: 0.85rem;white-space: nowrap;}.filter-btn:hover,.filter-btn.active {background: var(--primary);border-color: var(--primary);color: white;}/* Scrollbar untuk filter */.filter-buttons::-webkit-scrollbar {height: 4px;}.filter-buttons::-webkit-scrollbar-track {background: var(--bg-secondary);border-radius: 10px;}.filter-buttons::-webkit-scrollbar-thumb {background: var(--primary);border-radius: 10px;}}.reply-btn {background: none;border: none;color: var(--text-muted);font-size: 0.6rem;cursor: pointer;padding: 0.2rem 0.5rem;border-radius: 20px;transition: 0.2s;}.reply-btn:hover {background: var(--bg-secondary);color: var(--primary);}.reply-preview {font-size: 0.7rem;color: var(--primary-light);margin-bottom: 0.3rem;padding-left: 0.5rem;border-left: 2px solid var(--primary);}.reply-indicator {background: rgba(99, 102, 241, 0.1);padding: 0.5rem 1rem;border-radius: 30px;display: flex;justify-content: space-between;align-items: center;font-size: 0.8rem;color: var(--primary-light);}.cancel-reply {background: none;border: none;color: var(--text-muted);cursor: pointer;font-size: 0.8rem;}