/* ==========================================================================
   BLACK & GOLD — Bootstrap 5.3 Override
   --------------------------------------------------------------------------
   Cara pakai:
   1. Muat SETELAH bootstrap.min.css
        <link href="bootstrap.min.css" rel="stylesheet">
        <link href="bootstrap-black-gold.css" rel="stylesheet">
   2. Tambahkan data-bs-theme="dark" pada tag <html>
        <html lang="id" data-bs-theme="dark">
      (supaya ikon select, close button, dll. otomatis versi terang)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap");

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="dark"] {
  /* Emas (lebih cerah & bercahaya) */
  --gold-100: #fff3cc;
  --gold-300: #fde276;
  --gold-500: #f1c448;   /* emas utama yang lebih hidup */
  --gold-600: #d6a427;
  --gold-700: #ab7f16;
  --gold-rgb: 241, 196, 72;

  /* Charcoal / Slate Dark berlapis (lebih cerah dan terdefinisi dibanding hitam pekat) */
  --ink-0: #141619;      /* latar halaman (charcoal lembut, tidak pekat) */
  --ink-1: #1c1e24;      /* navbar, topbar, sidebar, footer */
  --ink-2: #242730;      /* card, modal, panel */
  --ink-3: #2d313d;      /* input, sub-panel, hover */
  --ink-4: #3e4454;      /* border & divider yang lebih jelas */

  /* Teks (lebih terang dan nyaman dibaca) */
  --ivory: #f9fafb;
  --ivory-muted: #c7cad4;
  --ivory-faint: #9ea3af;

  --gold-gradient: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 45%, var(--gold-600) 100%);
  --gold-glow: 0 0 0 .25rem rgba(var(--gold-rgb), .25);
  --shadow-soft: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
  --shadow-gold: 0 .5rem 1.25rem rgba(var(--gold-rgb), .22);

  /* Mapping ke variabel Bootstrap */
  --bs-font-sans-serif: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.7;

  --bs-body-bg: var(--ink-0);
  --bs-body-bg-rgb: 20, 22, 25;
  --bs-body-color: var(--ivory);
  --bs-body-color-rgb: 249, 250, 251;
  --bs-secondary-color: var(--ivory-muted);
  --bs-secondary-bg: var(--ink-3);
  --bs-tertiary-color: var(--ivory-faint);
  --bs-tertiary-bg: var(--ink-2);
  --bs-emphasis-color: #ffffff;
  --bs-heading-color: var(--gold-300);

  --bs-border-color: var(--ink-4);
  --bs-border-color-translucent: rgba(var(--gold-rgb), .22);

  --bs-link-color: var(--gold-500);
  --bs-link-color-rgb: var(--gold-rgb);
  --bs-link-hover-color: var(--gold-300);
  --bs-link-hover-color-rgb: 253, 226, 118;

  --bs-primary: var(--gold-500);
  --bs-primary-rgb: var(--gold-rgb);
  --bs-primary-text-emphasis: var(--gold-300);
  --bs-primary-bg-subtle: rgba(var(--gold-rgb), .15);
  --bs-primary-border-subtle: rgba(var(--gold-rgb), .4);

  --bs-secondary: #9da3af;
  --bs-secondary-rgb: 157, 163, 175;

  --bs-success: #5ee195;
  --bs-success-rgb: 94, 225, 149;
  --bs-info: #6ec8f8;
  --bs-info-rgb: 110, 200, 248;
  --bs-warning: #ffb84d;
  --bs-warning-rgb: 255, 184, 77;
  --bs-danger: #f87171;
  --bs-danger-rgb: 248, 113, 113;

  --bs-border-radius: .625rem;
  --bs-border-radius-sm: .4rem;
  --bs-border-radius-lg: .9rem;
  --bs-border-radius-xl: 1.25rem;

  --bs-focus-ring-color: rgba(var(--gold-rgb), .38);
  --bs-box-shadow: var(--shadow-soft);
  --bs-box-shadow-sm: 0 .25rem .75rem rgba(0, 0, 0, .25);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------------------------
   2. BASE & TIPOGRAFI
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--gold-rgb), .12), transparent 60%),
    var(--ink-0);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--bs-heading-color);
}

