/* ==========================================================================
   UMK MAJLIS ISTIADAT KONVOKESYEN — MAIN STYLESHEET
   Universiti Malaysia Kelantan Convocation Website
   ========================================================================== */

:root {
  --blink-duration: 2.4s; /* satu kelajuan kelip utk SEMUA link/butang kelip supaya serentak & sekata */
  /* ---- Brand palette: Istiadat Konvokesyen ke-16 official theme ----
     Navy -> royal blue -> maroon -> red diagonal, with gold ceremonial accent.
     This is the single source of truth for colour across the whole site;
     update these values only when the yearly convocation theme changes. */
  --color-primary: #C9A15A;
  --color-secondary: #E3C07C;
  --color-accent: #F3E8D2;
  --color-bg: #FAF6EC;
  --color-card: #FFFFFF;
  --color-text: #142451;
  --color-border: #E1E5F0;
  --color-hover: #EFE2C4;

  --color-navy: #142451;
  --color-navy-deep: #0B1638;
  --color-royal-blue: #2F5FA2;
  --color-maroon: #8B1E33;
  --color-maroon-deep: #5C1018;
  --color-red: #A31E2B;
  --color-gold: #C9A15A; /* convocation seal / cokmar accent */

  --gradient-primary: linear-gradient(135deg, #16265C 0%, #2F5FA2 32%, #6E2148 68%, #8B1E33 100%);
  --gradient-hero: linear-gradient(125deg, #101B44 0%, #223C7A 28%, #4B2560 55%, #7A1E3B 78%, #8B1E27 100%);
  --gradient-gold: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-soft: linear-gradient(180deg, var(--color-accent) 0%, var(--color-bg) 100%);

  --shadow-sm: 0 2px 8px rgba(20, 36, 81, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 36, 81, 0.14);
  --shadow-lg: 0 16px 48px rgba(20, 36, 81, 0.2);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --font-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --header-height: 84px;

  /* ---- Secondary palette used by inner content pages (FAQ, Pertanyaan,
     Etika Pakaian, Tatacara, Urusan Sijil, dsb.) — previously hardcoded
     per-page with no fallback registered, so dark mode couldn't reach them.
     Now centralised here as the single source of truth for this palette. */
  --cream-50: #FBF3E1;
  --cream-100: #F7EAC9;
  --gold-400: #DDB35C;
  --gold-500: #CB9B3C;
  --gold-600: #B8862E;
  --maroon-700: #3B2A8C;
  --maroon-800: #2C2170;
  --maroon-950: #150B33;
  --ink-900: #1B1330;
  --umk-red: #BB1E27;
}

/* ---- Dark mode overrides ---- */
[data-theme="dark"] {
  --color-primary: #D9B473;
  --color-secondary: #E8C688;
  --color-accent: #223061;
  --color-bg: #0B1430;
  --color-card: #121B3D;
  --color-text: #EDEFF7;
  --color-border: #2B3A63;
  --color-hover: #1D2A54;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);

  /* ---- Secondary palette (dark equivalents) ---- */
  --cream-50: #1B1440;
  --cream-100: #241C52;
  --gold-400: #E8C688;
  --gold-500: #D9B473;
  --gold-600: #C9A15A;
  --maroon-700: #9C8ED9;
  --maroon-800: #B4A7E8;
  --maroon-950: #EDEFF7;
  --ink-900: #EDEFF7;
  --umk-red: #E8677A;
    --umk-red: #E8677A;

  /* Bootstrap punya sendiri variable warna teks (--bs-body-color dll),
     berasingan dari --color-text kita. Kalau tak override, mana-mana
     .card/.table Bootstrap asli akan kekal warna hitam Bootstrap
     walaupun dark mode dah aktif. */
  --bs-body-color: var(--color-text);
  --bs-heading-color: var(--color-text);
  --bs-emphasis-color: var(--color-text);
  --bs-secondary-color: rgba(237, 239, 247, 0.65);
  --bs-border-color: var(--color-border);
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  /* One single, large graduation-cap (topi konvo) watermark — realistic
     mortarboard icon, recoloured gold to match the theme. Fixed to the
     viewport so it stays centred behind the page as you scroll. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27600%27%20height%3D%27600%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cg%20fill%3D%27%23C9A15A%27%20fill-opacity%3D%270.16%27%3E%3Cpath%20d%3D%27M256%2048L20%20158l236%20110%20194-90.3V308h32V178L256%2048z%27/%3E%3Cpath%20d%3D%27M100%20216v96c0%208%203%2015%209%2021%2033%2033%2091%2055%20147%2055s114-22%20147-55c6-6%209-13%209-21v-96l-156%2073-156-73z%27/%3E%3Ccircle%20cx%3D%27452%27%20cy%3D%27178%27%20r%3D%2710%27/%3E%3Crect%20x%3D%27447%27%20y%3D%27178%27%20width%3D%2710%27%20height%3D%27120%27%20rx%3D%274%27/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center 60vh;
  background-size: min(640px, 60vw);
  background-attachment: fixed;
  color: var(--color-text);
  line-height: 1.65;
  transition: background-color 0.4s ease, color 0.4s ease;
  overflow-x: hidden;
}
[data-theme="dark"] body {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27600%27%20height%3D%27600%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cg%20fill%3D%27%23D9B473%27%20fill-opacity%3D%270.10%27%3E%3Cpath%20d%3D%27M256%2048L20%20158l236%20110%20194-90.3V308h32V178L256%2048z%27/%3E%3Cpath%20d%3D%27M100%20216v96c0%208%203%2015%209%2021%2033%2033%2091%2055%20147%2055s114-22%20147-55c6-6%209-13%209-21v-96l-156%2073-156-73z%27/%3E%3Ccircle%20cx%3D%27452%27%20cy%3D%27178%27%20r%3D%2710%27/%3E%3Crect%20x%3D%27447%27%20y%3D%27178%27%20width%3D%2710%27%20height%3D%27120%27%20rx%3D%274%27/%3E%3C/g%3E%3C/svg%3E");
}

/* .text-maroon is used on 10+ inner pages (buku-panduan, aturcara-majlis,
   contact, muat-turun-borang, maklumat-dewan, dsb.) but was never actually
   defined anywhere — so it silently did nothing and that text just fell
   back to the default body colour instead of the intended maroon accent. */
.text-maroon { color: var(--maroon-800, #2C2170); }

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

a { color: var(--color-primary); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 10px 18px;
  z-index: 3000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-accent);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 12px; }
.section-subtitle { color: var(--color-text); opacity: 0.7; max-width: 620px; margin-bottom: 40px; }
.section-py { padding: 80px 0; }

/* ---- Brand colour utilities (bg-maroon / text-gold) ----
   Used by faq.cfm's "Fasa 1" phase badge (bg-maroon text-white). These are
   NOT Bootstrap classes — Bootstrap only ships bg-success/bg-warning/etc,
   not maroon or gold — so without this they silently fall back to no
   background, leaving white text invisible on a white card. Defined here
   using the site's existing --color-maroon / --color-primary variables so
   any page can reuse them consistently. */
.bg-maroon { background-color: var(--color-maroon) !important; }
.text-gold { color: var(--color-primary) !important; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-umk-primary {
  background: var(--gradient-primary);
  color: #fff;
  border: 1.5px solid transparent; /* sama tebal dengan .btn-umk-outline supaya kedudukan sejajar */
  background-origin: border-box;
  border-radius: var(--radius-pill);
  padding: 12px 30px; /* sama dengan .btn-umk-outline */
  font-weight: 600;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}
.btn-umk-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: #fff; }

/* ---- ubah saiz button Muat Turun (dalam toolbar PDF) disini ---- */
.pdf-viewer-toolbar .btn-umk-primary {
  padding: 8px 20px;
  border-width: 0;
}

/* ==========================================================================
   PDF VIEWER (borang pages) — shared by borang-pembelian-jubah.cfm,
   borang-pengambilan-sijil-transkrip.cfm, borang-pos-sijil-transkrip.cfm.
   Displays the PDF inline via <iframe> (browser's own native PDF viewer
   renders inside it, same chrome as Chrome/Edge's built-in PDF preview).
   ========================================================================== */
.pdf-viewer-wrap { max-width: 1200px; margin: 0 auto; }
.pdf-viewer-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 14px 18px;
}
.pdf-viewer-toolbar span { font-weight: 700; color: var(--color-text); font-size: 0.92rem; }
.pdf-viewer-toolbar i.fa-file-pdf { color: #d9463c; margin-right: 6px; }
.pdf-viewer-frame {
  width: 100%; height: 90vh;
  border: 1px solid var(--color-border);
  border-radius: 0 0 14px 14px;
  background: #fff;
  display: block;
}
.pdf-viewer-fallback { text-align: center; font-size: 0.85rem; color: var(--color-text); opacity: 0.85; margin-top: 12px; }
.pdf-viewer-fallback a {
  color: var(--color-text);
  font-weight: 700;
  animation: pdfHintBlink var(--blink-duration) ease-in-out infinite;
}
.pdf-viewer-download {
  /* padding: 5px 8px; */
  font-size: 12px;
  white-space: nowrap;
}
/* Link kelip kongsi — guna class .hint-blink pada <a> mana2 yg perlu orang sedar boleh ditekan */
.hint-blink { font-weight: 700; animation: pdfHintBlink var(--blink-duration) ease-in-out infinite; }
.hint-blink:hover, .hint-blink:focus-visible { animation: none; opacity: 1; }
@keyframes pdfHintBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .pdf-viewer-fallback a, .hint-blink { animation: none; }
  .statistik-detail-toggle { animation: none; }
}
@media (max-width: 767px) {
  .pdf-viewer-frame { height: 75vh; }
  .pdf-viewer-toolbar { flex-direction: column; align-items: stretch; text-align: center; }
}

.btn-umk-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 12px 30px;
  font-weight: 600;
  transition: var(--transition);
}
.btn-umk-outline:hover { background: var(--color-primary); color: #fff; transform: translateY(-3px); }

.btn-icon-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  transition: var(--transition);
}
.btn-icon-circle:hover { background: var(--color-primary); color: #fff; }

/* ==========================================================================
   GLASSMORPHISM CARDS
   ========================================================================== */
.glass-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .glass-card {
  background: rgba(30, 30, 48, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.card-umk {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.card-umk:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

/* ==========================================================================
   TOP UTILITY BAR
   ========================================================================== */
.topbar {
  background: var(--color-text);
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
  padding: 7px 0;
}
[data-theme="dark"] .topbar { background: #0B0B14; }
.topbar a { color: rgba(255,255,255,0.85); }
.topbar .topbar-links a { margin-left: 18px; }
.lang-toggle button, .theme-toggle {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 2px 8px;
  cursor: pointer;
}
.lang-toggle button.active { color: var(--color-secondary); text-decoration: underline; }

/* Social media icons (replaces old EN/BM + Contact/FAQ links) */
.topbar-social { display: flex; align-items: center; gap: 8px; }
.topbar-social a {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  color: #fff; font-size: 0.78rem;
  transition: var(--transition);
}
.topbar-social a:hover { background: var(--color-primary); color: var(--color-navy-deep); }
/* (rule mobile dipindah ke blok RESPONSIVE — TOPBAR & NAVBAR di bawah) */

/* Laman Utama UMK — teks + ikon, gaya outline (bukan merah macam Siaran
   Langsung) supaya kekal jelas Siaran Langsung tu CTA utama, ini sokongan
   je. Sits right after the Siaran Langsung button. */
.topbar-umk-home {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap;
  transition: var(--transition);
  flex-shrink: 0;
}
.topbar-umk-home i { font-size: 0.82rem; }
.topbar-umk-home:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-navy-deep); }

/* Siaran Langsung (live streaming) button — only pulses while actually live */
.btn-siaran-langsung {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 14px; border-radius: var(--radius-pill);
  text-transform: uppercase; white-space: nowrap;
  transition: var(--transition);
}
.btn-siaran-langsung:hover { background: rgba(255,255,255,0.2); color: #fff; }
.btn-siaran-langsung .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #8a8f9c; /* grey/dormant when not live */
  display: inline-block;
}
.btn-siaran-langsung.is-live {
  background: var(--color-maroon);
  border-color: var(--color-maroon);
}
.btn-siaran-langsung.is-live .live-dot {
  background: #FF4D4D;
  animation: liveDotPulse 1.6s infinite;
}
@keyframes liveDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,77,77,0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(255,77,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,77,0); }
}
@media (prefers-reduced-motion: reduce) { .btn-siaran-langsung.is-live .live-dot { animation: none; } }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar-umk {
  background: var(--color-card);
  padding: 14px 0;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: var(--transition);
}
.navbar-umk .navbar-brand { display: flex; align-items: center; gap: 12px; }
.navbar-umk .navbar-brand img { height: 46px; width: auto; }
.navbar-umk .brand-text { line-height: 1.2; }
.navbar-umk .brand-text .brand-en { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-text); display:block; }
.navbar-umk .brand-text .brand-my { font-size: 0.76rem; color: var(--color-primary); font-weight: 600; }

.navbar-umk .nav-link {
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 10px 4px !important;
  margin: 0 12px;
  position: relative;
  transition: var(--transition);
}
.navbar-umk .nav-link::after {
  content: "";
  position: absolute; left: 0; bottom: 2px;
  width: 0; height: 2px;
  background: var(--gradient-primary);
  transition: width 0.25s ease;
}
.navbar-umk .nav-link:hover, .navbar-umk .nav-link.active { color: var(--color-primary); }
.navbar-umk .nav-link:hover::after, .navbar-umk .nav-link.active::after { width: 100%; }
.navbar-umk .dropdown-toggle::after { vertical-align: 2px; margin-left: 4px; }

/* ---- Nav search button + dropdown (next to PERTANYAAN) ---- */
.nav-search-item { margin-left: 8px; }

/* ==========================================================================
   NOTIS TERKINI (WELCOME MODAL) — modulNotisTerkini.cfm
   Deliberately different from the UMT reference this was inspired by: a
   navy/maroon/gold gradient header (matches hero/ribbon theme) instead of
   a plain white card, and its own icon/checklist treatment.
   ========================================================================== */
.notis-terkini-dialog { max-width: 560px; }
.notis-terkini-content {
  border: none; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.35);
  /* PENTING: sebelum ni tiada background di sini, jadi ia jatuh balik ke putih
     default Bootstrap (.modal-content) walaupun dalam dark mode — sedangkan
     semua teks dalam guna var(--color-text) yang jadi putih pucat dalam dark
     mode. Hasilnya teks putih atas latar putih = tak nampak. Baris di bawah
     kunci latar & teks ikut tema supaya kad ni sentiasa gelap dalam dark mode. */
  background: var(--color-card);
  color: var(--color-text);
}

.notis-terkini-header {
  position: relative;
  background: var(--gradient-primary);
  padding: 30px 30px 26px;
  text-align: center;
  overflow: hidden;
}
.notis-terkini-header-icon {
  position: absolute; top: -18px; right: -10px;
  font-size: 6rem; color: rgba(255,255,255,0.1);
  transform: rotate(-12deg);
}
.notis-terkini-eyebrow {
  position: relative; z-index: 1;
  color: #fff; margin: 0;
  font-family: var(--font-display);
  font-weight: 800; font-size: 18px;
  letter-spacing: 1px; text-transform: uppercase;
}
.notis-terkini-eyebrow span { display: block; font-weight: 500; font-size: 12px; letter-spacing: 0.5px; text-transform: none; color: rgba(255,255,255,0.75); margin-top: 2px; }
.notis-terkini-close { position: absolute; top: 16px; right: 16px; z-index: 2; }

.notis-terkini-body { padding: 26px 30px 6px; }

.notis-terkini-badge {
  display: flex; align-items: center; gap: 12px;
  background: rgba(139,30,51,0.08);
  border: 1px solid rgba(139,30,51,0.18);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.notis-terkini-badge-icon {
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-maroon); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
/* --color-maroon TAK berubah dlm dark mode (kekal #8B1E33 gelap), so teks ni
   jadi nyaris tak nampak atas kad gelap (.notis-terkini-content pun guna
   --color-card gelap dlm dark mode). Guna --maroon-800 (sama pattern dgn
   .text-maroon di atas) sebab variable ni MEMANG ditukar jadi warna cerah
   (#B4A7E8) khusus utk dark mode, supaya teks kekal boleh dibaca kedua2 tema. */
.notis-terkini-badge strong { display: block; color: var(--maroon-800, #2C2170); font-size: 0.92rem; line-height: 1.3; }
.notis-terkini-badge small { display: block; color: var(--color-text); opacity: 0.65; font-size: 0.76rem; margin-top: 2px; }

.notis-terkini-lead { font-size: 0.88rem; color: var(--color-text); margin-bottom: 10px; }
.notis-terkini-checklist { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.notis-terkini-checklist li { font-size: 0.85rem; color: var(--color-text); display: flex; gap: 8px; align-items: flex-start; }
.notis-terkini-checklist i { color: #2e9e5b; margin-top: 3px; flex-shrink: 0; }

.notis-terkini-steps {
  background: var(--color-bg, #F7F5F0);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.notis-terkini-steps-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 6px; }
.notis-terkini-steps-label em { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.7; }
.notis-terkini-path { font-size: 0.82rem; color: var(--color-text); margin: 0; }
.notis-terkini-path i { font-size: 0.7rem; opacity: 0.5; margin: 0 2px; }
.notis-terkini-path-en { opacity: 0.65; margin-top: 2px; }

.notis-terkini-period {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px dashed var(--color-border);   /* dulu rgba(0,0,0,.12) tetap — nyaris tak nampak dlm dark mode */
  padding-top: 16px; margin-bottom: 10px;
}
.notis-terkini-period i { font-size: 1.2rem; color: var(--color-primary); flex-shrink: 0; }
.notis-terkini-period strong { display: block; font-size: 0.86rem; color: var(--color-text); }
.notis-terkini-period small { display: block; font-size: 0.75rem; color: var(--color-text); opacity: 0.6; margin-top: 1px; }

.notis-terkini-footer { border-top: none; padding: 10px 30px 26px; justify-content: space-between; }

/* PUNCA notis "gerak turun" sendiri dekat mobile: Bootstrap punya
   .modal-dialog-centered tengahkan modal berdasarkan tinggi viewport penuh
   (100%% dalam .modal, iaitu 100vh). Tapi dekat telefon, address bar
   browser collapse/shrink sekejap lepas page load (atau lepas user scroll
   sikit) — tinggi viewport SEBENAR jadi lebih besar, Bootstrap kira semula
   posisi tengah tu (resize listener dia), jadi modal nampak macam "jatuh"
   atau "gerak" ke bawah tiba2 walhal user tak buat apa2. Fix: pada mobile,
   modal dipin dekat atas (bukan center-based-on-full-viewport) supaya
   posisi dia stabil tak kira address bar collapse ke tak, dan kandungan
   yang panjang boleh scroll sendiri dalam kad kalau tak muat skrin. */
@media (max-width: 575px) {
  .notis-terkini-header { padding: 24px 20px 20px; }
  .notis-terkini-body { padding: 22px 20px 4px; }
  .notis-terkini-footer { padding: 10px 20px 22px; flex-direction: column-reverse; gap: 8px; }
  .notis-terkini-footer .btn { width: 100%; }

  .notis-terkini-dialog.modal-dialog-centered {
    align-items: flex-start;      /* buang center-vertical yang bergantung tinggi viewport penuh */
    min-height: calc(100% - 2rem);
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
  }
  .notis-terkini-content {
    max-height: calc(100vh - 2.8rem);
    max-height: calc(100dvh - 2.8rem); /* dvh ikut tinggi viewport SEBENAR semasa (lepas address bar collapse) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* elak scroll dalam kad "bocor" terus ke page belakang bila sampai hujung atas/bawah */
  }
  body.modal-open { overscroll-behavior: contain; }

  /* Lapisan kedua punca "gerak turun": Bootstrap punya #notisTerkiniModal.modal
     sendiri (bukan dialog dalamnya) guna height:100% dalam position:fixed —
     di iOS/Android, position:fixed dikira relatif ruang viewport PENUH
     (termasuk kawasan address bar yg tersembunyi), jadi bila address bar tu
     collapse lepas modal dah terpapar, seluruh lapisan .modal "melompat"
     turun sepanjang tinggi address bar tu. Kunci height dia ikut dvh (ikut
     tinggi skrin SEBENAR yg nampak, bukan termasuk kawasan tersembunyi)
     supaya lapisan modal kekal diam walau address bar collapse/muncul. */
  #notisTerkiniModal.modal {
    height: 100vh;
    height: 100dvh;
  }
}
.nav-search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  background: transparent;
  color: var(--color-text);
  font-size: 0.95rem;
  transition: var(--transition);
}
.nav-search-toggle:hover,
.nav-search-toggle[aria-expanded="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.nav-search-dropdown {
  padding: 14px;
  min-width: 280px;
  border-radius: 12px;
}
.nav-search-form { display: flex; gap: 8px; }
.nav-search-form .form-control { border-radius: var(--radius-pill); }
.nav-search-form .btn { border-radius: 50%; width: 40px; height: 40px; padding: 0; flex-shrink: 0; display:flex; align-items:center; justify-content:center; }
@media (max-width: 1199px) {
  .nav-search-item { margin: 12px 0 0; }
  .nav-search-dropdown { min-width: 100%; }
}

/* ==========================================================================
   BOOTSTRAP TOOLTIPS (topbar social icons, "Laman Utama UMK", dsb.)
   Bootstrap punya tooltip by default guna --bs-emphasis-color utk latar &
   --bs-body-bg utk teks. Kita dah override --bs-emphasis-color jadi
   var(--color-text) dalam [data-theme="dark"] (utk heading/teks lain) —
   tapi Bootstrap's tooltip turut sekali "terhempap" guna variable yang sama,
   jadi dalam dark mode ia jadi latar hampir-putih + teks putih = tak nampak.
   Fix: set --bs-tooltip-bg/--bs-tooltip-color terus di sini, warna TETAP
   (bukan var(--color-text)) supaya tooltip sentiasa boleh dibaca dlm KEDUA-DUA
   tema, tak bergantung pada variable Bootstrap yang dikongsi dgn komponen lain. */
.tooltip { --bs-tooltip-bg: var(--color-navy-deep); --bs-tooltip-color: #fff; --bs-tooltip-opacity: 1; }
.tooltip .tooltip-inner { font-weight: 500; font-size: 0.78rem; padding: 6px 12px; }

.dropdown-menu {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0;
  background: var(--color-card);
  overflow: hidden;
}
.dropdown-item { border-radius: var(--radius-sm); padding: 9px 14px; font-size: 0.9rem; color: var(--color-text); }
.dropdown-item:hover { background: var(--color-accent); color: var(--color-primary); }

/* ---- Card-style mega dropdown (icon + title, watermark background) ---- */
.dropdown-menu-card {
  position: relative;
  width: min(460px, 90vw);
  padding: 18px;
}
.dropdown-card-bg {
  position: absolute;
  right: -18px;
  bottom: -22px;
  font-size: 130px;
  color: var(--color-accent);
  z-index: 0;
  pointer-events: none;
  line-height: 1;
}
.dropdown-card-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.dropdown-card-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: var(--transition);
}
.dropdown-card-item:hover { background: var(--color-accent); color: var(--color-primary); }
.dropdown-card-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
}
.dropdown-card-item .title { font-weight: 600; font-size: 0.86rem; line-height: 1.25; }

/* ---- Mega dropdown (3-column text menu, e.g. MAKLUMAT KONVO) ---- */
.dropdown-menu-mega {
  width: min(680px, 92vw);
  padding: 22px 24px;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
}
.dropdown-mega-bg {
  position: absolute;
  right: -16px;
  bottom: -26px;
  font-size: 130px;
  color: var(--color-accent);
  z-index: 0;
  pointer-events: none;
  line-height: 1;
}
.dropdown-mega-cols {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.dropdown-mega-col + .dropdown-mega-col {
  border-left: 1px solid var(--color-border);
  padding-left: 20px;
}
.dropdown-mega-heading {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 10px;
  line-height: 1.3;
}
.dropdown-mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dropdown-mega-list li a {
  display: block;
  padding: 6px 8px;
  margin-left: -8px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.78rem;
  line-height: 1.35;
  transition: var(--transition);
}
.dropdown-mega-list li a:hover {
  background: var(--color-accent);
  color: var(--color-primary);
}

@media (max-width: 767px) {
  .dropdown-menu-mega { width: 100%; padding: 16px; }
  .dropdown-mega-cols { grid-template-columns: 1fr; gap: 18px; }
  .dropdown-mega-col + .dropdown-mega-col { border-left: none; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: 14px; }
  .dropdown-mega-bg { display: none; }
}


/* ==========================================================================
   RESPONSIVE — TOPBAR & NAVBAR  (phone / iPad / tablet)
   Diletakkan SELEPAS semua rule navbar & dropdown supaya menang urutan.
   Breakpoint: <=575 phone | 576-767 phone besar | 768-1199 iPad/tablet
   (navbar collapse bawah 1200px sebab navbar-expand-xl) | >=1200 desktop
   ========================================================================== */

/* ---- iOS Safari: background-attachment:fixed tak berfungsi (watermark
        lompat / hilang masa scroll). Guna scroll biasa untuk iPhone/iPad. ---- */
@supports (-webkit-touch-callout: none) {
  body { background-attachment: scroll; }
}

/* ---- Topbar ---- */
@media (max-width: 991px) {
  /* iPad portrait: topbar-contact dah disorok (d-lg-flex di header.cfm) */
  .topbar-umk-home span { display: none; }
  .topbar-umk-home { padding: 0; width: 32px; height: 32px; justify-content: center; }
}
@media (max-width: 767px) {
  .topbar { padding: 5px 0; }
  .topbar-social a { width: 32px; height: 32px; font-size: 0.85rem; } /* sasaran sentuh lebih besar */
  .lang-toggle button, .theme-toggle { min-height: 32px; padding: 2px 6px; }
  .btn-siaran-langsung { padding: 6px 12px; }
}
@media (max-width: 575px) {
  .topbar-social { gap: 6px; }
  .topbar-social a:nth-child(n+3) { display: none; }   /* kekal Facebook + Instagram sahaja */
  .theme-toggle .theme-label { display: none; }         /* ikon sahaja */
  .btn-siaran-langsung { font-size: 0.7rem; padding: 6px 10px; gap: 6px; }
}
@media (max-width: 359px) {
  .btn-siaran-langsung { font-size: 0.64rem; padding: 5px 8px; letter-spacing: 0.02em; }
}

/* ---- Navbar: brand + butang hamburger ---- */
.navbar-umk .brand-text { min-width: 0; }
.navbar-umk .navbar-toggler {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-text);          /* kalau tak, ikon fa-bars kekal kelabu Bootstrap & pudar di dark mode */
  font-size: 1.15rem;
}
.navbar-umk .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(201,161,90,0.35); }
/* PENTING: rule display:inline-flex di atas menimpa .navbar-expand-xl .navbar-toggler{display:none}
   milik Bootstrap → hamburger muncul di sebelah menu penuh pada desktop (>=1200px). */
@media (min-width: 1200px) { .navbar-umk .navbar-toggler { display: none; } }

@media (max-width: 575px) {
  .navbar-umk { padding: 10px 0; }
  .navbar-umk .navbar-brand { gap: 8px; margin-right: 8px; min-width: 0; }
  .navbar-umk .navbar-brand img { height: 38px; }
  .navbar-umk .brand-text .brand-en { font-size: 0.95rem; }
  .navbar-umk .brand-text .brand-my { font-size: 0.66rem; }
}
@media (max-width: 359px) {
  .navbar-umk .brand-text .brand-my { display: none; }  /* skrin 320px: elak brand tolak hamburger */
}

/* ---- Desktop kecil (1200-1399): jimat ruang supaya menu tak jatuh baris ---- */
@media (min-width: 1200px) and (max-width: 1399px) {
  .navbar-umk .nav-link { margin: 0 8px; font-size: 0.88rem; }
}


/* ---- Fix: garisan bawah menu (.nav-link::after) bertembung dengan anak panah
        dropdown Bootstrap (.dropdown-toggle::after — pseudo-element SAMA).
        Kesannya: anak panah hilang & bila hover/tap jadi bar emas tebal.
        Anak panah dikembalikan ke ::after, garisan bawah dipindah ke ::before. ---- */
.navbar-umk .nav-link.dropdown-toggle::after,
.navbar-umk .nav-link.dropdown-toggle:hover::after,
.navbar-umk .nav-link.dropdown-toggle.show::after,
.navbar-umk .nav-link.dropdown-toggle.active::after {
  position: static; width: 0; height: 0; background: none; transition: none;
  border-top: 0.3em solid; border-right: 0.3em solid transparent; border-left: 0.3em solid transparent;
}
.navbar-umk .nav-link.dropdown-toggle::before {
  content: ""; position: absolute; left: 0; bottom: 2px;
  width: 0; height: 2px; background: var(--gradient-primary);
  transition: width 0.25s ease;
}
.navbar-umk .nav-link.dropdown-toggle:hover::before,
.navbar-umk .nav-link.dropdown-toggle.show::before,
.navbar-umk .nav-link.dropdown-toggle.active::before { width: 100%; }
.navbar-umk .nav-link.dropdown-toggle.show { color: var(--color-primary); }

/* ---- Menu collapse (phone + iPad + tablet, < 1200px) ---- */
@media (max-width: 1199px) {
  /* Menu panjang + dropdown terbuka mesti boleh scroll — sebelum ni terpotong
     bawah skrin sebab navbar sticky. */
  .navbar-umk .navbar-collapse {
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
  }
  .navbar-umk .nav-link { margin: 0; padding: 13px 4px !important; }
  .navbar-umk .nav-item + .nav-item { border-top: 1px solid var(--color-border); }
  .navbar-umk .nav-item.nav-search-item { border-top: none; }

  /* BUG UTAMA: .dropdown-menu-mega guna left:50% + translateX(-50%) untuk desktop.
     Bila navbar collapse, dropdown jadi static tapi transform tu MASIH jalan →
     menu tertolak separuh ke kiri & terpotong. Reset di sini. */
  .navbar-umk .dropdown-menu-mega,
  .navbar-umk .dropdown-menu-card {
    position: relative;   /* relative (bukan static) supaya ikon watermark kekal dalam kad */
    left: auto;
    transform: none;
    width: 100%;
    margin: 4px 0 12px;
    box-shadow: none;
    border: 1px solid var(--color-border);
  }
  .navbar-umk .dropdown-menu-mega { padding: 16px; }
  .dropdown-mega-list li a { font-size: 0.86rem; padding: 9px 8px; }  /* sasaran sentuh */
  .dropdown-card-item { padding: 12px; }

  /* Search */
  .nav-search-toggle { width: 44px; height: 44px; }
  .nav-search-dropdown { min-width: 100%; margin-top: 8px; }
  .nav-search-form .form-control { font-size: 16px; } /* <16px = iOS auto-zoom bila fokus */
}

/* iPad portrait: 3 lajur mega menu kekal, tapi lebih ruang */
@media (min-width: 768px) and (max-width: 1199px) {
  .navbar-umk .dropdown-menu-mega { padding: 20px 22px; }
  .dropdown-mega-cols { gap: 16px; }
  .dropdown-mega-col + .dropdown-mega-col { padding-left: 16px; }
  .navbar-umk .dropdown-menu-card { max-width: 520px; }
}

/* Phone: kad "Muat Turun Borang" 1 lajur (2 lajur → teks tinggal ~80px) */
@media (max-width: 575px) {
  .dropdown-card-grid { grid-template-columns: 1fr; }
  .dropdown-card-item .title { font-size: 0.88rem; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero-umk {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
  color: #fff;
  background: var(--gradient-hero);
}
.heroSwiper, .heroSwiper .swiper-wrapper { min-height: 92vh; }
.heroSwiper { position: relative; z-index: 2; }
.heroSwiper .swiper-slide {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: transparent;
  overflow: hidden;
}
.heroSwiper .swiper-slide::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(11,22,56,0.55) 0%, rgba(139,30,39,0.28) 100%);
  z-index: 1;
}

/* ---- Persistent decorative layer (sits behind slide text, in front of gradient) ----
   Holds the corner motifs + the cokmar (mace) visual so it stays put and fully
   fills the right-hand side of the hero regardless of which slide is active.
   It lives directly inside .hero-umk (a sibling of .heroSwiper, which is z-index:2)
   so the mace never overlaps or hides the slide text/buttons above it. */
.hero-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-decor-corner {
  position: absolute; width: 380px; height: 380px; opacity: 0.22;
  filter: saturate(0.9);
}
.hero-decor-corner.top-left { top: -140px; left: -140px; }
.hero-decor-corner.bottom-right { bottom: -140px; right: -140px; transform: rotate(180deg); }
.hero-decor-corner img { width: 100%; height: 100%; }

.hero-mace-visual {
  position: absolute;
  right: 9%;
  top: 50%;
  transform: translateY(-50%);
  height: 66%;
  max-height: 460px;
  display: flex;
  align-items: center;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.45));
  opacity: 0.92;
  pointer-events: auto;
  transition: filter 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
}
.hero-mace-visual:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.03);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.45)) drop-shadow(0 0 34px rgba(230,196,120,0.85));
}
.hero-mace-visual img,
.hero-mace-visual svg { height: 100%; width: auto; max-width: none; display: block; }
.hero-mace-glow {
  position: absolute;
  left: 50%; top: 18%;
  width: 260px; height: 260px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(246,231,193,0.55) 0%, rgba(201,161,90,0.22) 45%, rgba(201,161,90,0) 72%);
  border-radius: 50%;
  animation: macePulse 3.2s ease-in-out infinite;
  transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
}
.hero-mace-visual:hover .hero-mace-glow {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(246,231,193,0.75) 0%, rgba(230,196,120,0.35) 45%, rgba(201,161,90,0) 72%);
}
@keyframes macePulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
/* ---- Moving "shine sweep" — a soft light streak that glints across the
   cokmar's own silhouette every few seconds (masked to the PNG's alpha, so
   it only shows on the mace itself, never as a stray rectangle). This is
   separate from the small twinkling .mace-sparkle dots below — this one is
   the bigger, slower "kilauan" glint sweeping the whole surface. ---- */
