/* Font dimuat lewat <link rel="stylesheet"> di setiap halaman. @import di sini
   membuat berkas font diminta dua kali dan menunda render, jadi sengaja dihapus. */

:root {
  --bg-primary: #0a0a1a;
  --bg-secondary: #12122a;
  --bg-card: rgba(20, 20, 50, 0.6);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --gold: #ffd700;
  --gold-dim: #b8960f;
  --purple: #9b59b6;
  --purple-light: #c39bd3;
  --cyan: #00d4ff;
  --emerald: #2ecc71;
  --rose: #ff6b9d;
  --coral: #ff7675;
  --text-primary: #e8e6f0;
  --text-secondary: #a0a0c0;
  --text-muted: #6c6c8a;
  --font-heading: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-glow: 0 0 30px rgba(155, 89, 182, 0.3);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input, button, select, textarea {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

input[type="date"] {
  min-height: 48px;
  display: flex;
  align-items: center;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.8;
  cursor: pointer;
  padding: 4px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--purple);
  border-radius: var(--radius-sm);
}

/* Particle Canvas */
#particleCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Base Layout Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 10;
}

/* Main Top Navigation Header */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(10, 10, 26, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  padding: 10px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-logo-wrapper {
  display: flex;
  align-items: center;
}

.header-logo-img {
  height: 48px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.header-logo-img:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Databank Admin Button */
.databank-btn {
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  padding: 8px 16px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.databank-btn:hover {
  background: rgba(255, 215, 0, 0.2);
  border-color: var(--gold);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
  transform: translateY(-2px);
}

/* Language Selector Component */
.lang-selector {
  position: relative;
  z-index: 1002;
}

.lang-toggle-btn {
  background: rgba(255, 215, 0, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 215, 0, 0.35);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.lang-toggle-btn:hover {
  background: rgba(255, 215, 0, 0.2);
  border-color: var(--gold);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.35);
}

.lang-arrow {
  font-size: 0.75rem;
  color: var(--gold);
  transition: transform 0.3s ease;
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: rgba(12, 8, 28, 0.98);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.2);
  min-width: 185px;
  z-index: 100000 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lang-dropdown.hidden {
  display: none !important;
}

.lang-option {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
  width: 100%;
  text-align: left;
}

.lang-option:hover,
.lang-option.active {
  background: rgba(255, 215, 0, 0.12);
  color: var(--gold);
}

/* Hero Section - Balanced & Elegant */
#hero {
  padding: 78px 0 6px 0;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

.cosmic-title {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4.8vw, 3.4rem);
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 25px rgba(155, 89, 182, 0.4);
  margin-bottom: 5px;
  line-height: 1.2;
  position: relative;
  z-index: 2;
}

#hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.hero-subtitle {
  font-size: clamp(0.92rem, 1.8vw, 1.1rem);
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0 auto 5px auto;
  text-align: center;
  z-index: 2;
}

.mystical-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vmin;
  height: 90vmin;
  border: 1px dashed rgba(255, 215, 0, 0.15);
  border-radius: 50%;
  animation: orbit 60s linear infinite;
  z-index: 1;
  pointer-events: none;
}

.zodiac-symbol {
  position: absolute;
  font-size: 1.8rem;
  color: var(--gold-dim);
  opacity: 0.5;
}

/* Position a few symbols as placeholders in the ring */
.mystical-ring .zodiac-symbol:nth-child(1) { top: -1rem; left: 50%; transform: translateX(-50%); }
.mystical-ring .zodiac-symbol:nth-child(2) { bottom: -1rem; left: 50%; transform: translateX(-50%); }
.mystical-ring .zodiac-symbol:nth-child(3) { left: -1rem; top: 50%; transform: translateY(-50%); }
.mystical-ring .zodiac-symbol:nth-child(4) { right: -1rem; top: 50%; transform: translateY(-50%); }


/* Input Form Section - Balanced Spacing */
#inputSection {
  padding: 4px 0 30px 0;
  position: relative;
  z-index: 10;
}

.form-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 20px 26px;
  max-width: 590px;
  margin: 0 auto;
  box-shadow: var(--shadow-glow);
}

.form-group {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-weight: 600;
}

.form-control {
  background: rgba(10, 10, 26, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 15px rgba(155, 89, 182, 0.4);
}

.submit-btn {
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(45deg, var(--gold-dim), var(--gold));
  color: #000;
  font-family: var(--font-heading);
  font-size: 1.06rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.3s ease;
  animation: pulse 3s infinite alternate;
}

.submit-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}

/* Loading Animation */
#loadingSection {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 26, 0.9);
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.spinner {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--gold);
  border-bottom-color: var(--purple);
  animation: rotate 1.5s linear infinite;
  margin-bottom: 24px;
}

.spinner::before {
  content: '';
  position: absolute;
  top: 10px; left: 10px; right: 10px; bottom: 10px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-left-color: var(--cyan);
  animation: rotate 1s linear infinite reverse;
}

.loading-text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: 2px;
  animation: float 2s ease-in-out infinite;
}

/* Results Section */
#resultsSection {
  padding: 80px 0;
  position: relative;
  z-index: 10;
}

.results-header {
  text-align: center;
  margin-bottom: 60px;
}

.results-header h2 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--gold);
  margin-bottom: 10px;
}

#resultsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 850px) {
  #resultsGrid {
    grid-template-columns: 1fr;
  }
}

/* Result Cards */
.result-card {
  background: var(--bg-card);
  backdrop-filter: blur(15px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.result-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--card-color, var(--glass-border));
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.result-card:hover {
  transform: translateY(-8px);
  border-color: var(--card-color, var(--glass-border));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--card-glow, transparent);
}

.result-card:hover::before {
  opacity: 1;
}

/* Specific Card Colors */
#card-western { --card-color: #ff6b6b; --card-glow: rgba(255, 107, 107, 0.2); }
#card-chinese { --card-color: #ff4757; --card-glow: rgba(255, 71, 87, 0.2); }
#card-numerology { --card-color: #ffd700; --card-glow: rgba(255, 215, 0, 0.2); }
#card-tarot { --card-color: #9b59b6; --card-glow: rgba(155, 89, 182, 0.2); }
#card-primbon { --card-color: #2ecc71; --card-glow: rgba(46, 204, 113, 0.2); }
#card-fengshui { --card-color: #ff7675; --card-glow: rgba(255, 118, 117, 0.2); }
#card-vedic { --card-color: #ff9f43; --card-glow: rgba(255, 159, 67, 0.2); }
#card-mayan { --card-color: #00d4ff; --card-glow: rgba(0, 212, 255, 0.2); }
#card-celtic { --card-color: #26de81; --card-glow: rgba(38, 222, 129, 0.2); }
#card-egyptian { --card-color: #f9ca24; --card-glow: rgba(249, 202, 36, 0.2); }
#card-native { --card-color: #cd6133; --card-glow: rgba(205, 97, 51, 0.2); }
#card-japanese { --card-color: #ff6b9d; --card-glow: rgba(255, 107, 157, 0.2); }

