* {margin: 0;padding: 0;box-sizing: border-box;}:root {--color-primary: #00B3B3;--color-secondary: #6B4F3B;--color-text: #f0f0f0;--color-bg: #121212;--color-accent: #FFC107;--font-heading: 'Roboto', sans-serif;--font-body: 'Montserrat', sans-serif;}html, body {width: 100%;overflow-x: hidden;background-color: var(--color-bg);color: var(--color-text);font-family: var(--font-body);line-height: 1.5;font-size: 16px;}.container {width: 100%;max-width: 1200px;margin: auto;padding: 0 1rem;}.navbar {background: rgba(0, 0, 0, 0.7);border-radius: 12px;margin: 1rem;padding: 0.5rem 1rem;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 1rem;}.navbar-brand {display: flex;align-items: center;gap: 0.5rem;font-size: clamp(1.2rem, 2.5vw, 1.5rem);color: #fff;}.navbar-brand img {width: 40px;height: 40px;object-fit: contain;}.nav-link {position: relative;color: #fff;font-weight: 500;font-size: clamp(1rem, 2vw, 1.1rem);margin-left: 1rem;transition: color 0.3s ease;overflow: hidden;}.nav-link::after {content: "";position: absolute;left: 0;bottom: 0;height: 2px;width: 100%;background-color: var(--color-accent);transform: scaleX(0);transform-origin: left;transition: transform 0.4s ease-in-out;}.nav-link.active::after {transform: scaleX(1);}.nav-link:hover, .nav-link.active {color: var(--color-accent);}.navbar-toggler {border: none;}.navbar-toggler:focus {box-shadow: none;}.custom-offcanvas {background-color: rgba(0, 0, 0, 0.7);}.offcanvas .nav-link {font-size: 1.2rem;margin: 0.5rem 0;}@media (min-width: 991px) {.nav-link:hover, .nav-link.active {color: var(--color-accent);}}.side-menu {position: fixed;right: 1rem;bottom: 6rem;display: flex;flex-direction: column;gap: 1rem;z-index: 1000;}.btn-round {width: clamp(60px, 7vw, 75px);height: clamp(60px, 7vw, 75px);background: linear-gradient(135deg, #FFF4C2, #FFD700, #FFC107, #B8860B, #FFF4C2);color: #000;border: none;border-radius: 50%;cursor: pointer;font-size: 16px;z-index: 2;display: flex;align-items: center;justify-content: center;overflow: hidden;transition: transform 0.3s ease, box-shadow 0.3s ease;text-decoration: none;}.btn-round i {font-size: 1.8rem;transition: opacity 0.3s ease;}.btn-round span {position: absolute;opacity: 0;font-size: 0.9rem;font-weight: 800;color: #fff;transition: opacity 0.3s ease;}.btn-round:hover i {opacity: 0;}.btn-round:hover span {opacity: 1;}.btn-round:hover {transform: scale(1.1);box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.2);}.custom-modal {max-width: 90vw;}.custom-modal .modal-content {background: linear-gradient(135deg, #1f1f1f, #2c2c2c);color: #fff;border-radius: 1rem;height: 80vh;overflow-y: auto;box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);border: none;}.custom-modal .modal-header {background: rgba(255, 255, 255, 0.05);border-bottom: 1px solid rgba(255, 255, 255, 0.1);}.custom-modal .modal-body {padding: 2rem;text-align: center;}.modal.fade .modal-dialog {transition: transform 0.3s ease-out;}.btn-close {filter: invert(1);opacity: 0.8;}.btn-close:hover {opacity: 1;}.language-switch {position: fixed;left: 1rem;bottom: 6rem;z-index: 999;}.switch {position: relative;display: inline-block;width: 80px;height: 40px;}.switch input {opacity: 0;width: 0;height: 0;}.slider {position: absolute;cursor: pointer;background-color: #ffc107;border-radius: 34px;height: 100%;width: 100%;transition: 0.4s;}.slider::before {content: "";height: 32px;width: 32px;background-color: white;border-radius: 50%;position: absolute;bottom: 4px;left: 4px;transition: 0.4s;}.slider .label-en, .slider .label-id {position: absolute;top: 50%;transform: translateY(-50%);font-size: 0.9rem;font-weight: bold;color: #000;z-index: 2;}.slider .label-en {left: 10px;}.slider .label-id {right: 10px;}.switch input:checked + .slider::before {transform: translateX(40px);}.footer {background-color: var(--color-secondary);position: fixed;bottom: 0;left: 0;width: 100%;z-index: 100;opacity: 0.8;text-align: center;padding: 1rem;font-size: clamp(0.8rem, 2vw, 1rem);color: #fff;}@media (max-width: 768px) {.navbar {flex-direction: column;align-items: flex-start;}.nav-link {margin: 0.5rem 0;}.footer {font-size: 0.8rem;padding: 0.75rem;}.btn-round {width: 60px;height: 60px;}.slider .label-en, .slider .label-id {font-size: 0.75rem;}.custom-modal .modal-body {padding: 1.5rem 1rem;}}