.mace-shine-sweep {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 25%,
    rgba(255,255,255,0.15) 42%,
    rgba(255,255,255,0.95) 49%,
    rgba(246,231,193,0.9) 52%,
    rgba(255,255,255,0.15) 58%,
    transparent 75%);
  background-size: 260% 100%;
  -webkit-mask-image: url("../images/cokmar-mace.png");
  mask-image: url("../images/cokmar-mace.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: screen;
  animation: maceShine 4.2s ease-in-out infinite;
}
@keyframes maceShine {
  0%   { background-position: 140% 0; opacity: 0; }
  8%   { opacity: 1; }
  45%  { background-position: -60% 0; opacity: 1; }
  60%  { opacity: 0; }
  100% { background-position: -60% 0; opacity: 0; }
}

/* ---- Sparkle points scattered over the mace (the "kilauan" gem-glint effect) ---- */
.mace-sparkle {
  position: absolute;
  width: 10px; height: 10px;
  background: radial-gradient(circle, #fff 0%, #f6e7c1 45%, rgba(246,231,193,0) 75%);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px rgba(246,231,193,0.9));
  animation: sparkleTwinkle 2.6s ease-in-out infinite;
}
.mace-sparkle.s1 { top: 8%;  left: 46%; width: 14px; height: 14px; animation-delay: 0s; }
.mace-sparkle.s2 { top: 22%; left: 62%; animation-delay: .5s; }
.mace-sparkle.s3 { top: 34%; left: 34%; width: 7px; height: 7px; animation-delay: 1s; }
.mace-sparkle.s4 { top: 48%; left: 58%; width: 8px; height: 8px; animation-delay: 1.5s; }
.mace-sparkle.s5 { top: 62%; left: 40%; width: 6px; height: 6px; animation-delay: 2s; }
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* ---- Floating graduation caps — decorative only, kept sparse (5 total) ---- */
.hero-floating-caps { position: absolute; inset: 0; overflow: hidden; }
.hero-cap {
  position: absolute;
  color: rgba(246,231,193,0.55);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
  animation: capFloat ease-in-out infinite;
}
.hero-cap.c1 { top: 12%; left: 8%;  font-size: 1.7rem; animation-duration: 7s;  animation-delay: 0s; }
.hero-cap.c2 { top: 68%; left: 14%; font-size: 1.2rem; animation-duration: 9s;  animation-delay: 1.4s; color: rgba(255,255,255,0.35); }
.hero-cap.c3 { top: 20%; left: 84%; font-size: 1.4rem; animation-duration: 8s;  animation-delay: 2.2s; }
.hero-cap.c4 { top: 78%; left: 66%; font-size: 1.1rem; animation-duration: 10s; animation-delay: .8s;  color: rgba(255,255,255,0.3); }
.hero-cap.c5 { top: 45%; left: 92%; font-size: 1.6rem; animation-duration: 7.5s; animation-delay: 3s; }
@keyframes capFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-22px) rotate(6deg); }
}
@media (max-width: 991px) {
  .hero-cap.c3, .hero-cap.c5 { display: none; } /* keep it sparse on smaller screens */
}