.card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 20px;
}

.card-icon {
  font-size: 3rem;
  line-height: 1;
  animation: pulse 4s infinite alternate;
}

.header-text {
  flex: 1;
}

.card-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.card-origin {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card-summary {
  text-align: center;
  margin-bottom: 24px;
  flex: 1;
}

.main-result {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--card-color, var(--gold));
  margin-bottom: 8px;
  text-shadow: 0 0 10px var(--card-glow, transparent);
}

.result-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
}

.card-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.detail-item {
  background: var(--glass-bg);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.85rem;
  text-align: center;
  border: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.result-card:hover .detail-item {
  border-color: rgba(255, 255, 255, 0.1);
}

.detail-label {
  color: var(--text-muted);
  display: block;
  font-size: 0.75rem;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.detail-value {
  color: var(--text-primary);
  font-weight: 600;
}

.expand-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  padding: 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.expand-btn:hover {
  background: var(--glass-bg);
  border-color: var(--card-color, var(--purple));
  color: var(--text-primary);
}

.card-expanded {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), padding 0.5s ease, opacity 0.4s ease;
  opacity: 0;
  padding: 0 20px;
}

.result-card.expanded .card-expanded {
  max-height: none;
  padding: 24px 20px;
  opacity: 1;
  border-top: 1px solid var(--glass-border);
  margin-top: 16px;
  transition: max-height 0.8s ease-in-out, padding 0.5s ease, opacity 0.5s ease 0.1s;
}

.result-card.expanded .expand-btn {
  border-color: var(--purple);
  color: var(--purple-light);
}

/* Trait Pills */
.traits-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.trait-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.trait-pill.trait-positive {
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.25);
  color: #2ecc71;
}

.trait-pill.trait-negative {
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.25);
  color: #ff6b6b;
}

/* Detail Items */
.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.85rem;
}

.detail-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.detail-label {
  color: var(--text-muted);
  flex-shrink: 0;
}

.detail-label::after {
  content: ':';
}

.detail-value {
  color: var(--text-primary);
  font-weight: 500;
  margin-left: auto;
  text-align: right;
}

/* Main Result Display */
.main-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.result-icon {
  font-size: 2.2rem;
}

.result-value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--gold);
  font-weight: 700;
}

.result-subtitle {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Reading Sections in Expanded Cards */
.reading-section {
  margin-bottom: 20px;
}

.reading-section h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}

.description-text {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

/* Advice Box */
.advice-box {
  background: rgba(255, 215, 0, 0.06);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px;
  margin-top: 16px;
}

.advice-text {
  font-style: italic;
  color: var(--gold);
  font-size: 0.9rem;
  line-height: 1.7;
  opacity: 0.9;
}

/* New Reading Button */
.new-reading-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.new-reading-btn:hover {
  background: rgba(255, 215, 0, 0.1);
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
  transform: translateY(-2px);
}

/* Category Filter Tabs */
.filter-container {
  display: flex;
  justify-content: center;
  margin-bottom: 35px;
  position: relative;
  z-index: 10;
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  background: rgba(18, 18, 42, 0.7);
  backdrop-filter: blur(15px);
  padding: 6px;
  border-radius: 50px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.filter-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  padding: 10px 22px;
  border-radius: 40px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.filter-tab.active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(155, 89, 182, 0.3));
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

/* Results Header */
.results-header {
  text-align: center;
  padding: 40px 0 30px;
}

.results-header h2 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.results-header .text-secondary {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* Error State for Form Inputs */
input.error,
select.error,
.form-control.error {
  border-color: #ff4757 !important;
  box-shadow: 0 0 10px rgba(255, 71, 87, 0.3) !important;
}

/* Card Accent Colors */
#card-western { --card-color: #ff6b6b; }
#card-chinese { --card-color: #ff4757; }
#card-numerology { --card-color: #ffd700; }
#card-tarot { --card-color: #9b59b6; }
#card-primbon { --card-color: #2ecc71; }
#card-fengshui { --card-color: #ff7675; }
#card-vedic { --card-color: #ff9f43; }
#card-mayan { --card-color: #00d4ff; }
#card-celtic { --card-color: #26de81; }
#card-egyptian { --card-color: #f9ca24; }
#card-native { --card-color: #cd6133; }
#card-japanese { --card-color: #ff6b9d; }

.result-card:hover {
  border-color: var(--card-color, var(--glass-border));
  box-shadow: 0 0 25px rgba(155, 89, 182, 0.15), 0 0 60px color-mix(in srgb, var(--card-color, var(--purple)) 20%, transparent);
  transform: translateY(-5px);
}

/* Social Share Section */
.share-section {
  margin-top: 40px;
  margin-bottom: 20px;
}

.share-card {
  background: var(--bg-card);
  backdrop-filter: blur(15px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  box-shadow: var(--shadow-glow);
}

.share-card h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--gold);
  margin-bottom: 6px;
}

.share-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.share-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.share-whatsapp:hover { background: rgba(37, 211, 102, 0.2); border-color: #25D366; color: #25D366; }
.share-instagram:hover { background: rgba(220, 39, 67, 0.2); border-color: #dc2743; color: #f09433; }
.share-tiktok:hover { background: rgba(0, 242, 254, 0.2); border-color: #00f2fe; color: #00f2fe; }
.share-telegram:hover { background: rgba(0, 136, 204, 0.2); border-color: #0088cc; color: #0088cc; }
.share-twitter:hover { background: rgba(255, 255, 255, 0.2); border-color: #ffffff; color: #ffffff; }
.share-facebook:hover { background: rgba(24, 119, 242, 0.2); border-color: #1877F2; color: #1877F2; }
.share-linkedin:hover { background: rgba(10, 102, 194, 0.2); border-color: #0A66C2; color: #0A66C2; }
.share-line:hover { background: rgba(6, 199, 85, 0.2); border-color: #06C755; color: #06C755; }
.share-copy:hover { background: rgba(255, 215, 0, 0.2); border-color: var(--gold); color: var(--gold); }

/* Individual Card Action & Share Bar */
.card-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.card-share-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.card-share-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
}

.card-share-btn:hover {
  transform: translateY(-2px) scale(1.15);
}

.card-share-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-right: 4px;
  font-weight: 500;
}

/* Mode Navigation Switcher - Balanced Spacing */
.mode-navigation-container {
  margin-top: 8px;
  margin-bottom: 14px;
}

/* Slider Navigation Wrapper & Mobile Touch Controls */
.slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 650px;
  margin: 0 auto;
}

.slider-arrow {
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  color: var(--gold);
  font-size: 1.8rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  z-index: 5;
  flex-shrink: 0;
  line-height: 1;
}

.slider-arrow:hover {
  background: var(--gold);
  color: #000;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.arrow-left {
  margin-right: 8px;
}

.arrow-right {
  margin-left: 8px;
}

.slider-dots-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dot.active {
  width: 24px;
  border-radius: 10px;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.mode-switcher-bar {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  background: var(--bg-card);
  backdrop-filter: blur(15px);
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  padding: 6px;
  width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.mode-switcher-bar::-webkit-scrollbar {
  display: none;
}

.mode-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 12px 20px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mode-btn:hover {
  color: var(--text-primary);
}

.mode-btn.active {
  background: linear-gradient(45deg, var(--gold-dim), var(--gold));
  color: #000;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* Love Compatibility Form */
.love-partners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .love-partners-grid {
    grid-template-columns: 1fr;
  }
}

.partner-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 20px;
}

.partner-box h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.love-submit-btn {
  background: linear-gradient(45deg, #ff4757, #ff6b81) !important;
  color: #fff !important;
}

.love-submit-btn:hover {
  box-shadow: 0 0 25px rgba(255, 71, 87, 0.6) !important;
}

.palm-submit-btn {
  background: linear-gradient(45deg, #00d4ff, #9b59b6) !important;
  color: #fff !important;
}

.palm-submit-btn:hover {
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.6) !important;
}

/* Love Compatibility Results Card */
.love-results-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 107, 129, 0.3);
  border-radius: var(--radius-lg);
  padding: 35px;
  box-shadow: 0 0 30px rgba(255, 71, 87, 0.15);
  margin-top: 30px;
}

.love-score-header {
  text-align: center;
  margin-bottom: 35px;
}

.love-couple-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 20px;
}

.love-meter-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 25px;
}

.love-score-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4757, #ff6b81);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 25px rgba(255, 71, 87, 0.5);
  flex-shrink: 0;
}

.love-score-circle span {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
}

.love-status-box {
  text-align: left;
  max-width: 400px;
}

.love-status-box h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: #ff6b81;
  margin-bottom: 6px;
}

.love-status-box p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.love-breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .love-breakdown-grid {
    grid-template-columns: 1fr;
  }
}

.love-breakdown-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: all 0.3s ease;
}

