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

:root {

  /*
  Brand
  */

  --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;


  /*
  Neutral
  */

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

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

  --surface-soft: #fbf6f7;
  --surface-hover: #f7edef;

  --danger-soft: #fff0f2;


  /*
  Shadow
  */

  --shadow-card:
    0 12px 35px
    rgba(42, 0, 13, 0.08);

  --shadow-small:
    0 4px 14px
    rgba(42, 0, 13, 0.07);


  /*
  Radius
  */

  --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;

}


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

.site-topbar {

  width: 100%;

  background:
    var(--dark-accent);

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

}


/*
Header dibuat sejajar dengan
container aplikasi.
*/

.site-topbar-inner {

  width:
    min(
      94%,
      980px
    );

  min-height:
    72px;

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:
    center;

  gap:
    24px;

}


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

.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;

  flex:
    0 0 auto;

  object-fit:
    contain;

}


.site-logo-text {

  overflow:
    hidden;

  color:
    var(--ivory);

  font-size:
    17px;

  font-weight:
    800;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


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

.site-nav {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

}


.nav-link {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    9px 12px;

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

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

  font-size:
    13px;

  font-weight:
    700;

  line-height:
    1;

  text-decoration:
    none;

  white-space:
    nowrap;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s 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);

}


/*
========================================
HUBUNGI KAMI
========================================
*/

.contact-button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  min-height:
    40px;

  padding:
    10px 16px;

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

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

  background:
    var(--secondary);

  color:
    var(--white);

  font-size:
    13px;

  font-weight:
    700;

  line-height:
    1;

  text-decoration:
    none;

  white-space:
    nowrap;

  cursor:
    pointer;

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

}


.contact-button:hover {

  background:
    var(--highlight);

  box-shadow:
    0 5px 16px
    rgba(213, 28, 57, 0.28);

  transform:
    translateY(-1px);

}


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

.container {

  width:
    min(
      94%,
      980px
    );

  margin:
    50px auto;

}


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

.card {

  background:
    var(--white);

  padding:
    38px;

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

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

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

}


/*
========================================
APP HEADER
========================================
*/

.app-header {

  margin-bottom:
    26px;

}


h1 {

  margin:
    0 0 6px;

  color:
    var(--dark-accent);

  font-size:
    34px;

  line-height:
    1.2;

}


.subtitle {

  margin:
    0;

  color:
    var(--text-muted);

  font-size:
    15px;

}


/*
========================================
TAB 2D / 3D / 4D
========================================
*/

.tabs {

  display:
    flex;

  gap:
    10px;

  flex-wrap:
    wrap;

  margin-bottom:
    32px;

}


.tab {

  min-width:
    76px;

  padding:
    11px 18px;

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

  border-radius:
    10px;

  background:
    var(--surface-soft);

  color:
    var(--dark-base);

  cursor:
    pointer;

  font-size:
    15px;

  font-weight:
    700;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;

}


.tab:hover {

  border-color:
    var(--primary);

  background:
    var(--primary-soft);

}


.tab.active {

  border-color:
    var(--primary);

  background:
    var(--primary);

  color:
    var(--white);

}


.tab:active {

  transform:
    translateY(1px);

}


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

.main-settings,
.output-settings,
.result-settings,
.result-section {

  margin-bottom:
    28px;

}


/*
========================================
FORM
========================================
*/

.form-group {

  margin-bottom:
    22px;

  min-width:
    0;

}


.form-group.compact {

  margin-bottom:
    0;

}


label {

  display:
    block;

  margin-bottom:
    8px;

  color:
    var(--dark-accent);

  font-size:
    14px;

  font-weight:
    700;

}


/*
========================================
INPUT
========================================
*/

input[type="text"],
input[type="number"] {

  width:
    100%;

  padding:
    13px 14px;

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

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

  background:
    var(--white);

  color:
    var(--dark-base);

  font-size:
    15px;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;

}


input::placeholder {

  color:
    #a89a9e;

}


/*
========================================
SELECT
========================================
*/

select {

  width:
    100%;

  max-width:
    100%;

  padding:
    13px 14px;

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

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

  background:
    var(--white);

  color:
    var(--dark-base);

  font-size:
    15px;

  cursor:
    pointer;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;

}


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

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {

  outline:
    none;

  border-color:
    var(--primary);

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

}


