/* ====== FONT FACE: Wondra (judul) & Neulis Neue (body) ====== */
@font-face {
  font-family: 'Wondra';
  src: url('./fonts/Wondra.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neulis Neue';
  src: url('./fonts/NeulisNeue-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neulis Neue';
  src: url('./fonts/NeulisNeue-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neulis Neue';
  src: url('./fonts/NeulisNeue-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neulis Neue';
  src: url('./fonts/NeulisNeue-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ====== BASE ====== */
:root {
  --gold-50:#FFF8E1; --gold-100:#FFECB3; --gold-200:#FFE082; --gold-300:#FFD54F;
  --gold-400:#FFC107; --gold-500:#FFB300; --gold-600:#FF8F00; --gold-700:#FF6F00; --gold-800:#E65100;
  --silver-50:#FAFAFA; --silver-100:#F5F5F5; --silver-200:#EEEEEE; --silver-300:#E0E0E0;
  --silver-400:#BDBDBD; --silver-500:#9E9E9E; --silver-600:#757575; --silver-700:#616161;
  --silver-800:#424242; --silver-900:#212121;
}

body {
  font-family: 'Neulis Neue', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: radial-gradient(circle at 20% 0%, #FFF8E1 0%, #F5F5F5 40%, #EEEEEE 100%);
  min-height: 100vh;
  color: var(--silver-900);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Wondra', 'Neulis Neue', serif; letter-spacing: 0.02em; }
.font-body    { font-family: 'Neulis Neue', sans-serif; }

/* ====== EFFECTS ====== */
.glass { background: rgba(255,255,255,.58); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.6); }
.glass-dark { background: rgba(33,33,33,.92); backdrop-filter: blur(16px); }
.text-glow { text-shadow: 0 0 12px rgba(255,179,0,.5), 0 0 24px rgba(255,143,0,.3); }
.shadow-glow-gold { box-shadow: 0 0 20px rgba(255,179,0,.45), 0 0 40px rgba(255,143,0,.25); }
.shadow-glow-soft { box-shadow: 0 0 12px rgba(255,179,0,.3); }
.shadow-glass     { box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.focus-gold:focus { outline:none; box-shadow: 0 0 0 2px var(--gold-500), 0 0 18px rgba(255,179,0,.45); border-color: var(--gold-500); }

.grid-bg {
  background-image:
    linear-gradient(rgba(255,179,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,179,0,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.card-target {
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-700) 100%);
  color: white;
  box-shadow: 0 8px 24px rgba(255,143,0,.4);
}

/* ====== ANIMATIONS ====== */
.skeleton {
  background: linear-gradient(90deg, var(--silver-300) 0%, var(--silver-100) 50%, var(--silver-300) 100%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: .5rem;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes pulseGold { 0%,100%{box-shadow:0 0 12px rgba(255,179,0,.4)} 50%{box-shadow:0 0 28px rgba(255,179,0,.85)} }
.pulse-gold { animation: pulseGold 2s infinite; }
@keyframes modalIn { from{opacity:0; transform:scale(.85) translateY(40px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-in { animation: modalIn .45s cubic-bezier(.16,1,.3,1); }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.fade-in { animation: fadeIn .3s ease; }

.scrollbar-thin::-webkit-scrollbar { width:6px; height:6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--gold-500); border-radius:3px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }

/* ====== ADAPTIVE LOGO (mengikuti tab theme browser) ====== */
.logo-favicon-wrapper img { display: block; }

/* ====== LANDING PAGE ====== */
.landing-card {
  transition: transform .3s, box-shadow .3s;
}
.landing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(255,143,0,.3);
}