/* ========== VARIABLES & DESIGN TOKENS ========== */
:root {
  --color-white: #fff; --color-black: #000;
  --color-cream-50: #fcfcf9; --color-cream-100: #fffefd;
  --color-gray-200: #f5f5f5; --color-gray-300: #a7a9a9; --color-gray-400: #777c7c;
  --color-slate-500: #626c71; --color-brown-600: #5e5240;
  --color-charcoal-700: #1f2121; --color-charcoal-800: #262828; --color-slate-900: #13343b;
  --color-teal-300: #32b8c6; --color-teal-400: #2da6b2; --color-teal-500: #21808d; --color-teal-600: #1d7480; --color-teal-700: #1a6873; --color-teal-800: #2996a1;
  --color-red-400: #ff5459; --color-red-500: #c0152f;
  --color-orange-400: #e68161; --color-orange-500: #a84b2f;
  --color-brown-600-rgb: 94,82,64; --color-teal-500-rgb: 33,128,141;
  --color-slate-900-rgb: 19,52,59; --color-slate-500-rgb: 98,108,113;
  --color-red-500-rgb: 192,21,47; --color-red-400-rgb: 255,84,89;
  --color-orange-500-rgb: 168,75,47; --color-orange-400-rgb: 230,129,97;
  --color-background: var(--color-cream-50); --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900); --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500); --color-primary-hover: var(--color-teal-600); --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12); --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2); --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12); --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500); --color-success: var(--color-teal-500); --color-warning: var(--color-orange-500); --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 14px; --font-size-md: 14px; --font-size-lg: 16px;
  --font-size-xl: 18px; --font-size-2xl: 20px; --font-size-3xl: 24px; --font-size-4xl: 30px;
  --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 550; --font-weight-bold: 600;
  --line-height-tight: 1.2; --line-height-normal: 1.5; --letter-spacing-tight: -0.01em;
  --space-0: 0; --space-1: 1px; --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px;
  --radius-sm: 6px; --radius-base: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-full: 9999px;
  --shadow-sm: 0 1.5px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-border: rgba(119,124,124,.3);
  }
}
/* ========== HAMBURGER ========== */
@media (max-width: 480px) {
  #nav-toggle { display: block; }
  .nav { display: none; /* ... */ }
  .nav.show { display: flex; }
}

