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

:root {
  /* Brand */
  --brand: #260026;

  /* Background */
  --bg-dark: #180018;
  --bg-brand: #260026;

  /* Surface */
  --surface: #32103A;
  --surface-elevated: #45144F;

  /* Primary / Accent */
  --primary: #7C3AED;
  --primary-hover: #9B6CF2;
  --accent: #C4A1FF;

  /* Border */
  --border: #68406F;
  --border-soft: rgba(196, 161, 255, 0.18);

  /* Text Dark */
  --text-dark: #260026;
  --text-dark-secondary: #45144F;

  /* Text Light */
  --text-light: #FAF7FC;
  --text-light-secondary: #CDBFD1;
  --text-muted: #9D8A9F;

  /* Navbar */
  --navbar-bg: #FFFFFF;
  --navbar-text: #260026;
  --navbar-hover: #7C3AED;

  /* Effect */
  --shadow-soft: rgba(38, 0, 38, 0.15);
  --shadow-primary: rgba(124, 58, 237, 0.25);
}


/* =========================================
   RESPONSIVE FONT
   ========================================= */

@media (max-width: 767.98px) {
  .custom_font_size {
    font-size: 12px !important;
  }
}

@media (min-width: 768px) {
  .custom_font_size {
    font-size: 14px !important;
  }
}


/* =========================================
   CUSTOM GRID
   ========================================= */

@media (min-width: 992px) {
  .col-lg-25 {
    flex: 0 0 auto;
    width: 20%;
  }
}


/* =========================================
   BORDER RADIUS
   ========================================= */

.custom_rounded {
  border-radius: 0.75rem !important;
}


/* =========================================
   BODY
   ========================================= */

body {
  background-color: transparent !important;
}


/* =========================================
   BRAND GRADIENT
   ========================================= */

.custom_gradient {
  /* fallback */
  background-color: var(--brand);

  background-image: linear-gradient(
    135deg,
    #260026 0%,
    #32103A 45%,
    #45144F 100%
  );

  color: var(--text-light);
}


/* =========================================
   NAVBAR
   ========================================= */

.navbar {
  padding: 5px !important;
}

.navbar-area {
  top: 0 !important;

  background-color: var(--navbar-bg);

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

  box-shadow:
    0 4px 18px rgba(38, 0, 38, 0.08);
}


/* =========================================
   NAVBAR TOGGLER
   ========================================= */

.custom-toggler.navbar-toggler {
  border-color: rgba(38, 0, 38, 0.3);

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

.custom-toggler.navbar-toggler:hover {
  border-color: var(--primary);

  background-color: rgba(124, 58, 237, 0.06);
}

.custom-toggler.navbar-toggler:focus {
  border-color: var(--primary);

  box-shadow:
    0 0 0 3px rgba(124, 58, 237, 0.15);
}


/* Bootstrap default navbar-toggler-icon
   tetap bisa digunakan */
.custom-toggler .navbar-toggler-icon {
  border-color: var(--brand);
}


/* =========================================
   ACCORDION
   ========================================= */

.accordion-button::after {
  display: none !important;
}


/* =========================================
   NAVBAR MENU
   ========================================= */

.header .navbar-nav .nav-item > a {
  color: var(--navbar-text) !important;

  font-weight: 600;
  text-decoration: none;

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


/* =========================================
   NAVBAR ICON
   ========================================= */

.header .navbar-nav .nav-item > a i {
  color: var(--navbar-text) !important;

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


/* =========================================
   NAVBAR HOVER / FOCUS
   ========================================= */

.header .navbar-nav .nav-item > a:hover,
.header .navbar-nav .nav-item > a:focus {
  color: var(--navbar-hover) !important;
}


/* Icon ikut berubah */
.header .navbar-nav .nav-item > a:hover i,
.header .navbar-nav .nav-item > a:focus i {
  color: var(--navbar-hover) !important;
}


/* =========================================
   ACTIVE NAV ITEM
   ========================================= */

.header .navbar-nav .nav-item > a.active,
.header .navbar-nav .nav-item.active > a {
  color: var(--primary) !important;
}

.header .navbar-nav .nav-item > a.active i,
.header .navbar-nav .nav-item.active > a i {
  color: var(--primary) !important;
}


/* =========================================
   OPTIONAL DROPDOWN
   ========================================= */

.header .dropdown-menu {
  border: 1px solid rgba(38, 0, 38, 0.1);

  border-radius: 12px;

  background-color: #FFFFFF;

  box-shadow:
    0 12px 32px rgba(38, 0, 38, 0.12);

  padding: 8px;
}

.header .dropdown-menu .dropdown-item {
  border-radius: 8px;

  color: var(--brand);

  font-weight: 500;

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

.header .dropdown-menu .dropdown-item:hover,
.header .dropdown-menu .dropdown-item:focus {
  color: var(--primary);

  background-color: rgba(124, 58, 237, 0.08);
}


/* =========================================
   OPTIONAL BUTTON BRAND
   ========================================= */

.btn-brand {
  border: 1px solid var(--primary);

  border-radius: 10px;

  background: linear-gradient(
    135deg,
    #6D28D9,
    #8B5CF6
  );

  color: #FFFFFF;

  font-weight: 600;

  box-shadow:
    0 5px 16px rgba(124, 58, 237, 0.25);

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

.btn-brand:hover,
.btn-brand:focus {
  background: linear-gradient(
    135deg,
    #7C3AED,
    #9B6CF2
  );

  color: #FFFFFF;

  transform: translateY(-2px);

  box-shadow:
    0 8px 22px rgba(124, 58, 237, 0.35);
}


/* =========================================
   LINKS
   ========================================= */

a {
  color: var(--primary);
}

a:hover {
  color: var(--primary-hover);
}