.love-breakdown-card:hover {
  border-color: #ff6b81;
  box-shadow: 0 5px 20px rgba(255, 107, 129, 0.2);
}

.breakdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.breakdown-icon {
  font-size: 1.6rem;
}

.breakdown-header h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.breakdown-tag {
  display: inline-block;
  background: rgba(255, 71, 87, 0.15);
  border: 1px solid rgba(255, 71, 87, 0.4);
  color: #ff6b81;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}

.breakdown-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Cosmic Toast Notification */
.cosmic-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(18, 18, 42, 0.95);
  backdrop-filter: blur(15px);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.3);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cosmic-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Footer */
footer {
  background: rgba(10, 10, 26, 0.8);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--glass-border);
  padding: 40px 0;
  text-align: center;
  color: var(--text-muted);
  position: relative;
  z-index: 10;
  margin-top: 80px;
}

/* SEO Keywords Block */
.seo-keywords-block {
  margin-bottom: 30px;
  text-align: left;
}

.seo-keywords-block details {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.seo-keywords-block summary {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--gold);
  cursor: pointer;
  outline: none;
  user-select: none;
}

.seo-keywords-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
}

.seo-kw-col h4 {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.seo-kw-col p {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.footer-content {
  font-size: 0.9rem;
}

.footer-disclaimer {
  font-size: 0.8rem;
  max-width: 600px;
  margin: 16px auto 0;
  opacity: 0.7;
}

.footer-copyright {
  font-size: 0.75rem;
  margin-top: 12px;
  opacity: 0.5;
}

/* Utility Classes */
.hidden { display: none !important; }
.visible { display: block !important; }
.fade-in { animation: fadeInUp 0.6s ease forwards; }

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rotate {
  100% { transform: rotate(360deg); }
}

@keyframes orbit {
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Responsive */
@media (max-width: 992px) {
  #resultsGrid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .cosmic-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
  }

  .form-card {
    padding: 24px;
  }

  #resultsGrid {
    grid-template-columns: 1fr;
  }

  .card-details {
    grid-template-columns: 1fr;
  }

  .traits-grid {
    flex-direction: column;
  }

  .result-value {
    font-size: 1.2rem;
  }

  .results-header h2 {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .hero-subtitle {
    font-size: 1rem;
    padding: 0 15px;
  }

  .card-header {
    flex-direction: column;
    text-align: center;
  }

  .card-icon {
    margin-bottom: 8px;
  }

  .detail-item {
    flex-wrap: wrap;
    justify-content: center;
  }

  .detail-value {
    margin-left: 0;
    text-align: center;
    width: 100%;
  }
}

/* PDF Export Button */
.pdf-btn {
  background: linear-gradient(45deg, var(--gold-dim), var(--gold));
  color: #000;
  border: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pdf-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.7);
}

.love-pdf-btn {
  background: linear-gradient(45deg, #ff4757, #ff6b81);
  color: #fff;
  box-shadow: 0 0 20px rgba(255, 71, 87, 0.4);
}

.love-pdf-btn:hover {
  box-shadow: 0 0 30px rgba(255, 71, 87, 0.7);
}

/* Daily Tarot Results Card */
.daily-results-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  padding: 35px;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.15);
  margin-top: 30px;
  text-align: center;
}

.daily-card-header {
  margin-bottom: 25px;
}

.daily-card-icon {
  font-size: 4rem;
  margin-bottom: 10px;
}

.daily-card-title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--gold);
}

.daily-affirmation-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: var(--radius-md);
  padding: 25px;
  margin-bottom: 30px;
}

.daily-affirmation-box h4 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--gold);
  margin-bottom: 12px;
}

.affirmation-text {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-primary);
  font-style: italic;
}

.daily-luck-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .daily-luck-grid {
    grid-template-columns: 1fr;
  }
}

.luck-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.luck-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.luck-val {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
}

/* Moon Phase Tracker Widget - Balanced */
.moon-widget-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 50px;
  padding: 5px 16px;
  max-width: 460px;
  margin: 6px auto 0;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.08);
}

.moon-icon {
  font-size: 1.8rem;
}

.moon-info {
  text-align: center;
}

.moon-name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--gold);
  font-size: 0.95rem;
}

.moon-illum {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.moon-insight {
  font-size: 0.8rem;
  color: var(--text-primary);
  margin-top: 2px;
  font-style: italic;
}

/* PWA Custom Install Banner */
.pwa-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 500px;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.2);
  z-index: 9999;
  transition: all 0.4s ease;
}

.pwa-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pwa-banner-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.pwa-banner-text {
  flex: 1;
}

.pwa-banner-text strong {
  display: block;
  font-size: 0.95rem;
  color: var(--gold);
  margin-bottom: 2px;
}