/* ========== RESET ========== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--font-size-base); font-family: var(--font-family-base); color: var(--color-text); background-color: var(--color-background); }
body { margin: 0; padding: 0; min-height: 100vh; }
h1,h2,h3,h4,h5,h6 { margin:0; font-weight:var(--font-weight-semibold); color:var(--color-text); letter-spacing:var(--letter-spacing-tight); line-height:var(--line-height-tight);}
h1 { font-size: var(--font-size-4xl);} h2 { font-size: var(--font-size-3xl);} h3 { font-size: var(--font-size-xl);}
a { color:var(--color-primary); text-decoration:none;} a:hover{ color:var(--color-primary-hover);}
p { margin:0 0 var(--space-16) 0;}
/* ========== UTILITY ========== */
.flex{ display:flex; } .flex-col{ flex-direction:column; } .items-center{ align-items:center; }
.justify-center{ justify-content:center; } .justify-between{ justify-content:space-between; }
.gap-4{ gap:var(--space-4);} .gap-8{ gap:var(--space-8);} .gap-16{ gap:var(--space-16);}
.m-0{ margin:0;} .mt-8{ margin-top:var(--space-8);} .mb-8{ margin-bottom:var(--space-8);}
/* ========== CONTAINER ========== */
.container{ width:100%; max-width:var(--container-xl); margin-right:auto; margin-left:auto; padding-right:var(--space-16); padding-left:var(--space-16);}
@media (min-width: 640px) { .container{ max-width:640px; }}
@media (min-width: 768px) { .container{ max-width:768px; }}
@media (min-width: 1024px){ .container{max-width:1024px;}}
@media (min-width: 1280px){ .container{max-width:1280px;}}
/* ========== HEADER ========== */
.header { background: var(--color-primary-hover); padding: var(--space-16) 0; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--color-primary-active); box-shadow: var(--shadow-sm);}
.header-content { display: flex; justify-content: space-between; align-items: center;}
.logo { color: var(--color-white); font-size: var(--font-size-xl); text-decoration: none; font-weight: var(--font-weight-bold); display: flex; align-items: center; gap: var(--space-8); transition: color var(--duration-fast) var(--ease-standard);}
.logo:hover { color: var(--color-primary-active);}
.logo img { height: 40px; width: auto;}
/* ========== NAVIGATION ========== */
.nav { display: flex; gap: var(--space-24);}
.nav a { color: var(--color-white); text-decoration: none; padding: var(--space-8); font-weight: var(--font-weight-medium); border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-standard);}
.nav a:hover { color: var(--color-primary-active); background: rgba(var(--color-brown-600-rgb), 0.1);}
#nav-toggle { display: none; background: none; border: none; color: var(--color-white); font-size: var(--font-size-2xl); cursor: pointer; padding: var(--space-8); border-radius: var(--radius-sm); transition: background var(--duration-fast) var(--ease-standard);}
#nav-toggle:hover { background: rgba(var(--color-brown-600-rgb), 0.1);}
/* ========== HERO ========== */
.hero { background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary-active)); text-align: center; padding: var(--space-32) 0;}
.hero h1 { font-size: var(--font-size-4xl); margin-bottom: var(--space-16); color: var(--color-white); font-weight: var(--font-weight-bold);}
.hero p { font-size: var(--font-size-lg); margin-bottom: var(--space-32); opacity: 0.9; color: var(--color-white);}
.hero-buttons { display: flex; gap: var(--space-16); justify-content: center; flex-wrap: wrap;}
/* ========== BUTTON ========== */
.btn { padding: var(--space-12) var(--space-24); border-radius: var(--radius-base); text-decoration: none; font-weight: var(--font-weight-medium); transition: all var(--duration-normal) var(--ease-standard); cursor: pointer; border: none; font-size: var(--font-size-base);}
.btn:focus-visible {outline: none; box-shadow: var(--focus-ring);}
.btn-primary { background: var(--color-slate-900); color: var(--color-white);}
.btn-primary:hover { background: var(--color-charcoal-800);}
.btn-outline { background: transparent; color: var(--color-white); border: 2px solid var(--color-white);}
.btn-outline:hover { background: var(--color-white); color: var(--color-primary);}
.section-title {
  display: block;
  width: 100%;
  color: #204e38; /* atau warna lain sesuai theme */
  font-size: 1.6em;
  text-align: center;
  margin-top: 0;
  margin-bottom: 28px;
  font-weight: bold;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ========== TOP SLOTS SECTION ========== */
.top-slots-section .section-title {
  color: #fff;
}

.top-slots-section { padding: var(--space-32) 0; background: var(--color-slate-900);}
.slots-grid { display: grid; gap: var(--space-16); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
.slot-card { background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-lg); overflow: hidden; position: relative; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); border: 1px solid var(--color-card-border); transition: box-shadow var(--duration-normal) var(--ease-standard);}
.slot-card:hover { box-shadow: var(--shadow-md); }
.slot-card.featured { grid-column: span 2;}
.slot-rank { position: absolute; top: 0; left: 0; background: var(--color-error); color: var(--color-white); padding: var(--space-8); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); border-radius: 0 0 var(--radius-sm) 0;}
.slot-image img{ width: 100%; display: block;}
.hot-badge{ position: absolute; top: var(--space-8); right: var(--space-8); background: var(--color-warning); color: var(--color-white); padding: var(--space-6); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);}
.slot-info{ padding: var(--space-16); flex: 1;}
.slot-info h3{ margin-bottom: var(--space-8); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold);}
.slot-actions{ display: flex; gap: var(--space-8); padding: var(--space-8); justify-content: center;}
/* ========== INSIGHTS SECTION ========== */
.insights-section { padding: var(--space-32) 0; background: var(--color-primary-active);}
.insights-section .section-title {
  width: 100%;
  text-align: center;
  color: #204e38;  /* atau #fff jika bg gelap */
  margin-bottom: 28px;
  font-weight: bold;
  font-size: 1.3em;
}

.insights-grid { display: grid; gap: var(--space-16); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));}
.insight-card { background: rgba(var(--color-brown-600-rgb), 0.15); border-radius: var(--radius-lg); padding: var(--space-16); border: 1px solid rgba(var(--color-brown-600-rgb), 0.2); backdrop-filter: blur(10px);}
.insight-card.highlight { background: var(--color-primary-active); color: var(--color-white);}
.insight-header h3 { display: flex; align-items: center; gap: var(--space-8); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-white); margin-bottom: var(--space-8);}
.insight-date { font-size: var(--font-size-sm); opacity: 0.8; color: var(--color-white);}
/* ========== ARTICLES SECTION ========== */
.articles-section { padding: var(--space-32) 0; }
.articles-grid { display: grid; gap: var(--space-16); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.article-card { background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--color-card-border); transition: box-shadow var(--duration-normal) var(--ease-standard);}
.article-card:hover { box-shadow: var(--shadow-md); }
.article-card img { width: 100%; display: block; }
.article-card h3 { padding: var(--space-8); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin: 0;}
.article-card p { padding: 0 var(--space-8) var(--space-16); font-size: var(--font-size-base); color: var(--color-text-secondary); margin: 0;}
/* ========== FAQ SECTION ========== */
.faq-section { padding: var(--space-32) 0; background: var(--color-primary-active);}
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.2);}
.faq-question { display: flex; justify-content: space-between; padding: var(--space-16) 0; cursor: pointer; color: var(--color-white); font-weight: var(--font-weight-medium); transition: color var(--duration-fast) var(--ease-standard);}
.faq-question:hover { color: var(--color-primary-active);}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s;
}
.faq-item.open .faq-answer {
  max-height: 1000px;
}

