/*
========================================
COLOR SYSTEM
========================================
*/

:root {
  --primary: #760031;
  --primary-hover: #5f0028;
  --primary-soft: #f7edef;

  --secondary: #d51c39;
  --secondary-hover: #b91731;

  --highlight: #ff5a63;

  --dark-base: #050203;
  --dark-accent: #2a000d;

  --ivory: #fff8f8;
  --white: #ffffff;

  --text-main: #21191b;
  --text-muted: #74666a;

  --border: #e8dadd;
  --border-strong: #d7c3c8;

  --surface-soft: #fbf6f7;
  --warning-soft: #fff7e8;
  --success-soft: #f2f8f4;

  --shadow-card:
    0 10px 28px
    rgba(42, 0, 13, 0.07);

  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 18px;
}


/*
========================================
RESET
========================================
*/

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:
    var(--ivory);

  color:
    var(--text-main);

  line-height: 1.5;
}

button,
input,
select {
  font-family: inherit;
}


/*
========================================
TOP BAR
========================================
*/

.site-topbar {
  width: 100%;

  background:
    var(--dark-accent);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);
}

.site-topbar-inner {
  width:
    min(
      94%,
      1100px
    );

  min-height:
    72px;

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:
    center;

  gap:
    22px;
}


/*
========================================
LOGO
========================================
*/

.site-logo {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;

  color:
    var(--white);

  text-decoration:
    none;
}

.site-logo-image {
  display:
    block;

  width:
    40px;

  height:
    40px;

  object-fit:
    contain;

  flex:
    0 0 auto;
}

.site-logo-text {
  overflow:
    hidden;

  color:
    var(--ivory);

  font-size:
    17px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/*
========================================
NAVIGATION
========================================
*/

.site-nav {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;
}

.nav-link {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    9px 11px;

  border-radius:
    var(--radius-small);

  color:
    rgba(255, 248, 248, 0.74);

  font-size:
    13px;

  font-weight:
    700;

  text-decoration:
    none;

  white-space:
    nowrap;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.nav-link:hover {
  background:
    rgba(255, 255, 255, 0.08);

  color:
    var(--white);
}

.nav-link.active {
  background:
    rgba(255, 90, 99, 0.16);

  color:
    var(--white);
}


/*
========================================
CONTACT
========================================
*/

.contact-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    40px;

  padding:
    10px 16px;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius:
    var(--radius-small);

  background:
    var(--secondary);

  color:
    var(--white);

  font-size:
    12px;

  font-weight:
    700;

  text-decoration:
    none;

  white-space:
    nowrap;

  transition:
    background 0.2s ease,
    transform 0.15s ease;
}

.contact-button:hover {
  background:
    var(--highlight);

  transform:
    translateY(-1px);
}


/*
========================================
MAIN
========================================
*/

.prediction-container {
  width:
    min(
      94%,
      1100px
    );

  margin:
    42px auto 60px;
}


/*
========================================
HERO
========================================
*/

.prediction-hero {
  max-width:
    780px;

  margin:
    0 auto 28px;

  text-align:
    center;
}

.eyebrow {
  margin:
    0 0 6px;

  color:
    var(--secondary);

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}

.prediction-hero h1 {
  margin:
    0;

  color:
    var(--dark-accent);

  font-size:
    clamp(
      30px,
      5vw,
      44px
    );

  line-height:
    1.15;
}

.hero-description {
  max-width:
    720px;

  margin:
    12px auto 0;

  color:
    var(--text-muted);

  font-size:
    14px;
}

.hero-meta {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    10px;

  margin-top:
    22px;
}

.meta-box {
  padding:
    12px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-medium);

  background:
    var(--white);
}

.meta-label {
  display:
    block;

  margin-bottom:
    3px;

  color:
    var(--text-muted);

  font-size:
    10px;

  font-weight:
    700;

  text-transform:
    uppercase;
}

.meta-box strong {
  color:
    var(--dark-accent);

  font-size:
    13px;
}


/*
========================================
DISCLAIMER
========================================
*/

.prediction-disclaimer {
  margin:
    0 auto 24px;

  padding:
    16px 18px;

  border:
    1px solid
    rgba(213, 28, 57, 0.18);

  border-left:
    4px solid
    var(--secondary);

  border-radius:
    var(--radius-medium);

  background:
    #fff4f5;
}

.prediction-disclaimer strong {
  color:
    var(--dark-accent);

  font-size:
    13px;
}

.prediction-disclaimer p {
  margin:
    5px 0 0;

  color:
    var(--text-muted);

  font-size:
    12px;
}


/*
========================================
TOOLS
========================================
*/

.prediction-tools {
  display:
    grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(180px, 1fr)
    auto;

  align-items:
    end;

  gap:
    12px;

  margin-bottom:
    14px;

  padding:
    18px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-large);

  background:
    var(--white);

  box-shadow:
    var(--shadow-card);
}

