/**
 * dsh-theme.css — lapisan tema krem untuk index.php.
 *
 * Warna dasar diambil dari latar hero (#f5f0e8) lalu diturunkan menjadi satu
 * skala krem, dipadukan dengan navy dan emas yang sudah dipakai identitas UGM.
 * Berkas ini dimuat SESUDAH Tailwind supaya bisa menyeragamkan komponen yang
 * sebelumnya memakai warna lepas (merah, biru, oranye).
 */

:root {
  /* Skala krem — diturunkan dari #f5f0e8 (latar hero) */
  --cream-50:  #fdfbf7;
  --cream-100: #faf6ee;
  --cream-200: #f5f0e8;
  --cream-300: #ebe2d2;
  --cream-400: #dbcdb4;

  /* Navy identitas */
  --navy-900: #1a2b5e;
  --navy-700: #2d4a8a;
  --navy-500: #3b5ea6;

  /* Emas identitas */
  --gold-700: #a87c28;
  --gold-600: #c8973a;
  --gold-500: #e6b84a;

  /* Teks */
  --ink:       #1e293b;
  --ink-soft:  #5b6b8c;
  --ink-faint: #8494b0;

  /* Garis & bayangan — bernada hangat agar menyatu dengan krem */
  --line:        #e7dfd1;
  --line-strong: #d8cab0;
  --shadow-sm: 0 1px 3px rgba(26, 43, 94, .06);
  --shadow-md: 0 6px 18px rgba(26, 43, 94, .09);
  --shadow-lg: 0 16px 40px rgba(26, 43, 94, .14);

  --radius: 14px;
}

/* ── Dasar halaman ───────────────────────────────────────────────────────── */

body {
  background: var(--cream-200);
  color: var(--ink);
}

/* Bagian yang sebelumnya putih polos disamakan ke krem supaya tidak ada
   "lompatan" terang saat menggulung dari hero ke bawah. */
#berita-terbaru,
#faqSection,
section.bg-white {
  background: var(--cream-100) !important;
}

#faqSection { border-top: 1px solid var(--line); }

/* ── Header ──────────────────────────────────────────────────────────────── */

/* Header berbentuk pil (oval).
   Bentuk itu DIPERTAHANKAN — yang diselaraskan hanya warnanya ke skala krem.
   Aturan sebelumnya keliru menyasar div bagian dalam (`> div > div`) dan
   mengecatnya tanpa border-radius, sehingga muncul kotak persegi di dalam pil.
   Latar pil ditulis inline di markup, jadi perlu !important untuk menimpanya. */
#mainHeader > div {
  background: rgba(253, 251, 247, .94) !important;
  border: 1px solid rgba(200, 151, 58, .24) !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 20px rgba(26, 43, 94, .10), 0 1px 3px rgba(26, 43, 94, .06) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Baris isi header tidak boleh punya latar sendiri — kalau punya, sudut
   persegunya akan terlihat menembus lengkungan pil. */
#mainHeader > div > div { background: transparent !important; }

/* Tombol "Jelajahi".
   css/style.css mewarnainya rgba(20,16,50,.78) — ungu-kehitaman yang tidak ada
   di palet dan tampak kusam di atas krem. Diselaraskan ke navy identitas. */
#browseCategoriesToggle,
html.light-mode #browseCategoriesToggle {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700)) !important;
  border: 1px solid rgba(200, 151, 58, .28) !important;
  color: #fff !important;
  border-radius: 9999px !important;
}
#browseCategoriesToggle:hover,
html.light-mode #browseCategoriesToggle:hover {
  background: linear-gradient(135deg, var(--gold-600), var(--gold-500)) !important;
  border-color: var(--gold-500) !important;
}
/* Ikon dan chevron di dalamnya ikut putih agar terbaca di atas navy.
   Opasitasnya dibuat penuh — nilai .85 membuat ikon tampak pudar. */
#browseCategoriesToggle svg { color: #fff !important; opacity: 1 !important; }
/* Badge jumlah: warna solid, bukan putih transparan di atas navy. */
#browseTotalCount {
  background: #4b5e8d !important;
  color: #fff !important;
  border-color: #61729b !important;
}

/* ── Kolom pencarian ─────────────────────────────────────────────────────────
   Sebelumnya kotak pencarian gelap dengan teks putih, dipasang di atas hero
   yang terang — kontras yang berlawanan arah dan membuat placeholder nyaris
   tak terbaca. Sekarang permukaannya terang dengan teks navy. */

/* Selector disamakan bentuknya dengan css/style.css, yang memaksa
   `html.light-mode .search-wrapper { background:#1a1535 !important }`.
   Spesifisitas yang setara + dimuat belakangan = aturan di sini yang menang. */
