/* ══════════════════════════════════════════
   PERNAH DI SINI — SMK Negeri 3 Tapung Hulu
   Dark Theme Stylesheet — Consolidated
══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ══════════════════════════
   VARIABLES
══════════════════════════ */
:root {
  color-scheme: dark;
  --bg:          #0D0D0D;
  --bg-raised:   #141414;
  --bg-card:     #1A1A1A;
  --bg-hover:    #202020;
  --border:      #333330;
  --border-gold: #6a5a30;
  --text:        #E8E2D6;
  --text-muted:  #C8BEB0;
  --text-dim:    #8A8070;
  --gold:        #B99B5A;
  --gold-bright: #D4B878;
  --gold-dim:    #7A6535;
  --red:         #C0392B;
  --yellow:      #B8940A;
  --green:       #1E8449;
  --blue:        #1A6DA3;
  --shadow:      #2a2a2a;
  --page-max:    480px;
  --desktop-max: 1200px;
  --desktop-bp:  1024px;
}

/* ══════════════════════════
   RESET & BASE
══════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  overflow-x: hidden;
  animation: pageIn 0.5s cubic-bezier(0.2, 0, 0.4, 1);
  display: flex;
  flex-direction: column;
  padding-bottom: 72px;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.7;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pageOut {
  from { opacity: 1; transform: translateY(0) scale(1);    filter: blur(0px); }
  to   { opacity: 0; transform: translateY(-10px) scale(0.99); filter: blur(1.5px); }
}
body.page-exit {
  animation: pageOut 0.28s cubic-bezier(0.4, 0, 1, 1) forwards !important;
  pointer-events: none;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); }

/* ══════════════════════════
   NAVBAR
══════════════════════════ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #0d0d0d;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
}
.navbar-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}
.navbar-brand {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-style: italic;
  color: var(--gold);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s;
}
.navbar-brand:hover { color: var(--gold-bright); }

.navbar-links-wrap {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.navbar-links-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, #0d0d0d);
  pointer-events: none;
  transition: opacity 0.3s;
}
.navbar-links-wrap.at-end::after { opacity: 0; }

.navbar-links {
  display: flex;
  gap: 2px;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}
.navbar-links::-webkit-scrollbar { display: none; }

.nav-link {
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 11px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s;
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 11px; right: 11px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav-link:hover,
.nav-link.active { color: var(--text); }
.nav-link.active::after,
.nav-link:hover::after { transform: scaleX(1); }

.navbar-scroll-hint {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-dim);
  font-size: 10px;
  pointer-events: none;
  animation: hintPulse 2s ease infinite;
  z-index: 2;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.4; transform: translateY(-50%) translateX(0); }
  50%       { opacity: 1;   transform: translateY(-50%) translateX(2px); }
}

/* ══════════════════════════
   FOOTER NAV
══════════════════════════ */
.footer-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #141414;
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-gold);
  padding: 0 24px;
  z-index: 90;
}
.footer-nav-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  gap: 16px;
}
.footer-prev,
.footer-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.2s;
  white-space: nowrap;
}
.footer-prev:hover,
.footer-next:hover { color: var(--text); }
.footer-prev svg,
.footer-next svg { flex-shrink: 0; transition: transform 0.2s; }
.footer-prev:hover svg { transform: translateX(-3px); }
.footer-next:hover svg { transform: translateX(3px); }

.footer-next {
  background: var(--gold);
  color: var(--bg);
  padding: 8px 18px;
  border-radius: 30px;
  font-weight: 500;
}
.footer-next:hover { background: var(--gold-bright); color: var(--bg); }
.footer-next svg   { opacity: 0.8; }

/* ══════════════════════════
   PAGE WRAPPER
══════════════════════════ */
.page-wrapper {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* ══════════════════════════
   SHARED HERO
   (angkatan, galeri, pesan)
══════════════════════════ */
.hero {
  padding: 48px 24px 36px;
  text-align: center;
}
.hero-eyebrow {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  width: 32px; height: 1px;
  background: var(--border);
}
.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 10vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--text);
}
.hero-title em { font-style: italic; color: var(--gold); }
.hero-sub {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 300px;
  margin: 16px auto 0;
  line-height: 1.75;
}
.hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 8px 20px;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.hero-stat .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border-gold);
}
.hero-stat .sep { width: 1px; height: 12px; background: var(--border); }

/* ══════════════════════════
   SHARED SECTION LABEL
══════════════════════════ */
.block-label,
.section-label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.block-label::before, .block-label::after,
.section-label::before, .section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ══════════════════════════
   SHARED FILTER BUTTONS
══════════════════════════ */
.filter-btn,
.jurusan-filter-btn {
  background: none;
  border: 1px solid var(--border);
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--text-muted);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.filter-btn:hover,
.jurusan-filter-btn:hover  { border-color: var(--border-gold); color: var(--text); }
.filter-btn.active,
.jurusan-filter-btn.active { background: var(--gold); border-color: var(--gold); color: var(--bg); }

.cat-filter-row,
.filter-jurusan {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* ══════════════════════════
   SHARED REACTION COMPONENTS
══════════════════════════ */
.reaction-badge,
.reaction-count {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 7px;
  font-size: 11px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s;
  white-space: nowrap;
}
.reaction-badge:hover,
.reaction-count:hover { border-color: var(--border-gold); }

.emoji-btn,
.emoji-react-btn {
  background: none;
  border: 1px solid transparent;
  font-size: 18px;
  cursor: pointer;
  padding: 3px 5px;
  transition: background 0.15s, transform 0.15s;
  border-radius: 4px;
}
.emoji-btn:hover,
.emoji-react-btn:hover { background: var(--bg-hover); transform: scale(1.2); }

/* ══════════════════════════
   BUTTONS
══════════════════════════ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--bg);
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 15px 32px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  border-radius: 40px;
}
.btn-primary:hover { background: var(--gold-bright); }
.btn-primary svg { transition: transform 0.2s; }
.btn-primary:hover svg { transform: translateX(4px); }

/* ══════════════════════════
   TOAST
══════════════════════════ */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-gold);
  padding: 12px 24px;
  font-size: 12px;
  z-index: 9998;
  transition: transform 0.3s ease;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
  letter-spacing: 0.3px;
  border-radius: 40px;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ══════════════════════════
   MODAL BASE
══════════════════════════ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #181818;
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(8px);
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  max-width: 500px;
  width: 100%;
  padding: 32px;
  position: relative;
  animation: pageIn 0.3s ease;
  border-radius: 24px;
}
.modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 24px 24px 0 0;
}
.modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-style: italic;
  margin-bottom: 6px;
  color: var(--text);
}
.modal-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 4px;
  transition: color 0.2s;
}
.modal-close:hover { color: var(--text); }

/* ══════════════════════════
   FORMS (shared)
══════════════════════════ */
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-field label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 400;
}
.form-field input,
.form-field select,
.form-field textarea {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--text);
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  border-radius: 12px;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-dim); }
.form-field select option { background: var(--bg-card); color: var(--text); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--gold-dim); }

