/* =====================================================================
   MASUK PTN — Redesign v3 · universitas.html (page polish only)
   University listing grid (.course-item cards) + search bar + pagination.
   v3: flat colors only (zero gradients), diverse rotating card accents,
   proportional scale, glass on the search pill. Reuses base.css tokens.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  Page header rhythm                                                  */
/* ------------------------------------------------------------------ */
.page-header { margin-bottom: 0 !important; }
.page-header .display-3 { letter-spacing: -.03em; }
.page-header nav p {
  margin: .5rem auto 0;
  max-width: 38rem;
  font-size: var(--fs-base);
  letter-spacing: .01em;
}

/* ------------------------------------------------------------------ */
/*  Search / filter bar — glass pill with blue focus ring               */
/* ------------------------------------------------------------------ */
/* .container-fluid.wow .position-relative {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  padding: .35rem;
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
} */
.container-fluid.wow .position-relative:focus-within {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 .3rem var(--blue-100), var(--shadow-sm);
}

#cari.form-control {
  border: none;
  background: transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-base);
  padding-left: 1.4rem !important;
}
#cari.form-control::placeholder { color: var(--muted-200); }
#cari.form-control:focus { box-shadow: none; }

/* the inline search button → compact flat blue pill */
/* .container-fluid.wow .position-relative .btn.btn-primary {
  border-radius: var(--r-pill);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: .07em;
  padding: .6rem 1.6rem !important;
  margin-top: .35rem !important;
  margin-right: .35rem !important;
} */

/* search section gets breathing room above the grid */
.container-fluid.wow .container.py-12 { padding-top: 2.75rem; padding-bottom: .5rem; }

/* ------------------------------------------------------------------ */
/*  University cards (.course-item) — flat, hairline, hover lift        */
/* ------------------------------------------------------------------ */
.course-item {
  position: relative;
  height: 100%;
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease);
}
/* top accent bar — solid color, visible at rest (diverse rotation below),
   grows slightly on hover for a flat micro-interaction */
.course-item::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--blue);
  transition: height .3s var(--ease);
  z-index: 2;
}
.course-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.course-item:hover::after { height: 6px; }

/* logo / image area — flat surface, no scrim, gentle zoom */
.course-item .position-relative.overflow-hidden {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .4s var(--ease);
}
.course-item .position-relative.overflow-hidden img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(18, 50, 68, .12));
  transition: transform .5s var(--ease);
}
.course-item:hover .position-relative.overflow-hidden img { transform: scale(1.06); }