@media (max-width: 991px) {
  .hero-mace-visual { right: 50%; transform: translate(50%, -50%); opacity: 0.28; height: 100%; }
  .hero-decor-corner { width: 300px; height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .mace-shine-sweep, .hero-mace-glow, .mace-sparkle, .hero-cap { animation: none; }
}

/* Gold frame lines top & bottom, echoing the printed convocation banner border */
.hero-decor::before, .hero-decor::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(201,161,90,0) 0%, rgba(201,161,90,0.7) 20%, rgba(230,196,120,0.9) 50%, rgba(201,161,90,0.7) 80%, rgba(201,161,90,0) 100%);
}
.hero-decor::before { top: 26px; }
.hero-decor::after { bottom: 26px; }

/* Soft ambient glow + faint diagonal weave, for a richer "konvo" backdrop
   without touching the underlying navy-to-maroon gradient itself */
.hero-decor-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 82% 30%, rgba(246,231,193,0.10) 0%, rgba(246,231,193,0) 45%),
    repeating-linear-gradient(135deg, rgba(201,161,90,0.05) 0px, rgba(201,161,90,0.05) 1px, transparent 1px, transparent 46px);
}

/* Small floating graduation caps drifting slowly in the background — kept
   subtle (low opacity, small size) so they read as texture, not clutter */