.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width: 0;}
/* ========== FOOTER ========== */
.footer { background: var(--color-slate-900); padding: var(--space-32) 0; }
.footer-grid { display: grid; gap: var(--space-16); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.footer-grid h3 { margin-bottom: var(--space-8); color: var(--color-white); font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg);}
.footer-grid a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); display: block; margin-bottom: var(--space-4);}
.footer-grid a:hover { color: var(--color-primary-active);}
.footer-bottom { text-align: center; margin-top: var(--space-16); opacity: 0.7; font-size: var(--font-size-sm); color: var(--color-white);}
@media (max-width: 480px) {
  #nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-primary-hover); flex-direction: column; padding: var(--space-16); box-shadow: var(--shadow-lg); border-top: 1px solid var(--color-primary-active);}
  .nav.show { display: flex; }
  .nav a { padding: var(--space-12) 0; border-bottom: 1px solid rgba(255,255,255,0.1);}
  .logo img { height: 35px;}
  .hero h1 { font-size: var(--font-size-3xl);}
  .hero p { font-size: var(--font-size-base);}
  .hero-buttons{ flex-direction: column; align-items: center;}
  .btn { min-width: 200px;}
  .section-title{ font-size: var(--font-size-2xl); margin: var(--space-24) 0 var(--space-12);}
  .slots-grid{ grid-template-columns: 1fr;}
  .slot-card.featured{ grid-column: span 1;}
  .insights-grid{ grid-template-columns: 1fr;}
  .articles-grid{ grid-template-columns: 1fr;}
  .footer-grid{ grid-template-columns: 1fr; text-align: center;}
  .container{ padding: 0 var(--space-12);}
  .hero, .top-slots-section, .insights-section, .articles-section, .faq-section, .footer { padding: var(--space-24) 0; }
}
/* ========== FONT FACE ========== */
@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') format('woff2');
}
/* === PATTERN/JAM GACOR DI TOP 5 === */
.pattern {
  background: #e7faf1;
  border-radius: 6px;
  padding: 7px 8px 6px 8px;
  margin: 11px 0 0 0;
  font-size: 0.97em;
  color: #127a42;
  box-shadow: 0 2px 8px 0 rgba(36,96,71,0.07);
}
.pattern-steps {
  font-size: 0.99em;
  color: #127a42;
  margin-bottom: 3px;
}
.pattern-symbols {
  text-align: left;
  margin-top: 2px;
  display: block;
}
.pattern-symbols .symbol-o {
  color: #31d046; font-weight:bold; margin: 0 2px; font-size: 1.11em;
}
.pattern-symbols .symbol-x {
  color: #ff5d62; font-weight:bold; margin: 0 2px; font-size: 1.11em;
}

/* === CARD & INFO TOP 5 SLOT === */
.game-card .name {
  color: #fff; font-size: 1.06em; font-weight: bold; margin-bottom: 2px; line-height: 1.2; word-break: break-word;
}
.game-card .provider,
.game-card .rtp,
.game-card .status,
.game-card .hot-time {
  color: #b0eece;
  font-size: 0.97em;
  margin-bottom: 2px;
}
.game-card .hot-time {
  color: #ffb900 !important;
  font-weight: bold;
}

/* === INSIGHT BLOCK KHUSUS === */
.insight-slot, .insight-provider, .insight-prime, .insight-market {
  background: #fff;
  border-radius: 15px;
  padding: 18px 14px 16px 14px;
  border: 1.5px solid #c4f0e7;
  box-shadow: 0 3px 17px 0 rgba(36,96,71,0.07);
  min-height: 172px;
  font-size: 1em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
}
.insight-slot h3,
.insight-provider h3,
.insight-prime h3,
.insight-market h3 {
  color: #2c3e50;
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: 600;
}
.insight-slot p,
.insight-provider p,
.insight-prime p,
.insight-market p {
  color: #34495e;
  font-size: 14px;
  margin: 5px 0;
  line-height: 1.4;
}
.insight-slot img, .insight-provider img {
  width: 48px; height: 48px; object-fit: contain; border-radius: 10px; margin-bottom: 10px;
}

/* === RESPONSIVE KHUSUS BLOCK INI === */
@media (max-width: 650px) {
  .insights-grid { grid-template-columns: 1fr; gap: 13px;}
  .game-card img { width: 54px; height: 80px;}
  .insight-slot img, .insight-provider img { width: 40px; height: 40px;}
}
@media (max-width: 420px) {
  .insight-slot, .insight-provider, .insight-prime, .insight-market { padding: 11px 3px 10px 5px; }
}

/* === FAQ FIX === */
.faq-question {
  cursor: pointer;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
}
.faq-item.open .faq-answer {
  max-height: 1000px !important;
}