:root {
      --primary-navy: #172554;
      --primary-navy-dark: #0b1535;
      --primary-navy-light: #1e3a8a;
      --accent-yellow: #facc15;
      --accent-orange: #eab308;
      --accent-orange-hover: #ca8a04;
      --accent-amber: var(--accent-orange);
      --accent-amber-hover: var(--accent-orange-hover);
      --bg-surface: #f8fafc;
      --text-main: #1e293b;
      --bs-primary: var(--primary-navy);
      --bs-primary-rgb: 23, 37, 84;
      --bs-primary-text-emphasis: #0b1535;
      --bs-primary-bg-subtle: #e8ecf5;
      --bs-primary-border-subtle: #c5cee2;
      --bs-warning: #facc15;
      --bs-warning-rgb: 250, 204, 21;
      --bs-warning-text-emphasis: #713f12;
      --bs-warning-bg-subtle: #fef9c3;
      --bs-warning-border-subtle: #fde047;
      --bs-info: var(--accent-orange);
      --bs-info-rgb: 234, 179, 8;
      --bs-info-text-emphasis: #713f12;
      --bs-info-bg-subtle: #fef9c3;
      --bs-info-border-subtle: #fde047;
      --bs-light: #f8fafc;
      --bs-light-rgb: 248, 250, 252;
      --bs-body-bg: #ffffff;
      --bs-body-color: #1e293b;
      --bs-link-color: var(--primary-navy);
      --bs-link-hover-color: var(--primary-navy-light);
    }

    body {
      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 1.0625rem; /* ~17px generous readable font size */
      color: var(--text-main);
      background-color: #ffffff;
      line-height: 1.65;
      padding-top: 0;
    }

    /* Headings */
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 750;
      color: #0f172a;
      letter-spacing: -0.02em;
    }

    .text-navy {
      color: var(--primary-navy) !important;
    }

    .bg-navy {
      background-color: var(--primary-navy) !important;
    }

    .bg-navy-dark {
      background-color: var(--primary-navy-dark) !important;
    }

    .btn-navy {
      background-color: var(--primary-navy);
      color: #ffffff;
      font-weight: 700;
      border: 1px solid var(--primary-navy);
      padding: 0.65rem 1.4rem;
      border-radius: 0.75rem;
      transition: all 0.2s ease-in-out;
    }

    .btn-navy:hover, .btn-navy:focus {
      background-color: var(--primary-navy-light);
      color: #ffffff;
      border-color: var(--primary-navy-light);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
    }

    .btn-amber {
      background-color: var(--accent-yellow);
      color: var(--primary-navy-dark);
      font-weight: 800;
      border: 1px solid var(--accent-yellow);
      padding: 0.65rem 1.4rem;
      border-radius: 0.75rem;
      transition: all 0.2s ease-in-out;
    }

    .btn-amber:hover, .btn-amber:focus {
      background-color: var(--accent-orange-hover);
      color: var(--primary-navy-dark);
      border-color: var(--accent-orange-hover);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3);
    }

    .text-orange {
      color: #a16207 !important;
    }

    .bg-orange {
      background-color: var(--accent-yellow) !important;
    }

    .border-orange {
      border-color: var(--accent-orange) !important;
    }

    .navbar .nav-link {
      color: #ffffff;
      font-weight: 700;
      transition: color 0.2s ease;
    }

    .navbar .nav-link.text-secondary {
      color: rgba(255, 255, 255, 0.82) !important;
    }

    .navbar .nav-link:hover,
    .navbar .nav-link:focus {
      color: var(--accent-yellow) !important;
    }

    .navbar .nav-link.active {
      color: var(--accent-yellow) !important;
    }

    .navbar .navbar-brand,
    .navbar .navbar-brand .text-navy {
      color: #ffffff !important;
    }

    .navbar .navbar-brand > div:first-child {
      color: var(--primary-navy-dark) !important;
      background-color: var(--accent-yellow) !important;
    }

    .navbar .navbar-brand .text-orange {
      color: var(--accent-yellow) !important;
    }

    .navbar .navbar-brand small.text-muted {
      color: rgba(255, 255, 255, 0.72) !important;
    }

    .navbar .navbar-toggler-icon {
      filter: brightness(0) invert(1);
    }

    .navbar .btn-outline-secondary {
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.45);
    }

    .navbar .btn-outline-secondary:hover,
    .navbar .btn-outline-secondary:focus {
      color: var(--primary-navy-dark);
      background-color: var(--accent-yellow);
      border-color: var(--accent-yellow);
    }

    .navbar .btn-navy {
      color: var(--primary-navy-dark);
      background-color: var(--accent-yellow);
      border-color: var(--accent-yellow);
    }

    .navbar .btn-navy:hover,
    .navbar .btn-navy:focus {
      color: var(--primary-navy-dark);
      background-color: var(--accent-orange-hover);
      border-color: var(--accent-orange-hover);
    }

    /* Cards */
    .card-custom {
      border: 1px solid #e2e8f0;
      border-radius: 1rem;
      background: #ffffff;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .card-custom:hover {
      border-color: #cbd5e1;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    }

    /* Carousel Customizations */
    .carousel-control-prev,
    .carousel-control-next {
      width: 48px;
      height: 48px;
      background-color: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0.95;
      color: var(--primary-navy);
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      transition: all 0.2s;
    }

    .carousel-control-prev { left: -20px; }
    .carousel-control-next { right: -20px; }

    @media (max-width: 768px) {
      .carousel-control-prev { left: 5px; }
      .carousel-control-next { right: 5px; }
    }

    .carousel-control-prev:hover,
    .carousel-control-next:hover {
      background-color: var(--primary-navy);
      color: #ffffff;
      border-color: var(--primary-navy);
    }

    .carousel-indicators [data-bs-target] {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #94a3b8;
      border: none;
      margin: 0 4px;
      transition: all 0.3s;
    }

    .carousel-indicators .active {
      width: 30px;
      border-radius: 6px;
      background-color: var(--primary-navy);
    }

    /* Quick Filter Chips */
    .filter-chip {
      padding: 0.4rem 0.9rem;
      border-radius: 0.6rem;
      border: 1px solid #cbd5e1;
      background-color: #f1f5f9;
      color: #334155;
      font-size: 0.875rem;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      transition: all 0.15s;
    }

    .filter-chip:hover, .filter-chip.active {
      background-color: var(--primary-navy);
      color: #ffffff;
      border-color: var(--primary-navy);
    }

    /* Floating WhatsApp Button */
    .floating-wa-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 1040;
      background-color: #16a34a;
      color: #ffffff;
      padding: 0.75rem 1.35rem;
      border-radius: 50px;
      box-shadow: 0 8px 24px rgba(22, 163, 74, 0.4);
      font-weight: 700;
      font-size: 0.95rem;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: transform 0.2s, background-color 0.2s;
    }

    .floating-wa-btn:hover {
      background-color: #15803d;
      color: #ffffff;
      transform: scale(1.05);
    }

    .hero-section {
      background:
        radial-gradient(circle at 88% 12%, rgba(250, 204, 21, 0.16), transparent 25rem),
        linear-gradient(145deg, #ffffff 0%, #f8fafc 58%, #eef2ff 100%);
    }

    .hero-photo-wrap {
      position: relative;
      isolation: isolate;
    }

    .hero-photo-wrap::before,
    .hero-photo-wrap::after {
      position: absolute;
      z-index: -1;
      content: "";
      background: var(--accent-yellow);
    }

    .hero-photo-wrap::before {
      top: 2rem;
      left: -1rem;
      width: 7rem;
      height: 7rem;
      border-radius: 1.5rem;
    }

    .hero-photo-wrap::after {
      right: -0.5rem;
      bottom: 2rem;
      width: 8rem;
      height: 8rem;
      border-radius: 50%;
      background: #dbeafe;
    }

    .hero-photo {
      display: block;
      width: 100%;
      aspect-ratio: 1.2 / 1;
      object-fit: cover;
      object-position: center;
    }

    .hero-title {
      color: var(--primary-navy);
      font-size: clamp(3.2rem, 7vw, 6.5rem);
      line-height: 0.98;
      letter-spacing: -0.055em;
    }

    section[id] {
      scroll-margin-top: 6rem;
    }

    .navbar.sticky-top {
      background: rgba(11, 21, 53, 0.97) !important;
      backdrop-filter: blur(14px);
      border-color: rgba(255, 255, 255, 0.12) !important;
    }

    .hero-section .card-custom {
      border-color: #e2e8f0;
      box-shadow: 0 20px 50px rgba(23, 37, 84, 0.08);
    }

    .hero-photo-wrap > div {
      border-radius: 2rem !important;
      box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2) !important;
    }

    .hero-photo {
      aspect-ratio: 1.12 / 1;
    }

    section[id]:not(#beranda) {
      padding-top: 5rem !important;
      padding-bottom: 5rem !important;
    }

    #katalog-jurusan,
    #alumni {
      background-color: #f8fafc !important;
    }

    .form-select,
    .form-control {
      min-height: 3rem;
      border-color: #cbd5e1;
      border-radius: 0.75rem;
    }

    .form-select:focus,
    .form-control:focus {
      border-color: #6479b3;
      box-shadow: 0 0 0 0.25rem rgba(23, 37, 84, 0.12);
    }

    .filter-chip {
      background: #ffffff;
      border-color: #cbd5e1;
      border-radius: 999px;
      font-weight: 600;
    }

    .carousel-control-prev,
    .carousel-control-next {
      border-color: #cbd5e1;
      color: var(--primary-navy);
    }

    .accordion-button:not(.collapsed) {
      color: var(--primary-navy);
      background-color: #e8ecf5;
      box-shadow: none;
    }

    .bg-navy {
      background-color: var(--primary-navy) !important;
    }

    .bg-navy-dark {
      background-color: var(--primary-navy-dark) !important;
    }

    @media (max-width: 575.98px) {
      section[id]:not(#beranda) {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
      }

      .hero-section .row.align-items-center {
        --bs-gutter-x: 1.5rem;
      }

      .hero-title {
        font-size: clamp(2.9rem, 15vw, 4.5rem);
      }

      .hero-photo {
        aspect-ratio: 1.15 / 1;
      }

      .floating-wa-btn {
        right: 12px;
        bottom: 12px;
        padding: 0.7rem 0.9rem;
      }
    }