.floaty-cap {
  position: absolute;
  color: rgba(246,231,193,0.22);
  animation: floatCap 13s ease-in-out infinite;
}
@keyframes floatCap {
  0%   { transform: translateY(0) rotate(-6deg); }
  50%  { transform: translateY(-22px) rotate(6deg); }
  100% { transform: translateY(0) rotate(-6deg); }
}
@media (max-width: 991px) { .floaty-cap { display: none; } }
@media (prefers-reduced-motion: reduce) { .floaty-cap { animation: none; } }
.hero-slide-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  transition: transform 7s ease;
}
.heroSwiper .swiper-slide-active .hero-slide-bg { transform: scale(1); }
.hero-content { position: relative; z-index: 2; width: 100%; }
.hero-swiper-pagination {
  position: absolute; left: 50px; bottom: 34px; z-index: 5;
  display: flex; gap: 10px;
}
.hero-swiper-pagination .swiper-pagination-bullet {
  width: 10px; height: 10px; opacity: 1; background: rgba(255,255,255,0.4); margin: 0 !important;
  transition: var(--transition);
}
.hero-swiper-pagination .swiper-pagination-bullet-active { background: #fff; width: 28px; border-radius: var(--radius-pill); }
.hero-swiper-next {
  position: absolute; top: 50%; right: 34px; transform: translateY(-50%); z-index: 5;
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.12); backdrop-filter: blur(6px); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.hero-swiper-next:hover { background: #fff; color: var(--color-primary); }
.hero-stat-badge {
  position: absolute; right: 60px; bottom: 90px; z-index: 5;
  background: rgba(255,255,255,0.16); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-md);
  padding: 16px 22px; display: flex; align-items: center; gap: 14px; color: #fff;
}
.hero-stat-icon { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.hero-stat-badge strong { font-family: var(--font-display); font-size: 1.4rem; }
@media (max-width: 767px) {
  .hero-swiper-next { display: none; }
  .hero-stat-badge { left: 24px; right: 24px; bottom: 24px; }
  .hero-swiper-pagination { left: 24px; bottom: 12px; }
}
.hero-umk .hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 8px 18px; border-radius: var(--radius-pill);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 24px;
}
@media (max-width: 991px) {
  .hero-col-side { margin-top: 36px; text-align: center; }
  .hero-col-side .hero-kicker { margin: 0 auto 16px; }
  .hero-sidang { margin: 0 auto; text-align: left; }
  /* .hero-col-side { text-align:center } di atas terwaris turun ke dalam
     setiap .hero-info-badge (tarikh/lokasi), jadi teks "1-5 Nov 2026" dan
     "Dewan Tuanku Canselor" jadi tengah2 dalam kotak — tak sama susunan
     dgn desktop yang teks melekat kiri sebelah ikon. Reset balik ke kiri
     supaya kedua2 baris (tajuk + subtajuk) sentiasa sama paras kiri,
     kotak itu sendiri je yang kekal center (ikut .hero-info-badges). */
  .hero-info-badge { text-align: left; }
}
.hero-umk h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); color: #fff; line-height: 1.1; margin-bottom: 8px; }
.hero-umk h1 .hero-script {
  display: block;
  font-style: italic;
  font-weight: 600;
  font-size: 38px;
  color: var(--color-secondary);
  margin-bottom: 2px;
}
.hero-umk .hero-subline {
  font-family: var(--font-display);
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 14px;
  margin: 0 auto 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  max-width: 400px;
}
.hero-umk .hero-subline em { font-style: italic; color: var(--color-secondary); text-transform: none; }

/* ---- Compact Sidang (session) schedule summary ----
   One rounded card, hairline row dividers only — deliberately NOT a bordered
   grid/table (per request: "jangan nampak macam ada petak"). Faculty codes
   are condensed per day; full per-programme detail stays on aturcara-majlis.cfm. */
.hero-sidang {
  margin: 18px 0 0;
  width: 100%;
  max-width: 400px;
  text-align: left;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  padding: 18px 22px 14px;
  backdrop-filter: blur(2px);
}
.hero-sidang-title {
  color: var(--color-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.hero-sidang-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 0.85rem;
}
.hero-sidang-row:last-of-type { border-bottom: none; }
.hero-sidang-row .day { color: #fff; font-weight: 700; white-space: nowrap; }
.hero-sidang-row .day small { display: block; font-weight: 400; color: rgba(255,255,255,0.55); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }
.hero-sidang-row .faculties { color: rgba(255,255,255,0.88); font-weight: 600; text-align: right; letter-spacing: 0.02em; }
/* Link "Jadual penuh" — dipaparkan sebagai butang klip (pill) supaya jelas boleh ditekan */
.hero-sidang-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px;
  padding: 9px 18px;
  font-size: 0.8rem; font-weight: 700;
  color: var(--color-secondary);
  background: rgba(255,255,255,0.08);
  border: 1.5px solid var(--color-secondary);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background .6s ease, color .6s ease, transform .6s ease, box-shadow .6s ease;
  animation: sidangBlink var(--blink-duration) ease-in-out infinite;
}
.hero-sidang-link i { transition: transform .6s ease; animation: sidangArrowNudge var(--blink-duration) ease-in-out infinite; }
.hero-sidang-link:hover,
.hero-sidang-link:focus-visible {
  background: var(--color-secondary);
  color: #1b1440;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  text-decoration: none;
}
.hero-sidang-link:hover i,
.hero-sidang-link:focus-visible i { animation: none; transform: translateX(4px); }
.hero-sidang-link:hover,
.hero-sidang-link:focus-visible { animation: none; }
.hero-sidang-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-sidang-link:active { transform: translateY(0); box-shadow: none; }
/* Kelip-kelip: ayat + latar + bayang berdenyut serentak supaya jelas boleh ditekan */
@keyframes sidangBlink {
  0%, 100% {
    background: rgba(255,255,255,0.08);
    color: var(--color-secondary);
    box-shadow: 0 0 0 0 rgba(232,198,136,0);
  }
  50% {
    background: var(--color-secondary);
    color: #1b1440;
    box-shadow: 0 0 0 6px rgba(232,198,136,0.28), 0 0 18px rgba(232,198,136,0.55);
  }
}
@keyframes sidangArrowNudge {
  0%, 60%, 100% { transform: translateX(0); }
  30% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sidang-link, .hero-sidang-link i { transition: none; animation: none; }
}
@media (max-width: 575px) {
  .hero-sidang { padding: 16px 18px 12px; }
  .hero-sidang-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hero-sidang-row .faculties { text-align: left; }
  .hero-sidang-link { display: flex; width: 100%; }
}

.hero-umk p.lead { color: rgba(255,255,255,0.88); font-size: 1.15rem; max-width: 560px; margin-bottom: 20px; }

/* Single static hero slide (replaces the old 3-slide swiper) — same
   vertical centering/height behaviour as before so the section's overall
   size never changes. */
.hero-static-slide { position: relative; z-index: 2; min-height: 92vh; display: flex; align-items: center; }

/* Date / venue badge chips, echoing the printed convocation banner layout */
.hero-info-badges { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-info-badge {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  padding: 10px 18px;
  color: #fff;
}
.hero-info-badge i { font-size: 1.1rem; color: var(--color-secondary); }
.hero-info-badge strong { display: block; font-family: var(--font-display); font-size: 0.98rem; line-height: 1.2; }
.hero-info-badge small { display: block; opacity: 0.75; font-size: 0.72rem; }

/* Countdown */
.countdown-wrap { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.countdown-box {
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-md);
  min-width: 92px;
  padding: 16px 10px;
  text-align: center;
}
.countdown-box .num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; line-height: 1; color: #fff; }
.countdown-box .lbl { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.78); margin-top: 6px; display:block; }

/* Standalone (light) countdown used on other pages */
.countdown-light .countdown-box {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.countdown-light .countdown-box .num { color: var(--color-primary); }
.countdown-light .countdown-box .lbl { color: var(--color-text); opacity: 0.65; }


/* ==========================================================================
   RESPONSIVE — HERO  (phone / iPad / tablet)
   ========================================================================== */
/* Ruang atas/bawah supaya kandungan tak berlanggar dengan garisan emas (26px)
   bila kandungan lebih tinggi daripada skrin (iPad landscape, semua phone). */
.hero-umk { min-height: 92vh; min-height: 92svh; }
.hero-static-slide { min-height: 92vh; min-height: 92svh; padding-top: 64px; padding-bottom: 64px; }
.hero-col-side { padding-top: 24px; }       /* ganti <br> lama dalam hero.cfm */

/* iPad landscape / laptop kecil (992-1399): tajuk 5vw terlalu besar untuk lajur
   tengah (col-lg-5) → "KONVOKESYEN" melimpah keluar lajur. */
@media (min-width: 992px) and (max-width: 1399px) {
  .hero-umk h1 { font-size: 4vw; }
}

/* Countdown: 4 kotak SEBARIS (sebelum ni wrap 3+1 di phone & iPad landscape) */
@media (max-width: 1199px) {
  .hero-umk .countdown-wrap { flex-wrap: nowrap; gap: 10px; }
  .hero-umk .countdown-box { flex: 1 1 0; min-width: 0; max-width: 120px; padding: 14px 6px; }
}

/* Kad Jadual Sidang di iPad landscape: lajur sempit (~296px) — guna susunan
   menegak supaya senarai fakulti tak patah "· FPV" seorang diri */
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-sidang-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hero-sidang-row .faculties { text-align: left; }
}

/* Tablet & phone (<992): mace jadi watermark tengah */
@media (max-width: 991px) {
  /* :hover desktop (translateY(-50%) scale) menimpa translate(50%,-50%) →
     lepas tap di iPad/iPhone, mace melompat ke tepi. Matikan interaksi. */
  .hero-mace-visual, .hero-mace-visual:hover {
    pointer-events: none;
    transform: translate(50%, -50%);
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.45));
    opacity: 0.28;
  }
  .hero-sidang { max-width: 520px; }
  .hero-col-side { padding-top: 0; }
}

@media (max-width: 575px) {
  .hero-static-slide { padding-top: 56px; padding-bottom: 56px; }
  .hero-decor-corner { width: 220px; height: 220px; }
  .hero-mace-visual, .hero-mace-visual:hover { opacity: 0.16; } /* teks putih kekal jelas */
  .hero-umk .hero-subline { font-size: 0.85rem; letter-spacing: 0.03em; }
  .hero-info-badges { flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; }
  .hero-info-badge { width: 100%; max-width: 340px; }
  .hero-umk .countdown-wrap { gap: 8px; }
  .hero-umk .countdown-box { padding: 12px 4px; }
  .countdown-box .num { font-size: 1.55rem; }
  .countdown-box .lbl { font-size: 0.62rem; letter-spacing: 0.04em; }
  .hero-cta .btn { width: 100%; max-width: 340px; }
}
@media (max-width: 359px) {
  .hero-umk h1 { font-size: 2rem; }
  .countdown-box .num { font-size: 1.3rem; }
}

/* ==========================================================================
   QUICK MENU
   ========================================================================== */
.quick-menu-section {
  position: relative;
  padding: 90px 0 80px;
  margin-top: -70px;
  overflow: hidden;
}
.quick-menu-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  z-index: 0;
}
.quick-menu-section::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(253,248,245,0.55) 0%, var(--color-bg) 85%);
  z-index: 1;
}
.quick-menu { position: relative; z-index: 2; }
.quick-menu-item {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  color: var(--color-text);
  height: 100%;
  transition: var(--transition);
  border: none;
}
.quick-menu-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.quick-menu-item .qm-icon {
  flex-shrink: 0;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--color-primary);
  animation: qm-icon-breathe 3.2s ease-in-out infinite;
}
/* stagger each icon so they don't all pulse in lockstep, regardless of grid column class used */
.quick-menu .row > div:nth-child(2) .qm-icon { animation-delay: 0.4s; }
.quick-menu .row > div:nth-child(3) .qm-icon { animation-delay: 0.8s; }
.quick-menu .row > div:nth-child(4) .qm-icon { animation-delay: 1.2s; }
.quick-menu .row > div:nth-child(5) .qm-icon { animation-delay: 1.6s; }
.quick-menu .row > div:nth-child(6) .qm-icon { animation-delay: 2s; }

.quick-menu-item:hover .qm-icon {
  animation-play-state: paused;
  transform: scale(1.12) rotate(-6deg);
  background: var(--color-primary);
  color: #fff;
}
.quick-menu-item .qm-label { display: block; font-weight: 700; font-size: 0.95rem; color: var(--color-text); }

@keyframes qm-icon-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .quick-menu-item .qm-icon { animation: none; }
}

/* ==========================================================================
   ANNOUNCEMENT MARQUEE / NOTIFICATION
   ========================================================================== */
.announce-bar {
  background: var(--color-accent);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 0;
  overflow: hidden;
}
.announce-bar .badge-new {
  background: var(--color-primary); color: #fff; font-size: 0.7rem; font-weight: 700;
  padding: 4px 10px; border-radius: var(--radius-pill); margin-right: 12px; white-space: nowrap;
}
.marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 26s linear infinite;
}
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-track span { margin-right: 60px; font-size: 0.9rem; font-weight: 500; }

.notif-toast {
  position: fixed; top: 100px; right: 20px; z-index: 2000;
  max-width: 340px;
}

/* ==========================================================================
   STATISTICS
   ========================================================================== */
.stat-box { text-align: center; padding: 30px 10px; }
.stat-box .stat-num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--color-primary); }
.stat-box .stat-lbl { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; margin-top: 6px; }