button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {

  outline:
    3px solid
    rgba(255, 90, 99, 0.42);

  outline-offset:
    2px;

}


/*
========================================
HELP TEXT
========================================
*/

small {

  display:
    block;

  margin-top:
    6px;

  color:
    var(--text-muted);

  font-size:
    12px;

  line-height:
    1.45;

}


/*
========================================
CHECKBOX
========================================
*/

.checkbox-group {

  margin-top:
    4px;

}


.checkbox-label {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  margin:
    0;

  font-weight:
    500;

  cursor:
    pointer;

}


.checkbox-label input {

  width:
    18px;

  height:
    18px;

  margin:
    0;

  accent-color:
    var(--primary);

}


/*
========================================
INFO KOMBINASI
========================================
*/

.info-kombinasi {

  margin-top:
    10px;

  padding:
    16px 18px;

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

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

  background:
    var(--surface-soft);

  color:
    var(--dark-accent);

  font-size:
    13px;

  line-height:
    1.5;

}


/*
========================================
FILTER SECTION
========================================
*/

.filter-section {

  margin:
    36px 0;

  padding-top:
    30px;

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

}


/*
========================================
FILTER HEADER
========================================
*/

.filter-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  margin-bottom:
    20px;

}


.filter-header-info h3 {

  margin:
    0;

  color:
    var(--dark-accent);

  font-size:
    19px;

}


.filter-header-info small {

  margin-top:
    3px;

}


/*
========================================
FILTER HEADER ACTIONS
========================================
*/

.filter-header-actions {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex-wrap:
    wrap;

}


/*
========================================
BUTTON BASE
========================================
*/

button {

  font-family:
    inherit;

}


/*
========================================
PRIMARY BUTTON
========================================
*/

.btn-primary {

  padding:
    12px 20px;

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

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

  background:
    var(--primary);

  color:
    var(--white);

  font-size:
    14px;

  font-weight:
    700;

  cursor:
    pointer;

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

}


.btn-primary:hover {

  border-color:
    var(--primary-hover);

  background:
    var(--primary-hover);

  box-shadow:
    0 5px 15px
    rgba(118, 0, 49, 0.20);

}


/*
========================================
SECONDARY BUTTON
========================================
*/

.btn-secondary {

  padding:
    11px 16px;

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

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

  background:
    var(--white);

  color:
    var(--primary);

  font-size:
    14px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;

}


.btn-secondary:hover {

  border-color:
    var(--primary);

  background:
    var(--primary-soft);

}


/*
========================================
TEXT BUTTON
========================================
*/

.btn-text {

  padding:
    8px 10px;

  border:
    none;

  background:
    transparent;

  color:
    var(--secondary);

  font-size:
    13px;

  font-weight:
    700;

  cursor:
    pointer;

}


.btn-text:hover {

  color:
    var(--primary);

  text-decoration:
    underline;

}


/*
========================================
BUTTON GROUP
========================================
*/

.buttons {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  flex-wrap:
    wrap;

}


/*
========================================
FILTER CHOOSER
========================================
*/

.filter-chooser {

  margin-bottom:
    22px;

  padding:
    22px;

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

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

  background:
    linear-gradient(
      180deg,
      #fffdfd 0%,
      var(--surface-soft) 100%
    );

  box-shadow:
    var(--shadow-small);

}


/*
========================================
FILTER CHOOSER HEADER
========================================
*/

.filter-chooser-header {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  margin-bottom:
    22px;

}


.filter-chooser-header strong {

  display:
    block;

  color:
    var(--dark-accent);

  font-size:
    16px;

}


.filter-close {

  width:
    34px;

  height:
    34px;

  padding:
    0;

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

  border-radius:
    50%;

  background:
    var(--white);

  color:
    var(--text-muted);

  font-size:
    22px;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;

}


.filter-close:hover {

  border-color:
    var(--secondary);

  background:
    var(--danger-soft);

  color:
    var(--secondary);

}


/*
========================================
FILTER CHOICE GROUP
========================================
*/

.filter-choice-group {

  margin-top:
    22px;

}


.filter-choice-group:first-of-type {

  margin-top:
    0;

}


.filter-choice-title {

  margin:
    0 0 10px;

  color:
    var(--text-muted);

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

}


/*
========================================
FILTER CHOICE GRID
========================================
*/