/* ══════════════════════════
   ANIMATIONS (shared)
══════════════════════════ */
@keyframes shimmer   { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes fadeUp    { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes breathe   { 0%,100%{opacity:0.6;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)} }

.fade-up  { opacity: 0; animation: fadeUp 0.8s ease forwards; }
.delay-1  { animation-delay: 0.1s; }
.delay-2  { animation-delay: 0.25s; }
.delay-3  { animation-delay: 0.45s; }
.delay-4  { animation-delay: 0.6s; }


/* ══════════════════════════════════════════
   PAGE: INDEX (landing cover)
══════════════════════════════════════════ */
.index-body {
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  animation: none;
}
.atm-vignette {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, #202020 100%);
  pointer-events: none;
  z-index: 1;
}
.atm-glow {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, #131208 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: breathe 8s ease-in-out infinite;
}
.spine {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--gold-dim) 0%, var(--gold) 40%, var(--gold-dim) 70%, #3d3018 100%);
  z-index: 10;
}
.spine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.12), transparent);
}
.frame {
  position: fixed;
  inset: 18px 18px 18px 24px;
  border: 1px solid #2a2210;
  pointer-events: none;
  z-index: 2;
}
.frame::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid #1a1608;
}
.corner {
  position: absolute;
  width: 20px; height: 20px;
  border-color: var(--gold);
  border-style: solid;
  opacity: 0.5;
}
.corner.tl { top: -1px;    left: -1px;  border-width: 1px 0 0 1px; }
.corner.tr { top: -1px;    right: -1px; border-width: 1px 1px 0 0; }
.corner.bl { bottom: -1px; left: -1px;  border-width: 0 0 1px 1px; }
.corner.br { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.cover {
  position: relative; z-index: 5;
  text-align: center;
  padding: 40px 28px;
  max-width: 320px; width: 100%;
}
.cover-eyebrow {
  font-size: 9px; letter-spacing: 5px; text-transform: uppercase;
  color: var(--gold-dim); margin-bottom: 36px;
  opacity: 0; animation: up 0.9s 0.3s cubic-bezier(0.2,0,0.3,1) forwards;
}
.cover-title {
  font-family: 'Playfair Display', serif; font-weight: 700;
  line-height: 1; letter-spacing: -1px; margin-bottom: 0;
  opacity: 0; animation: up 0.9s 0.55s cubic-bezier(0.2,0,0.3,1) forwards;
}
.cover-title .word1 { font-size: clamp(52px, 14vw, 72px); color: var(--text); display: block; }
.cover-title .word2 { font-size: clamp(52px, 14vw, 72px); color: var(--gold); font-style: italic; display: block; margin-top: -4px; }
.cover-title .word3 { font-size: clamp(28px, 7vw, 38px); color: #a09888; display: block; font-weight: 400; letter-spacing: 2px; margin-top: 4px; }
.cover-rule {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, transparent, var(--gold-dim), transparent);
  margin: 28px auto;
  opacity: 0; animation: up 0.9s 0.85s cubic-bezier(0.2,0,0.3,1) forwards;
}
.cover-school {
  font-size: 11px; font-weight: 300; color: var(--text-dim);
  letter-spacing: 0.3px; line-height: 2;
  opacity: 0; animation: up 0.9s 1.0s cubic-bezier(0.2,0,0.3,1) forwards;
}
.cover-school strong { display: block; color: #C8BEB0; font-weight: 400; font-size: 12px; }

.btn-enter {
  margin-top: 44px;
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 400;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-dim); text-decoration: none; cursor: pointer;
  background: none; border: none; padding: 0;
  opacity: 0; animation: up 0.9s 1.3s cubic-bezier(0.2,0,0.3,1) forwards;
  transition: color 0.4s ease; position: relative;
}
.btn-enter::before {
  content: ''; position: absolute; bottom: -6px; left: 0; right: 0;
  height: 1px; background: var(--gold-dim);
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;
}
.btn-enter:hover { color: var(--gold); }
.btn-enter:hover::before { transform: scaleX(1); background: var(--gold); }
.btn-enter .arrow {
  width: 28px; height: 1px; background: currentColor;
  position: relative; transition: width 0.4s ease;
}
.btn-enter .arrow::after {
  content: ''; position: absolute; right: 0; top: -3px;
  width: 6px; height: 6px;
  border-right: 1px solid currentColor; border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn-enter:hover .arrow { width: 40px; }

.year-stamp {
  position: fixed; bottom: 32px; right: 32px;
  font-family: 'Playfair Display', serif; font-size: 11px; font-style: italic;
  color: var(--text-dim); letter-spacing: 1px; z-index: 10;
  opacity: 0; animation: up 0.9s 1.5s cubic-bezier(0.2,0,0.3,1) forwards;
}
.cover-whisper {
  position: fixed; bottom: 32px; left: 32px;
  font-size: 9px; color: var(--text-dim); letter-spacing: 0.5px; font-style: italic;
  max-width: 160px; line-height: 1.8; z-index: 10;
  opacity: 0; animation: up 0.9s 1.6s cubic-bezier(0.2,0,0.3,1) forwards;
  display: none;
}

@keyframes up { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }


/* ══════════════════════════════════════════
   PAGE: PEMBUKA
══════════════════════════════════════════ */
.pembuka-hero {
  height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 0 28px;
  position: relative; overflow: hidden;
}
.hero-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: 500px; height: 300px;
  background: radial-gradient(ellipse, #161408 0%, transparent 70%);
  pointer-events: none;
  animation: pembuka-breathe 10s ease-in-out infinite;
}
@keyframes pembuka-breathe {
  0%,100% { opacity:0.5; transform:translate(-50%,-60%) scale(1); }
  50%     { opacity:1;   transform:translate(-50%,-62%) scale(1.15); }
}
.hero-pre {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 300;
  letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim);
  display: block; margin-bottom: 28px;
  opacity: 0; animation: fadeIn 1s 0.3s forwards;
}
.hero-main {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 7.5vw, 52px); font-weight: 600;
  line-height: 1.25; color: var(--text);
  display: block; opacity: 0; animation: fadeIn 1.2s 0.7s forwards;
}
.hero-main em { font-style: italic; color: var(--gold); }
.hero-main .strike { position: relative; color: var(--text-muted); }
.hero-main .strike::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--text-dim);
  transform: scaleX(0); animation: strikeIn 0.6s 2s ease forwards;
}
@keyframes strikeIn { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.hero-rule {
  width: 1px; height: 80px;
  background: linear-gradient(to bottom, var(--gold-dim), transparent);
  margin: 48px auto 0;
  opacity: 0; animation: fadeIn 1s 1.4s forwards;
}
.hero-scroll {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim);
  opacity: 0; animation: fadeIn 1s 2.2s forwards, scrollBob 2.4s 2.2s ease-in-out infinite;
}
@keyframes scrollBob {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%     { transform:translateX(-50%) translateY(4px); }
}
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.prose-wrap {
  max-width: var(--page-max); width: 100%; margin: 0 auto; padding: 80px 24px 60px; box-sizing: border-box;
}
.prose-intro {
  font-size: 9px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 56px;
  display: flex; align-items: center; gap: 16px;
}
.prose-intro::after { content:''; flex:1; height:1px; background:var(--border); }

.prose-block {
  margin-bottom: 36px; opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.prose-block.visible { opacity: 1; transform: translateY(0); }

.prose-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(16px, 4vw, 19px); font-weight: 400;
  line-height: 1.85; color: #D0C8B8;
}
.prose-text em    { color: var(--text); font-style: italic; }
.prose-text .quiet { color: var(--text-dim); font-size: 0.9em; }

