/* ==== GLOBAL RESET ==== */
:root{
  --bg:#0b0b0b; --card:#121212; --muted:#cfcfcf; --gold:#d4af37;
  --white:#fff; --glass: rgba(255,255,255,0.03);}

*{margin: 0;padding: 0;box-sizing: border-box;}

html, body {font-family: 'Segoe UI', Arial, sans-serif;background: #0d0d0d;color: #eaeaea;line-height: 1.6;}

a{color:inherit}

/* Efek glow emas futuristik */
.icon {width: 24px;height: 24px;filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6))drop-shadow(0 0 10px rgba(255, 165, 0, 0.4));transition: transform 0.3s ease, filter 0.3s ease;}

/* Hover efek kilau bergerak */
.icon:hover {transform: scale(1.1);filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9))drop-shadow(0 0 15px rgba(255, 165, 0, 0.6));}

/* Jika icon inline SVG, tambahkan animasi gradient bergerak */
@keyframes gold-shine {0% { stop-color: #FFD700; }50% { stop-color: #FFA500; }100% { stop-color: #FFD700; }}

svg defs linearGradient stop {animation: gold-shine 3s infinite alternate;}

/* ==== NAVBAR ==== */
.nav {background: #000;padding: 1rem 2rem;position: sticky;top: 0;z-index: 100;}
.nav-inner {display: flex;justify-content: space-between;align-items: center;}

.brand{display:flex;align-items:center;gap:12px}
.brand img.logo {height: 50px;width: 100px;margin-right: 1rem;}
.logo {height: 50px;width: 100px;}
.brand img.icon {height: 28px;}
.brand-name{color:var(--gold);font-weight:700}

.menu {display: flex;gap: 1.2rem;align-items: center;}
.menu a {font-weight: 500;transition: color 0.2s;}
.menu a:hover {color: #facc15;}
.menu-cta {padding: 0.4rem 1rem;border-radius: 20px;background: #facc15;color: #000;font-weight: 600;}

.btn-primary {padding: 0.4rem 1rem;border-radius: 20px;background: #111;border: 1px solid #facc15;color: #facc15;font-weight: 600;}

#theme-toggle {padding: 0.4rem 1rem;border: none;border-radius: 50%;background: #222;color: #fff;cursor: pointer;}

/* ==== HERO ==== */
.hero {display: flex;justify-content: center;align-items: center;gap: 3rem;min-height: 70vh;background: linear-gradient(135deg, #111, #1a1a1a);}
.hero-left {flex: 1;}
.hero-left h1 {font-size: 2.5rem;color: #facc15;}
.hero-left .sub {font-size: 1.1rem;margin: 1rem 0;}
.hero-left .btn-primary {margin-top: 1rem;display: inline-block;}
.hero-right {flex: 1;display: flex;justify-content: center;align-items: center;}
.hero-right canvas {background: #111;border-radius: 12px;padding: 1rem;box-shadow: 0 0 10px #facc15;}
.hero-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.hero-ctas{display:flex;gap:12px}

/* ==== INTEGRATIONS ==== */
.integration-logos img {width: 100px;height: auto;margin: 0 10px;transition: transform 0.3s ease;}
.integration-logos img:hover {opacity: 0.7;transform: scale(1.1);}

/* ----- AUTH CARD----- */
.auth-section {display: flex;justify-content: center;align-items: center;padding: 48px 20px;}
.auth-card {background: var(--card);padding: 32px;border-radius: 12px;width: 100%;max-width: 400px;box-shadow: 0 6px 20px rgba(0,0,0,0.4);}
.auth-card h1 {color: var(--gold);margin-bottom: 24px;font-size: 1.5rem;text-align: center;}
.auth-links {text-align: center;margin: 16px 0;}
.auth-links a {color: var(--gold);font-size: 0.9rem;text-decoration: none;}
.auth-divider {text-align: center;margin: 16px 0;position: relative;}
.auth-divider span {background: var(--card);padding: 0 10px;color: var(--muted);font-size: 0.85rem;}
.auth-divider::before {content: "";position: absolute;left: 0;top: 50%;width: 100%;height: 1px;background: rgba(255,255,255,0.08);transform: translateY(-50%);}

.form-group {margin-bottom: 16px;}
.form-group label {display: block;font-size: 0.9rem;margin-bottom: 6px;color: var(--muted);}
.form-group input {width: 100%;padding: 10px 14px;border-radius: 8px;border: 1px solid rgba(255,255,255,0.08);background: transparent;color: var(--white);}

/* ==== BUTTONS ==== */
.btn{display:inline-block;padding:12px 22px;border-radius:999px;text-decoration:none;cursor:pointer;font-weight:700}
.btn-primary{background:var(--gold);color:#0b0b0b}
.btn-light{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.btn-google {background: #db4437;color: white;font-weight: 600;}

.mockup{max-width:520px;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,0.6)}
.w-100 {width: 100%;}

/* ==== FEATURES ==== */
.features h2 {text-align: center;color: #facc15;margin-bottom: 2rem;}
.features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem;}
.feature-item {background: #1a1a1a;padding: 1.5rem;border-radius: 12px;box-shadow: 0 0 8px rgba(0,0,0,0.3);}
.feature-item h3 {color: #facc15;margin-bottom: 1rem;}
.feature-item ul {padding-left: 1.2rem;}
.feature-item p, li {font-size: 0.95rem;}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.feature-card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.6);color:var(--muted)}

/* ----- SECTIONS ----- */
.section{padding:48px 20px}
.section-inner{max-width:1200px;margin:0 auto}
.section h2{color:var(--gold);font-size:1.6rem;margin:0 0 18px}
.coins-table{width:100%;border-collapse:collapse;color:var(--muted)}
.coins-table th{background:rgba(212,175,55,0.12);color:var(--gold);padding:10px;text-align:left}
.coins-table td{padding:10px;border-top:1px solid rgba(255,255,255,0.02)}
.chart-wrap{background:var(--card);padding:12px;border-radius:12px;height:260px}

/* ==== DATA TABLE ==== */
.data-preview {background: #111;border-radius: 12px;padding: 2rem;}
.data-preview h2 {color: #facc15;margin-bottom: 1rem;}
.preview-grid{display:grid;grid-template-columns:1fr 420px;gap:20px;align-items:start}

table {width: 100%;border-collapse: collapse;}
.table-wrap{background:var(--card);padding:16px;border-radius:12px}

thead {background: #222;}
thead th {padding: 0.8rem;text-align: left;color: #facc15;}

tbody td {padding: 0.8rem;border-bottom: 1px solid #333;}
.up{color:#27ae60;font-weight:700}
.down{color:#e05656;font-weight:700}

* ==== TESTIMONIALS ==== */
.testimonials {background: #1a1a1a;padding: 3rem;border-radius: 12px;text-align: center;font-style: italic;}
.testimonials h2 {color: #facc15;margin-bottom: 1rem;}
blockquote {font-size: 1.1rem;}

/* ==== SOCIAL ==== */
.social {text-align: center;}
.social h2 {color: #facc15;margin-bottom: 1rem;}
.social-links {display: flex;justify-content: center;gap: 1.2rem;}
.social-links a {color: #facc15;font-weight: 600;transition: opacity 0.2s;}
.social-links a:hover {opacity: 0.8;}

/* ==== FAQ ==== */
.faq h2 {color: #facc15;margin-bottom: 1rem;}
.faq ul li {margin-bottom: 0.5rem;}

/* ==== FOOTER ==== */
footer {background: #000;text-align: center;padding: 1rem;font-size: 0.9rem;border-top: 1px solid #222;}
footer p:first-child {color: #facc15;}


/* ----- RESPONSIVE ----- */
@media (max-width:980px){
  .preview-grid{grid-template-columns:1fr}
  .mockup{max-width:420px}
}
@media (max-width:640px){
  .nav-inner{padding:12px}
  .hero-left h1{font-size:1.6rem}
  .hero-inner{padding:12px}
  .hero-right{order:2}
  .hero-left{order:1}
}