.pwa-banner-text p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
}

.pwa-install-btn {
  background: linear-gradient(45deg, var(--gold-dim), var(--gold));
  color: #000;
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 30px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.pwa-install-btn:hover {
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
  transform: translateY(-1px);
}

.pwa-close-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.pwa-close-btn:hover {
  color: #fff;
}

/* Articles Grid & Cards */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-top: 25px;
}

@media (max-width: 768px) {
  .articles-grid {
    grid-template-columns: 1fr;
  }
}

.article-card {
  background: var(--bg-card);
  backdrop-filter: blur(15px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.article-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
}

.article-image-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.article-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.article-card:hover .article-img {
  transform: scale(1.06);
}

.article-country-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(10, 10, 26, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}

.article-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.article-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.4;
}

.article-card-summary {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
}

.read-article-btn {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.read-article-btn:hover {
  background: var(--gold);
  color: #000;
}

/* Article Modal Reader */
.article-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(15px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.article-modal-content {
  background: var(--bg-card);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  max-width: 750px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 35px;
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.2);
}

.modal-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.modal-close-btn:hover {
  color: var(--gold);
}

.article-modal-body h3 {
  font-family: var(--font-heading);
  color: var(--gold);
  font-size: 1.5rem;
  margin-top: 20px;
  margin-bottom: 12px;
}

.article-modal-body h4 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  font-size: 1.2rem;
  margin-top: 16px;
  margin-bottom: 8px;
}

.article-modal-body p {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.article-modal-body ul {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.95rem;
  margin-bottom: 14px;
  padding-left: 20px;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE ENHANCEMENTS (PIXEL-PERFECT MOBILE DESIGN)
   ========================================================================== */

@media (max-width: 992px) {
  .container {
    padding: 0 16px;
  }

  .mode-switcher-bar {
    max-width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding: 4px;
    border-radius: 30px;
  }

  .mode-switcher-bar::-webkit-scrollbar {
    display: none;
  }

  .mode-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 18px;
    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  /* Header Fixes */
  .main-header {
    padding: 8px 0;
  }

  .header-container {
    padding: 0 16px;
  }

  .header-logo-img {
    height: 38px;
  }

  .lang-toggle-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  .lang-dropdown {
    right: -10px;
    min-width: 160px;
  }

  /* Hero Section Mobile Fix */
  #hero {
    min-height: 100vh;
    height: auto;
    padding: 110px 0 50px;
    justify-content: center;
  }

  .cosmic-title {
    font-size: clamp(2.2rem, 7vw, 3.5rem);
    margin-bottom: 14px;
  }

  .hero-subtitle {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 10px;
  }

  /* Moon Phase Widget Mobile */
  .moon-widget-box {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 14px 18px;
    border-radius: 24px;
    width: 92%;
    margin-top: 24px;
  }

  .moon-icon {
    font-size: 2.2rem;
  }

  /* Form Mobile Optimizations */
  #inputSection {
    padding: 40px 0;
  }

  .form-card {
    padding: 22px 18px;
    border-radius: var(--radius-md);
  }

  .form-group {
    margin-bottom: 18px;
  }

  .form-control {
    padding: 12px 14px;
    font-size: 0.95rem;
  }

  .submit-btn {
    padding: 14px;
    font-size: 1.05rem;
  }

  .partner-box {
    padding: 16px 14px;
  }

  /* Result Cards Grid Mobile */
  .results-grid,
  #resultsGrid,
  #loveResultsGrid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .result-card {
    padding: 20px 16px;
  }

  .main-result {
    font-size: 1.6rem;
  }

  .card-details {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .detail-item {
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  .detail-label {
    margin-bottom: 0;
  }

  .detail-value {
    margin-left: auto;
  }

  .card-footer-actions {
    flex-direction: column;
    gap: 12px;
  }

  .card-share-bar {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-share-btn {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }

  /* Love Results Mobile */
  .love-results-card {
    padding: 22px 16px;
  }

  .love-couple-title {
    font-size: 1.5rem;
  }

  .love-meter-container {
    flex-direction: column;
    padding: 18px 14px;
    gap: 16px;
  }

  .love-status-box {
    text-align: center;
  }

  /* Daily Tarot Mobile */
  .daily-results-card {
    padding: 22px 16px;
  }

  .daily-card-title {
    font-size: 1.6rem;
  }

  .daily-affirmation-box {
    padding: 16px;
  }

  .affirmation-text {
    font-size: 0.95rem;
  }

  /* Articles Mobile */
  .articles-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .article-image-wrapper {
    height: 170px;
  }

  .article-card-body {
    padding: 16px;
  }

  .article-card-title {
    font-size: 1.05rem;
  }

  .article-card-summary {
    font-size: 0.85rem;
  }

  .article-modal {
    padding: 12px;
  }

  .article-modal-content {
    padding: 24px 16px;
    max-height: 88vh;
    border-radius: var(--radius-md);
  }

  .modal-close-btn {
    top: 10px;
    right: 14px;
    font-size: 2.2rem;
  }

  /* PWA Banner Mobile */
  .pwa-banner {
    width: 94%;
    bottom: 12px;
    padding: 12px 14px;
  }

  .pwa-banner-content {
    gap: 8px;
  }

  .pwa-banner-icon {
    font-size: 1.6rem;
  }

  .pwa-banner-text strong {
    font-size: 0.85rem;
  }

  .pwa-banner-text p {
    font-size: 0.75rem;
  }

  .pwa-install-btn {
    padding: 6px 12px;
    font-size: 0.78rem;
  }
}

@media (max-width: 480px) {
  .header-logo-img {
    height: 34px;
  }

  .lang-text {
    display: none;
  }

  .lang-toggle-btn {
    padding: 6px 10px;
  }

  .cosmic-title {
    font-size: 2.2rem;
  }

  .hero-subtitle {
    font-size: 0.9rem;
  }

  .pdf-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 0.88rem;
  }
}

/* Palmistry Photo Scanner & Drag Zone Styles */
@keyframes scanAnim {
  0% { top: 0%; opacity: 0.8; }
  50% { top: 95%; opacity: 1; }
  100% { top: 0%; opacity: 0.8; }
}

.drop-zone:hover {
  border-color: var(--gold-light) !important;
  background: rgba(255, 215, 0, 0.08) !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.palm-mode-selector button {
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 215, 0, 0.2);
}

/* Crystal Ball Orb Animation */
@keyframes orbPulse {
  0% { transform: scale(1); box-shadow: 0 0 35px rgba(170, 119, 255, 0.6), inset 0 0 25px rgba(255, 255, 255, 0.8); }
  50% { transform: scale(1.05); box-shadow: 0 0 60px rgba(255, 215, 0, 0.85), inset 0 0 35px rgba(255, 255, 255, 0.95); }
  100% { transform: scale(1); box-shadow: 0 0 35px rgba(170, 119, 255, 0.6), inset 0 0 25px rgba(255, 255, 255, 0.8); }
}

/* 3D Tarot Card Flip Animation Styles */
.tarot-card-flip-container {
  perspective: 1000px;
  width: 100%;
  max-width: 220px;
  height: 320px;
  margin: 0 auto;
}

.tarot-card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  cursor: pointer;
}

