/* ============================================
   BUNKER OPANOWSKI — shared.css
   CSS Global · Dark & Gold Theme (High Contrast)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;600;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

/* === CSS VARIABLES (KONTRAST MAX) === */
:root {
  --bg:           #0a0c10;
  --surface:      #14181f;
  --surface2:     #1e242c;
  --accent:       #f5a623;
  --accent2:      #e85d04;
  --text:         #f0f3f8;
  --text-muted:   #b8c0cc;
  --green:        #5dcc8a;
  --red:          #e05a5a;
  --blue:         #7aaeff;
  --purple:       #d0a0ff;
  --border:       #3a4050;
  --gold:         #e6b53e;
  --cream:        #fef7e6;
  --font-mono:    'Space Mono', monospace;
  --font-display: 'Playfair Display', serif;
  --font-body:    'Syne', sans-serif;
}

/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

/* === TYPOGRAPHY === */
h1, h2, h3 { letter-spacing: -0.3px; font-weight: 600; }
a { color: inherit; text-decoration: none; }

/* === UTILITIES === */
.mono        { font-family: var(--font-mono); }
.text-accent { color: var(--accent); }
.text-muted  { color: var(--text-muted); }
.text-gold   { color: var(--gold); }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-blue   { color: var(--blue); }
.text-purple { color: var(--purple); }

/* === LIVE DOT === */
.live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 4px;
  vertical-align: middle;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

/* === SHARED FOOTER === */
.site-footer {
  padding: 2rem 1.5rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.site-footer .social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.site-footer .social-links a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-muted);
  font-size: 0.75rem;
  transition: color 0.2s;
}
.site-footer .social-links a:hover { color: var(--gold); }

/* === BACK LINK === */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--text-muted); transition: color 0.2s;
}
.back-link:hover { color: var(--gold); }

/* === TAG STYLES (WARNA TERANG & KONTRAST) === */
.tag {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-family: var(--font-mono); font-size: 0.65rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.tag-youtube  { background: #3a1e1e; color: #ff8a8a; }
.tag-farming  { background: #1e3a2a; color: #8fdfb0; }
.tag-mekanik  { background: #3a2e1e; color: #f5c48a; }
.tag-gadget   { background: #2e1e3a; color: #d0a0ff; }
.tag-filosofi { background: #1e2e5a; color: #8aaeff; }
.tag-ai       { background: #1e3a2a; color: #8fdfb0; }
.tag-web      { background: #3a1e1e; color: #ff8a8a; }
.tag-tipstrik { background: #3a2e1e; color: #f5c48a; }