.live-counter {
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  padding: 40px;
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.live-counter .pulse-dot {
  width: 10px; height: 10px; background: #4ADE80; border-radius: 50%; display: inline-block;
  margin-right: 8px; animation: pulse 1.6s infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.6);} 70% { box-shadow: 0 0 0 10px rgba(74,222,128,0);} 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0);} }
.live-counter .live-num { font-family: var(--font-display); font-size: 3.4rem; font-weight: 700; }

/* ==========================================================================
   EVENTS / TIMELINE / AUTO-SCROLL TICKER
   ========================================================================== */
.timeline { position: relative; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border); }
.timeline-item { position: relative; padding-bottom: 34px; padding-right: 6px; }
.timeline-item::before {
  content: ""; position: absolute; left: -34px; top: 4px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--color-primary); border: 3px solid var(--color-accent);
}
.timeline-item .t-date { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); font-weight: 700; }

.event-ticker {
  position: relative;
  height: 380px;
  overflow: hidden;
  cursor: pointer;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
}
.event-ticker-track {
  position: relative;
  padding-left: 34px;
  animation: eventTickerScroll 18s linear infinite;
}
.event-ticker-track::before { content: ""; position: absolute; left: 8px; width: 2px; height: 100%; background: var(--color-border); }
.event-ticker.is-paused .event-ticker-track,
.news-ticker.is-paused .news-ticker-track { animation-play-state: paused; }
.event-ticker:hover .event-ticker-track,
.event-ticker:focus-visible .event-ticker-track,
.news-ticker:hover .news-ticker-track,
.news-ticker:focus-visible .news-ticker-track { animation-play-state: paused; }
@keyframes eventTickerScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.news-ticker {
  position: relative;
  height: 420px;
  overflow: hidden;
  cursor: pointer;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 92%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 92%, transparent 100%);
}
.news-ticker-track {
  animation: eventTickerScroll 26s linear infinite;
}

/* ==========================================================================
   NEWS — FEATURED + LIST LAYOUT
   ========================================================================== */
.news-feature {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 420px;
  box-shadow: var(--shadow-md);
  color: #fff;
}
.news-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.news-feature:hover img { transform: scale(1.06); }
.news-feature-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(0deg, rgba(11,22,56,0.92) 0%, rgba(11,22,56,0.25) 55%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 30px;
}
.news-feature-badge {
  display: inline-flex; align-items: center; width: fit-content;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 14px;
}
.news-feature-title { font-size: 1.5rem; color: #fff; line-height: 1.3; margin-bottom: 10px; }
.news-feature-date { font-size: 0.85rem; opacity: 0.85; margin-bottom: 14px; }
.news-feature-more { font-weight: 700; font-size: 0.9rem; color: #fff; }

.news-list { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.news-list-item {
  display: flex; align-items: center; gap: 16px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  color: var(--color-text);
  flex: 1;
  transition: var(--transition);
}
.news-list-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.news-list-item img { width: 84px; height: 74px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.news-list-item h6 { font-size: 0.94rem; line-height: 1.35; margin-bottom: 6px; color: var(--color-text); }
.news-list-date { font-size: 0.78rem; opacity: 0.6; }

.btn-view-more {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--gradient-primary);
  border-radius: var(--radius-pill);
  overflow: hidden;
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}
.btn-view-more:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: #fff; }
.btn-view-more > span:first-child { padding: 14px 26px; font-weight: 600; font-size: 0.92rem; }
.btn-view-more-pill { background: rgba(0,0,0,0.18); padding: 14px 26px; font-weight: 700; font-size: 0.92rem; }

/* ==========================================================================
   VIDEO
   ========================================================================== */
.video-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.video-wrap img { width: 100%; display: block; }
.play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary); font-size: 1.6rem;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
}
.play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery-item { position: relative; overflow: hidden; border-radius: var(--radius-md); cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display:block; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item .g-overlay {
  position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,36,81,0.75), transparent 55%);
  display: flex; align-items: flex-end; padding: 16px; opacity: 0; transition: var(--transition); color: #fff; font-weight: 600; font-size: 0.85rem;
}
.gallery-item:hover .g-overlay { opacity: 1; }
.gallery-filters .btn-filter {
  border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-text);
  border-radius: var(--radius-pill); padding: 8px 20px; font-size: 0.85rem; font-weight: 600; margin: 4px;
}
.gallery-filters .btn-filter.active, .gallery-filters .btn-filter:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.accordion-umk .accordion-item { border: 1px solid var(--color-border); border-radius: var(--radius-md) !important; margin-bottom: 14px; overflow: hidden; background: var(--color-card); }
.accordion-umk .accordion-button { font-weight: 600; background: var(--color-card); color: var(--color-text); padding: 18px 22px; }
.accordion-umk .accordion-button:not(.collapsed) { background: var(--color-accent); color: var(--color-primary); box-shadow: none; }
.accordion-umk .accordion-button:focus { box-shadow: none; }
.accordion-umk .accordion-body { padding: 4px 22px 22px; opacity: 0.85; }

/* ==========================================================================
   SPONSORS
   ========================================================================== */
.sponsor-logo { filter: grayscale(100%); opacity: 0.6; transition: var(--transition); border-radius: var(--radius-sm); }
.sponsor-logo:hover { filter: grayscale(0%); opacity: 1; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer-umk { background: var(--color-text); color: rgba(255,255,255,0.75); padding: 70px 0 0; }
[data-theme="dark"] .footer-umk { background: #0B0B14; }
.footer-umk h6 { color: #fff; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em; margin-bottom: 20px; }
.footer-umk a { color: rgba(255,255,255,0.7); }
.footer-umk a:hover { color: var(--color-secondary); }
.footer-umk ul { list-style: none; padding: 0; }
.footer-umk ul li { margin-bottom: 10px; font-size: 0.9rem; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center; margin-right: 8px;
}
.footer-social a:hover { background: var(--color-primary); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 50px; padding: 20px 0; font-size: 0.82rem; text-align: center; }


/* ==========================================================================
   RESPONSIVE — FOOTER & BACK-TO-TOP
   ========================================================================== */
@media (max-width: 767px) {
  .footer-umk { padding-top: 44px; }
  .footer-address { text-align: center; }
  .footer-umk .footer-bottom {
    margin-top: 30px; padding: 18px 0 22px;
    flex-direction: column; justify-content: center !important; text-align: center;
  }
  .footer-policy-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
  .footer-policy-links a { margin-left: 0 !important; }
  .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}
@supports (padding: max(0px)) {
  .back-to-top { bottom: max(16px, env(safe-area-inset-bottom)); }   /* elak bar bawah iPhone */
}

/* ==========================================================================
   BREADCRUMB / PAGE HEADER
   ========================================================================== */
.page-header {
  background: var(--gradient-soft);
  padding: 60px 0 40px;
  border-bottom: 1px solid var(--color-border);
}
.page-header h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.breadcrumb-umk { font-size: 0.85rem; }
.breadcrumb-umk a { color: var(--color-text); opacity: 0.7; }
.breadcrumb-umk .active { color: var(--color-primary); font-weight: 600; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-control-umk, .form-select-umk {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  background: var(--color-card);
  color: var(--color-text);
}
.form-control-umk:focus, .form-select-umk:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-accent);
  outline: none;
}
label.form-label-umk { font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }

/* ==========================================================================
   GRADUATE SEARCH / PROFILE / SLIP
   ========================================================================== */
.search-tabs .nav-link { border-radius: var(--radius-pill); margin-right: 8px; font-weight: 600; color: var(--color-text); }
.search-tabs .nav-link.active { background: var(--color-primary); color: #fff; }
.result-row { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px 22px; margin-bottom: 14px; transition: var(--transition); background: var(--color-card); }
.result-row:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); }

.slip-card { border: 2px dashed var(--color-primary); border-radius: var(--radius-lg); padding: 32px; background: var(--color-card); }
.qr-box { width: 140px; height: 140px; background: var(--color-accent); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-size: 0.75rem; text-align:center; }

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.back-to-top {
  position: fixed; bottom: 26px; right: 26px; z-index: 1500;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--gradient-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); border: none;
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: var(--transition);
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ==========================================================================
   MISC / UTILITIES
   ========================================================================== */
.text-primary-umk { color: var(--color-primary) !important; }
.bg-accent-umk { background: var(--color-accent) !important; }
.divider-umk { width: 60px; height: 3px; background: var(--gradient-primary); border-radius: var(--radius-pill); margin: 0 auto 20px; }
.ratio-map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
img { max-width: 100%; }

/* language visibility */
[data-i18n-lang="ms"] { display: none; }
html[lang="ms"] [data-i18n-lang="ms"] { display: inline; }
html[lang="ms"] [data-i18n-lang="en"] { display: none; }

@media (max-width: 991px) {
  .quick-menu { margin-top: 24px; }
  .hero-umk { min-height: auto; } /* padding 140px/90px lama dibuang — bertindih dengan padding .hero-static-slide (blok RESPONSIVE — HERO) & buat ruang kosong besar di phone/iPad */
}

/* ==========================================================================
   AD BANNER (SLIDER) — modulAdbanner.cfm, sits right below the hero.
   Max 5 slides. Autoplay speed kept moderate (see main.js initSwipers ->
   .adbannerSwiper) so slides don't flip too fast to read.
   ========================================================================== */
.adbanner-section { padding: 28px 0 6px; }

.adbanner-umk {
  position: relative;
  /* Capped so a square-format poster (like the Pemakluman Tarikh banner)
     shows in full at a sensible height (~780px) instead of stretching
     edge-to-edge — see .adbanner-slide below, same reasoning. */
  max-width: 780px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-navy);
}
.adbannerSwiper { border-radius: var(--radius-lg); }

.adbanner-slide {
  position: relative;
  display: block;
  /* Was 21/8 (very wide + short) — cropped square banner artwork badly.
     Slides are now near-square (1/1) so the whole poster design (logo,
     cokmar, tarikh) is visible, not cropped. Combined with .adbanner-umk's
     780px cap above, this keeps the banner around ~700-800px tall instead
     of running the full square width of the page. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.adbanner-slide img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

.adbanner-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 76px 22px 28px; /* right padding clears the far-right nav button on desktop */
  background: linear-gradient(0deg, rgba(11,22,56,0.9) 0%, rgba(11,22,56,0.4) 60%, transparent 100%);
  color: #fff;
}
.adbanner-caption .adbanner-tag {
  display: inline-block;
  background: var(--gradient-gold);
  color: var(--color-navy-deep);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: 8px;
}
.adbanner-caption h3 { color: #fff; font-size: 1.35rem; margin-bottom: 3px; }
.adbanner-caption p { font-size: 0.85rem; opacity: 0.85; margin: 0; max-width: 560px; }

/* Prev/next are pinned to the two OUTER edges of the banner — kept far apart
   on purpose so they're never mis-tapped as a close-together pair on mobile. */
.adbanner-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,22,56,0.45); color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 5; transition: var(--transition); cursor: pointer;
}
.adbanner-nav:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-navy-deep); }
.adbanner-nav-prev { left: 14px; }
.adbanner-nav-next { right: 14px; }
.adbanner-nav.swiper-button-disabled { opacity: 0.35; cursor: default; }
.adbanner-nav.swiper-button-disabled:hover { background: rgba(11,22,56,0.45); color: #fff; }

.adbanner-pagination {
  /* Dulu position:absolute + bottom:12px = melekat atas gambar. Sekarang
     baris biasa di bawah .adbanner-umk (lihat modulAdbanner.cfm) supaya
     tak bertindih dengan banner langsung. */
  display: flex; justify-content: center; align-items: center; gap: 6px;
  margin-top: 14px;
}
.adbanner-pagination .swiper-pagination-bullet {
  /* Dot dulu putih sebab duduk atas gambar gelap — sekarang duduk atas
     latar cream halaman, jadi tukar ke warna navy supaya nampak. */
  background: var(--color-navy); opacity: 0.25; width: 8px; height: 8px; margin: 0 !important; transition: var(--transition);
}
.adbanner-pagination .swiper-pagination-bullet-active { opacity: 1; background: var(--color-primary); width: 22px; border-radius: 5px; }

/* Tablet (iPad portrait/landscape) — 780px cap above already keeps this
   comfortable, so only the section padding needs a tweak here. */
/* Phones */
@media (max-width: 767px) {
  .adbanner-section { padding: 20px 0 4px; }
  .adbanner-caption { padding: 16px 18px 40px; }
  .adbanner-caption h3 { font-size: 1.05rem; }
  .adbanner-caption p { font-size: 0.8rem; }
  .adbanner-nav { width: 36px; height: 36px; font-size: 0.85rem; }
  .adbanner-nav-prev { left: 8px; }
  .adbanner-nav-next { right: 8px; }
}

/* ==========================================================================
   AD BANNER WIDE (VERSI PANJANG) — modulAdbanner-new.cfm  (pilihan B)
   Class berasingan (adbanner-wide-*) supaya CSS versi petak (.adbanner-umk,
   di atas) TIDAK terjejas dan kedua-dua boleh wujud serentak di index.cfm.
   Gambar ~2.58:1 (adbanner-konvo.png, 1694x657px — aspect-ratio slaid dipadan TEPAT
   dengan saiz sebenar ni, elak jidar/letterbox kosong). Di phone (<768px) modul menukar ke
   gambar petak melalui <picture> supaya teks poster masih boleh dibaca.
   ========================================================================== */
.adbanner-wide-section { padding: 28px 0 6px; }

.adbanner-wide {
  position: relative;
  width: 100%;                       /* penuh lebar .container (bukan dikunci 780px) */
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-navy);
}
.adbannerWideSwiper { border-radius: var(--radius-lg); }