.search-wrapper,
html.light-mode .search-wrapper {
  background: rgba(255, 255, 255, .97) !important;
  border: 1.5px solid var(--line-strong) !important;
  box-shadow: var(--shadow-md) !important;
  transition: border-color .2s, box-shadow .2s;
}
.search-wrapper:focus-within,
html.light-mode .search-wrapper:focus-within {
  border-color: var(--gold-600) !important;
  box-shadow: 0 0 0 4px rgba(200, 151, 58, .18), var(--shadow-lg) !important;
}

#searchInput,
html.light-mode #searchInput {
  color: var(--ink) !important;
  caret-color: var(--gold-600) !important;
  font-weight: 500;
}
#searchInput::placeholder,
html.light-mode #searchInput::placeholder {
  color: var(--ink-faint) !important;
  font-weight: 400 !important;
}

/* Ikon kaca pembesar di dalam kolom.
   style.css mengubah .text-white menjadi gelap di light mode, tapi ikon ini
   memakai text-white/50 sehingga perlu disebut terpisah. */
.search-wrapper svg,
html.light-mode .search-wrapper svg { color: var(--ink-faint) !important; }
.search-wrapper:focus-within svg,
html.light-mode .search-wrapper:focus-within svg { color: var(--gold-600) !important; }

/* Tombol "Search" */
.search-action-btn {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700)) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 12px rgba(26, 43, 94, .28) !important;
}
.search-action-btn:hover {
  background: linear-gradient(135deg, var(--gold-600), var(--gold-500)) !important;
  box-shadow: 0 5px 18px rgba(200, 151, 58, .38) !important;
}

/* ── Tombol tautan di hero ───────────────────────────────────────────────────
   Dua tombol ini semula merah dan biru terang, dua keluarga warna yang tidak
   ada di identitas halaman. Diseragamkan: satu navy (utama), satu bergaris
   emas (sekunder). */

.hero-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 12px;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.hero-cta:active { transform: translateY(1px); }

.hero-cta-primary {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff;
  box-shadow: 0 4px 16px rgba(26, 43, 94, .26);
}
.hero-cta-primary:hover { box-shadow: 0 7px 22px rgba(26, 43, 94, .34); }

.hero-cta-ghost {
  background: rgba(255, 255, 255, .9);
  color: var(--navy-900);
  border: 1.5px solid rgba(200, 151, 58, .45);
  box-shadow: var(--shadow-sm);
}
.hero-cta-ghost:hover {
  border-color: var(--gold-600);
  background: #fff;
  box-shadow: 0 6px 18px rgba(200, 151, 58, .22);
}

/* ── Kartu hasil pencarian & telusur ─────────────────────────────────────── */

#servicesGrid > div,
.service-card {
  background: var(--cream-50) !important;
  border-color: var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
#servicesGrid > div:hover,
.service-card:hover {
  border-color: var(--gold-600) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Tombol aksi di kartu ("Baca", "Buka", "Lihat") — semula oranye lepas. */
#servicesGrid a[class*="text-orange"],
#servicesGrid a[class*="bg-orange"] {
  color: var(--gold-700) !important;
  background: rgba(200, 151, 58, .10) !important;
  border-color: rgba(200, 151, 58, .32) !important;
}

/* ── Panel filter ────────────────────────────────────────────────────────── */

#resultTabsContainer > div {
  background: var(--cream-50) !important;
  border-color: var(--line-strong) !important;
  box-shadow: var(--shadow-sm);
}

/* Tab tipe konten yang sedang aktif */
.tab-button.active {
  background: linear-gradient(135deg, rgba(200, 151, 58, .16), rgba(230, 184, 74, .12)) !important;
  color: var(--navy-900) !important;
  border-color: rgba(200, 151, 58, .42) !important;
  font-weight: 700;
}

/* Kolom "cari di semua halaman" pada panel filter */
#cardSearchInput {
  background: #fff !important;
  border: 1.5px solid var(--line) !important;
  color: var(--ink) !important;
}
#cardSearchInput:focus {
  outline: none;
  border-color: var(--gold-600) !important;
  box-shadow: 0 0 0 3px rgba(200, 151, 58, .15) !important;
}

/* Dropdown sub-filter */
#subFiltersPanel select,
.sub-filter select {
  background: #fff !important;
  border: 1.5px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: 10px !important;
}
#subFiltersPanel select:focus,
.sub-filter select:focus {
  outline: none;
  border-color: var(--gold-600) !important;
  box-shadow: 0 0 0 3px rgba(200, 151, 58, .15) !important;
}

/* ── Bilah "Informasi Terbaru" ───────────────────────────────────────────── */

#berita-terbaru { border-bottom-color: var(--line) !important; }

/* Tombol panah carousel — semula oranye */
#berita-terbaru button[class*="orange"] {
  background: #fff !important;
  border-color: var(--line-strong) !important;
  color: var(--navy-900) !important;
}
#berita-terbaru button[class*="orange"]:hover {
  border-color: var(--gold-600) !important;
  color: var(--gold-700) !important;
}