/* name plate */
.course-item .text-center.p-4 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.course-item h6 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--fs-base);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.course-item h6 a {
  color: var(--ink);
  transition: color .3s var(--ease);
}
.course-item:hover h6 a {
  color: var(--blue-600);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* --- Rotating accent colors across cards (diverse, not one gold) --- */
/* 6n+1 → blue (default above) */
.row.g-4 > div:nth-of-type(6n+1) .course-item:hover { border-color: var(--blue-200); }
.row.g-4 > div:nth-of-type(6n+1) .course-item:hover .position-relative.overflow-hidden { background: var(--blue-50); }

.row.g-4 > div:nth-of-type(6n+2) .course-item::after { background: var(--coral); }
.row.g-4 > div:nth-of-type(6n+2) .course-item:hover { border-color: var(--coral-100); }
.row.g-4 > div:nth-of-type(6n+2) .course-item:hover .position-relative.overflow-hidden { background: var(--coral-50); }
.row.g-4 > div:nth-of-type(6n+2) .course-item:hover h6 a { color: var(--coral-600); }

.row.g-4 > div:nth-of-type(6n+3) .course-item::after { background: var(--green); }
.row.g-4 > div:nth-of-type(6n+3) .course-item:hover { border-color: var(--green-100); }
.row.g-4 > div:nth-of-type(6n+3) .course-item:hover .position-relative.overflow-hidden { background: var(--green-50); }
.row.g-4 > div:nth-of-type(6n+3) .course-item:hover h6 a { color: var(--green-600); }

.row.g-4 > div:nth-of-type(6n+4) .course-item::after { background: var(--violet); }
.row.g-4 > div:nth-of-type(6n+4) .course-item:hover { border-color: var(--violet-100); }
.row.g-4 > div:nth-of-type(6n+4) .course-item:hover .position-relative.overflow-hidden { background: var(--violet-50); }
.row.g-4 > div:nth-of-type(6n+4) .course-item:hover h6 a { color: var(--violet-600); }

.row.g-4 > div:nth-of-type(6n+5) .course-item::after { background: var(--amber-600); }
.row.g-4 > div:nth-of-type(6n+5) .course-item:hover { border-color: var(--amber-100); }
.row.g-4 > div:nth-of-type(6n+5) .course-item:hover .position-relative.overflow-hidden { background: var(--amber-50); }
.row.g-4 > div:nth-of-type(6n+5) .course-item:hover h6 a { color: var(--amber-600); }

.row.g-4 > div:nth-of-type(6n+6) .course-item::after { background: var(--rose); }
.row.g-4 > div:nth-of-type(6n+6) .course-item:hover { border-color: var(--rose-100); }
.row.g-4 > div:nth-of-type(6n+6) .course-item:hover .position-relative.overflow-hidden { background: var(--rose-50); }
.row.g-4 > div:nth-of-type(6n+6) .course-item:hover h6 a { color: var(--rose-600); }

/* ------------------------------------------------------------------ */
/*  Pagination — flat, active = blue-600                                */
/* ------------------------------------------------------------------ */
.pagination {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
  padding: .4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-xs);
}
.pagination .page-item { list-style: none; }
.pagination .page-link {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: var(--fs-sm);
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill) !important;
  margin: 0;
  box-shadow: none;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              transform .25s var(--ease);
}
.pagination .page-link:hover {
  background: var(--blue-50);
  color: var(--blue-600);
  transform: translateY(-2px);
}
.pagination .page-link:focus { box-shadow: 0 0 0 .25rem var(--blue-100); }
.pagination .page-item.active .page-link {
  background: var(--blue-600);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.pagination .page-item.disabled .page-link {
  background: transparent;
  color: var(--muted-200);
  opacity: .6;
}

/* ------------------------------------------------------------------ */
/*  Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .course-item .position-relative.overflow-hidden { height: 168px; padding: 1.1rem; }
  .course-item h6 { font-size: var(--fs-sm); }
  .container-fluid.wow .position-relative .btn.btn-primary { padding: .5rem 1.15rem !important; }
  .pagination .page-link { min-width: 36px; height: 36px; }
}

/* =====================================================================
   KUSTOMISASI KOLOM PENCARIAN (SEARCH BAR)
   ===================================================================== */
/* Membuat form pencarian menjadi bentuk oval (pill) */
.position-relative input#cari.form-control {
    border-radius: 50px; /* Lengkungan penuh */
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    padding-right: 130px !important; /* Spasi agar teks ketikan tidak tertutup tombol */
    font-size: 16px;
}

/* Efek saat input diklik/fokus */
.position-relative input#cari.form-control:focus {
    box-shadow: 0 4px 15px rgba(14, 147, 196, 0.15); /* Bayangan biru halus */
    border-color: var(--primary);
    outline: none;
}

/* Menyesuaikan tombol CARI agar proporsional di dalam input */
.position-relative button.btn-primary[onclick="cari()"] {
    border-radius: 50px;
    padding: 0 30px; /* Spasi kiri kanan tombol */
    font-weight: 700;
    letter-spacing: 1px;
    height: calc(100% - 12px); /* Menyesuaikan tinggi input dikurangi margin */
    top: 6px !important; /* Override posisi dari bawaan Bootstrap */
    right: 6px !important;
    margin-top: 0 !important;
}