.tarot-card-flip-container:hover .tarot-card-flip-inner,
.tarot-card-flip-container.flipped .tarot-card-flip-inner {
  transform: rotateY(180deg);
}

.tarot-card-flip-front, .tarot-card-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
  border: 2px solid var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.tarot-card-flip-front {
  background: linear-gradient(145deg, #1b1b3a, #0b0b1a);
  color: var(--gold);
}

.tarot-card-flip-back {
  background: linear-gradient(145deg, #2a1548, #110524);
  transform: rotateY(180deg);
  border-color: #aa77ff;
}

.spread-card-pick {
  width: 48px;
  height: 72px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1d1b3a, #0d0b1a);
  border: 1.5px solid rgba(255, 215, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.spread-card-pick:hover {
  transform: translateY(-5px) scale(1.08);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

.spread-card-pick.picked {
  border-color: #00ff7f !important;
  background: linear-gradient(135deg, #004d25, #002211) !important;
  box-shadow: 0 0 15px rgba(0, 255, 127, 0.8) !important;
  transform: translateY(-8px) scale(1.1) !important;
}

/* Coffee Donation Button */
.coffee-btn {
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.25), rgba(255, 69, 0, 0.25)) !important;
  border: 1px solid rgba(255, 140, 0, 0.5) !important;
  color: #ffaa44 !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.coffee-btn:hover {
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.4), rgba(255, 69, 0, 0.4)) !important;
  box-shadow: 0 0 15px rgba(255, 140, 0, 0.5);
  transform: translateY(-2px);
}

/* E-Commerce Affiliate Buttons */
.affiliate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  margin-top: 15px;
  background: linear-gradient(135deg, #00b09b, #96c93d);
  color: #111;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 176, 155, 0.3);
  transition: all 0.3s ease;
}

.affiliate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 176, 155, 0.5);
  color: #000;
}

.affiliate-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-top: 8px;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.affiliate-btn-sm:hover {
  background: rgba(255, 215, 0, 0.3);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* Instagram Story Share Button */
.share-btn-story {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 15px rgba(220, 39, 67, 0.4) !important;
  font-weight: 600;
  transition: all 0.3s ease !important;
}

.share-btn-story:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 6px 20px rgba(220, 39, 67, 0.7) !important;
  filter: brightness(1.1);
}

/* ==========================================================================
   MODERN CATEGORIZED HEADER NAVIGATION & MOBILE DRAWER
   ========================================================================== */

/* Desktop Nav Menu */
.desktop-nav-menu {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 1024px) {
  .desktop-nav-menu {
    display: none;
  }
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.2);
  color: var(--text-light, #e0e0f0);
  padding: 8px 13px;
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-dropdown-toggle:hover,
.nav-dropdown:hover .nav-dropdown-toggle {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.6);
  color: #ffd700;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.dropdown-arrow {
  font-size: 0.75rem;
  transition: transform 0.3s ease;
  opacity: 0.7;
}

.nav-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown Menu (Glassmorphism Mega-Menu) */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(12, 8, 28, 0.98);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 16px;
  padding: 10px;
  min-width: 280px;
  max-width: 340px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(170, 119, 255, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  transition-delay: 0.18s; /* 180ms grace period buffer to prevent accidental closing */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Invisible Hover Bridge to span gap between button & dropdown */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  width: 100%;
  height: 16px;
  background: transparent;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.active .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s; /* Immediate response on hover in */
}

.nav-dropdown-item {
  background: transparent;
  border: none;
  color: #ffffff;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  transition: all 0.25s ease;
}

.nav-dropdown-item:hover {
  background: rgba(255, 215, 0, 0.12);
  transform: translateX(4px);
}

.nav-item-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.nav-item-text {
  display: flex;
  flex-direction: column;
}

.nav-item-title {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
}

.nav-dropdown-item:hover .nav-item-title {
  color: #ffd700;
}

.nav-item-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #a0a0c0;
  margin-top: 2px;
}

/* Mobile Nav Toggle Button */
.mobile-nav-toggle-btn {
  display: none;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #ffd700;
  font-size: 1.4rem;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mobile-nav-toggle-btn:hover {
  background: rgba(255, 215, 0, 0.25);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

@media (max-width: 1024px) {
  .mobile-nav-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Mobile Slide-Over Drawer Navigation */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background: rgba(10, 6, 24, 0.97);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-left: 1px solid rgba(255, 215, 0, 0.3);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.8);
}

.mobile-nav-drawer.hidden {
  transform: translateX(100%);
  pointer-events: none;
}

.mobile-drawer-header {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.mobile-drawer-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffd700;
}

.mobile-drawer-close {
  background: transparent;
  border: none;
  color: #a0a0c0;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}

.mobile-drawer-close:hover {
  color: #ffffff;
}

.mobile-drawer-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mobile-nav-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-group-title {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffd700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(255, 215, 0, 0.2);
}

.mobile-nav-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e0e0f0;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.4);
  color: #ffd700;
}

/* Mobile Drawer Overlay Backdrop */
.mobile-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  transition: opacity 0.3s ease;
}

.mobile-drawer-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Tarot Deck Theme Selector Component */
.tarot-deck-theme-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.25);
  color: #c0c0e0;
  padding: 10px 6px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tarot-deck-theme-btn:hover {
  background: rgba(255, 215, 0, 0.15);
  border-color: var(--gold);
  transform: translateY(-2px);
  color: #ffffff;
}

.tarot-deck-theme-btn.active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(186, 85, 211, 0.25));
  border: 2px solid var(--gold);
  color: var(--gold);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.35);
}

/* Card Deck Back Themes for 3-Card Spread Pick */
.spread-card-pick {
  width: 52px;
  height: 78px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  user-select: none;
}