/* Skala fluid: nyaman di HP maupun desktop */
h1, .h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.75rem); }
h2, .h2 { font-size: clamp(1.75rem, 1.35rem + 2vw, 2.75rem); }
h3, .h3 { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2.1rem); }
h4, .h4 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
h5, .h5 { font-size: 1.2rem; }
h6, .h6 { font-size: 1.05rem; }

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  line-height: 1.1;
}

p { max-width: 70ch; }
.text-center p, .text-end p, .card p, .modal p { max-width: none; }

.lead { font-size: 1.15rem; color: var(--ivory-muted); font-weight: 400; }
.text-muted, .text-body-secondary { color: var(--ivory-muted) !important; }
small, .small { color: var(--ivory-muted); }

a { text-decoration-color: rgba(var(--gold-rgb), .4); text-underline-offset: .2em; transition: color .2s ease; }
a:hover { text-decoration-color: var(--gold-300); }

hr { border-color: var(--gold-600); opacity: .35; }

blockquote, .blockquote {
  border-left: 3px solid var(--gold-500);
  padding-left: 1.1rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.4rem;
  color: var(--ivory);
}
.blockquote-footer { color: var(--ivory-muted); }

mark, .mark { background: rgba(var(--gold-rgb), .25); color: var(--gold-100); padding: .1em .25em; border-radius: .2rem; }
code { color: var(--gold-300); }
pre { background: var(--ink-2); border: 1px solid var(--ink-4); border-radius: var(--bs-border-radius); padding: 1rem; }

::selection { background: var(--gold-500); color: #14110a; }

/* Fokus keyboard yang jelas */
:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--gold-700) var(--ink-1); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-1); }
::-webkit-scrollbar-thumb { background: var(--gold-700); border-radius: 10px; border: 2px solid var(--ink-1); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-500); }

/* --------------------------------------------------------------------------
   3. UTILITY WARNA
   -------------------------------------------------------------------------- */