.prose-quote {
  margin: 52px 0; padding: 0 0 0 20px;
  border-left: 1px solid var(--gold-dim);
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.prose-quote.visible { opacity: 1; transform: translateY(0); }
.prose-quote p {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 4.5vw, 24px); font-style: italic;
  color: var(--text); line-height: 1.6;
}
.prose-quote span {
  display: block; margin-top: 10px;
  font-size: 10px; letter-spacing: 2px; color: var(--text-dim);
  font-family: 'DM Sans', sans-serif; font-style: normal;
}

.prose-ending {
  margin-top: 60px; text-align: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.prose-ending.visible { opacity: 1; transform: translateY(0); }
.prose-ending .big {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 6vw, 32px); font-weight: 600; font-style: italic;
  color: var(--gold); display: block; margin-bottom: 12px;
}
.prose-ending .small { font-size: 11px; letter-spacing: 2px; color: var(--text-dim); text-transform: uppercase; }

.numbers-section { padding: 0 24px 80px; max-width: var(--page-max); width: 100%; margin: 0 auto; box-sizing: border-box; }
.numbers-label {
  font-size: 9px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 40px;
  display: flex; align-items: center; gap: 16px;
}
.numbers-label::after { content:''; flex:1; height:1px; background:var(--border); }
.numbers-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--border); border: 2px solid var(--border);
}
.number-item {
  background: var(--bg); padding: 28px 20px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.number-item.visible { opacity: 1; transform: translateY(0); }
.number-item:nth-child(1) { transition-delay: 0s; }
.number-item:nth-child(2) { transition-delay: 0.12s; }
.number-item:nth-child(3) { transition-delay: 0.24s; }
.number-item:nth-child(4) { transition-delay: 0.36s; }
.n-val { font-family:'Playfair Display',serif; font-size:48px; font-weight:700; color:var(--gold); line-height:1; margin-bottom:8px; }
.n-context { font-size:11px; color:var(--text-muted); line-height:1.6; }
.n-context strong { display:block; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); font-weight:400; margin-bottom:4px; }

.places-section { padding: 60px 24px; max-width: var(--page-max); width: 100%; margin: 0 auto; border-top: 1px solid var(--border); box-sizing: border-box; }
.places-header { margin-bottom:64px; opacity:0; transform:translateY(16px); transition:opacity 0.8s,transform 0.8s; }
.places-header.visible { opacity:1; transform:translateY(0); }
.places-eyebrow { font-size:9px; letter-spacing:4px; text-transform:uppercase; color:var(--text-dim); margin-bottom:16px; }
.places-title { font-family:'Playfair Display',serif; font-size:clamp(24px,6vw,36px); font-weight:600; color:var(--text); line-height:1.2; }
.places-title em { color:var(--gold); font-style:italic; }
.memory-list { display:flex; flex-direction:column; gap:0; }
.memory-item {
  padding:28px 0; border-bottom:1px solid var(--border);
  opacity:0; transform:translateY(16px); transition:opacity 0.7s ease,transform 0.7s ease;
}
.memory-item.visible { opacity:1; transform:translateY(0); }
.memory-item:nth-child(1){transition-delay:0s} .memory-item:nth-child(2){transition-delay:0.1s}
.memory-item:nth-child(3){transition-delay:0.2s} .memory-item:nth-child(4){transition-delay:0.3s}
.memory-item:nth-child(5){transition-delay:0.4s}
.memory-place { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--text-dim); margin-bottom:10px; }
.memory-place i { margin-right:6px; color:var(--gold-dim); }
.memory-text { font-family:'Playfair Display',serif; font-size:clamp(15px,3.5vw,17px); font-style:italic; color: #C0B8A8; line-height:1.7; }
.memory-year { margin-top:10px; font-size:9px; letter-spacing:1.5px; color:var(--text-dim); }
.places-closing { margin-top:64px; text-align:center; opacity:0; transform:translateY(16px); transition:opacity 0.8s ease,transform 0.8s ease; }
.places-closing.visible { opacity:1; transform:translateY(0); }
.places-closing p { font-size:13px; color:var(--text-dim); font-style:italic; letter-spacing:0.5px; }

.nav-section { padding:40px 24px 20px; max-width:var(--page-max); width:100%; margin:0 auto; box-sizing:border-box; }
.nav-section-label {
  font-size:9px; letter-spacing:4px; text-transform:uppercase; color:var(--text-dim);
  margin-bottom:28px; display:flex; align-items:center; gap:16px;
}
.nav-section-label::after { content:''; flex:1; height:1px; background:var(--border); }
.cards-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--border); border:2px solid var(--border); }
.nav-card {
  background:var(--bg); padding:22px 18px; text-decoration:none; color:var(--text);
  display:flex; flex-direction:column; gap:8px;
  opacity:0; transform:translateY(12px);
  transition:background 0.25s,opacity 0.6s ease,transform 0.6s ease;
}
.nav-card.visible { opacity:1; transform:translateY(0); }
.nav-card:nth-child(1){transition-delay:0s} .nav-card:nth-child(2){transition-delay:0.1s}
.nav-card:nth-child(3){transition-delay:0.2s} .nav-card:nth-child(4){transition-delay:0.3s}
.nav-card:hover { background:var(--bg-hover); }
.nc-tag  { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); }
.nc-title { font-family:'Playfair Display',serif; font-size:18px; font-style:italic; color:var(--text); }
.nc-desc  { font-size:11px; color:var(--text-muted); line-height:1.6; flex:1; }
.nc-cta   { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:8px; }
.nc-cta .arr { width:16px; height:1px; background:currentColor; position:relative; transition:width 0.3s; }
.nc-cta .arr::after { content:''; position:absolute; right:0; top:-3px; width:5px; height:5px; border-right:1px solid currentColor; border-top:1px solid currentColor; transform:rotate(45deg); }
.nav-card:hover .arr { width:24px; }


/* ══════════════════════════════════════════
   PAGE: ANGKATAN
══════════════════════════════════════════ */
.filter-block { padding: 32px 16px 0; }

.card-semua {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-dim);
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
  margin-bottom: 10px;
}
.card-semua.active { border-left-color: var(--gold); background: var(--bg-raised); }
.card-semua:hover  { border-color: var(--border-gold); }
.cs-label { font-family:'Playfair Display',serif; font-size:15px; font-style:italic; color:var(--text); }
.cs-sub   { font-size:11px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; margin-top:2px; }
.cs-count { font-family:'Playfair Display',serif; font-size:24px; color:var(--gold); line-height:1; }