.filter-choice-grid {

  display:
    grid;

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

  gap:
    11px;

}


/*
========================================
FILTER CHOICE BUTTON
========================================
*/

.filter-choice {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    4px;

  min-height:
    78px;

  padding:
    14px 15px;

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

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

  background:
    var(--white);

  color:
    var(--dark-base);

  text-align:
    left;

  cursor:
    pointer;

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

}


.filter-choice strong {

  color:
    var(--dark-accent);

  font-size:
    14px;

}


.filter-choice span {

  color:
    var(--text-muted);

  font-size:
    12px;

  line-height:
    1.4;

}


.filter-choice:hover {

  border-color:
    var(--primary);

  background:
    var(--primary-soft);

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

  transform:
    translateY(-1px);

}


/*
Sudah dipilih
*/

.filter-choice.is-active {

  border-color:
    rgba(118, 0, 49, 0.35);

  background:
    var(--primary-soft);

  opacity:
    0.65;

  cursor:
    default;

}


/*
========================================
ACTIVE FILTER LIST
========================================
*/

.filter-active-list {

  display:
    grid;

  gap:
    13px;

}


/*
========================================
ACTIVE FILTER CARD
========================================
*/

.active-filter {

  position:
    relative;

  padding:
    17px;

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

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

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

  background:
    var(--white);

  box-shadow:
    0 3px 12px
    rgba(42, 0, 13, 0.04);

}


/*
Posisi Digit helper
*/

#filterCardPosisi {

  border-left-color:
    var(--highlight);

  background:
    var(--surface-soft);

}


/*
========================================
ACTIVE FILTER HEADER
========================================
*/

.active-filter-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    13px;

}


.active-filter-header strong {

  color:
    var(--dark-accent);

  font-size:
    14px;

}


.active-filter-header div small {

  margin-top:
    2px;

}


/*
========================================
REMOVE FILTER
========================================
*/

.remove-filter {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  width:
    30px;

  height:
    30px;

  padding:
    0;

  border:
    1px solid
    transparent;

  border-radius:
    50%;

  background:
    transparent;

  color:
    var(--text-muted);

  font-size:
    21px;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;

}


.remove-filter:hover {

  border-color:
    rgba(213, 28, 57, 0.18);

  background:
    var(--danger-soft);

  color:
    var(--secondary);

}


/*
========================================
FILTER CARD GRID
========================================
*/

.filter-card-grid {

  display:
    grid;

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

  gap:
    14px;

}


/*
========================================
OUTPUT SETTINGS
========================================
*/

.output-settings {

  padding-top:
    28px;

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

}


/*
========================================
RESULT SETTINGS
========================================
*/

.result-settings {

  padding-top:
    4px;

}


/*
========================================
RADIO
========================================
*/

.radio-group {

  display:
    flex;

  align-items:
    center;

  gap:
    22px;

  flex-wrap:
    wrap;

}


.radio-label {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  margin:
    0;

  font-weight:
    500;

  cursor:
    pointer;

}


.radio-label input {

  width:
    17px;

  height:
    17px;

  margin:
    0;

  accent-color:
    var(--primary);

}


/*
========================================
JUMLAH DITEMUKAN
========================================
*/

.jumlah-ditemukan {

  margin-top:
    30px;

  margin-bottom:
    13px;

  color:
    var(--dark-accent);

  font-size:
    14px;

  font-weight:
    700;

}


/*
========================================
HASIL
========================================
*/

#hasil {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    9px;

}


/*
========================================
ANGKA
========================================
*/

.angka {

  min-width:
    54px;

  padding:
    10px 13px;

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

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

  background:
    var(--surface-soft);

  color:
    var(--dark-accent);

  font-size:
    17px;

  font-weight:
    800;

  text-align:
    center;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;

}


.angka:hover {

  border-color:
    rgba(118, 0, 49, 0.24);

  background:
    var(--primary-soft);

  transform:
    translateY(-1px);

}


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

.disclaimer {

  margin:
    30px 0 0;

  padding-top:
    20px;

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

  color:
    var(--text-muted);

  font-size:
    12px;

}


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

.site-footer {

  margin-top:
    50px;

  padding:
    30px 20px;

  background:
    var(--dark-accent);

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

}


.site-footer-inner {

  width:
    min(
      94%,
      980px
    );

  margin:
    0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

}