.adbanner-wide-slide {
  position: relative;
  display: block;
  overflow: hidden;
  /* TIADA aspect-ratio/height dipaksa di sini lagi — tinggi kotak ikut
     nisbah SEBENAR gambar secara automatik (lihat width/height attribute
     pada <img> dalam modulAdbanner.cfm). Cara ni elak isu height jatuh
     ke 0 (jalur nipis) yang berlaku bila aspect-ratio CSS berlanggar
     dengan img height:100%. */
}
.adbanner-wide-slide picture { display: block; width: 100%; }
.adbanner-wide-slide img {
  width: 100%; height: auto; display: block;   /* height:auto = ikut nisbah sebenar gambar, tiada letterbox/squish */
}

.adbanner-wide-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 76px 22px 28px;      /* ruang kanan untuk butang next */
  background: linear-gradient(0deg, rgba(11,22,56,0.9) 0%, rgba(11,22,56,0.4) 60%, transparent 100%);
  color: #fff;
}
.adbanner-wide-caption .adbanner-wide-tag {
  display: inline-block;
  background: var(--gradient-gold);
  color: var(--color-navy-deep);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: 8px;
}
.adbanner-wide-caption h3 { color: #fff; font-size: 1.35rem; margin-bottom: 3px; }
.adbanner-wide-caption p { font-size: 0.85rem; opacity: 0.85; margin: 0; max-width: 560px; }

/* Prev/next di dua tepi luar — jauh antara satu sama lain (elak tersalah tekan) */
.adbanner-wide-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,22,56,0.45); color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 5; transition: var(--transition); cursor: pointer;
}
.adbanner-wide-nav:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-navy-deep); }
.adbanner-wide-nav-prev { left: 14px; }
.adbanner-wide-nav-next { right: 14px; }
.adbanner-wide-nav.swiper-button-disabled { opacity: 0.35; cursor: default; }
.adbanner-wide-nav.swiper-button-disabled:hover { background: rgba(11,22,56,0.45); color: #fff; }
.adbanner-wide.is-single .adbanner-wide-nav { display: none; }     /* 1 slaid sahaja: tiada butang mati */

.adbanner-wide-pagination {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  margin-top: 14px;
}
.adbanner-wide-pagination .swiper-pagination-bullet {
  background: var(--color-text); opacity: 0.25; width: 8px; height: 8px; margin: 0 !important; transition: var(--transition);
}
.adbanner-wide-pagination .swiper-pagination-bullet-active { opacity: 1; background: var(--color-primary); width: 22px; border-radius: 5px; }

/* Tablet (iPad): banner panjang kekal penuh lebar container — butang dikecilkan sikit */
@media (max-width: 991px) {
  .adbanner-wide-nav { width: 40px; height: 40px; font-size: 0.9rem; }
  .adbanner-wide-nav-prev { left: 10px; }
  .adbanner-wide-nav-next { right: 10px; }
  .adbanner-wide-caption { padding: 16px 64px 18px 20px; }
  .adbanner-wide-caption h3 { font-size: 1.15rem; }
}
/* Phone: gambar bertukar ke petak (<picture> dalam modul) → kotak 1:1 */
@media (max-width: 767px) {
  .adbanner-wide-section { padding: 20px 0 4px; }
  .adbanner-wide-slide.has-mobile-src { aspect-ratio: 1 / 1; }
  .adbanner-wide-nav { width: 36px; height: 36px; font-size: 0.85rem; }
  .adbanner-wide-nav-prev { left: 8px; }
  .adbanner-wide-nav-next { right: 8px; }
  .adbanner-wide-caption { padding: 14px 52px 34px 16px; }
  .adbanner-wide-caption h3 { font-size: 1.02rem; }
  .adbanner-wide-caption p { font-size: 0.8rem; }
}

/* ==========================================================================
   PENGUMUMAN (ANNOUNCEMENT TICKER) — modulAdbanner.cfm, its own separate
   widget sitting directly below the ad banner. Max 5 items. Text moves
   continuously but slowly (see main.js initPengumumanTicker — speed is a
   small px/second value on purpose, easy to read while it scrolls), and
   the prev/next buttons sit at opposite ends of the bar, never side by side.
   ========================================================================== */
.pengumuman-section { padding: 14px 0 34px; }

.pengumuman-bar {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  padding: 8px 10px;
}
.pengumuman-bar.is-paused { box-shadow: var(--shadow-md); }

.pengumuman-badge {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gradient-primary); color: #fff;
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 9px 16px; border-radius: var(--radius-pill); white-space: nowrap;
}
.pengumuman-badge i { color: var(--color-secondary); }

/* Prev sits right after the badge, next sits at the very far end of the bar —
   the scrolling text viewport (flex: 1) is what keeps real distance between them. */