/* ── Penyeragaman aksen lepas ────────────────────────────────────────────────
   Halaman ini memakai puluhan utilitas Tailwind beraksen oranye dan biru yang
   tersebar di markup PHP maupun yang dirender JavaScript. Alih-alih menyunting
   satu per satu, aksen itu dipetakan ulang di sini lewat selector bersasaran
   (lebih spesifik daripada satu kelas utilitas, jadi selalu menang).

   Warna per-kategori pada tombol telusur (.browse-btn) SENGAJA dibiarkan —
   warna di sana berfungsi sebagai penanda jenis konten, bukan hiasan. */

/* Bilah "Informasi Terbaru" */
#berita-terbaru .from-orange-500 {
  background-image: linear-gradient(135deg, var(--gold-600), var(--gold-500)) !important;
}
#berita-terbaru .bg-orange-400,
#berita-terbaru .bg-orange-500 { background-color: var(--gold-600) !important; }
#berita-terbaru .bg-orange-50  { background-color: rgba(200, 151, 58, .10) !important; }
#berita-terbaru .bg-orange-100 { background-color: rgba(200, 151, 58, .18) !important; }
#berita-terbaru .border-orange-100,
#berita-terbaru .border-orange-200 { border-color: rgba(200, 151, 58, .30) !important; }
#berita-terbaru .hover\:border-orange-400:hover { border-color: var(--gold-600) !important; }
#berita-terbaru .text-orange-600 { color: var(--gold-700) !important; }

/* Chip fakultas/sumber pada kartu berita — semula biru terang. */
#berita-terbaru .bg-blue-50,
#berita-terbaru .bg-blue-100 { background-color: rgba(26, 43, 94, .08) !important; }
#berita-terbaru .text-blue-600,
#berita-terbaru .text-blue-700 { color: var(--navy-700) !important; }
#berita-terbaru .border-blue-200 { border-color: rgba(26, 43, 94, .18) !important; }

/* Garis aksen kiri tiap kartu berita */
#berita-terbaru [class*="border-l-"] { border-left-color: var(--gold-600) !important; }

/* Kartu hasil pencarian.
   Pita aksen per jenis konten DIPERTAHANKAN karena berfungsi sebagai penanda
   (berita, layanan, publikasi, dst.). Yang diseragamkan adalah elemen bersama:
   chip sumber/fakultas jadi navy, dan aksen oranye jenuh ditarik ke keluarga
   emas supaya tidak bertabrakan di atas latar krem. */
#servicesGrid .bg-blue-50,
#servicesGrid .bg-blue-100 { background-color: rgba(26, 43, 94, .07) !important; }
#servicesGrid .text-blue-600,
#servicesGrid .text-blue-700 { color: var(--navy-700) !important; }
#servicesGrid .border-blue-100,
#servicesGrid .border-blue-200 { border-color: rgba(26, 43, 94, .16) !important; }

/* Aksen "berita" — dari oranye jenuh ke emas, senada tombol telusur berita. */
#servicesGrid .from-orange-400,
#berita-terbaru .from-orange-400 {
  --tw-gradient-from: #d2a050 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(210,160,80,0)) !important;
}
#servicesGrid .to-orange-500,
#servicesGrid .to-red-500,
#berita-terbaru .to-orange-500,
#berita-terbaru .to-red-500 { --tw-gradient-to: var(--gold-600) !important; }

/* Kotak ikon di kiri kartu */
#servicesGrid .bg-orange-50  { background-color: rgba(200, 151, 58, .10) !important; }
#servicesGrid .border-orange-100 { border-color: rgba(200, 151, 58, .24) !important; }
#servicesGrid .text-orange-500,
#servicesGrid .text-orange-600 { color: var(--gold-700) !important; }

/* Tombol paginasi hasil pencarian */
.pagination-btn {
  border-color: var(--line-strong) !important;
  color: var(--ink-soft) !important;
  background: #fff !important;
}
.pagination-btn:hover:not(:disabled) {
  border-color: var(--gold-600) !important;
  background: rgba(200, 151, 58, .10) !important;
  color: var(--gold-700) !important;
}

/* Pintasan tanggal pada filter agenda */
.ev-shortcut-btn {
  border-color: rgba(200, 151, 58, .32) !important;
  color: var(--gold-700) !important;
  background: rgba(200, 151, 58, .09) !important;
}
.ev-shortcut-btn:hover { background: rgba(200, 151, 58, .18) !important; }
.ev-shortcut-btn.active {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700)) !important;
  color: #fff !important;
  border-color: var(--navy-900) !important;
}

/* ── Aksesibilitas fokus ─────────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold-600);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}