.text-primary { color: var(--gold-500) !important; }
.bg-primary { background: var(--gold-gradient) !important; color: #14110a !important; }
.border-primary { border-color: var(--gold-500) !important; }
.bg-dark { background-color: var(--ink-1) !important; }
.bg-black { background-color: var(--ink-0) !important; }
.bg-body-tertiary { background-color: var(--ink-2) !important; }
.text-gold { color: var(--gold-500) !important; }
.bg-gold-gradient { background: var(--gold-gradient) !important; color: #14110a !important; }
.text-gold-gradient {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.border-gold { border-color: rgba(var(--gold-rgb), .45) !important; }
.shadow-gold { box-shadow: var(--shadow-gold) !important; }

/* --------------------------------------------------------------------------
   4. TOMBOL
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-padding-y: .6rem;
  --bs-btn-border-radius: 999px;
  --bs-btn-focus-shadow-rgb: var(--gold-rgb);
  letter-spacing: .02em;
  transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-lg { --bs-btn-padding-x: 1.9rem; --bs-btn-padding-y: .8rem; --bs-btn-font-size: 1.08rem; }
.btn-sm { --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .35rem; }

/* Primary — emas solid dengan gradient */
.btn-primary {
  --bs-btn-color: #14110a;
  --bs-btn-bg: var(--gold-500);
  --bs-btn-border-color: var(--gold-500);
  --bs-btn-hover-color: #14110a;
  --bs-btn-hover-bg: var(--gold-300);
  --bs-btn-hover-border-color: var(--gold-300);
  --bs-btn-active-color: #14110a;
  --bs-btn-active-bg: var(--gold-600);
  --bs-btn-active-border-color: var(--gold-600);
  --bs-btn-disabled-color: #14110a;
  --bs-btn-disabled-bg: var(--gold-700);
  --bs-btn-disabled-border-color: var(--gold-700);
  background-image: var(--gold-gradient);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 .6rem 1.5rem rgba(var(--gold-rgb), .38); background-image: linear-gradient(135deg, #fff3b8, var(--gold-300)); }
.btn-primary:active { transform: translateY(0); }

/* Outline primary */
.btn-outline-primary {
  --bs-btn-color: var(--gold-500);
  --bs-btn-border-color: var(--gold-600);
  --bs-btn-hover-color: #14110a;
  --bs-btn-hover-bg: var(--gold-500);
  --bs-btn-hover-border-color: var(--gold-500);
  --bs-btn-active-color: #14110a;
  --bs-btn-active-bg: var(--gold-300);
  --bs-btn-active-border-color: var(--gold-300);
  --bs-btn-disabled-color: var(--gold-700);
  --bs-btn-disabled-border-color: var(--gold-700);
}

/* Secondary — hitam dengan garis emas tipis */
.btn-secondary {
  --bs-btn-color: var(--ivory);
  --bs-btn-bg: var(--ink-3);
  --bs-btn-border-color: var(--ink-4);
  --bs-btn-hover-color: var(--gold-300);
  --bs-btn-hover-bg: var(--ink-4);
  --bs-btn-hover-border-color: var(--gold-600);
  --bs-btn-active-color: var(--gold-300);
  --bs-btn-active-bg: var(--ink-4);
  --bs-btn-active-border-color: var(--gold-500);
}
.btn-outline-secondary {
  --bs-btn-color: var(--ivory-muted);
  --bs-btn-border-color: var(--ink-4);
  --bs-btn-hover-color: var(--gold-300);
  --bs-btn-hover-bg: var(--ink-3);
  --bs-btn-hover-border-color: var(--gold-600);
  --bs-btn-active-color: var(--gold-300);
  --bs-btn-active-bg: var(--ink-3);
  --bs-btn-active-border-color: var(--gold-500);
}

.btn-light {
  --bs-btn-color: #14110a;
  --bs-btn-bg: var(--ivory);
  --bs-btn-border-color: var(--ivory);
  --bs-btn-hover-color: #14110a;
  --bs-btn-hover-bg: var(--gold-100);
  --bs-btn-hover-border-color: var(--gold-100);
}
.btn-dark {
  --bs-btn-color: var(--gold-300);
  --bs-btn-bg: var(--ink-1);
  --bs-btn-border-color: var(--gold-700);
  --bs-btn-hover-color: #14110a;
  --bs-btn-hover-bg: var(--gold-500);
  --bs-btn-hover-border-color: var(--gold-500);
}
.btn-warning {
  --bs-btn-color: #1a1205;
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: #1a1205;
  --bs-btn-hover-bg: #f6bd62;
  --bs-btn-hover-border-color: #f6bd62;
}
.btn-link { --bs-btn-color: var(--gold-500); --bs-btn-hover-color: var(--gold-300); }

.btn-check:focus-visible + .btn,
.btn:focus-visible { box-shadow: var(--gold-glow); outline: none; }

/* --------------------------------------------------------------------------
   5. NAVBAR
   -------------------------------------------------------------------------- */
.navbar {
  --bs-navbar-padding-y: .9rem;
  --bs-navbar-color: var(--ivory-muted);
  --bs-navbar-hover-color: var(--gold-300);
  --bs-navbar-active-color: var(--gold-500);
  --bs-navbar-disabled-color: var(--ivory-faint);
  --bs-navbar-brand-color: var(--gold-300);
  --bs-navbar-brand-hover-color: var(--gold-100);
  --bs-navbar-toggler-border-color: rgba(var(--gold-rgb), .45);
  background: rgba(28, 30, 36, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(var(--gold-rgb), .25);
}
.navbar-brand {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: .04em;
}
.navbar-nav .nav-link {
  font-weight: 500;
  padding-block: .5rem;
  position: relative;
  transition: color .2s ease;
}
@media (min-width: 992px) {
  .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: .5rem; right: .5rem; bottom: .15rem;
    height: 1px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  .navbar-nav .nav-link:hover::after,
  .navbar-nav .nav-link.active::after { transform: scaleX(1); }
}
.navbar-toggler:focus { box-shadow: var(--gold-glow); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f1c448' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991.98px) {
  .navbar-collapse { padding-top: .75rem; border-top: 1px solid var(--ink-4); margin-top: .75rem; }
}

/* --------------------------------------------------------------------------
   6. CARD
   -------------------------------------------------------------------------- */
.card {
  --bs-card-bg: var(--ink-2);
  --bs-card-border-color: var(--ink-4);
  --bs-card-border-radius: var(--bs-border-radius-lg);
  --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
  --bs-card-cap-bg: rgba(var(--gold-rgb), .08);
  --bs-card-cap-color: var(--gold-300);
  --bs-card-title-color: var(--gold-300);
  --bs-card-color: var(--ivory);
  --bs-card-spacer-y: 1.4rem;
  --bs-card-spacer-x: 1.4rem;
  box-shadow: var(--bs-box-shadow-sm);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.card:hover { border-color: rgba(var(--gold-rgb), .55); box-shadow: var(--shadow-soft); }
.card-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 1.45rem; }
.card-subtitle { color: var(--ivory-muted) !important; }
.card-header, .card-footer { border-color: var(--ink-4); }
.card-header { font-weight: 600; }

/* Varian card dengan garis emas di atas */
.card-gold { border-top: 2px solid var(--gold-500); }

/* --------------------------------------------------------------------------
   7. FORM
   -------------------------------------------------------------------------- */
.form-label { color: var(--ivory); font-weight: 600; font-size: .92rem; margin-bottom: .4rem; }
.form-text { color: var(--ivory-faint); }

.form-control,
.form-select {
  background-color: var(--ink-3);
  border: 1px solid var(--ink-4);
  color: var(--ivory);
  border-radius: var(--bs-border-radius);
  padding: .7rem 1rem;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form-control::placeholder { color: var(--ivory-faint); }
.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) { border-color: var(--gold-700); }
.form-control:focus,
.form-select:focus {
  background-color: var(--ink-3);
  color: var(--ivory);
  border-color: var(--gold-500);
  box-shadow: var(--gold-glow);
}
.form-control:disabled, .form-select:disabled { background-color: var(--ink-1); color: var(--ivory-faint); }
.form-control-lg, .form-select-lg { padding: .9rem 1.2rem; }

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f1c448' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option { background: var(--ink-2); color: var(--ivory); }

.form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--ivory);
  -webkit-box-shadow: 0 0 0 1000px var(--ink-3) inset;
  caret-color: var(--gold-500);
}
.form-control::file-selector-button {
  background: var(--ink-4);
  color: var(--gold-300);
  border: 0;
  border-right: 1px solid var(--ink-4);
  transition: background .2s ease;
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button { background: var(--gold-700); color: #fff; }

.form-control.is-valid, .form-select.is-valid { border-color: var(--bs-success); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--bs-danger); }
.valid-feedback { color: var(--bs-success); }
.invalid-feedback { color: var(--bs-danger); }

.form-floating > label { color: var(--ivory-faint); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label { color: var(--gold-300); }
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after { background: transparent; }

.form-check-input {
  background-color: var(--ink-3);
  border: 1px solid var(--gold-700);
}
.form-check-input:checked {
  background-color: var(--gold-500);
  border-color: var(--gold-500);
}
.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2314110a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2314110a'/%3e%3c/svg%3e");
}
.form-check-input:focus { border-color: var(--gold-500); box-shadow: var(--gold-glow); }
.form-switch .form-check-input:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ab7f16'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2314110a'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-runnable-track { background: var(--ink-4); }
.form-range::-moz-range-track { background: var(--ink-4); }
.form-range::-webkit-slider-thumb { background: var(--gold-500); }
.form-range::-moz-range-thumb { background: var(--gold-500); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--ink-0), var(--gold-glow); }

.input-group-text {
  background: var(--ink-4);
  border-color: var(--ink-4);
  color: var(--gold-300);
}

/* --------------------------------------------------------------------------
   8. DROPDOWN, LIST GROUP, NAV TABS, PAGINATION, BREADCRUMB
   -------------------------------------------------------------------------- */
.dropdown-menu {
  --bs-dropdown-bg: var(--ink-2);
  --bs-dropdown-color: var(--ivory);
  --bs-dropdown-border-color: rgba(var(--gold-rgb), .3);
  --bs-dropdown-border-radius: var(--bs-border-radius-lg);
  --bs-dropdown-link-color: var(--ivory);
  --bs-dropdown-link-hover-color: var(--gold-300);
  --bs-dropdown-link-hover-bg: rgba(var(--gold-rgb), .1);
  --bs-dropdown-link-active-color: #14110a;
  --bs-dropdown-link-active-bg: var(--gold-500);
  --bs-dropdown-divider-bg: var(--ink-4);
  --bs-dropdown-header-color: var(--gold-600);
  --bs-dropdown-padding-y: .5rem;
  box-shadow: var(--bs-box-shadow-lg);
}
.dropdown-item { border-radius: .4rem; margin-inline: .35rem; width: auto; padding-block: .5rem; }

.list-group {
  --bs-list-group-bg: var(--ink-2);
  --bs-list-group-color: var(--ivory);
  --bs-list-group-border-color: var(--ink-4);
  --bs-list-group-border-radius: var(--bs-border-radius-lg);
  --bs-list-group-action-color: var(--ivory);
  --bs-list-group-action-hover-color: var(--gold-300);
  --bs-list-group-action-hover-bg: var(--ink-3);
  --bs-list-group-action-active-color: var(--gold-300);
  --bs-list-group-action-active-bg: var(--ink-4);
  --bs-list-group-active-color: #14110a;
  --bs-list-group-active-bg: var(--gold-500);
  --bs-list-group-active-border-color: var(--gold-500);
  --bs-list-group-disabled-color: var(--ivory-faint);
  --bs-list-group-disabled-bg: var(--ink-1);
}

.nav {
  --bs-nav-link-color: var(--ivory-muted);
  --bs-nav-link-hover-color: var(--gold-300);
  --bs-nav-link-padding-x: 1.1rem;
}
.nav-tabs {
  --bs-nav-tabs-border-color: var(--ink-4);
  --bs-nav-tabs-border-radius: var(--bs-border-radius);
  --bs-nav-tabs-link-hover-border-color: var(--ink-4) var(--ink-4) var(--ink-4);
  --bs-nav-tabs-link-active-color: var(--gold-500);
  --bs-nav-tabs-link-active-bg: var(--ink-2);
  --bs-nav-tabs-link-active-border-color: var(--ink-4) var(--ink-4) var(--gold-500);
}
.nav-tabs .nav-link.active { border-bottom-width: 2px; font-weight: 600; }
.nav-pills {
  --bs-nav-pills-border-radius: 999px;
  --bs-nav-pills-link-active-color: #14110a;
  --bs-nav-pills-link-active-bg: var(--gold-500);
}
.nav-pills .nav-link.active { background-image: var(--gold-gradient); font-weight: 600; }
@media (max-width: 575.98px) {
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link { white-space: nowrap; }
}

.pagination {
  --bs-pagination-color: var(--ivory-muted);
  --bs-pagination-bg: var(--ink-2);
  --bs-pagination-border-color: var(--ink-4);
  --bs-pagination-hover-color: var(--gold-300);
  --bs-pagination-hover-bg: var(--ink-3);
  --bs-pagination-hover-border-color: var(--gold-700);
  --bs-pagination-focus-color: var(--gold-300);
  --bs-pagination-focus-bg: var(--ink-3);
  --bs-pagination-focus-box-shadow: var(--gold-glow);
  --bs-pagination-active-color: #14110a;
  --bs-pagination-active-bg: var(--gold-500);
  --bs-pagination-active-border-color: var(--gold-500);
  --bs-pagination-disabled-color: var(--ivory-faint);
  --bs-pagination-disabled-bg: var(--ink-1);
  --bs-pagination-disabled-border-color: var(--ink-4);
  flex-wrap: wrap;
  gap: .25rem;
}
.page-link { border-radius: var(--bs-border-radius) !important; }

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--gold-700);
  --bs-breadcrumb-item-active-color: var(--ivory-muted);
}
.breadcrumb-item a { text-decoration: none; }

/* --------------------------------------------------------------------------
   9. TABLE
   -------------------------------------------------------------------------- */
.table {
  --bs-table-color: var(--ivory);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--ink-4);
  --bs-table-striped-color: var(--ivory);
  --bs-table-striped-bg: rgba(var(--gold-rgb), .05);
  --bs-table-hover-color: #ffffff;
  --bs-table-hover-bg: rgba(var(--gold-rgb), .12);
  --bs-table-active-color: #ffffff;
  --bs-table-active-bg: rgba(var(--gold-rgb), .18);
}
.table > thead > tr > * {
  color: var(--gold-300);
  font-weight: 600;
  border-bottom: 1px solid var(--gold-600);
  white-space: nowrap;
}
.table-responsive { border-radius: var(--bs-border-radius); }

/* --------------------------------------------------------------------------
   10. MODAL, OFFCANVAS, TOAST, POPOVER, TOOLTIP
   -------------------------------------------------------------------------- */
.modal {
  --bs-modal-bg: var(--ink-2);
  --bs-modal-color: var(--ivory);
  --bs-modal-border-color: rgba(var(--gold-rgb), .35);
  --bs-modal-border-radius: var(--bs-border-radius-xl);
  --bs-modal-header-border-color: var(--ink-4);
  --bs-modal-footer-border-color: var(--ink-4);
  --bs-modal-box-shadow: var(--bs-box-shadow-lg);
}
.modal-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 1.5rem; color: var(--gold-300); }
.modal-backdrop { --bs-backdrop-bg: #090a0d; --bs-backdrop-opacity: .65; }
.modal-backdrop.show { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

.offcanvas {
  --bs-offcanvas-bg: var(--ink-1);
  --bs-offcanvas-color: var(--ivory);
  --bs-offcanvas-border-color: rgba(var(--gold-rgb), .3);
}
.offcanvas-title { font-family: "Cormorant Garamond", Georgia, serif; color: var(--gold-300); font-weight: 700; }

.toast {
  --bs-toast-bg: var(--ink-2);
  --bs-toast-color: var(--ivory);
  --bs-toast-border-color: rgba(var(--gold-rgb), .35);
  --bs-toast-header-bg: var(--ink-3);
  --bs-toast-header-color: var(--gold-300);
  --bs-toast-header-border-color: var(--ink-4);
}

.popover {
  --bs-popover-bg: var(--ink-2);
  --bs-popover-border-color: rgba(var(--gold-rgb), .35);
  --bs-popover-header-bg: var(--ink-3);
  --bs-popover-header-color: var(--gold-300);
  --bs-popover-body-color: var(--ivory);
}
.tooltip { --bs-tooltip-bg: var(--gold-500); --bs-tooltip-color: #14110a; --bs-tooltip-opacity: 1; font-weight: 600; }

.btn-close { filter: invert(1) grayscale(1) brightness(1.4); opacity: .7; }
.btn-close:hover { opacity: 1; filter: invert(70%) sepia(60%) saturate(500%) hue-rotate(5deg) brightness(1.05); }
.btn-close:focus { box-shadow: var(--gold-glow); }

/* --------------------------------------------------------------------------
   11. ACCORDION, ALERT, BADGE, PROGRESS, SPINNER
   -------------------------------------------------------------------------- */
.accordion {
  --bs-accordion-bg: var(--ink-2);
  --bs-accordion-color: var(--ivory);
  --bs-accordion-border-color: var(--ink-4);
  --bs-accordion-border-radius: var(--bs-border-radius-lg);
  --bs-accordion-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
  --bs-accordion-btn-color: var(--ivory);
  --bs-accordion-btn-bg: var(--ink-2);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f1c448'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fde276'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-active-color: var(--gold-300);
  --bs-accordion-active-bg: rgba(var(--gold-rgb), .12);
  --bs-accordion-btn-focus-box-shadow: var(--gold-glow);
  --bs-accordion-btn-focus-border-color: var(--gold-500);
}
.accordion-button { font-weight: 600; }

.alert {
  --bs-alert-border-radius: var(--bs-border-radius-lg);
  border-left-width: 4px;
}
.alert-primary { --bs-alert-color: var(--gold-100); --bs-alert-bg: rgba(var(--gold-rgb), .1); --bs-alert-border-color: rgba(var(--gold-rgb), .35); --bs-alert-link-color: var(--gold-300); border-left-color: var(--gold-500); }
.alert-success { --bs-alert-color: #bfe6cd; --bs-alert-bg: rgba(var(--bs-success-rgb), .1); --bs-alert-border-color: rgba(var(--bs-success-rgb), .35); }
.alert-danger  { --bs-alert-color: #f3bdb6; --bs-alert-bg: rgba(var(--bs-danger-rgb), .1);  --bs-alert-border-color: rgba(var(--bs-danger-rgb), .35); }
.alert-warning { --bs-alert-color: #f8d9a6; --bs-alert-bg: rgba(var(--bs-warning-rgb), .1); --bs-alert-border-color: rgba(var(--bs-warning-rgb), .35); }
.alert-info    { --bs-alert-color: #c3dcec; --bs-alert-bg: rgba(var(--bs-info-rgb), .1);    --bs-alert-border-color: rgba(var(--bs-info-rgb), .35); }
.alert-secondary, .alert-light, .alert-dark { --bs-alert-color: var(--ivory); --bs-alert-bg: var(--ink-3); --bs-alert-border-color: var(--ink-4); }

.badge { font-weight: 600; letter-spacing: .02em; }
.badge.bg-primary { color: #14110a !important; }
.badge.bg-secondary { background-color: var(--ink-4) !important; color: var(--gold-300) !important; }
.badge.bg-dark { background-color: var(--ink-1) !important; color: var(--gold-300) !important; border: 1px solid var(--gold-700); }
.badge.bg-light { background-color: var(--ivory) !important; color: #14110a !important; }

.progress {
  --bs-progress-bg: var(--ink-4);
  --bs-progress-bar-bg: var(--gold-500);
  --bs-progress-bar-color: #14110a;
  --bs-progress-border-radius: 999px;
  --bs-progress-height: .65rem;
}
.progress-bar { background-image: var(--gold-gradient); font-weight: 700; }

.spinner-border, .spinner-grow { color: var(--gold-500); }

/* --------------------------------------------------------------------------
   12. KOMPONEN KECIL LAINNYA
   -------------------------------------------------------------------------- */
.carousel-control-prev-icon,
.carousel-control-next-icon { filter: drop-shadow(0 0 4px rgba(0, 0, 0, .8)); }
.carousel-indicators [data-bs-target] { background-color: var(--gold-500); }
.carousel-caption { background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent); border-radius: var(--bs-border-radius); }

.img-thumbnail { background: var(--ink-2); border-color: var(--ink-4); }
figure figcaption, .figure-caption { color: var(--ivory-muted); }

.placeholder { background-color: var(--ink-4); }
.border { border-color: var(--ink-4) !important; }
.rounded-4 { border-radius: var(--bs-border-radius-xl) !important; }
.link-primary { color: var(--gold-500) !important; }
.link-primary:hover, .link-primary:focus { color: var(--gold-300) !important; }

/* Pembatas section ala garis emas pudar */
.divider-gold {
  height: 1px; border: 0; opacity: 1;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
}

/* --------------------------------------------------------------------------
   13. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body { --bs-body-line-height: 1.65; }
  .container, .container-fluid { --bs-gutter-x: 1.5rem; }
  .btn { --bs-btn-padding-x: 1.2rem; }
  .btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .75rem; }
  .card { --bs-card-spacer-x: 1.15rem; --bs-card-spacer-y: 1.15rem; }
  .modal-dialog { margin: .75rem; }
  .table { font-size: .92rem; }
  .lead { font-size: 1.05rem; }
  /* tombol penuh di layar kecil bila diberi .btn-block-mobile */
  .btn-block-mobile { display: block; width: 100%; }
}

@media (min-width: 1400px) {
  body { --bs-body-font-size: 1.05rem; }
}

/* --------------------------------------------------------------------------
   14. AKSESIBILITAS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn-primary:hover { transform: none; }
}

@media (forced-colors: active) {
  .btn-primary { background-image: none; }
}