.pengumuman-nav {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: var(--color-primary);
  border: 1px solid var(--color-border); font-size: 0.75rem;
  transition: var(--transition); cursor: pointer;
}
.pengumuman-nav:hover { background: var(--color-primary); color: #fff; }

.pengumuman-viewport {
  position: relative; flex: 1 1 auto; min-width: 0; height: 22px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.pengumuman-track {
  position: absolute; left: 0; top: 0; display: flex; align-items: center;
  white-space: nowrap; will-change: transform;
  padding-left: 22px;   /* ruang di kiri supaya tajuk pertama tak terpotong bawah pudar tepi */
}
.pengumuman-track a {
  display: inline-flex; align-items: center;
  color: var(--color-text); font-size: 0.86rem; font-weight: 500;
  margin-right: 56px; text-decoration: none;
}
.pengumuman-track a:hover { color: var(--color-primary); text-decoration: underline; }
.pengumuman-track a .pengumuman-date {
  color: var(--color-primary); font-weight: 700; margin-right: 8px; flex-shrink: 0;
}

@media (max-width: 575px) {
  .pengumuman-bar { border-radius: var(--radius-md); padding: 7px 8px; }
  .pengumuman-badge-label { display: none; } /* icon-only badge to save space on small phones */
  .pengumuman-badge { padding: 9px 11px; }
  .pengumuman-nav { width: 26px; height: 26px; }
  .pengumuman-track a { font-size: 0.8rem; margin-right: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .pengumuman-track { transform: none !important; }
}

/* --------------------------------------------------------------------------
   PENGUMUMAN — HANYA 1 ITEM (class .is-single pada .pengumuman-bar)
   Bila tinggal satu pengumuman: tak bergerak, teks duduk statik & dianjak
   sikit ke belakang (kanan) supaya tak terpotong di tepi kiri, butang
   prev/next disembunyikan. Bila ada 2 atau lebih, class ni tiada dan ticker
   bergerak seperti biasa. (Dipasang automatik oleh skrip kecil dalam
   modulAdbanner.cfm.)
   -------------------------------------------------------------------------- */
.pengumuman-bar.is-single .pengumuman-nav { display: none; }
.pengumuman-bar.is-single .pengumuman-viewport {
  height: auto; min-height: 22px;
  -webkit-mask-image: none; mask-image: none;      /* buang pudar tepi kiri/kanan */
}
.pengumuman-bar.is-single .pengumuman-track {
  position: relative; left: 0 !important; top: 0;
  transform: none !important;                      /* hentikan pergerakan (override JS) */
  white-space: normal;                             /* tajuk panjang boleh bungkus, tak terpotong */
  padding-left: 10px;                              /* "kebelakang sikit" — ubah nilai ni utk laras jarak */
}
.pengumuman-bar.is-single .pengumuman-track a { margin-right: 0; flex-wrap: wrap; }

/* ==========================================================================
   LENSA (QUICK LINKS RIBBON) — modulLensa.cfm
   Full-width ribbon title + a row of up to 5 quick-link tiles underneath.
   ========================================================================== */
.lensa-section { padding: 10px 0 46px; }

/* Long, full-bleed ribbon title (per request: made wide rather than a small
   centered heading), with a subtle ribbon-tail notch shadow at each corner. */
.lensa-ribbon {
  position: relative;
  width: 100%;
  background: var(--gradient-primary);
  padding: 16px 20px;
  text-align: center;
  box-shadow: var(--shadow-md);
  margin-bottom: 34px;
}
.lensa-ribbon::before,
.lensa-ribbon::after {
  content: "";
  position: absolute; top: 100%;
  width: 0; height: 0;
  border-style: solid;
}
.lensa-ribbon::before { left: 0; border-width: 10px 0 0 20px; border-color: var(--color-maroon-deep) transparent transparent transparent; }
.lensa-ribbon::after  { right: 0; border-width: 10px 20px 0 0; border-color: var(--color-maroon-deep) transparent transparent transparent; }

.lensa-ribbon-text {
  display: inline-flex; align-items: center; gap: 12px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  /* Standardized section-ribbon title size — same 20px/800/3px used by
     .statistik-ribbon-title and .maklumat-dewan-ribbon-text below, so all
     three ribbons read as one consistent family, not three different sizes. */
  font-size: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.lensa-ribbon-text i { color: var(--color-secondary); font-size: 20px; }

/* ---- Tile grid ---- */
.lensa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.lensa-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center;
  gap: 10px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px 14px;
  color: var(--color-text);
  min-height: 150px;
  cursor: pointer;
  transition: var(--transition);
  font: inherit; /* the Search tile is a <button>, keep it looking like the <a> tiles */
}
.lensa-tile:hover, .lensa-tile:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}
.lensa-tile-icon {
  flex-shrink: 0;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: var(--color-primary);
  font-size: 1.35rem;
  transition: var(--transition);
}
.lensa-tile:hover .lensa-tile-icon, .lensa-tile:focus-visible .lensa-tile-icon {
  background: var(--color-primary); color: #fff; transform: scale(1.08);
}
.lensa-tile-label { font-weight: 700; font-size: 0.92rem; line-height: 1.3; }

/* I Love UMK tile gets its 3 hashtags as small wrapping chips */
.lensa-tile-tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 2px;
}
.lensa-tile-tags span {
  background: var(--color-accent); color: var(--color-primary);
  font-size: 0.68rem; font-weight: 600;
  padding: 3px 9px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.lensa-tile:hover .lensa-tile-tags span { background: rgba(255,255,255,0.25); color: #fff; }
.lensa-tile-love:hover, .lensa-tile-love:focus-visible { background: var(--gradient-primary); color: #fff; }
.lensa-tile-love:hover .lensa-tile-icon, .lensa-tile-love:focus-visible .lensa-tile-icon { background: #fff; color: var(--color-maroon); }

/* Tablet */
@media (max-width: 1024px) {
  .lensa-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Phones */
@media (max-width: 575px) {
  .lensa-ribbon-text { font-size: 15px; letter-spacing: 1.5px; }
  .lensa-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .lensa-tile { min-height: 130px; padding: 18px 10px; }
}

/* ==========================================================================
   STATISTIK GRADUAN — modulStatistikGraduan.cfm
   Long ribbon title (two lines) + 3 count-up stat cards. The count-up itself
   reuses the existing initStatCounters()/data-count-to system in main.js —
   nothing new needed there, only the data-count-to attribute in the markup.
   ========================================================================== */
.statistik-section { padding: 10px 0 56px; }

.statistik-ribbon {
  width: 100%;
  position: relative;
  background: var(--gradient-primary);
  padding: 14px 20px 16px;
  text-align: center;
  box-shadow: var(--shadow-md);
  margin-bottom: 46px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.statistik-ribbon::before,
.statistik-ribbon::after {
  content: "";
  position: absolute; top: 100%;
  width: 0; height: 0;
  border-style: solid;
}
.statistik-ribbon::before { left: 0; border-width: 10px 0 0 20px; border-color: var(--color-maroon-deep) transparent transparent transparent; }
.statistik-ribbon::after  { right: 0; border-width: 10px 20px 0 0; border-color: var(--color-maroon-deep) transparent transparent transparent; }

.statistik-ribbon-title {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  /* Same 20px/800/3px as .lensa-ribbon-text and .maklumat-dewan-ribbon-text —
     standardized so all three section ribbons match. */
  font-size: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.statistik-ribbon-sub {
  color: var(--color-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---- Stat cards ---- */
.statistik-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.statistik-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 34px 16px 28px;
  text-align: center;
  transition: var(--transition);
}
.statistik-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Icon badge — a colour + a corner "rank" badge tell the three tiers apart,
   the cluster of 3 overlapping graduate figures reads as "a crowd", not one person */
.statistik-icon {
  position: relative;
  width: 96px; height: 96px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.statistik-icon-phd      { background: var(--gradient-gold); }
.statistik-icon-masters  { background: linear-gradient(135deg, var(--color-royal-blue) 0%, var(--color-navy) 100%); }
.statistik-icon-bachelor { background: linear-gradient(135deg, var(--color-maroon) 0%, var(--color-red) 100%); }

.grad-cluster { display: flex; align-items: flex-end; }
.grad-fig { color: rgba(255,255,255,0.95); }
.grad-fig-mid { font-size: 1.9rem; z-index: 2; margin: 0 -6px; }
.grad-fig-side { font-size: 1.25rem; opacity: 0.85; margin-bottom: 3px; }
.grad-fig-side:first-child { margin-right: -8px; }
.grad-fig-side:last-child { margin-left: -8px; }

.statistik-rank-badge {
  position: absolute; top: -4px; right: -4px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-card);
  border: 2px solid var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  box-shadow: var(--shadow-sm);
}
.statistik-icon-phd .statistik-rank-badge      { color: var(--color-primary); }
.statistik-icon-masters .statistik-rank-badge  { color: var(--color-royal-blue); }
.statistik-icon-bachelor .statistik-rank-badge { color: var(--color-maroon); }

.statistik-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--color-text);
  line-height: 1.1;
}
.statistik-lbl {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-top: 4px;
}

/* Tablet */
@media (max-width: 767px) {
  .statistik-grid { grid-template-columns: 1fr; gap: 16px; }
  .statistik-card { padding: 26px 16px 22px; }
}
/* Phones — ribbon text scales down a touch */
@media (max-width: 575px) {
  .statistik-ribbon-title { font-size: 15px; letter-spacing: 1.5px; }
  .statistik-ribbon-sub { font-size: 11px; }
  .statistik-icon { width: 82px; height: 82px; }
  .grad-fig-mid { font-size: 1.6rem; }
  .grad-fig-side { font-size: 1.05rem; }
  .statistik-num { font-size: 2.2rem; }
}

/* ---- Jumlah Keseluruhan (banner ringkas di bawah 3 kad) ---- */
.statistik-total-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  max-width: 520px;
  margin: 28px auto 0;
  padding: 14px 26px;
  background: var(--gradient-primary);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
}
.statistik-total-banner i {
  color: var(--color-secondary, #DDB35C);
  font-size: 1.1rem;
}
.statistik-total-lbl {
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.statistik-total-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-secondary, #DDB35C);
  background: rgba(0,0,0,0.18);
  padding: 2px 16px;
  border-radius: 999px;
}

/* ---- Togol "Lihat Pecahan Mengikut Fakulti" ---- */
.statistik-detail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  background: none;
  border: none;
  /* NOTA WARNA: dulu var(--color-primary) (gold pucat) — bila animation
     pdfHintBlink turunkan opacity ke 0.25 di titik paling gelap kelipan,
     teks ni jadi nyaris lenyap atas latar cream/gold terang dlm light mode
     (sama isu dgn .flip-card-hint). Tukar ke var(--gold-600) yg lagi
     gelap/tepu dlm light mode — var ni MEMANG auto bertukar cerah (#C9A15A)
     dlm dark mode sebab --gold-600 dah ada override [data-theme="dark"]
     kat atas, sama pattern dgn --maroon-700/800. */
  color: var(--gold-600, #B8862E);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 6px 4px;
  -webkit-tap-highlight-color: transparent; /* elak flash kelabu/merah lalai browser bila tap pd mobile */
  /* Kelip-kelip (guna keyframe pdfHintBlink yg dah sedia ada utk link "klik sini
     buka tab baharu" pd pdf-viewer) — isyarat visual yg elemen ni boleh ditekan,
     sebab bukan semua pelawat biasa dgn corak "klik utk buka panel" macam ni. */
  animation: pdfHintBlink var(--blink-duration) ease-in-out infinite;
}
/* Sebaik saja panel dibuka (pelawat dah "jumpa" ia boleh ditekan), henti kelip —
   tak perlu terus kelip lepas orang dah faham & guna butang ni. */
.statistik-detail-toggle[aria-expanded="true"] {
  animation: none;
  opacity: 1;
}
.statistik-detail-toggle i {
  font-size: 0.78rem;
  transition: transform 0.3s ease;
}
.statistik-detail-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
/* Guna --color-primary (gold, dark-mode aware) utk SEMUA keadaan interaktif —
   :hover/:focus/:active. Dulu :hover guna --color-maroon-deep, yg TAK ada
   override utk [data-theme="dark"], jadi nampak "merah" janggal atas latar gelap. */
.statistik-detail-toggle:hover,
.statistik-detail-toggle:focus-visible,
.statistik-detail-toggle:active,
.statistik-detail-toggle[aria-expanded="true"] {
  color: var(--color-secondary, var(--color-primary));
  outline: none;
}

/* ---- Panel pecahan penuh (collapse, dgn fade+slide lebih smooth) ---- */
.collapse.collapsing,
#statistikDetailPanel {
  transition: height 0.35s ease, opacity 0.3s ease !important;
}
#statistikDetailPanel:not(.show) { opacity: 0; }
#statistikDetailPanel.show { opacity: 1; }

.statistik-detail-panel {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 22px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px 28px;
}
.statistik-detail-group h6 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border);
}
.statistik-detail-group h6 span {
  font-weight: 600;
  color: var(--color-text);
  opacity: 0.55;
  text-transform: none;
  letter-spacing: 0;
}
.statistik-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.statistik-detail-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.85rem;
}
.statistik-detail-list li:last-child { border-bottom: none; }
.statistik-detail-list li span { color: var(--color-text); opacity: 0.85; }
.statistik-detail-list li strong { color: var(--color-primary); font-weight: 700; }

/* Pecahan fakulti (11 item) — 2 lajur supaya tak jadi senarai panjang menjunam */
.statistik-detail-list-cols {
  column-count: 2;
  column-gap: 24px;
}
.statistik-detail-list-cols li {
  break-inside: avoid;
}

/* ==========================================================================
   PECAHAN FAKULTI — CARTA BAR (gantikan/tambah pada senarai teks di atas)
   Dua BENTUK berbeza sengaja dipilih ikut bilangan kategori:
     - Pascasiswazah (cuma 4 kategori)  -> bar MENEGAK (column), muat kemas
       dalam lajur sempit 1fr sebelah kiri.
     - Prasiswazah (11 fakulti)         -> bar MELINTANG (horizontal), sebab
       label fakulti + 11 baris lagi senang dibaca sebaris berbanding column.
   Lebar/tinggi bar dikira relatif kepada nilai TERBESAR dalam kumpulan
   masing-masing (bukan jumlah keseluruhan), supaya bar terpanjang/tertinggi
   sentiasa 100% dan perbandingan dalam kumpulan tu jelas.
   Nombor sebenar kekal dicetak terus dalam HTML (bukan bergantung pada JS)
   — bar cuma lapisan visual tambahan; animasi "tumbuh" bila panel collapse
   dibuka dikendalikan oleh sedikit JS dalam modulStatistikGraduan.cfm. */

/* ---- Bar melintang (Prasiswazah) ---- */
.statistik-chart-horizontal {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.statistik-hbar-item {
  display: grid;
  grid-template-columns: 64px 1fr 46px;
  align-items: center;
  gap: 10px;
}
.statistik-hbar-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text);
  opacity: 0.85;
}
.statistik-hbar-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}
.statistik-hbar-fill {
  position: absolute;
  inset: 0;
  width: 0;
  min-width: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-500, #CB9B3C), var(--maroon-700, #3B2A8C));
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.statistik-hbar-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: right;
}

/* ---- Bar menegak (Pascasiswazah) ----
   Struktur: .statistik-chart-vertical (bekas luar)
             -> .statistik-vbar-bars   (kotak bar + paksi "L": garis kiri +
                                        garis bawah — bar duduk terus atas
                                        garis bawah tu, bukan dlm kotak
                                        berlatar macam reka bentuk awal)
             -> .statistik-vbar-labels (label duduk BERASINGAN di bawah
                                        garis paksi, sejajar setiap bar) */
.statistik-chart-vertical {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}
.statistik-vbar-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  height: 170px;
  border-left: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  padding: 0 6px 0 14px;
}
.statistik-vbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  height: 100%;
}
.statistik-vbar-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.statistik-vbar-track {
  width: 32px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  /* TIADA latar/background di sini lagi — garis bawah pada .statistik-vbar-bars
     yang jadi baseline, bar "duduk" terus atasnya. */
}
.statistik-vbar-fill {
  width: 100%;
  height: 0;
  min-height: 3px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--gold-500, #CB9B3C), var(--maroon-700, #3B2A8C));
  transition: height 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.statistik-vbar-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 6px 0 14px;
}
.statistik-vbar-labels span {
  flex: 1;
  font-size: 0.7rem;
  line-height: 1.25;
  text-align: center;
  color: var(--color-text);
  opacity: 0.75;
}