.spread-card-pick.deck-theme-classic {
  background: linear-gradient(145deg, #2b1f07, #0f0a02);
  border: 1.5px solid #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

.spread-card-pick.deck-theme-celestial {
  background: linear-gradient(145deg, #1b0e36, #070314);
  border: 1.5px solid #ba55d3;
  box-shadow: 0 0 8px rgba(186, 85, 211, 0.3);
}

.spread-card-pick.deck-theme-botanical {
  background: linear-gradient(145deg, #09261b, #020f0a);
  border: 1.5px solid #50c878;
  box-shadow: 0 0 8px rgba(80, 200, 120, 0.3);
}

.spread-card-pick.deck-theme-holographic {
  background: linear-gradient(145deg, #042533, #010e14);
  border: 1.5px solid #00e5ff;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

.spread-card-pick:hover {
  transform: translateY(-5px) scale(1.08);
}

.spread-card-pick.picked {
  border-color: #ffffff;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  box-shadow: 0 0 20px #ffd700;
  transform: scale(1.12);
}






/* ==========================================================================
   LOGO HALAMAN STANDALONE
   Kelas-kelas ini dipakai di 16 halaman standalone tetapi belum pernah
   didefinisikan, sehingga nama merek tampil sebagai tautan biru bergaris
   bawah bawaan peramban di atas latar gelap.
   ========================================================================== */

.logo-area {
  display: flex;
  align-items: center;
  min-width: 0;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: inherit;
  padding: 4px 2px;
  border-radius: 8px;
  transition: filter 0.25s ease, transform 0.25s ease;
}

.logo-link:hover,
.logo-link:focus-visible {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.logo-link:focus-visible {
  outline: 2px solid rgba(255, 215, 0, 0.7);
  outline-offset: 3px;
}

.logo-icon {
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.55));
}

.logo-text {
  font-family: 'Cinzel', serif;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  background: linear-gradient(135deg, #ffd700, #fff3b0 55%, #e6a817);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffd700;
}

@media (max-width: 480px) {
  .logo-text { font-size: 1.05rem; }
  .logo-icon { font-size: 1.35rem; }
}

/* ==========================================================================
   KELOMPOK TAUTAN FOOTER
   Dipakai index.html tetapi belum punya aturan, sehingga tautan menumpuk
   tanpa jarak yang rapi.
   ========================================================================== */

.footer-links-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
  max-width: 900px;
  margin: 0 auto 18px;
  padding: 0 12px;
}

.footer-links-grid a {
  color: #b8b8d8;
  text-decoration: none;
  font-size: 0.88rem;
  padding: 3px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-links-grid a:hover,
.footer-links-grid a:focus-visible {
  color: #ffd700;
  border-bottom-color: rgba(255, 215, 0, 0.5);
}

/* ==========================================================================
   MENU MELUAP (PRIORITY+) UNTUK BILAH NAVIGASI DESKTOP
   Dua belas pil tanpa pembungkus baris membutuhkan lebar sekitar 1570px.
   Kelebihannya dipindahkan js/site_nav.js ke kelompok "Lainnya".
   ========================================================================== */

.desktop-nav-menu {
  flex-wrap: nowrap;
  min-width: 0;
}

/* Pil menu tidak boleh membungkus atau menyusut: label yang patah dua baris
   membuat tinggi header melonjak. Kelebihan item dipindahkan ke "Lainnya"
   oleh js/site_nav.js, bukan dipaksa muat. */
.desktop-nav-menu > a {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Bilah header boleh lebih lebar daripada isi halaman (1200px) agar lebih
   banyak tautan muat sebelum dipindahkan ke kelompok "Lainnya". */
@media (min-width: 1280px) {
  .header-container {
    max-width: 1560px;
  }
}

/* Pil sedikit lebih rapat pada rentang desktop menengah. */
@media (min-width: 1025px) and (max-width: 1400px) {
  .desktop-nav-menu {
    gap: 6px;
  }
  .desktop-nav-menu > a {
    padding: 8px 10px;
    font-size: 0.8rem;
  }
}

.nav-overflow {
  flex: 0 0 auto;
}

.nav-overflow.hidden {
  display: none;
}

.nav-overflow-menu {
  right: 0;
  left: auto;
  min-width: 230px;
}

.nav-overflow .nav-dropdown-menu {
  display: none;
}

.nav-overflow.active .nav-dropdown-menu {
  display: block;
}

.nav-overflow-menu .nav-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

/* Penanda halaman aktif yang seragam. Sebelumnya ditulis inline dengan
   empat warna berbeda dan tanpa aria-current. */
.desktop-nav-menu a.active,
.nav-overflow-menu a.active {
  background: rgba(255, 215, 0, 0.16);
  border-color: rgba(255, 215, 0, 0.55);
  color: #ffd700;
  font-weight: 600;
}

/* Fokus keyboard yang terlihat di seluruh navigasi. */
.desktop-nav-menu a:focus-visible,
.mobile-nav-item:focus-visible,
.mobile-nav-toggle-btn:focus-visible,
.mobile-drawer-close:focus-visible {
  outline: 2px solid rgba(255, 215, 0, 0.75);
  outline-offset: 2px;
}

/* Tautan di dalam drawer memakai elemen <a>, bukan <button>. */
a.mobile-nav-item {
  display: block;
  text-decoration: none;
}

/* Tautan di dalam baris hak cipta footer */
.footer-copyright a,
.site-footer .footer-copyright a {
  color: var(--gold, #ffd700);
  text-decoration: none;
}

.footer-copyright a:hover,
.footer-copyright a:focus-visible {
  text-decoration: underline;
}

/* Footer halaman standalone memakai selector elemen <footer> yang sudah ada,
   hanya perlu jarak atas yang lebih ringkas karena isinya lebih pendek. */
.site-footer {
  margin-top: 56px;
}

/* ==========================================================================
   BREADCRUMB HALAMAN STANDALONE
   ========================================================================== */

.breadcrumb {
  padding: 92px 0 0;
  font-size: 0.82rem;
  color: #9a9ab8;
}

.breadcrumb .container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: #b8b8d8;
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--gold, #ffd700);
  text-decoration: underline;
}

.breadcrumb-sep {
  opacity: 0.55;
}

.breadcrumb [aria-current="page"] {
  color: var(--gold, #ffd700);
}

/* Halaman dengan breadcrumb tidak perlu jarak atas ganda pada <main>. */
.breadcrumb + main {
  padding-top: 14px !important;
}

/* Item menu tingkat atas yang langsung menuju halaman, bukan membuka dropdown. */
.nav-direct-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

/* ==========================================================================
   VIJERON NETWORK — DIREKTORI EKOSISTEM LINTAS SUBDOMAIN
   Menautkan homepage vijeron.com ke enam properti saudara:
   eye, ear, anatomy (edukasi medis), test (psikometri),
   omnivaluer (kalkulator finansial), bench (benchmark AI).
   ========================================================================== */

/* -- 1. Pil ringkas di bawah hero ---------------------------------------- */
.network-strip {
  margin: 0 auto 6px;
  padding: 0 16px;
}

.network-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 215, 0, 0.16);
  border-radius: var(--radius-lg);
}

.network-strip-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-right: 4px;
}

.network-pill {
  --brand: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  border-radius: 999px;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.network-pill:hover,
.network-pill:focus-visible {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--brand) 16%, rgba(0, 0, 0, 0.35));
  border-color: var(--brand);
}

.network-pill-icon { font-size: 1rem; line-height: 1; }

/* -- 2. Seksi kartu ekosistem -------------------------------------------- */
.network-section {
  padding: 56px 0 36px;
  border-top: 1px solid rgba(255, 215, 0, 0.12);
}

.network-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 34px;
}

.network-eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.network-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.25;
  color: var(--gold);
  margin-bottom: 12px;
}

.network-subtitle {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.network-card {
  --brand: var(--gold);
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.network-card:hover,
.network-card:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--brand) 22%, transparent);
}

.network-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.network-card-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  line-height: 1;
  background: color-mix(in srgb, var(--brand) 14%, rgba(0, 0, 0, 0.4));
  border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent);
  border-radius: 12px;
}