.tool-group {
  min-width:
    0;
}

.tool-group label,
.tool-action-label {
  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--dark-accent);

  font-size:
    12px;

  font-weight:
    700;
}

.tool-group input,
.tool-group select {
  width:
    100%;

  min-height:
    43px;

  padding:
    11px 13px;

  border:
    1px solid
    var(--border-strong);

  border-radius:
    var(--radius-small);

  background:
    var(--white);

  color:
    var(--dark-base);

  font-size:
    14px;
}

.tool-group input:focus,
.tool-group select:focus {
  outline:
    none;

  border-color:
    var(--primary);

  box-shadow:
    0 0 0 3px
    rgba(255, 90, 99, 0.16);
}

.btn-random-all {
  min-height:
    43px;

  padding:
    10px 15px;

  border:
    1px solid
    var(--primary);

  border-radius:
    var(--radius-small);

  background:
    var(--primary);

  color:
    var(--white);

  font-size:
    12px;

  font-weight:
    800;

  cursor:
    pointer;

  white-space:
    nowrap;

  transition:
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

.btn-random-all:hover {
  background:
    var(--primary-hover);

  box-shadow:
    0 4px 12px
    rgba(118, 0, 49, 0.18);

  transform:
    translateY(-1px);
}

.result-info {
  min-height:
    20px;

  margin:
    0 0 12px;

  color:
    var(--text-muted);

  font-size:
    12px;
}


/*
========================================
MARKET GRID
========================================
*/

.market-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    15px;
}

.market-card {
  min-width:
    0;

  padding:
    18px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-large);

  background:
    var(--white);

  box-shadow:
    var(--shadow-card);
}


/*
========================================
MARKET HEADER
========================================
*/

.market-card-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

  padding-bottom:
    14px;

  border-bottom:
    1px solid
    var(--border);
}

.market-name {
  margin:
    0;

  color:
    var(--dark-accent);

  font-size:
    16px;

  line-height:
    1.3;
}

.schedule {
  display:
    flex;

  gap:
    7px;

  flex-wrap:
    wrap;

  margin-top:
    6px;

  color:
    var(--text-muted);

  font-size:
    11px;
}

.status-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  padding:
    5px 8px;

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    800;

  white-space:
    nowrap;

  text-transform:
    uppercase;
}

.status-belum-tutup {
  background:
    var(--success-soft);

  color:
    #376345;
}

.status-menunggu-buka {
  background:
    var(--warning-soft);

  color:
    #8a5b12;
}

.status-sudah-buka {
  background:
    var(--primary-soft);

  color:
    var(--primary);
}


/*
========================================
CARD SECTIONS
========================================
*/

.card-section {
  padding:
    15px 0;

  border-bottom:
    1px solid
    var(--border);
}

.card-section:last-child {
  padding-bottom:
    0;

  border-bottom:
    none;
}

.section-title-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    10px;
}

.section-title {
  margin:
    0;

  color:
    var(--text-muted);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.simulation-tag {
  color:
    var(--text-muted);

  font-size:
    9px;
}


/*
========================================
BBFS
========================================
*/

.bbfs-row {
  margin-bottom:
    12px;
}

.info-label {
  display:
    block;

  margin-bottom:
    6px;

  color:
    var(--text-muted);

  font-size:
    10px;

  font-weight:
    700;
}

.digit-list {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px;
}

.digit-chip {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    32px;

  height:
    32px;

  border:
    1px solid
    rgba(118, 0, 49, 0.13);

  border-radius:
    8px;

  background:
    var(--primary-soft);

  color:
    var(--primary);

  font-size:
    14px;

  font-weight:
    800;
}


/*
========================================
DAILY INFO GRID
========================================
*/

.daily-info-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    8px;
}

.daily-info-item {
  padding:
    10px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-medium);

  background:
    var(--surface-soft);
}

.daily-info-item span {
  display:
    block;

  color:
    var(--text-muted);

  font-size:
    9px;

  font-weight:
    700;
}

.daily-info-item strong {
  display:
    block;

  margin-top:
    3px;

  color:
    var(--dark-accent);

  font-size:
    15px;

  line-height:
    1.25;
}

.main-number {
  letter-spacing:
    0.08em;
}


/*
========================================
KOMBINASI HARIAN
========================================
*/

.combo-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    7px;
}

.combo-item {
  padding:
    9px 6px;

  border:
    1px solid
    var(--border);

  border-radius:
    10px;

  background:
    var(--surface-soft);

  text-align:
    center;
}

.combo-item span {
  display:
    block;

  color:
    var(--text-muted);

  font-size:
    8px;

  font-weight:
    700;
}

.combo-item strong {
  display:
    block;

  margin-top:
    2px;

  color:
    var(--primary);

  font-size:
    17px;

  letter-spacing:
    0.04em;
}