@media (max-width: 767px) {
  .statistik-total-banner { flex-direction: column; text-align: center; padding: 16px 20px; }
  .statistik-detail-panel { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
  .statistik-detail-list-cols { column-count: 1; }
  .statistik-vbar-bars { height: 140px; }
  .statistik-hbar-item { grid-template-columns: 52px 1fr 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .statistik-hbar-fill, .statistik-vbar-fill { transition: none; }
}

/* ==========================================================================
   MAKLUMAT DEWAN (FLIP CARDS) — modulMaklumatDewan.cfm
   Long ribbon title + 3 SEPARATE flip cards (own shadow/radius each, not one
   bar cut into columns). Front = icon + title, back = short ringkasan.
   ========================================================================== */
.maklumat-dewan-section { padding: 10px 0 56px; }

.maklumat-dewan-ribbon {
  width: 100%;
  position: relative;
  background: var(--gradient-primary);
  padding: 16px 20px;
  text-align: center;
  box-shadow: var(--shadow-md);
  margin-bottom: 40px;
}
.maklumat-dewan-ribbon::before,
.maklumat-dewan-ribbon::after {
  content: "";
  position: absolute; top: 100%;
  width: 0; height: 0;
  border-style: solid;
}
.maklumat-dewan-ribbon::before { left: 0; border-width: 10px 0 0 20px; border-color: var(--color-maroon-deep) transparent transparent transparent; }
.maklumat-dewan-ribbon::after  { right: 0; border-width: 10px 20px 0 0; border-color: var(--color-maroon-deep) transparent transparent transparent; }
.maklumat-dewan-ribbon-text {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  /* Standardized to the SAME 20px/800 as .lensa-ribbon-text and
     .statistik-ribbon-title (previously this was a smaller 1.05rem — that
     mismatch is what made this ribbon look "off" next to the other two).
     Letter-spacing is kept tighter (1px vs their 3px) for a logical reason,
     not an inconsistency: this ribbon's sentence is ~6x longer than "LENSA"
     or "STATISTIK", so the same 3px spacing would push it onto two lines or
     off the edge on smaller desktop widths. */
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---- Flip card grid ---- */
.maklumat-dewan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.flip-card {
  perspective: 1400px;
  height: 260px;
  cursor: pointer;
  border-radius: var(--radius-lg);
}
.flip-card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }

.flip-card-inner {
  position: relative;
  width: 100%; height: 100%;
  text-align: center;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}
.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }

.flip-card-front, .flip-card-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 30px 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.flip-card:hover .flip-card-front, .flip-card:hover .flip-card-back { box-shadow: var(--shadow-md); }

.flip-card-front {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
}
.flip-card-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: var(--color-primary);
  font-size: 1.55rem; margin-bottom: 16px;
  transition: var(--transition);
}
.flip-card:hover .flip-card-icon { background: var(--color-primary); color: #fff; transform: scale(1.08); }
.flip-card-title { font-size: 1.08rem; margin-bottom: 4px; }
.flip-card-sub { font-size: 0.82rem; opacity: 0.7; margin-bottom: 18px; }
.flip-card-hint {
  position: absolute; bottom: 16px; left: 0; right: 0;
  font-size: 0.72rem;
  /* NOTA WARNA: dulu guna var(--color-primary) (gold pucat) + opacity:0.8
     kat SPAN ni, kemudian .hint-blink kat <strong> dlm pulak turun opacity
     ke 0.25 di titik paling gelap kelip-an — dua-dua opacity ni DARAB
     (0.8 x 0.25 = 0.2), jadi dlm light mode teks tu nampak pudar/hilang
     atas kad putih terang. Fix: (1) buang opacity:0.8 kat span ni — biar
     hint-blink je yg kawal "nafas" opacity, (2) tukar ke var(--gold-600)
     yg lagi gelap/tepu dlm light mode (kontra lagi baik atas kad putih),
     dan var ni MEMANG auto bertukar cerah (#C9A15A) dlm dark mode sebab
     --gold-600 dah didaftarkan dgn override [data-theme="dark"] kat atas —
     sama pattern dgn --maroon-700/800, --gold-400/500. */
  color: var(--gold-600, #B8862E);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; /* seluruh kad dah leh klik (role="button"), tapi tambah
                      cursor di sini supaya ayat ni sendiri pun nampak jelas
                      boleh ditekan, bukan sekadar teks label biasa */
}
/* Kelip-kelip (bukan garis bawah) — guna class .hint-blink SEDIA ADA (lihat
   pdfHintBlink/--blink-duration kat atas, pattern yg sama dipakai utk "klik
   sini buka tab baharu" pd pdf-viewer-fallback). Class hint-blink ditambah
   terus pd <strong> dlm modulMaklumatDewan.cfm, bukan kat sini — reuse je
   animation yg dah sedia ada supaya kelajuan kelip semua tempat sekata. */

.flip-card-back {
  background: var(--gradient-primary);
  color: #fff;
  transform: rotateY(180deg);
  gap: 16px;
}
.flip-card-back p { font-size: 0.88rem; line-height: 1.55; opacity: 0.92; margin: 0; }
.flip-card-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-secondary); font-weight: 700; font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
}
.flip-card-link:hover { text-decoration: underline; color: #fff; }
/* .flip-card-link jugak diberi class .hint-blink terus dlm .cfm (kelip
   sama macam .flip-card-hint di atas) — lihat nota kat .flip-card-hint. */

/* Colour-code each card's icon + top accent (info / facilities / safety) */
.flip-card-fasiliti .flip-card-front { border-top-color: var(--color-royal-blue); }
.flip-card-fasiliti .flip-card-icon { color: var(--color-royal-blue); }
.flip-card-fasiliti:hover .flip-card-icon { background: var(--color-royal-blue); color: #fff; }

.flip-card-safety .flip-card-front { border-top-color: var(--color-maroon); }
.flip-card-safety .flip-card-icon { color: var(--color-maroon); }
.flip-card-safety:hover .flip-card-icon { background: var(--color-maroon); color: #fff; }

/* Tablet */
@media (max-width: 900px) {
  .maklumat-dewan-grid { grid-template-columns: 1fr; gap: 18px; }
  .flip-card { height: 220px; }
}
/* Phones */
@media (max-width: 575px) {
  .maklumat-dewan-ribbon-text { font-size: 15px; letter-spacing: 0.3px; }
  .flip-card { height: 240px; }
  .flip-card-front, .flip-card-back { padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .flip-card-inner { transition: none; }
}


/* ==========================================================================
   RESPONSIVE — AD BANNER, PENGUMUMAN, STATISTIK, MAKLUMAT DEWAN
   (phone / iPad / tablet) — diletak selepas semua rule asal modul-modul ini.
   ========================================================================== */

/* ---- Ad banner ---- */
/* Banner segi empat 780px lebih tinggi daripada skrin iPad/tablet landscape
   (cth 1024x768 → banner 780px, skrin tinggal ~640px selepas topbar+nav).
   Hadkan lebar mengikut tinggi viewport supaya poster nampak penuh. */
@media (orientation: landscape) and (max-width: 1199px) {
  .adbanner-umk { max-width: min(780px, max(320px, calc(100vh - 150px))); max-width: min(780px, max(320px, calc(100svh - 150px))); }
}
@media (max-width: 767px) {
  .adbanner-nav { width: 40px; height: 40px; }   /* 36px terlalu kecil untuk ibu jari */
}

/* ---- Pengumuman ---- */
@media (max-width: 575px) {
  .pengumuman-nav { width: 32px; height: 32px; }
  .pengumuman-viewport { height: 24px; }
  .pengumuman-track a { line-height: 24px; }
}
.pengumuman-bar { -webkit-tap-highlight-color: transparent; }

/* ---- Statistik ---- */
/* Phone & iPad kecil: kad jadi baris mendatar (ikon kiri, nombor+label kanan)
   — sebelum ni 3 kad menegak ~230px setiap satu = terlalu panjang nak scroll. */
@media (max-width: 767px) {
  .statistik-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon num" "icon lbl";
    column-gap: 22px; align-items: center;
    text-align: left;
    padding: 20px 24px;
  }
  .statistik-icon { grid-area: icon; margin: 0; width: 76px; height: 76px; }
  .statistik-num { grid-area: num; align-self: end; }
  .statistik-lbl { grid-area: lbl; align-self: start; margin-top: 2px; }
  .grad-fig-mid { font-size: 1.5rem; }
  .grad-fig-side { font-size: 1rem; }
}
@media (max-width: 575px) {
  .statistik-icon { width: 68px; height: 68px; }
  .grad-fig-mid { font-size: 1.35rem; }
  .grad-fig-side { font-size: 0.9rem; }
  .statistik-card { column-gap: 18px; padding: 18px 20px; }
  .statistik-num { font-size: 2rem; }
  .statistik-lbl { font-size: 0.78rem; }
}

/* ---- Maklumat Dewan ---- */
.maklumat-dewan-ribbon-text { display: block; line-height: 1.35; text-wrap: balance; }

/* Tinggi kad flip TETAP (260/220/240px) → teks bahagian belakang terpotong bila
   skrin 320px, font iOS dibesarkan (Dynamic Type) atau ayat dikemaskini.
   Ganti dengan teknik grid: depan & belakang bertindih dalam 1 sel, jadi tinggi
   kad = yang tertinggi antara keduanya. min-height kekalkan rupa asal. */
.flip-card { height: auto; -webkit-tap-highlight-color: transparent; }
.flip-card-inner { display: grid; height: auto; min-height: 260px; }
.flip-card-front, .flip-card-back { position: relative; inset: auto; grid-area: 1 / 1; }
.flip-card-front { padding-bottom: 46px; }      /* ruang untuk "Klik untuk ringkasan" */
.flip-card-back { padding: 30px 22px; }
@media (max-width: 900px) { .flip-card { height: auto; } .flip-card-inner { min-height: 220px; } }
@media (max-width: 575px) {
  .flip-card { height: auto; }
  .flip-card-inner { min-height: 240px; }
  .flip-card-front { padding: 24px 18px 46px; }
  .flip-card-back { padding: 26px 18px; }
}

/* ==========================================================================
   LOKASI & PETA MAJLIS — modulLokasiMajlis.cfm
   Same ribbon-title treatment as Lensa/Statistik/Maklumat Dewan above.
   (This block was missing entirely — the module's markup already used
   .lokasi-ribbon / .lokasi-ribbon-text, but nothing in the CSS defined
   them, so the browser fell back to plain unstyled text instead of the
   gradient ribbon banner.)
   ========================================================================== */
.lokasi-section { padding: 10px 0 46px; }

.lokasi-ribbon {
  position: relative;
  width: 100%;
  background: var(--gradient-primary);
  padding: 16px 20px;
  text-align: center;
  box-shadow: var(--shadow-md);
  margin-bottom: 34px;
}
.lokasi-ribbon::before,
.lokasi-ribbon::after {
  content: "";
  position: absolute; top: 100%;
  width: 0; height: 0;
  border-style: solid;
}
.lokasi-ribbon::before { left: 0; border-width: 10px 0 0 20px; border-color: var(--color-maroon-deep) transparent transparent transparent; }
.lokasi-ribbon::after  { right: 0; border-width: 10px 20px 0 0; border-color: var(--color-maroon-deep) transparent transparent transparent; }

.lokasi-ribbon-text {
  display: inline-flex; align-items: center; gap: 12px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  /* Same 20px/800/3px family as .lensa-ribbon-text / .statistik-ribbon-title
     so all four section ribbons read as one consistent set. */
  font-size: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.lokasi-ribbon-text i { color: var(--color-secondary); font-size: 20px; }

/* Phones — ribbon text scales down a touch, matching the other three */
@media (max-width: 575px) {
  .lokasi-ribbon-text { font-size: 15px; letter-spacing: 1.5px; }
}


/* ==========================================================================
   FIX TABLET & MOBILE SAHAJA (<=1199px) — DESKTOP TAK TERKESAN
   Punca "gerak-gerak" / halaman zoom in-out di Chrome Android:
   1) Ada elemen yang lebih lebar daripada skrin -> Chrome "shrink-to-fit"
      (zoom out sikit) lepas tu snap balik. overflow-x:hidden pada <body>
      sahaja TAK cukup di mobile -> guna overflow-x:clip (tak cipta scroll
      container, jadi sticky/navbar tak rosak).
   2) background-attachment:fixed + posisi guna 'vh' -> watermark topi konvo
      repaint & lompat bila address bar naik/turun.
   ========================================================================== */
@media (max-width: 1199px), (pointer: coarse) {
  html { max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { max-width: 100%; overflow-x: clip; background-attachment: scroll; background-position: center 60svh; }
  main, section, .hero-umk, .hero-static-slide { max-width: 100%; }
  .notif-toast { right: 12px; max-width: calc(100vw - 24px); }
}

/* --------------------------------------------------------------------------
   PUNCA UTAMA GERAK-GERAK (footer.cfm): kilauan .ftr-rule::after bergerak
   translateX(460%) sehingga ~123% lebar footer -> halaman jadi lebih lebar
   daripada skrin, dan lebar itu "berdenyut" mengikut animasi 7s -> Chrome
   tablet/phone zoom in-out. Kita kurung overflow mendatar pada footer.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px), (pointer: coarse) {
  footer.footer-umk.ftr { overflow-x: hidden; overflow-x: clip; } /* hidden = sandaran iPad/iOS lama (<16) yang tak faham 'clip' */
}

/* --------------------------------------------------------------------------
   KAD JADUAL SIDANG — tablet (576-991px) melekat kiri
   Punca: "margin: 0 auto" dalam @media (max-width:991px) (baris ~1131) kalah
   dengan "margin: 18px 0 0" pada .hero-sidang yang ditulis KEMUDIAN (baris
   ~1169) -> kad tak jadi tengah. Ditimpa semula di sini (selepas kedua-duanya).
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .hero-sidang { margin: 18px auto 0; }
}


/* ==========================================================================
   SEMAKAN iPad (potret 744-834px, landscape 1024-1194px) — tablet/mobile sahaja
   ========================================================================== */
@media (max-width: 1199px), (pointer: coarse) {
  /* 1) Safari iPadOS 15-17 hanya faham -webkit-backdrop-filter. Tanpa awalan ni
        kad Jadual Sidang, badge tarikh/lokasi & kotak countdown hilang kesan
        "kaca kabur" (frosted) di iPad. Nilai blur sama macam asal. */
  .hero-sidang      { -webkit-backdrop-filter: blur(2px); }
  .hero-info-badge  { -webkit-backdrop-filter: blur(8px); }
  .countdown-box    { -webkit-backdrop-filter: blur(10px); }

  /* 2) Elak zoom bila ketuk dua kali pantas (flip card, butang, pautan) di iPad */
  a, button, [role="button"], .flip-card { touch-action: manipulation; }
}

/* 3) Skrin sentuh (iPad tanpa trackpad): :hover "tersangkut" selepas ketuk —
      kad kekal terangkat/membesar. Matikan pergerakan hover pada peranti
      sentuh sahaja; iPad + trackpad/mouse & desktop tak terkesan. */
@media (hover: none) {
  .card-umk:hover,
  .statistik-card:hover,
  .lensa-tile:hover,
  .quick-menu-item:hover,
  .btn-umk-primary:hover,
  .btn-umk-outline:hover { transform: none; }
}

/* ==========================================================================
   COKMAR (MACE) DI TENGAH — mobile, tablet & iPad potret (<=991px)
   Dua punca cokmar nampak senget ke kiri:
   (1) Kotak .hero-mace-visual lebar ikut saiz asal gambar (bukan saiz paparan)
       kerana <img height:100%> bersifat bulat/cyclic.
   (2) Lukisan cokmar dalam PNG (311x532) sendiri tak simetri: kandungan
       sebenar hanya x=8..207, pusatnya x=107.5 sedangkan pusat kanvas x=155.5
       -> ada ruang lutsinar ~48px di kanan. Ukuran pada tinggi 532px.
   Penyelesaian: kotak mengecut tepat ikut cokmar (img diberi tinggi sebenar),
   kemudian kotak digerakkan ke kanan sebanyak 48/532 = 9.02% daripada
   tinggi cokmar (skala ikut saiz skrin, jadi sentiasa tepat). Kilauan, sparkle
   & glow ikut sekali kerana semuanya berpandukan kotak yang sama.
   --mace-nudge-x = laras halus tambahan (lalai 0). Desktop & iPad landscape
   (>=992px) tak diubah.
   ========================================================================== */
@media (max-width: 991px) {
  .hero-mace-visual,
  .hero-mace-visual:hover {
    --mace-h: 460px;
    --mace-h: min(460px, 70svh);
    left: 50%; right: auto;
    top: 50%;
    width: auto; height: auto; max-height: none;
    transform: translate(calc(-50% + var(--mace-h) * 0.0902 + var(--mace-nudge-x, 0px)), -50%);
    justify-content: center;
  }
  .hero-mace-visual img {
    height: var(--mace-h, 460px);
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   PUTAR (ROTATE) TABLET — gerak-gerak muncul semula bila landscape
   Tablet landscape lebarnya 1280px+ (cth Galaxy Tab A-series, iPad Pro 12.9")
   jadi LEBIH daripada 1199px -> pembetulan tablet (max-width:1199px) tak
   terpakai. Blok-blok di atas kini terpakai juga pada peranti SENTUH
   (pointer: coarse) tanpa mengira lebar/orientasi. Desktop dgn tetikus
   (pointer: fine) tak terkesan.
   -------------------------------------------------------------------------- */