:root {--bg1: #131831;--bg2: #16213e;--bg3: #0e172c;--gold0: #fffb00;--gold1: #ffcc00;--gold2: #d4a300;--accent1: #88ff00;--text0: #ffffff;--text1: #e9e9e9;--text2: #bdbdbd;--red: #ff0000;--glass1: rgba(255, 255, 255, 0.04);--glass2: rgba(255, 255, 255, 0.1);--glass3: rgba(0, 0, 0, 0.25);--glass4: rgba(0, 0, 0, 0.5);--glass5: rgba(7, 10, 24, 0.952);}
body {margin: 0;font-family: Arial, sans-serif;background: var(--bg2);color: var(--text2);line-height: 1.5;}
a {text-decoration: none;}
header {display: flex;justify-content: space-between;align-items: center;padding: 10px 20px;background: var(--glass4);position: sticky;top: 0;z-index: 100;border-bottom: 1px solid var(--gold1);}
header .logo {width: 150px;display: flex;align-items: center;}
header .logo img {width: 100%;height: auto;object-fit: contain;}
.header-items {display: flex;gap: 20px;font-weight: normal;}
.header-items a {color: var(--text2);padding: 6px 10px;border-radius: 5px;transition: transform 0.3s, color 0.3s;position: relative;}
.header-items a:hover {color: var(--gold0);animation: pulse 0.6s infinite;cursor: pointer;}
@keyframes pulse {0% {transform: scale(1);}50% {transform: scale(1.1);}100% {transform: scale(1);}}
.menu-btn {display: none;font-size: 22px;color: var(--gold0);cursor: pointer;}
.wrap {width: 1200px;max-width: 95%;margin: auto;}
#indoTimeText {font-size:0.8rem;color:var(--text2);}
.marquee-wrap {padding: 10px 0;display: flex;gap: 10px;align-items: center;border-radius: 8px;margin-top: 10px;position: relative;overflow: hidden;}
.marquee-left {white-space: nowrap;color: var(--gold0);}
.marquee {overflow: hidden;white-space: nowrap;width: 100%;color: var(--gold0);}
.marquee span {display: inline-block;padding-left: 100%;animation: marq 12s linear infinite;}
@keyframes marq {0% {transform: translateX(0);}100% {transform: translateX(-100%);}}
.marquee:hover span {animation-play-state: paused;}
.hero-grid {margin: 10px 0;display: grid;grid-template-columns: 1fr 1fr;gap: 10px;}
.hero-left {padding: 10px 12px;background: var(--bg3);border-radius: 10px;border-bottom: 2px solid var(--gold0);display: flex;flex-direction: column;justify-content: flex-start;gap: 8px;}
.hero-left h1 {font-family: "Orbitron", sans-serif;color: var(--gold0);margin: 0;font-size: 24px;}
.hero-left p {margin: 0;font-size: 14px;line-height: 1.4;}
.hero-left a {color: var(--gold0);}
.hero-right {background: var(--bg3);border-bottom: 2px solid var(--gold0);border-radius: 10px;overflow: hidden;}
.slider {position: relative;width: 100%;height: 310px;border-radius: 10px;overflow: hidden;}
.slide {position: absolute;width: 100%;height: 100%;opacity: 0;transition: 0.6s;}
.slide.active {opacity: 1;z-index: 1;}
.slide img {width: 100%;height: 100%;object-fit: cover;display: block;}
.overlay {position: absolute;top: 50%;left: 49%;transform: translate(-50%, -50%);text-align: left;padding: 20px;width: 90%;max-width: 500px;background: linear-gradient(to right, var(--glass4), transparent);border-radius: 10px;color: var(--text2);z-index: 10;}
.overlay h2 {margin: 0 0 2px;font-size: 23px;font-family: "Orbitron", sans-serif;color: var(--gold0);}
.overlay p {margin: 0;font-size: 15px;color: var(--text0);}
.slider .prev, .slider .next {position: absolute;top: 50%;transform: translateY(-50%);font-size: 30px;color: var(--text0);cursor: pointer;z-index: 20;padding: 10px;}
.slider .prev:hover, .slider .next:hover {color: var(--gold0);}
.slider .prev { left: 0px; }
.slider .next { right: 0px; }
.under-auth {display: flex;gap: 15px;margin-top: 10px;}
.under-auth button {padding: 12px 24px;border-radius: 8px;font-weight: 600;cursor: pointer;font-size: 16px;font-family: "Orbitron", sans-serif;}
.btn-login {background: transparent;color: var(--text2);border: 1px solid var(--gold0);}
.btn-login:hover {background: linear-gradient(135deg, var(--gold0), var(--gold2));color: var(--bg3);border: 1px solid var(--bg1);}
.btn-register {background: linear-gradient(135deg, var(--gold0), var(--gold2));color: var(--bg3);border: 1px solid var(--bg1);}
.btn-register:hover {background: transparent;color: var(--text2);border: 1px solid var(--gold0);}
.btn-whatsapp {background: var(--accent1);color: var(--bg3);border: 1px solid var(--text0);}
.btn-whatsapp:hover {background: transparent;color: var(--text2);border: 1px solid var(--accent1);}
.header-whatsapp {display: none;}
.faq {margin: 10px 0;background: var(--bg3);padding: 20px;border-radius: 10px;border-bottom: 2px solid var(--gold0);}
.faq details {background: var(--glass1);}
.faq-divider {height: 2px;background: var(--gold0);margin: 20px 0;border-radius: 2px;}
.faq-divider-dashed {height: 1px;border-bottom: 2px dashed var(--gold0);margin: 20px 0;}
.faq h1, .faq h2, .faq h3 {color: var(--gold0);font-family: "Orbitron", sans-serif;margin-bottom: 5px;padding-bottom: 5px;font-size: 20px;line-height: 1;}
details {margin-bottom: 10px;cursor: pointer;padding: 10px;border-radius: 6px;transition: 0.3s;color: var(--text2);font-size: 16px;line-height: 1.8;}
details:hover {background: var(--glass3);color: var(--gold0);}
.faq p {color: var(--text2);font-size: 15px;line-height: 1.3;margin-top: 10px;}
.sidebar-nav {position: fixed;top: 0;left: 0;width: 260px;height: 100%;background: var(--glass5);padding: 20px;transform: translateX(-100%);transition: transform 0.3s ease;overflow-y: auto;z-index: 200;border-right: 1px solid var(--gold0);}
.sidebar-nav.show {transform: translateX(0);}
.sidebar-nav a {display: flex;align-items: center;gap: 10px;color: var(--text2);padding: 10px;border-radius: 6px;transition: 0.3s;border-bottom: 1px solid transparent;}
.sidebar-nav a:hover {background: var(--glass5);color: var(--gold0);transform: scale(1.03);border-bottom: 1px solid var(--gold0);}
.sidebar-nav .divider {border-bottom: 1px solid var(--gold0);margin: 10px 0;}
.fa-animate {transition: 0.4s;}
.fa-animate:hover {transform: rotate(20deg) scale(1.3);color: var(--text0);}
.simple-footer {background: var(--bg1);color: var(--text2);padding: 20px 0 10px;font-family: Inter, sans-serif;}
.footer-container {display: flex;flex-wrap: wrap;justify-content: space-between;gap: 20px;}
.footer-logo img {width: 150px;margin-bottom: 6px;}
.footer-logo p {font-size: 14px;color: var(--text2);margin: 0;}
.footer-links h4,
.footer-info h4 {color: var(--gold0);margin-bottom: 6px;font-size: 16px;}
.footer-links a {display: block;color: var(--text2);font-size: 14px;margin-bottom: 4px;transition: 0.3s;}
.footer-links a:hover {color: var(--gold0);}
.footer-info p {font-size: 14px;margin: 2px 0;color: var(--text2);}
.footer-bottom {margin-top: 25px;text-align: center;font-size: 13px;color: var(--text2);}

@media (max-width: 900px) {
.hero-grid {grid-template-columns: 1fr;}
.slider {position: relative;width: 100%;height: 210px;}
.overlay {position: absolute;top: 50%;left: 52%;}
.overlay h2 {margin: 0 0 2px;font-size: 20px;}
.overlay p {margin: 0;font-size: 12px;}
.overlay h2 {font-size: 17px;}
.overlay p {font-size: 14px;}
.slider .prev {left: 0px;}
.slider .next {right: 0px;}
.menu-btn {display: block;}
.header-items {display: none;}
.btn-whatsapp {display: none;}
.header-whatsapp {display: flex;align-items: center;justify-content: center;position: absolute;right: 40px;top: 50%;transform: translateY(-50%);padding: 4px 16px;border-radius: 10px;font-weight: 800;cursor: pointer; z-index: 150;transition: all 0.3s ease;}
.header-whatsapp:hover {color: var(--accent1);}
.header-whatsapp i {font-size: 30px;margin-right: 10px;color: var(--accent1);}
.footer-container {flex-direction: column;text-align: left;gap: 10px;}}