/*
========================================
PERSONAL RANDOM
========================================
*/

.random-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    8px;
}

.random-result {
  padding:
    11px 6px;

  border:
    1px solid
    rgba(213, 28, 57, 0.14);

  border-radius:
    var(--radius-medium);

  background:
    #fff4f5;

  text-align:
    center;
}

.random-result span {
  display:
    block;

  color:
    var(--text-muted);

  font-size:
    9px;

  font-weight:
    800;
}

.random-result strong {
  display:
    block;

  margin-top:
    2px;

  color:
    var(--secondary);

  font-size:
    22px;

  letter-spacing:
    0.04em;
}

.btn-random-card {
  width:
    100%;

  min-height:
    39px;

  margin-top:
    10px;

  padding:
    9px 12px;

  border:
    1px solid
    var(--primary);

  border-radius:
    var(--radius-small);

  background:
    var(--white);

  color:
    var(--primary);

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.btn-random-card:hover {
  background:
    var(--primary);

  color:
    var(--white);
}

.card-note {
  margin:
    9px 0 0;

  color:
    var(--text-muted);

  font-size:
    9px;

  text-align:
    center;
}


/*
========================================
EMPTY / METHOD
========================================
*/

.hidden {
  display:
    none !important;
}

.empty-state {
  padding:
    30px;

  border:
    1px dashed
    var(--border-strong);

  border-radius:
    var(--radius-medium);

  background:
    var(--white);

  color:
    var(--text-muted);

  text-align:
    center;
}

.method-note {
  margin-top:
    28px;

  padding:
    20px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-large);

  background:
    var(--white);
}

.method-note h2 {
  margin:
    0;

  color:
    var(--dark-accent);

  font-size:
    17px;
}

.method-note p {
  margin:
    8px 0 0;

  color:
    var(--text-muted);

  font-size:
    12px;
}


/*
========================================
FOCUS
========================================
*/

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline:
    3px solid
    rgba(255, 90, 99, 0.42);

  outline-offset:
    2px;
}


/*
========================================
FOOTER
========================================
*/

.site-footer {
  padding:
    28px 20px;

  background:
    var(--dark-accent);

  color:
    rgba(255, 248, 248, 0.76);
}

.site-footer-inner {
  width:
    min(
      94%,
      1100px
    );

  margin:
    0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;
}

.site-footer p {
  margin:
    0;

  font-size:
    11px;
}

.site-footer strong {
  color:
    var(--ivory);
}

.site-footer a {
  color:
    var(--highlight);

  font-weight:
    700;

  text-decoration:
    none;
}


/*
========================================
TABLET
========================================
*/

@media (
  max-width: 900px
) {

  .site-logo-text {
    display:
      none;
  }

  .prediction-tools {
    grid-template-columns:
      1fr 1fr;
  }

  .tool-action {
    grid-column:
      1 / -1;
  }

  .btn-random-all {
    width:
      100%;
  }

}


/*
========================================
MOBILE
========================================
*/

@media (
  max-width: 700px
) {

  .site-topbar-inner {
    width:
      calc(100% - 24px);

    min-height:
      64px;

    gap:
      7px;
  }

  .site-logo-image {
    width:
      32px;

    height:
      32px;
  }

  .site-nav {
    gap:
      0;
  }

  .nav-link {
    padding:
      7px 5px;

    font-size:
      9px;
  }

  .contact-button {
    min-height:
      34px;

    padding:
      8px;

    font-size:
      9px;
  }

  .prediction-container {
    width:
      calc(100% - 24px);

    margin-top:
      28px;
  }

  .hero-meta {
    grid-template-columns:
      1fr;
  }

  .prediction-tools {
    grid-template-columns:
      1fr;
  }

  .tool-action {
    grid-column:
      auto;
  }

  .market-grid {
    grid-template-columns:
      1fr;
  }

}


/*
========================================
SMALL MOBILE
========================================
*/

@media (
  max-width: 430px
) {

  .site-topbar-inner {
    width:
      calc(100% - 18px);
  }

  .site-logo-image {
    width:
      29px;

    height:
      29px;
  }

  .nav-link {
    padding:
      6px 4px;

    font-size:
      8px;
  }

  .contact-button {
    padding:
      7px;

    font-size:
      8px;
  }

  .market-card {
    padding:
      14px;
  }

  .daily-info-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .combo-grid,
  .random-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .random-result strong {
    font-size:
      19px;
  }

  .site-footer-inner {
    flex-direction:
      column;

    gap:
      7px;

    text-align:
      center;
  }

}


/*
========================================
VERY SMALL
========================================
*/

@media (
  max-width: 350px
) {

  .daily-info-grid {
    grid-template-columns:
      1fr;
  }

  .combo-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}