.network-card-name {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.network-card-cat {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
}

.network-card-tagline {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.network-card-desc {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.network-card-features {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.network-card-features li {
  position: relative;
  padding-left: 18px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.network-card-features li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand);
  font-size: 0.8rem;
}

.network-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  background: color-mix(in srgb, var(--brand) 12%, rgba(0, 0, 0, 0.3));
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  border-radius: 10px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.network-card-cta:hover,
.network-card-cta:focus-visible {
  background: color-mix(in srgb, var(--brand) 26%, rgba(0, 0, 0, 0.3));
  border-color: var(--brand);
}

.network-card-host {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.network-card--current {
  background: linear-gradient(145deg, rgba(155, 89, 182, 0.16), rgba(20, 20, 50, 0.6));
}

.network-card--current .network-card-cta {
  justify-content: center;
}

/* -- 3. Baris jaringan di footer ----------------------------------------- */
.footer-network-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  max-width: 900px;
  margin: 0 auto 16px;
  padding: 14px 12px;
  border-top: 1px dashed rgba(255, 215, 0, 0.18);
  border-bottom: 1px dashed rgba(255, 215, 0, 0.18);
}

.footer-network-row .footer-network-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer-network-row a {
  color: #b8b8d8;
  text-decoration: none;
  font-size: 0.85rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-network-row a:hover,
.footer-network-row a:focus-visible {
  color: var(--gold);
  border-bottom-color: rgba(255, 215, 0, 0.5);
}

/* -- 4. Bilah nav desktop: menampung grup keenam tanpa menaikkan tinggi header
   index.html tidak memuat js/site_nav.js, jadi tidak ada menu luap "Lainnya"
   di halaman ini. Sebelum patch ini label pil sudah terpaksa membungkus dua
   baris pada 1280-1920px; grup keenam membuatnya tiga baris sehingga tinggi
   header melonjak. Perbaikannya: label pil dilarang membungkus, pil dilarang
   menyusut, dan ruang yang dibutuhkan diambil dari tiga tombol aksi yang
   selama ini memakai label teks penuh. */
@media (min-width: 1025px) {
  .desktop-nav-menu .nav-dropdown,
  .desktop-nav-menu .nav-direct-link {
    flex: 0 0 auto;
  }
  .desktop-nav-menu .nav-dropdown-toggle {
    white-space: nowrap;
  }
}

@media (min-width: 1025px) and (max-width: 1439px) {
  .desktop-nav-menu { gap: 6px; }

  .desktop-nav-menu .nav-dropdown-toggle {
    padding: 7px 10px;
    font-size: 0.8rem;
  }
}

/* Di bawah 1366px, enam pil plus tiga tombol aksi berlabel penuh tidak muat
   dalam satu baris. Tombol aksi diringkas menjadi ikon; atribut title tetap
   ada sehingga namanya masih terbaca tooltip maupun pembaca layar. */
@media (min-width: 1025px) and (max-width: 1365px) {
  .header-actions #cosmicAudioToggleBtn [data-i18n="audio_btn"],
  .header-actions #cosmicCoffeeBtn [data-i18n="coffee_btn"],
  .header-actions .lang-toggle-btn .lang-text {
    display: none;
  }

  .header-actions #cosmicAudioToggleBtn,
  .header-actions #cosmicCoffeeBtn,
  .header-actions .lang-toggle-btn {
    padding-left: 11px;
    padding-right: 11px;
  }
}

/* -- 5. Bilah aksi header di layar ponsel --------------------------------
   Bug pre-existing: .header-actions berukuran 349px sementara viewport ponsel
   360-414px hanya menyisakan ~215px setelah logo dan padding. Akibatnya tombol
   hamburger (#mobileNavToggleBtn) terdorong ke x=429-475 — sepenuhnya di luar
   layar — sehingga SELURUH navigasi mobile, termasuk grup Vijeron Network yang
   baru, tidak dapat dibuka. Label tiga tombol aksi diringkas menjadi ikon
   (atribut title tetap ada untuk tooltip dan pembaca layar) agar hamburger
   kembali masuk viewport. */
@media (max-width: 600px) {
  .header-container { padding: 0 12px; }

  .header-actions { gap: 10px; }

  .header-actions #cosmicAudioToggleBtn [data-i18n="audio_btn"],
  .header-actions #cosmicCoffeeBtn [data-i18n="coffee_btn"],
  .header-actions .lang-toggle-btn .lang-text {
    display: none;
  }

  .header-actions #cosmicAudioToggleBtn,
  .header-actions #cosmicCoffeeBtn,
  .header-actions .lang-toggle-btn {
    padding-left: 11px;
    padding-right: 11px;
  }
}

/* -- 6. Penyesuaian layar sempit untuk blok Vijeron Network -------------- */
@media (max-width: 600px) {
  .network-strip-inner { padding: 12px 14px; }
  .network-strip-label { width: 100%; text-align: center; margin: 0 0 2px; }
  .network-section { padding: 40px 0 28px; }
  .network-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PANDUAN 12 SISTEM (#systemsGuide)
   Ditempatkan di antara hero dan formulir. Sebelum ini, homepage membuka
   langsung dengan form Nama/Email/Tanggal Lahir — pola "gateway page" yang
   ditandai audit AdSense sebagai low value content. Seksi ini memberi konten
   edukatif yang dapat diindeks sebelum ada permintaan data apa pun.
   ========================================================================== */

.hero-jump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 11px 24px;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #14101f;
  text-decoration: none;
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(255, 215, 0, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hero-jump:hover,
.hero-jump:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255, 215, 0, 0.34);
}

.systems-guide {
  padding: 54px 0 26px;
}

.sg-header {
  max-width: 760px;
  margin: 0 auto 32px;
  text-align: center;
}

.sg-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3.6vw, 2rem);
  line-height: 1.28;
  color: var(--gold);
  margin-bottom: 14px;
}

.sg-intro {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}

.sg-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 20px 17px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.sg-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 215, 0, 0.34);
}

.sg-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sg-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 1.32rem;
  line-height: 1;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: 11px;
}