.site-footer p {

  margin:
    0;

  font-size:
    12px;

}


.site-footer strong {

  color:
    var(--ivory);

}


.footer-support a {

  color:
    var(--highlight);

  font-weight:
    700;

  text-decoration:
    none;

}


.footer-support a:hover {

  color:
    var(--white);

  text-decoration:
    underline;

}


/*
========================================
HIDDEN
========================================
*/

.hidden {

  display:
    none !important;

}


/*
========================================
DISABLED
========================================
*/

button:disabled,
select:disabled,
input:disabled {

  opacity:
    0.55;

  cursor:
    not-allowed;

}


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

@media (
  max-width: 800px
) {

  /*
  Header
  */

  .site-topbar-inner {

    width:
      calc(100% - 28px);

    min-height:
      68px;

    gap:
      12px;

  }


  .site-logo-image {

    width:
      36px;

    height:
      36px;

  }


  .site-logo-text {

    font-size:
      15px;

  }


  .site-nav {

    gap:
      2px;

  }


  .nav-link {

    padding:
      8px 8px;

    font-size:
      11px;

  }


  .contact-button {

    min-height:
      37px;

    padding:
      9px 12px;

    font-size:
      11px;

  }


  /*
  Main
  */

  .container {

    width:
      94%;

    margin:
      28px auto;

  }


  .card {

    padding:
      26px;

  }


  h1 {

    font-size:
      29px;

  }


  /*
  Filter
  */

  .filter-header {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .filter-header-actions {

    width:
      100%;

    justify-content:
      flex-start;

  }


  #btnTambahFilter {

    flex:
      1;

  }


  .filter-choice-grid {

    grid-template-columns:
      1fr;

  }


  .filter-card-grid {

    grid-template-columns:
      1fr;

  }

}


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

@media (
  max-width: 600px
) {

  /*
  Header
  */

  .site-topbar-inner {

    grid-template-columns:
      auto 1fr auto;

    gap:
      8px;

  }


  .site-logo-image {

    width:
      34px;

    height:
      34px;

  }


  .site-logo-text {

    display:
      none;

  }


  .site-nav {

    justify-content:
      center;

  }


  .nav-link {

    padding:
      8px 6px;

    font-size:
      10px;

  }


  .contact-button {

    padding:
      9px 10px;

    font-size:
      10px;

  }


  /*
  Container
  */

  .container {

    width:
      calc(100% - 24px);

    margin:
      20px auto;

  }


  .card {

    padding:
      20px;

    border-radius:
      14px;

  }


  h1 {

    font-size:
      26px;

  }


  .subtitle {

    font-size:
      13px;

  }


  /*
  Tabs
  */

  .tabs {

    display:
      grid;

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

    gap:
      8px;

  }


  .tab {

    min-width:
      0;

    width:
      100%;

  }


  /*
  Filter
  */

  .filter-chooser {

    padding:
      16px;

  }


  .active-filter {

    padding:
      14px;

  }


  /*
  Buttons
  */

  .buttons {

    display:
      grid;

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

    gap:
      8px;

  }


  .btn-primary {

    grid-column:
      1 / -1;

  }


  .btn-primary,
  .btn-secondary {

    width:
      100%;

  }


  /*
  Hasil
  */

  .angka {

    min-width:
      48px;

    padding:
      9px 11px;

    font-size:
      16px;

  }


  /*
  Footer
  */

  .site-footer {

    margin-top:
      35px;

  }


  .site-footer-inner {

    flex-direction:
      column;

    gap:
      8px;

    text-align:
      center;

  }

}


/*
========================================
HP KECIL
========================================
*/

@media (
  max-width: 390px
) {

  .site-topbar-inner {

    width:
      calc(100% - 20px);

  }


  .site-logo-image {

    width:
      30px;

    height:
      30px;

  }


  .nav-link {

    padding:
      7px 5px;

    font-size:
      9px;

  }


  .contact-button {

    min-height:
      34px;

    padding:
      8px;

    font-size:
      9px;

  }


  .container {

    width:
      calc(100% - 16px);

  }


  .card {

    padding:
      16px;

  }


  h1 {

    font-size:
      24px;

  }


  .filter-header-actions {

    display:
      grid;

    grid-template-columns:
      1fr;

  }


  #btnTambahFilter {

    width:
      100%;

  }

}