:root {
      --deep-purple: #2a1052;
      --deep-purple-dark: #1c0b3a;
      --lilac-bg: #e4d7ee;
      --panel-bg: #f7f1fb;
      --accent-purple: #4b1f7a;
      --text-muted: #6b5b7a;
      --gold-line: #b9a3d6;
        --bs-primary: #1c0b3a;
        --bs-primary-rgb: 28, 11, 58;

        --primary-color: #1c0b3a;
        --primary-hover: #2a1254;
        --primary-active: #140829;
        --primary-light: #f0ecf7;
    }




    /* =========================================================
       BACKGROUND
       ========================================================= */

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


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

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


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

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


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

    .btn-primary {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--primary-color);
        --bs-btn-border-color: var(--primary-color);

        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--primary-hover);
        --bs-btn-hover-border-color: var(--primary-hover);

        --bs-btn-focus-shadow-rgb: 28, 11, 58;

        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--primary-active);
        --bs-btn-active-border-color: var(--primary-active);

        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: var(--primary-color);
        --bs-btn-disabled-border-color: var(--primary-color);
    }


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

    .btn-outline-primary {
        --bs-btn-color: var(--primary-color);
        --bs-btn-border-color: var(--primary-color);

        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--primary-color);
        --bs-btn-hover-border-color: var(--primary-color);

        --bs-btn-focus-shadow-rgb: 28, 11, 58;

        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--primary-color);
        --bs-btn-active-border-color: var(--primary-color);

        --bs-btn-disabled-color: var(--primary-color);
        --bs-btn-disabled-border-color: var(--primary-color);
    }


    /* =========================================================
       LINK PRIMARY
       ========================================================= */

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

    .link-primary:hover,
    .link-primary:focus {
        color: var(--primary-hover) !important;
    }


    /* =========================================================
       ALERT PRIMARY
       ========================================================= */

    .alert-primary {
        --bs-alert-color: #1c0b3a;
        --bs-alert-bg: var(--primary-light);
        --bs-alert-border-color: #d5cce3;
    }


    /* =========================================================
       BADGE PRIMARY
       ========================================================= */

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


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

    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.25rem rgba(28, 11, 58, 0.20);
    }


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

    .form-check-input:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .form-check-input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.25rem rgba(28, 11, 58, 0.20);
    }


    /* =========================================================
       RANGE
       ========================================================= */

    .form-range::-webkit-slider-thumb {
        background-color: var(--primary-color);
    }

    .form-range::-moz-range-thumb {
        background-color: var(--primary-color);
    }


    /* =========================================================
       PROGRESS
       ========================================================= */

    .progress-bar {
        background-color: var(--primary-color) !important;
    }


    /* =========================================================
       NAV / TABS
       ========================================================= */

    .nav-link {
        color: var(--primary-color);
    }

    .nav-link:hover,
    .nav-link:focus {
        color: var(--primary-hover);
    }

    .nav-pills .nav-link.active,
    .nav-pills .show > .nav-link {
        background-color: var(--primary-color);
    }


    /* =========================================================
       PAGINATION
       ========================================================= */

    .pagination {
        --bs-pagination-color: var(--primary-color);
        --bs-pagination-hover-color: #fff;
        --bs-pagination-hover-bg: var(--primary-color);
        --bs-pagination-hover-border-color: var(--primary-color);

        --bs-pagination-focus-color: var(--primary-color);
        --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(28, 11, 58, 0.20);

        --bs-pagination-active-bg: var(--primary-color);
        --bs-pagination-active-border-color: var(--primary-color);
    }


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

    .dropdown-item {
        color: #212529;
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        color: #fff;
        background-color: var(--primary-color);
    }

    .dropdown-item.active,
    .dropdown-item:active {
        background-color: var(--primary-color);
    }


    /* =========================================================
       LIST GROUP
       ========================================================= */

    .list-group-item-primary {
        color: #1c0b3a;
        background-color: var(--primary-light);
        border-color: #d5cce3;
    }


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

    .accordion-button:not(.collapsed) {
        color: var(--primary-color);
        background-color: var(--primary-light);
    }

    .accordion-button:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.25rem rgba(28, 11, 58, 0.20);
    }


    /* =========================================================
       TABLE
       ========================================================= */

    .table-primary {
        --bs-table-bg: var(--primary-light);
        --bs-table-color: #1c0b3a;
    }


    /* =========================================================
       SPINNER
       ========================================================= */

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

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


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

    *:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--lilac-bg);
      color: #2a1052;
    }

    .font-display {
      font-family: 'Playfair Display', serif;
    }

    /* HERO */
    .hero {
      position: relative;
      background-image: url('header.jpg');
      overflow: hidden;
      padding: 2.5rem 0 3rem;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(1px 1px at 10% 20%, #fff, transparent),
        radial-gradient(1px 1px at 80% 10%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 60% 40%, #fff, transparent),
        radial-gradient(1px 1px at 30% 70%, #fff, transparent),
        radial-gradient(1px 1px at 90% 60%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 45% 85%, #fff, transparent),
        radial-gradient(1px 1px at 75% 90%, #fff, transparent);
      opacity: 0.5;
      pointer-events: none;
    }

    .hero .lang-select {
      color: #d8c9ec;
      font-size: 0.9rem;
      text-decoration: none;
    }

    .hero .site-url {
      color: #b8a2d9;
      letter-spacing: 2px;
      font-size: 0.95rem;
    }

    .hero .divider-line {
      border-top: 1px solid rgba(255, 255, 255, 0.25);
      width: 45%;
    }

    .hero h1 {
      color: #fdfcff;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .hero-bottom-rule {
      border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* NAVBAR */
    .navbar-iseic {
      background: var(--deep-purple-dark);
      font-family: 'Playfair Display', serif;
    }

    .navbar-iseic .nav-link {
      color: #ded2ef !important;
      font-size: 1rem;
      padding: 0.9rem 0.9rem;
      margin-right: 1rem;
    }

    .navbar-iseic .nav-link:hover {
      color: #ffffff !important;
    }

    .navbar-iseic .dropdown-menu {
      background: var(--deep-purple);
      border: none;
        border-radius: 3px;
    }

    .navbar-iseic .dropdown-item {
      color: #ded2ef;
      font-size: 0.9rem;
        margin-bottom: 10px;
    }

    .navbar-iseic .dropdown-item:hover {
      background: var(--deep-purple-dark);
      color: #fff;
    }

    /* SEARCH BAR */
    .search-wrap {
      background: var(--lilac-bg);
      padding: 1.5rem 0;
    }

    .search-wrap .form-control {
      border-radius: 10px 0 0 10px;
      border: 1px solid #cbb8e0;
      padding: 0.7rem 1rem;
    }

    .search-wrap .btn-search {
      border-radius: 0 10px 10px 0;
      background: var(--deep-purple-dark);
      color: #fff;
      padding: 0.7rem 1.6rem;
      border: 1px solid var(--deep-purple-dark);
    }

    .search-wrap .btn-search:hover {
      background: var(--accent-purple);
    }

    /* MAIN CONTENT PANELS */
    .content-panel {
      background: var(--panel-bg);
      padding: 2rem;
      min-height: 480px;
    }

    .photo-placeholder {
      background: #e4e4e4;
      border: 1px solid #d5d5d5;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8a8a8a;
      font-weight: 600;
      letter-spacing: 1px;
      margin-bottom: 1.5rem;
    }

    .section-heading {
      color: var(--accent-purple);
      font-weight: 700;
      font-size: 1.6rem;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 0.9rem;
    }

    .section-heading::after {
      content: "";
      flex: 1;
      border-top: 1px solid var(--gold-line);
    }

    .archive-category {
      font-weight: 700;
      font-size: 0.95rem;
      color: #2a1052;
      margin-bottom: 0.4rem;
    }

    .archive-list a {
      display: block;
      color: #4b3a63;
      font-size: 0.88rem;
      text-decoration: none;
      padding: 0.15rem 0;
    }

    .archive-list a:hover {
      color: var(--accent-purple);
      text-decoration: underline;
    }

    .latest-issue-card {
      padding-top: 0.5rem;
      font-family: 'Playfair Display', serif;
    }

    .latest-issue-title {
      color: var(--accent-purple);
      font-weight: 700;
      font-size: 1rem;
      margin-bottom: 0.3rem;
    }

    .latest-issue-issn {
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    /* SPONSOR / LOGO PANEL */
    .logo-panel {
      background: var(--panel-bg);
      padding: 2rem 1.5rem;
    }

    .logo-box {
      background: #e4e4e4;
      border: 1px solid #d5d5d5;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8a8a8a;
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 1px;
      margin-bottom: 1.2rem;
    }

    /* FOOTER */
    .footer-iseic {
      background: var(--deep-purple-dark);
      color: #cabcdc;
      padding-top: 2.2rem;
    }

    .footer-iseic .logo-box-footer {
      background: #e4e4e4;
      border: 1px solid #d5d5d5;
      width: 110px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8a8a8a;
      font-weight: 600;
      font-size: 0.8rem;
      letter-spacing: 1px;
    }

    .footer-iseic a {
      color: #e8dff3;
      text-decoration: none;
    }

    .footer-iseic a:hover {
      text-decoration: underline;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.15);
      margin-top: 1.8rem;
      padding: 1rem 0;
      text-align: center;
      font-size: 0.85rem;
      color: #a897c2;
    }

    @media (max-width: 767px) {
      .hero h1 {
        font-size: 1.6rem;
      }

      .divider-line {
        width: 60%;
      }
    }