.jurusan-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.jurusan-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid transparent;
  padding: 22px 16px 18px;
  text-align: center; cursor: pointer;
  transition: border-color 0.25s, background 0.25s, transform 0.2s;
  position: relative; overflow: hidden;
}
.jurusan-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:48px;
  opacity:0; transition:opacity 0.3s;
}
.jurusan-card[data-jurusan="TSM"]::before  { background:radial-gradient(ellipse at top,#2a1210,transparent); }
.jurusan-card[data-jurusan="MPLB"]::before { background:radial-gradient(ellipse at top,#231d04,transparent); }
.jurusan-card[data-jurusan="ATP"]::before  { background:radial-gradient(ellipse at top,#0a1f12,transparent); }
.jurusan-card[data-jurusan="APHP"]::before { background:radial-gradient(ellipse at top,#0a1828,transparent); }
.jurusan-card:hover { transform:translateY(-2px); }
.jurusan-card[data-jurusan="TSM"]:hover,
.jurusan-card[data-jurusan="TSM"].active  { border-top-color:#E05C50; border-color:#5a2420; background:#1a0d0c; }
.jurusan-card[data-jurusan="MPLB"]:hover,
.jurusan-card[data-jurusan="MPLB"].active { border-top-color:#D4AC0D; border-color:#4a3d06; background:#181400; }
.jurusan-card[data-jurusan="ATP"]:hover,
.jurusan-card[data-jurusan="ATP"].active  { border-top-color:#27AE60; border-color:#1a4d2e; background:#0a1a10; }
.jurusan-card[data-jurusan="APHP"]:hover,
.jurusan-card[data-jurusan="APHP"].active { border-top-color:#3498DB; border-color:#1a3d5a; background:#0a1520; }
.jurusan-card.active::before { opacity:1; }

.jc-name { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:var(--text); margin-bottom:6px; letter-spacing:0.5px; }
.jc-wali { font-size:11px; color:var(--text-muted); line-height:1.5; min-height:32px; display:flex; align-items:center; justify-content:center; }
.jc-count { font-size:13px; font-weight:500; margin-top:12px; color:var(--gold-dim); transition:color 0.3s; letter-spacing:0.3px; }
.jurusan-card[data-jurusan="TSM"].active  .jc-count { color:#E05C50; }
.jurusan-card[data-jurusan="MPLB"].active .jc-count { color:#D4AC0D; }
.jurusan-card[data-jurusan="ATP"].active  .jc-count { color:#27AE60; }
.jurusan-card[data-jurusan="APHP"].active .jc-count { color:#3498DB; }

.kajur-block { padding:28px 16px 0; }
.kajur-grid  { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.kajur-card  { background:var(--bg-card); border:1px solid var(--border); padding:14px 12px; text-align:center; transition:border-color 0.2s; }
.kajur-card:hover { border-color:var(--border-gold); }
.kajur-j       { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-dim); margin-bottom:6px; }
.kajur-nama    { font-size:12px; color:var(--text); line-height:1.5; }
.kajur-jabatan { font-size:10px; color:var(--text-dim); margin-top:3px; }

.reset-wrap { padding:20px 16px 0; display:flex; justify-content:center; }
.reset-btn {
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:1px solid var(--border); padding:7px 20px;
  font-family:'DM Sans',sans-serif; font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-dim); cursor:pointer; transition:border-color 0.2s,color 0.2s;
}
.reset-btn:hover { border-color:var(--border-gold); color:var(--text-muted); }

.alpha-block { padding:24px 16px 0; }
.alpha-grid  { display:grid; grid-template-columns:repeat(9,1fr); gap:4px; }
.alpha-btn   {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  background:var(--bg-card); border:1px solid var(--border);
  font-size:10px; color:var(--text-dim); cursor:pointer;
  transition:all 0.15s; font-family:'DM Sans',sans-serif;
}
.alpha-btn:hover  { border-color:var(--border-gold); color:var(--text-muted); }
.alpha-btn.active { background:var(--gold); border-color:var(--gold); color:var(--bg); font-weight:500; }
.alpha-btn.dimmed { opacity:0.25; pointer-events:none; }

.students-block { padding:20px 16px 80px; }
.students-grid  { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@keyframes colorSwitch { from{opacity:0.5;transform:scale(0.97)} to{opacity:1;transform:scale(1)} }
.students-grid.switching .student-card { animation:colorSwitch 0.3s ease forwards; }

.student-card {
  background:var(--bg-card); border:1px solid var(--border); border-left:3px solid var(--gold-dim);
  padding:14px 12px; transition:border-color 0.3s,background 0.3s,transform 0.2s;
}
.student-card:hover { transform:translateY(-2px); border-color:var(--border-gold); border-left-color:var(--gold); }
.student-card.colored-TSM  { border-left-color:#E05C50; }
.student-card.colored-MPLB { border-left-color:#D4AC0D; }
.student-card.colored-ATP  { border-left-color:#27AE60; }
.student-card.colored-APHP { border-left-color:#3498DB; }
.student-card.colored-TSM:hover  { border-color:#6a2e2a; }
.student-card.colored-MPLB:hover { border-color:#5a4a0a; }
.student-card.colored-ATP:hover  { border-color:#1e5c36; }
.student-card.colored-APHP:hover { border-color:#1e4a6e; }

.student-avatar {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-size:14px; font-weight:700;
  color:var(--bg); background:var(--gold-dim); margin-bottom:10px; transition:background 0.3s;
}
.student-card.colored-TSM  .student-avatar { background:#E05C50; }
.student-card.colored-MPLB .student-avatar { background:#D4AC0D; }
.student-card.colored-ATP  .student-avatar { background:#27AE60; }
.student-card.colored-APHP .student-avatar { background:#3498DB; }

.student-name {
  font-size:12px; color:var(--text); line-height:1.4; margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.student-meta { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.student-id   { font-size:9px; color:var(--text-dim); letter-spacing:0.5px; }
.student-badge {
  font-size:9px; letter-spacing:1px; text-transform:uppercase;
  padding:2px 6px; background:#1e1a0f; color:var(--gold-dim);
  border:1px solid #2e2510; transition:all 0.3s;
}
.student-card.colored-TSM  .student-badge { background:#2a1210; color:#E05C50; border-color:#3d1a18; }
.student-card.colored-MPLB .student-badge { background:#231d04; color:#D4AC0D; border-color:#332b06; }
.student-card.colored-ATP  .student-badge { background:#0a1f12; color:#27AE60; border-color:#102d1a; }
.student-card.colored-APHP .student-badge { background:#0a1828; color:#3498DB; border-color:#0f2438; }

.skeleton-card { background:var(--bg-card); border:1px solid var(--border); border-left:3px solid var(--bg-hover); padding:14px 12px; animation:shimmer 1.4s infinite; }
.skel { background:var(--bg-hover); border-radius:2px; }
.empty-state { grid-column:span 2; text-align:center; padding:48px 24px; background:var(--bg-card); border:1px dashed var(--border); }
.empty-state p { font-size:13px; color:var(--text-muted); margin-bottom:16px; }

.site-footer { background:var(--bg-raised); border-top:1px solid var(--border); padding:36px 24px; text-align:center; }
.site-footer p { font-family:'Playfair Display',serif; font-style:italic; font-size:14px; color:var(--text); margin-bottom:4px; }
.site-footer small { font-size:10px; color:var(--text-dim); letter-spacing:1.5px; text-transform:uppercase; }
.site-footer .gold-line { width:28px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:12px auto; }


/* ══════════════════════════════════════════
   PAGE: GALERI
══════════════════════════════════════════ */
.galeri-main { padding: 0 16px 100px; overflow-x: hidden; }

.galeri-sep { display:flex; align-items:center; gap:16px; margin:0 0 20px; }
.galeri-sep + .galeri-sep,
.load-more-btn + .galeri-sep { margin-top:40px; }
.galeri-sep span { font-family:'Playfair Display',serif; font-size:16px; font-style:italic; color:var(--text); white-space:nowrap; }
.galeri-sep::before { content:''; width:20px; height:1px; background:var(--border); flex-shrink:0; }
.galeri-sep::after  { content:''; flex:1; height:1px; background:var(--border); }

/* Galeri jurusan filter */
#admin-jurusan-filter-container { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
#admin-jurusan-filter-container .jurusan-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.jf-semua {
  width:100%; background:var(--bg-card); border:1px solid var(--border);
  border-left:3px solid var(--gold-dim); padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; transition:border-color 0.25s,background 0.25s;
  border-top:none; text-align:left; transform:none !important;
}
.jf-semua:hover  { border-color:var(--border-gold); }
.jf-semua.active { border-left-color:var(--gold); background:var(--bg-raised); }
.jf-semua-label  { font-family:'Playfair Display',serif; font-size:14px; font-style:italic; color:var(--text); }
.jf-semua-count  { font-size:11px; color:var(--gold-dim); }
.jf-semua.active .jf-semua-count { color:var(--gold); }

.jurusan-card {
  background:var(--bg-card); border:1px solid var(--border); border-top:2px solid transparent;
  padding:14px 12px; text-align:center; cursor:pointer;
  transition:border-color 0.25s,background 0.25s,transform 0.2s;
}
.jurusan-card:hover { transform:translateY(-1px); border-color:var(--border-gold); }
.jurusan-card .jc-name { font-family:'Playfair Display',serif; font-size:16px; font-weight:700; color:var(--text); margin-bottom:4px; }
.jurusan-card .count   { font-size:11px; color:var(--text-dim); transition:color 0.25s; }
.jurusan-card[data-jurusan="TSM"]:hover,
.jurusan-card[data-jurusan="TSM"].active  { border-top-color:#E05C50; border-color:#5a2420;  background:#170b0a; }
.jurusan-card[data-jurusan="MPLB"]:hover,
.jurusan-card[data-jurusan="MPLB"].active { border-top-color:#D4AC0D; border-color:#4a3d06; background:#161200; }
.jurusan-card[data-jurusan="ATP"]:hover,
.jurusan-card[data-jurusan="ATP"].active  { border-top-color:#27AE60; border-color:#1a4d2e;  background:#08150d; }
.jurusan-card[data-jurusan="APHP"]:hover,
.jurusan-card[data-jurusan="APHP"].active { border-top-color:#3498DB; border-color:#1a3d5a; background:#08121e; }
.jurusan-card[data-jurusan="TSM"].active  .count { color:#E05C50; }
.jurusan-card[data-jurusan="MPLB"].active .count { color:#D4AC0D; }
.jurusan-card[data-jurusan="ATP"].active  .count { color:#27AE60; }
.jurusan-card[data-jurusan="APHP"].active .count { color:#3498DB; }

/* ── PHOTO GRID: simple 2-col grid, fixed ratio ── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  min-width: 0;
}
.photo-grid .photo-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.photo-item {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:8px; position:relative;
  transition:border-color 0.2s,transform 0.2s,box-shadow 0.2s;
}
.photo-item:hover { transform:translateY(-2px); border-color:var(--border-gold); box-shadow:0 6px 20px #3a3a3a; }

.photo-img-wrap {
  position: relative; cursor: pointer; overflow: hidden;
  border-radius: 8px 8px 0 0; background: var(--bg-raised);
  aspect-ratio: 4 / 3;
}
.photo-img-wrap img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; transition: transform 0.35s ease;
}
.photo-item:hover .photo-img-wrap img { transform: scale(1.03); }

.photo-img-wrap.img-error {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:24px 16px; min-height:120px; background:var(--bg-raised);
}
.photo-img-wrap.img-error::before {
  content:''; display:block; width:36px; height:36px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234A4438' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0.4;
}
.photo-img-wrap.img-error::after { content:'Gagal dimuat'; font-size:11px; color:var(--text-dim); letter-spacing:0.3px; }

.img-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:24px 16px; min-height:120px; background:var(--bg-raised);
  color:var(--text-dim); font-size:11px; letter-spacing:0.3px; text-align:center; cursor:pointer;
}
.photo-cat-badge {
  position:absolute; top:7px; left:7px; font-size:9px; letter-spacing:1.2px; text-transform:uppercase;
  background:#292929; backdrop-filter:blur(4px); color:var(--gold);
  padding:2px 8px; border:1px solid #3d3018; pointer-events:none;
}
.photo-info { padding:10px 10px 0; background:var(--bg-card); display:flex; flex-direction:column; gap:6px; }
.photo-info-main { flex:1; min-width:0; }
.photo-info-title { font-size:11px; color:var(--text); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.photo-info-meta  { display:flex; align-items:center; gap:6px; }
.photo-username   { font-size:10px; color:var(--gold-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.photo-time       { font-size:9px; color:var(--text-dim); white-space:nowrap; flex-shrink:0; }
.photo-actions-row { display:flex; align-items:center; gap:4px; padding-bottom:8px; min-height:28px; }
.photo-like-btn { display:inline-flex; align-items:center; gap:3px; background:none; border:1px solid var(--border); font-size:11px; color:var(--text-muted); padding:2px 8px; cursor:pointer; transition:border-color 0.15s,color 0.15s,background 0.15s; flex-shrink:0; }
.photo-like-btn:hover { border-color:var(--border-gold); color:var(--text); }
.photo-like-btn.liked { background:var(--gold); border-color:var(--gold); color:var(--bg); }
.photo-like-btn span  { font-size:10px; }
.photo-reactions { display:flex; gap:4px; flex-wrap:wrap; flex:1; min-width:0; }
.react-card-trigger { background:none; border:1px dashed var(--border); padding:2px 7px; font-size:13px; cursor:pointer; transition:border-color 0.15s; flex-shrink:0; line-height:1.4; }
.react-card-trigger:hover { border-color:var(--gold-dim); }
.reaction-picker { display:flex; gap:2px; padding:6px 8px; margin:0 -10px; background:var(--bg-raised); border-top:1px solid var(--border); justify-content:center; }
.reaction-picker.hidden { display:none; }

.load-more-btn {
  display:none; align-items:center; justify-content:center; gap:8px;
  background:none; border:1px solid var(--border-gold); color:var(--gold);
  font-family:'DM Sans',sans-serif; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  padding:10px 28px; cursor:pointer; transition:background 0.2s,color 0.2s; margin:0 auto 24px;
}
.load-more-btn:hover { background:var(--gold); color:var(--bg); }

.upload-trigger {
  display:flex; align-items:center; gap:16px;
  border:1px dashed var(--border-gold); padding:20px; margin-bottom:20px;
  background:var(--bg-card); cursor:pointer; transition:border-color 0.2s,background 0.2s;
}
.upload-trigger:hover { border-color:var(--gold); background:var(--bg-raised); }
.upload-trigger svg   { flex-shrink:0; }
.upload-trig-title    { font-size:13px; color:var(--gold); font-weight:400; margin-bottom:2px; }
.upload-trig-sub      { font-size:12px; color:var(--text-muted); line-height:1.6; }
#quota-info           { font-size:11px; color:var(--text-dim); margin-top:5px; }

/* Photo modal */
.modal-overlay       { display:none !important; }
.modal-overlay.open  { display:flex !important; }
#photo-modal { position:fixed; inset:0; background:#111111; z-index:500; align-items:center; justify-content:center; }
.photo-modal-inner { display:flex; flex-direction:column; width:100%; height:100%; max-width:100vw; max-height:100vh; cursor:default; position:relative; }
.modal-close-btn { position:absolute; top:14px; right:14px; z-index:10; width:34px; height:34px; background:#2a2a2a; border:1px solid rgba(255,255,255,0.15); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:rgba(255,255,255,0.7); transition:background 0.2s,color 0.2s; }
.modal-close-btn:hover { background:rgba(255,255,255,0.15); color:#fff; }
.zoom-indicator { position:absolute; top:14px; left:14px; z-index:10; font-size:11px; letter-spacing:1px; color:rgba(255,255,255,0.6); background:#303030; padding:3px 9px; border-radius:20px; opacity:0; transition:opacity 0.25s; pointer-events:none; font-family:'DM Sans',sans-serif; }
.zoom-indicator.visible { opacity:1; }
.modal-zoom-hint { position:absolute; bottom:60px; left:50%; transform:translateX(-50%); font-size:10px; letter-spacing:0.5px; color:rgba(255,255,255,0.35); white-space:nowrap; pointer-events:none; font-family:'DM Sans',sans-serif; transition:opacity 0.5s; }
.modal-zoom-hint.hidden { opacity:0; }
.modal-img-container { flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:0; }
/* Skeleton saat gambar loading di modal */
.modal-img-container.img-loading::before {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 100%);
  background-size: 200% 100%;
  animation: modalShimmer 1.2s infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes modalShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
#modal-image { max-width:100%; max-height:100%; object-fit:contain; display:block; transform-origin:0 0; user-select:none; -webkit-user-drag:none; transition:transform 0.15s ease; }
#modal-image.is-interacting { transition:none; }
.modal-nav-row {
  position:absolute;
  bottom:62px;
  left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
  padding:0 10px;
  opacity:1;
  transition:opacity 0.4s ease;
}
.modal-nav-row.hidden { opacity:0; pointer-events:none; }
.modal-nav-btn { width:38px; height:38px; background:#2d2d2d; border:1px solid rgba(255,255,255,0.15); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; pointer-events:all; font-size:24px; color:rgba(255,255,255,0.75); transition:background 0.2s,color 0.2s; line-height:1; }
.modal-nav-btn:hover { background:var(--gold); color:var(--bg); border-color:var(--gold); }
#modal-info { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:#141414; border-top:1px solid #2a2410; flex-shrink:0; min-height:50px; backdrop-filter:blur(8px); }
.modal-info-left { flex:1; min-width:0; }
.modal-info-title { font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4; }
.modal-info-sub   { display:flex; align-items:center; gap:8px; margin-top:2px; flex-wrap:nowrap; overflow:hidden; }
.modal-info-user  { font-size:11px; color:var(--gold-dim); white-space:nowrap; }
.modal-info-time  { font-size:10px; color:var(--text-dim); white-space:nowrap; }
.modal-info-views { font-size:10px; color:var(--text-dim); white-space:nowrap; }
.modal-info-right { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.modal-react-badges { display:flex; align-items:center; gap:4px; flex-wrap:nowrap; }
.modal-react-badge  { font-size:12px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:2px 8px; color:rgba(255,255,255,0.75); white-space:nowrap; }
.modal-like-btn { display:inline-flex; align-items:center; gap:4px; background:none; border:1px solid rgba(255,255,255,0.12); border-radius:20px; font-size:13px; cursor:pointer; padding:3px 10px; color:rgba(255,255,255,0.6); transition:background 0.15s,border-color 0.15s,color 0.15s; white-space:nowrap; }
.modal-like-btn span  { font-size:11px; }
.modal-like-btn:hover { background:rgba(255,255,255,0.1); color:#fff; }
.modal-like-btn.liked { border-color:var(--gold-dim); color:var(--gold); }
.modal-react-trigger { background:none; border:1px dashed rgba(255,255,255,0.2); border-radius:4px; font-size:16px; cursor:pointer; padding:3px 7px; line-height:1.4; transition:border-color 0.15s,background 0.15s; flex-shrink:0; }
.modal-react-trigger:hover { border-color:var(--gold-dim); background:rgba(255,255,255,0.05); }
.modal-react-picker { position:absolute; bottom:52px; right:14px; background:var(--bg-card); border:1px solid var(--border-gold); border-radius:8px; padding:8px 10px; display:flex; gap:4px; z-index:20; box-shadow:0 4px 20px #303030; }
.modal-react-picker.hidden { display:none; }
.modal-react-picker .emoji-btn { font-size:22px; padding:4px 6px; border-radius:6px; }

/* Upload modal */
.upload-modal-overlay       { display:none !important; }
.upload-modal-overlay.open  { display:flex !important; }
#upload-modal { position:fixed; inset:0; background:#1a1a1a; z-index:600; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
.upload-box { position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; max-width:480px; width:90%; padding:28px; max-height:90vh; overflow-y:auto; }
.upload-box::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.upload-box-title { font-family:'Playfair Display',serif; font-size:20px; font-style:italic; color:var(--text); margin-bottom:4px; }
#upload-subtitle  { font-size:11px; color:var(--text-muted); margin-bottom:20px; }
#upload-preview   { display:none; width:100%; max-height:180px; object-fit:cover; margin-bottom:16px; }
.drag-drop-area   { border:1px dashed var(--border-gold); padding:28px 16px; text-align:center; cursor:pointer; transition:border-color 0.2s,background 0.2s; background:var(--bg-raised); margin-bottom:20px; }
.drag-drop-area:hover,
.drag-drop-area.drag-over { border-color:var(--gold); background:var(--bg-hover); }
.drag-drop-area p     { font-size:13px; color:var(--text-muted); margin-top:8px; line-height:1.6; }
.drag-drop-area small { font-size:11px; color:var(--text-dim); }
.pick-file-btn { margin-top:12px; display:inline-flex; align-items:center; gap:6px; background:var(--gold); border:none; color:var(--bg); font-family:'DM Sans',sans-serif; font-size:11px; letter-spacing:1px; text-transform:uppercase; padding:8px 20px; cursor:pointer; transition:background 0.2s; }
.pick-file-btn:hover { background:var(--gold-bright); }
.upload-field { margin-bottom:14px; }
.upload-label { display:block; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
.upload-field input,
.upload-field select,
.upload-field textarea { width:100%; background:var(--bg-raised); border:1px solid var(--border); font-family:'DM Sans',sans-serif; font-size:13px; color:var(--text); padding:10px 12px; outline:none; transition:border-color 0.2s; }
.upload-field input::placeholder,
.upload-field textarea::placeholder { color:var(--text-dim); font-style:italic; }
.upload-field input:focus,
.upload-field select:focus,
.upload-field textarea:focus { border-color:var(--gold-dim); }
.upload-field select option { background:var(--bg-card); }
.upload-field textarea      { resize:vertical; min-height:72px; }
#upload-submit-btn { width:100%; background:var(--gold); border:none; color:var(--bg); font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; padding:14px; cursor:pointer; margin-top:8px; transition:background 0.2s; }
#upload-submit-btn:hover    { background:var(--gold-bright); }
#upload-submit-btn:disabled { opacity:0.5; cursor:not-allowed; }


/* ══════════════════════════════════════════
   PAGE: PESAN
══════════════════════════════════════════ */
.prose-block-pesan { max-width:var(--page-max); margin:0 auto; padding:0 24px 40px; }
.prose-inner {
  border-left:1px solid var(--border-gold); padding:24px 0 24px 24px; position:relative;
}
.prose-inner::before {
  content:'❝'; position:absolute; top:-8px; left:-8px;
  font-family:'Playfair Display',serif; font-size:20px; color:var(--gold-dim);
  background:var(--bg); padding:0 4px; line-height:1;
}
.prose { font-family:'Playfair Display',serif; font-size:16px; font-weight:400; line-height:1.85; color:rgba(255,255,255,0.6); }
.prose p         { margin-bottom:22px; }
.prose p.line    { margin-bottom:2px; }
.prose p:last-child { margin-bottom:0; }
.prose em        { color:rgba(255,255,255,0.9); font-style:italic; }
.prose .ending   { font-family:'Playfair Display',serif; color:var(--text); margin-top:32px; font-size:1.1rem; font-weight:600; font-style:italic; }

.section-sep { max-width:var(--page-max); margin:0 auto 32px; padding:0 24px; display:flex; align-items:center; gap:16px; }
.section-sep span { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--text-dim); white-space:nowrap; }
.section-sep::before,
.section-sep::after { content:''; flex:1; height:1px; background:var(--border); }

.pesan-main { max-width:var(--page-max); margin:0 auto; padding:0 24px 100px; }
.pesan-form { background:var(--bg-card); border:1px solid var(--border); padding:28px; margin-bottom:32px; position:relative; }
.pesan-form::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.form-title { font-family:'Playfair Display',serif; font-size:17px; font-style:italic; color:var(--text); margin-bottom:20px; }
.sender-chip { display:none; align-items:center; gap:8px; font-size:11px; color:var(--gold); background:#161408; border:1px solid var(--border-gold); padding:8px 12px; margin-bottom:16px; letter-spacing:0.3px; }
.sender-chip.visible { display:flex; }
.sender-chip svg { flex-shrink:0; opacity:0.7; }
.quota-info { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-muted); background:#121006; border:1px solid var(--border-gold); padding:9px 12px; margin-bottom:16px; line-height:1.5; }
.quota-info strong { color:var(--gold); }
.msg-field { width:100%; background:var(--bg-raised); border:1px solid var(--border); font-family:'Playfair Display',serif; font-size:15px; font-weight:400; line-height:1.7; color:var(--text); padding:14px 16px; resize:vertical; min-height:130px; outline:none; transition:border-color 0.2s; display:block; }
.msg-field::placeholder { color:var(--text-dim); font-style:italic; }
.msg-field:focus        { border-color:var(--gold-dim); }
.char-row   { display:flex; justify-content:flex-end; margin-top:6px; margin-bottom:20px; }
.char-count { font-size:10px; color:var(--text-dim); letter-spacing:0.5px; }
.night-banner { background:var(--bg-raised); border:1px solid var(--border); padding:10px 14px; font-size:12px; color:var(--text-muted); margin-bottom:16px; display:flex; align-items:center; gap:8px; }

.count-badge { font-size:9px; background:var(--bg-hover); padding:1px 5px; border-radius:10px; margin-left:4px; color:var(--text-dim); }
.jurusan-filter-btn.active .count-badge { background:#474747; color:var(--bg); }

.messages-list { display:flex; flex-direction:column; gap:12px; }
.message-card { background:var(--bg-card); border:1px solid var(--border); border-left:3px solid var(--gold-dim); padding:20px 20px 16px; transition:border-color 0.2s,border-left-color 0.2s; }
.message-card:hover { border-color:var(--border-gold); border-left-color:var(--gold); }
.message-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; gap:10px; }
.msg-identity   { display:flex; align-items:center; gap:10px; }
.msg-avatar { width:34px; height:34px; background:var(--bg-raised); border:1px solid var(--border-gold); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:14px; font-weight:700; color:var(--gold); flex-shrink:0; }
.message-author { font-size:13px; font-weight:400; color:var(--text); }
.message-meta   { font-size:10px; color:var(--text-dim); margin-top:2px; letter-spacing:0.3px; }
.message-time   { font-size:10px; color:var(--text-dim); white-space:nowrap; flex-shrink:0; }
.message-text   { font-family:'Playfair Display',serif; font-size:14.5px; line-height:1.85; color:var(--text-muted); margin-bottom:14px; }
.message-actions { display:flex; gap:5px; align-items:center; flex-wrap:wrap; padding-top:12px; border-top:1px solid rgba(255,255,255,0.04); }
.action-btn { background:none; border:1px solid var(--border); padding:4px 10px; font-size:11px; cursor:pointer; transition:border-color 0.15s,color 0.15s,background 0.15s; color:var(--text-muted); display:flex; align-items:center; gap:5px; font-family:'DM Sans',sans-serif; }
.action-btn:hover  { border-color:var(--border-gold); color:var(--text); }
.action-btn.liked  { background:var(--gold); color:var(--bg); border-color:var(--gold); }
.report-btn        { margin-left:auto; opacity:0.4; font-size:10px !important; }
.report-btn:hover  { opacity:1; }
.reaction-pills    { display:flex; gap:4px; flex-wrap:wrap; }
.react-trigger-btn { background:none; border:1px dashed var(--border); padding:3px 9px; font-size:13px; cursor:pointer; transition:border-color 0.15s; }
.react-trigger-btn:hover { border-color:var(--gold-dim); }
.react-picker { width:100%; margin-top:10px; display:flex; gap:2px; padding:8px 10px; background:var(--bg-raised); border:1px solid var(--border); }
.react-picker.hidden { display:none; }
.emoji-react-btn.active { border-color:var(--gold-dim); background:var(--bg-hover); }


/* ══════════════════════════════════════════
   PAGE: PUSTAKA
══════════════════════════════════════════ */
.school-header { text-align:center; padding:32px 0 40px; border-bottom:1px solid var(--border); margin-bottom:40px; }
.school-emblem { width:76px; height:76px; background:var(--bg-card); border:1px solid var(--border-gold); margin:0 auto 20px; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:26px; font-weight:700; color:var(--gold); position:relative; transition:transform 0.3s; }
.school-emblem:hover { transform:scale(1.04); }
.school-emblem::before { content:''; position:absolute; inset:-5px; border:1px solid var(--border-gold); opacity:0.4; }
.school-name { font-family:'Playfair Display',serif; font-size:21px; font-weight:600; color:var(--text); margin-bottom:6px; }
.school-sub  { font-size:13px; color:var(--text-muted); }
.info-block  { margin-bottom:32px; }
.info-block h3 { font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--text-dim); margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.info-item   { display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,0.03); }
.info-item:last-child { border-bottom:none; }
.info-item-label { font-size:12px; color:var(--text-dim); min-width:110px; flex-shrink:0; padding-top:1px; }
.info-item-value { font-size:13px; color:var(--text); font-weight:300; line-height:1.5; }
.jurusan-pills { display:flex; gap:6px; flex-wrap:wrap; }
.jurusan-pill  { padding:3px 12px; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--bg); font-weight:500; }
.social-links  { display:flex; flex-direction:column; gap:8px; }
.social-link   { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--bg-card); border:1px solid var(--border); text-decoration:none; color:var(--text-muted); transition:all 0.2s; font-size:13px; }
.social-link:hover { border-color:var(--border-gold); color:var(--text); transform:translateX(4px); }
.social-icon   { width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:var(--bg-raised); font-size:15px; flex-shrink:0; }
.social-arrow  { margin-left:auto; opacity:0; transition:opacity 0.2s,transform 0.2s; }
.social-link:hover .social-arrow { opacity:1; transform:translateX(3px); }
.closing-quote { text-align:center; padding:40px 0; border-top:1px solid var(--border); margin-top:8px; }
.closing-quote p { font-family:'Playfair Display',serif; font-style:italic; font-size:16px; color:var(--text-muted); line-height:1.9; }
.closing-quote .angkatan-tag { display:inline-block; margin-top:20px; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--text-dim); }
.closing-quote .gold-line    { display:block; width:40px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:12px auto 0; }

/* ── CSS dari inline styles ── */
.label-opt    { text-transform:none; letter-spacing:0; font-size:10px; color:var(--text-dim); }
.drag-svg-wrap { display:block; margin:0 auto 10px; }
.strong-label  { color:var(--text); font-weight:400; }


/* ══════════════════════════
   DESKTOP
══════════════════════════ */
@media (min-width: 1024px) {
  /* Navbar */
  .navbar       { padding: 0 48px; }
  .navbar-inner { max-width:var(--desktop-max); height:64px; }
  .navbar-brand { font-size:17px; }
  .navbar-links { gap:4px; overflow-x:visible; -webkit-mask-image:none; mask-image:none; }
  .nav-link     { font-size:11px; padding:10px 16px; letter-spacing:1.5px; }
  .navbar-links-wrap::after { display:none; }
  .navbar-scroll-hint       { display:none; }

  /* Footer */
  .footer-nav       { padding:0 48px; }
  .footer-nav-inner { max-width:var(--desktop-max); height:64px; }
  .footer-prev,
  .footer-next      { font-size:11px; letter-spacing:1.5px; }
  .footer-next      { padding:10px 24px; }

  /* Page wrapper */
  .page-wrapper { max-width:var(--desktop-max); padding:64px 48px 100px; }
  .page-wrapper .narrow { max-width:640px; }

  /* Hero (shared) */
  .hero         { max-width:var(--desktop-max); margin:0 auto; padding:64px 48px 48px; text-align:left; }
  .hero-eyebrow { justify-content:flex-start; }
  .hero-eyebrow::before { display:none; }
  .hero-sub     { margin-left:0; }

  /* Angkatan */
  .filter-block  { max-width:var(--desktop-max); margin:0 auto; padding:40px 48px 0; }
  .jurusan-grid  { grid-template-columns:repeat(4,1fr); gap:14px; }
  .card-semua    { margin-bottom:14px; }
  .kajur-block   { max-width:var(--desktop-max); margin:0 auto; padding:32px 48px 0; }
  .kajur-grid    { grid-template-columns:repeat(4,1fr); gap:12px; }
  .reset-wrap    { max-width:var(--desktop-max); margin:0 auto; padding:20px 48px 0; justify-content:flex-start; }
  .alpha-block   { max-width:var(--desktop-max); margin:0 auto; padding:24px 48px 0; }
  .alpha-grid    { grid-template-columns:repeat(13,1fr); }
  .students-block { max-width:var(--desktop-max); margin:0 auto; padding:20px 48px 100px; }
  .students-grid  { grid-template-columns:repeat(4,1fr); gap:12px; }
  .site-footer    { padding:48px; }
  .empty-state    { grid-column:span 4; }

  /* Galeri */
  .galeri-main  { max-width:var(--desktop-max); margin:0 auto; padding:0 48px 100px; }
  #admin-jurusan-filter-container .jurusan-card-grid { grid-template-columns:repeat(4,1fr); gap:12px; }
  .photo-grid   { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .photo-modal-inner { max-width:800px; }

  /* Pesan */
  .prose-block-pesan { max-width:var(--desktop-max); padding:0 48px 48px; }
  .section-sep { max-width:var(--desktop-max); padding:0 48px; }
  .pesan-main  { max-width:var(--desktop-max); padding:0 48px 100px; display:grid; grid-template-columns:380px 1fr; gap:56px; align-items:start; }
  .pesan-left  { position:sticky; top:80px; }
  .pesan-right { min-width:0; }
  .pesan-form  { margin-bottom:0; }
  .message-text { font-size:15.5px; line-height:1.95; }
  .filter-jurusan { flex-wrap:nowrap; overflow-x:auto; }

  /* Pustaka */
  #main-pustaka-wrapper { max-width:var(--desktop-max) !important; padding:64px 48px 80px !important; }
  .desktop-2col  { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
  .school-header { display:flex; align-items:center; gap:28px; text-align:left; padding-bottom:40px; }
  .school-emblem { margin:0; flex-shrink:0; }
  .school-name   { font-size:26px; }
  .social-link   { padding:18px 20px; }
  .info-item-value { font-size:15px; }

  /* Pembuka */
  .prose-wrap, .numbers-section, .places-section, .nav-section { max-width:var(--desktop-max); padding-left:48px; padding-right:48px; }
  .prose-wrap    { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; padding-top:120px; }
  .prose-intro   { grid-column:1 / -1; }
  .prose-block,
  .prose-quote,
  .prose-ending  { grid-column:1; }
  .numbers-section { padding-top:0; }
  .numbers-grid  { grid-template-columns:repeat(4,1fr); }
  .n-val         { font-size:56px; }
  .cards-grid    { grid-template-columns:repeat(4,1fr); }
  .nav-card      { padding:28px 24px; }
  .hero-main     { font-size:60px; max-width:700px; }
  .pembuka-hero  { min-height:100vh; }

  /* Index */
  .cover        { max-width:500px; }
  .cover-title .word1,
  .cover-title .word2 { font-size:88px; }
  .cover-title .word3 { font-size:44px; }
  .frame { inset:28px 40px; }
  .spine { width:8px; }
  .cover-whisper { display:block; }
}

/* ── Tablet ── */

/* ── Tablet ── */
@media (min-width: 768px) {
  .hero { padding: 56px 32px 40px; }
  .page-wrapper { padding: 56px 32px 90px; }
  .students-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .jurusan-grid  { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .kajur-grid    { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .alpha-grid    { grid-template-columns: repeat(11, 1fr); }
  .photo-grid    { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .messages-list { max-width: 600px; margin: 0 auto; }
  .filter-block  { padding: 32px 32px 0; }
  .galeri-main   { padding: 0 32px 100px; }
  .pesan-main    { padding: 0 32px 100px; }
}

@media (min-width: 640px) {
  .photo-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .cover { max-width:400px; }
  .cover-whisper { display:block; }
}

/* ── Small mobile ── */
@media (max-width: 360px) {
  .jurusan-grid   { gap:7px; }
  .jurusan-card-grid { gap:6px; }
  .alpha-grid     { grid-template-columns:repeat(7,1fr); }
  .students-grid  { grid-template-columns:1fr; }
  .empty-state    { grid-column:span 1; }
}

.icon-gold { color: var(--gold-dim); }