.sg-name {
  font-family: var(--font-heading);
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.sg-origin {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.sg-desc {
  font-size: 0.87rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.sg-out {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px dashed rgba(255, 215, 0, 0.16);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.sg-out-label {
  font-weight: 600;
  color: var(--gold);
}

.sg-out-label::after { content: ":"; }

.sg-note {
  max-width: 820px;
  margin: 28px auto 0;
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--text-muted);
  text-align: center;
}

.sg-cta-wrap {
  margin-top: 26px;
  text-align: center;
}

.sg-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #14101f;
  text-decoration: none;
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(255, 215, 0, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sg-cta:hover,
.sg-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255, 215, 0, 0.34);
}

@media (max-width: 600px) {
  .systems-guide { padding: 38px 0 20px; }
  .sg-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LAPISAN MOBILE
   --------------------------------------------------------------------------
   Audit Playwright pada 360/390/414px sebelum blok ini:
     47px meluber ke kanan, 63 target sentuh di bawah 44px,
     165 elemen berteks di bawah 13px (terkecil 10.88px).
   Tampilan desktop tidak diubah; seluruh aturan di bawah hanya aktif pada
   layar kecil, kecuali penjaga umum yang memang aman di semua ukuran.
   ========================================================================== */

img, svg, video, canvas, iframe { max-width: 100%; }

@media (max-width: 768px) {

  /* -- Cincin zodiak: dekorasi tidak boleh melawan keterbacaan ------------
     Elemen ini 90vmin dengan empat simbol yang diposisikan -1rem di luar
     tepinya, sehingga meluber 47px sekaligus menimpa judul dan widget bulan
     tepat di area yang paling perlu terbaca. Di ponsel dekorasinya ditiadakan
     saja; di desktop tetap seperti semula. */
  .mystical-ring { display: none; }

  /* -- Hero: sebelumnya hampir dua layar penuh berisi ruang kosong -------- */
  #hero {
    min-height: auto;
    padding: 96px 0 40px;
  }

  .cosmic-title { font-size: clamp(2rem, 9vw, 2.6rem); }

  .hero-subtitle { font-size: 0.98rem; padding: 0 4px; }

  .moon-widget-box { width: 100%; margin-left: auto; margin-right: auto; }

  /* -- Tipografi: tidak ada teks di bawah 13px --------------------------- */
  body { font-size: 15px; }

  .footer-links-grid a,
  .footer-network-row a,
  .seo-kw-col p,
  .footer-disclaimer,
  .footer-copyright,
  .nav-item-sub,
  .sg-origin { font-size: 0.82rem; }

  .sg-desc, .sg-out { font-size: 0.9rem; }

  /* iOS memperbesar halaman secara paksa bila input di bawah 16px difokuskan. */
  input, select, textarea, .form-control { font-size: 16px; }

  /* -- Target sentuh minimal 44px --------------------------------------- */
  button,
  .submit-btn,
  .mode-btn,
  .databank-btn,
  .lang-toggle-btn,
  .mobile-nav-toggle-btn,
  .slider-arrow,
  .network-pill,
  .sg-cta,
  .hero-jump,
  .footer-links-grid a,
  .footer-network-row a { min-height: 44px; }

  .network-pill,
  .footer-links-grid a,
  .footer-network-row a {
    display: inline-flex;
    align-items: center;
  }

  .form-control, .form-group input, .form-group select { min-height: 46px; }

  .slider-arrow { min-width: 44px; }

  .mode-btn { padding: 12px 18px; }

  /* -- Ruang aman perangkat berponi -------------------------------------- */
  .header-container {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

  .mobile-nav-drawer {
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }

  /* -- Kata panjang tidak boleh mendorong tata letak --------------------- */
  h1, h2, h3, p, li, .sg-desc, .network-card-desc { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   PANEL PENYERAHAN FORMULIR (.handoff-*)
   Muncul menggantikan tombol submit setelah pengunjung mengisi
   formulir /sign-up, /konsultasi, atau /contact. Isinya sengaja
   menyatakan bahwa permohonan BELUM terkirim sampai pengunjung
   menekan kirim di aplikasi email atau WhatsApp miliknya —
   sebelumnya halaman langsung menjanjikan keberhasilan padahal
   datanya tidak pernah meninggalkan peramban.
   ============================================================ */
.handoff-panel {
  margin-top: 18px;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 215, 0, 0.08), rgba(20, 14, 40, 0.92));
  border: 1px solid rgba(255, 215, 0, 0.42);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
  outline: none;
  animation: handoffIn 0.35s ease both;
}

@keyframes handoffIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .handoff-panel { animation: none; }
}

.handoff-title {
  font-family: 'Cinzel', serif;
  color: var(--gold, #ffd700);
  font-size: 1.12rem;
  line-height: 1.35;
  margin: 0 0 8px;
}

.handoff-intro {
  color: #d6d6f0;
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0 0 16px;
}

.handoff-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.handoff-btn {
  flex: 1 1 200px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.handoff-btn:hover,
.handoff-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.handoff-btn-mail {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #0a0a1a;
}

.handoff-btn-wa {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #06210f;
}

.handoff-btn-copy {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 215, 0, 0.4);
  color: #f2e6b8;
  font-family: inherit;
}

.handoff-label {
  display: block;
  font-size: 0.8rem;
  color: #a8a8c8;
  margin-bottom: 6px;
  font-weight: 500;
}

.handoff-summary {
  width: 100%;
  padding: 12px 14px;
  /* 16px mencegah iOS Safari melakukan zoom otomatis saat kolom disentuh. */
  font-size: 16px;
  line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #e8e8ff;
  background: rgba(8, 6, 20, 0.75);
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: 10px;
  resize: vertical;
}

.handoff-note {
  margin: 12px 0 0;
  font-size: 0.82rem;
  line-height: 1.65;
  color: #9c9cbe;
}

.handoff-note strong {
  color: #f2e6b8;
  word-break: break-all;
}

@media (max-width: 480px) {
  .handoff-panel { padding: 16px; }
  .handoff-btn { flex: 1 1 100%; }
}

/* ============================================================
   LAPISAN KETERBACAAN PONSEL (lanjutan)
   Audit pada 390px menyisakan 10 target sentuh di bawah 44px dan
   sejumlah pencilan tipografi di bawah 12,5px — terkecil 10,88px
   pada .network-card-cat.
   ============================================================ */
@media (max-width: 768px) {
  .network-card-cat,
  .network-card-host,
  .network-eyebrow,
  .footer-network-row .footer-network-label,
  .breakdown-tag {
    font-size: 0.8rem;
  }

  /* Beberapa kartu memakai gaya inline 0.78rem. */
  [style*="font-size: 0.78rem"],
  [style*="font-size:0.78rem"] {
    font-size: 0.8rem !important;
  }

  /* Tombol aksi header terukur 41px lebarnya. */
  .databank-btn,
  .coffee-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Ajakan pada kartu jaringan terukur tepat 44px sebelum pembulatan;
     tambahan dua piksel membuatnya lulus tanpa syarat. */
  .network-card-cta {
    min-height: 46px;
  }
}