@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════
   CSS DESIGN SYSTEM — Profil Guru Besar
   Academic Premium Dark Theme — v2.0 PROFESSIONAL
   ═══════════════════════════════════════════════════ */

:root {
  --primary: #1e3a5f;
  --primary-light: #2d5a8e;
  --primary-dark: #0f2440;
  --gold: #d4a574;
  --gold-light: #e8c8a0;
  --gold-dark: #b8864e;
  --bg-dark: #0a0f1a;
  --bg-section: #f8f9fc;
  --bg-card: #ffffff;
  --text-main: #1a1a2e;
  --text-muted: #6b7280;
  --text-light: rgba(255,255,255,.85);
  --radius: 16px;
  --shadow: 0 4px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
  --transition: all .3s cubic-bezier(.4,0,.2,1);
  --accent: var(--gold);
}

* { margin:0; padding:0; box-sizing:border-box; }
/* overflow-x dikunci karena animasi AOS (fade-left/fade-right) menggeser elemen
   100px ke samping selama belum tampil, sehingga halaman jadi lebih lebar dari
   layar. Di Chrome Android lebar layout viewport ikut melar mengikuti isi yang
   meluber, dan itu membuat elemen position:fixed (dialog buku) ikut melebihi
   lebar layar. */
html { scroll-behavior:smooth; scroll-padding-top:80px; overflow-x:hidden; }
body { font-family:'Inter',sans-serif; color:var(--text-main); line-height:1.7; background:#fff; -webkit-font-smoothing:antialiased; overflow-x:hidden; width:100%; }
h1,h2,h3,h4,h5 { font-family:'Playfair Display',serif; font-weight:700; line-height:1.3; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ─── Navbar (Glassmorphism) ───────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:16px 0; transition:var(--transition);
  background:transparent;
}
.navbar.scrolled {
  background:rgba(10,15,26,.82); backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  padding:10px 0; box-shadow:0 4px 30px rgba(0,0,0,.25);
  border-bottom:1px solid rgba(212,165,116,.08);
}
.navbar .container { display:flex; align-items:center; justify-content:space-between; }
.nav-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.nav-brand-icon {
  width:42px; height:42px; border-radius:10px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1rem; font-weight:700;
  box-shadow:0 4px 15px rgba(212,165,116,.3);
  overflow:hidden;
}
/* Gambar ikon sudah membawa kotak emasnya sendiri, jadi cukup diisi penuh.
   Gradasi di atas tetap ada sebagai warna dasar bila gambar gagal dimuat. */
.nav-brand-icon img { width:100%; height:100%; object-fit:cover; display:block; }
.nav-brand-text {
  color:#fff; font-family:'Playfair Display',serif; font-weight:700; font-size:1.1rem;
  /* Nama lengkap panjang; tanpa ini navbar jadi dua baris di tablet ke bawah. */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.nav-links { display:flex; gap:4px; list-style:none; }
.nav-links a {
  color:rgba(255,255,255,.7); font-size:.8rem; font-weight:500;
  padding:8px 12px; border-radius:8px; transition:var(--transition);
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:2px; left:50%; width:0; height:2px;
  background:var(--gold); border-radius:2px; transition:var(--transition);
  transform:translateX(-50%);
}
.nav-links a:hover,.nav-links a.active { color:#fff; }
.nav-links a:hover::after,.nav-links a.active::after { width:60%; }
.nav-toggle { display:none; background:none; border:none; color:#fff; font-size:1.3rem; cursor:pointer; }

/* ─── Hero ────────────────────────────────────── */
.hero {
  min-height:100vh; display:flex; align-items:center;
  background: linear-gradient(160deg, var(--bg-dark) 0%, var(--primary-dark) 40%, var(--primary) 100%);
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(212,165,116,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(30,58,95,.15) 0%, transparent 50%);
}
.hero::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(rgba(212,165,116,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,165,116,.03) 1px, transparent 1px);
  background-size:60px 60px;
}
.hero .container { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(212,165,116,.12); border:1px solid rgba(212,165,116,.2);
  padding:6px 16px; border-radius:50px; font-size:.75rem; color:var(--gold-light);
  font-weight:600; letter-spacing:.5px; text-transform:uppercase; margin-bottom:20px;
  animation:fadeInDown .8s ease-out;
}
.hero-name {
  font-size:3rem; color:#fff; margin-bottom:8px; letter-spacing:-1px;
  animation:fadeInUp .8s ease-out .1s both;
}
.hero-name em { color:var(--gold); font-style:italic; }
.hero-title {
  font-size:1.15rem; color:rgba(255,255,255,.5); font-weight:400;
  font-family:'Inter',sans-serif; margin-bottom:8px;
  animation:fadeInUp .8s ease-out .2s both;
}
.hero-institution {
  font-size:.9rem; color:rgba(255,255,255,.35); margin-bottom:24px;
  animation:fadeInUp .8s ease-out .3s both;
}
.hero-tagline {
  font-size:1rem; color:rgba(255,255,255,.55); line-height:1.7;
  max-width:500px; margin-bottom:32px; font-style:italic;
  border-left:3px solid var(--gold); padding-left:16px;
  animation:fadeInUp .8s ease-out .4s both;
}
.hero-stats {
  display:flex; gap:24px; margin-bottom:32px; flex-wrap:wrap;
  animation:fadeInUp .8s ease-out .5s both;
}
.hero-stat { text-align:center; }
.hero-stat-num {
  font-family:'Playfair Display',serif; font-size:2.2rem; color:var(--gold); font-weight:800;
  text-shadow:0 0 30px rgba(212,165,116,.2);
}
/* max-width dipakai supaya label panjang (mis. "Karir Profesional") pecah dua baris
   dan barisnya tetap muat di kolom hero, bukan meluber ke foto. */
.hero-stat-label { font-size:.68rem; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:1.5px; margin:2px auto 0; max-width:110px; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; animation:fadeInUp .8s ease-out .6s both; }
.btn-gold {
  padding:12px 28px; border-radius:10px; font-weight:600; font-size:.9rem;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff; border:none; cursor:pointer; transition:var(--transition);
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 4px 20px rgba(212,165,116,.25);
  position:relative; overflow:hidden;
}
.btn-gold::before {
  content:''; position:absolute; top:-50%; left:-60%; width:200%; height:200%;
  background:linear-gradient(45deg,transparent,rgba(255,255,255,.15),transparent);
  transform:rotate(45deg); transition:.6s;
}
.btn-gold:hover::before { left:100%; }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 35px rgba(212,165,116,.4); }
.btn-outline-white {
  padding:12px 28px; border-radius:10px; font-weight:600; font-size:.9rem;
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.2);
  cursor:pointer; transition:var(--transition);
  display:inline-flex; align-items:center; gap:8px;
}
.btn-outline-white:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); transform:translateY(-2px); }
.hero-photo {
  display:flex; justify-content:center; align-items:center; position:relative;
  animation:fadeIn 1.2s ease-out .3s both;
}
.hero-photo-frame {
  width:340px; height:420px; border-radius:24px; overflow:hidden;
  border:3px solid rgba(212,165,116,.3);
  box-shadow:0 20px 60px rgba(0,0,0,.4), 0 0 80px rgba(212,165,116,.08);
  position:relative;
  animation:float 6s ease-in-out infinite;
}
.hero-photo-frame img { width:100%; height:100%; object-fit:cover; }
.hero-photo-glow {
  position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,165,116,.12) 0%, transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%); z-index:-1;
  animation:pulse 4s ease-in-out infinite;
}

@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
@keyframes pulse { 0%,100% { opacity:.7; transform:translate(-50%,-50%) scale(1); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.05); } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInDown { from { opacity:0; transform:translateY(-30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes shimmer { 0% { left:-100%; } 100% { left:100%; } }

/* ─── Section Titles ─────────────────────────── */
.section { padding:100px 0; }
.section-alt { background:var(--bg-section); }
.section-dark { background:linear-gradient(160deg,var(--bg-dark),var(--primary-dark)); color:#fff; }
.section-header { text-align:center; margin-bottom:60px; }
.section-badge {
  display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:2px; color:var(--gold); margin-bottom:12px;
}
.section-title { font-size:2.2rem; margin-bottom:16px; }
.section-desc { font-size:.95rem; color:var(--text-muted); max-width:600px; margin:0 auto; }
.section-dark .section-desc { color:rgba(255,255,255,.5); }

/* ─── About ───────────────────────────────────── */
/* align-items:start supaya sisi atas foto sejajar dengan baris pertama teks,
   bukan dipusatkan terhadap kolom teks yang jauh lebih panjang. */
.about-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:start; }
.about-image { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); position:relative; }
.about-image::after {
  content:''; position:absolute; inset:0; border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(212,165,116,.08), transparent);
  pointer-events:none;
}
/* display:block menghapus celah putih tipis di bawah gambar: sebagai elemen
   inline, <img> menyisakan ruang sebaris teks di bawahnya. */
.about-image img { display:block; width:100%; height:440px; object-fit:cover; object-position:center 20%; transition:var(--transition); }
.about-image:hover img { transform:scale(1.03); }
.about-text { margin-bottom:16px; color:var(--text-muted); font-size:.95rem; }
.about-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.about-info-item {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; background:var(--bg-section); border-radius:10px;
  transition:var(--transition); border:1px solid transparent;
}
.about-info-item:hover { border-color:rgba(212,165,116,.2); transform:translateY(-2px); }
.about-info-item i { color:var(--gold); font-size:.9rem; }
.about-info-item span { font-size:.82rem; color:var(--text-muted); }
.about-info-item strong { display:block; font-size:.85rem; color:var(--text-main); }
.about-links { display:flex; gap:12px; margin-top:24px; }
.about-link {
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:8px; font-size:.8rem; font-weight:600;
  background:rgba(30,58,95,.08); color:var(--primary); transition:var(--transition);
}
.about-link:hover { background:var(--primary); color:#fff; transform:translateY(-2px); box-shadow:0 6px 20px rgba(30,58,95,.2); }
.about-link i { font-size:.9rem; }

/* ─── Education Timeline ─────────────────────── */
.timeline { position:relative; padding-left:40px; max-width:800px; margin:0 auto; }
.timeline::before {
  content:''; position:absolute; left:15px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--gold), var(--primary-light), var(--gold));
}
.timeline-item { position:relative; margin-bottom:40px; }
.timeline-dot {
  position:absolute; left:-33px; top:6px; width:18px; height:18px;
  border-radius:50%; background:var(--gold);
  border:3px solid #fff; box-shadow:0 2px 8px rgba(212,165,116,.3);
}
.timeline-card {
  background:var(--bg-card); padding:24px; border-radius:var(--radius);
  box-shadow:var(--shadow); border-left:3px solid var(--gold);
  transition:var(--transition); position:relative; overflow:hidden;
}
.timeline-card::before {
  content:''; position:absolute; top:0; right:0; width:100px; height:100%;
  background:linear-gradient(90deg, transparent, rgba(212,165,116,.03));
  pointer-events:none;
}
.timeline-card:hover { transform:translateX(6px); box-shadow:var(--shadow-lg); }
.timeline-year { font-size:.75rem; color:var(--gold-dark); font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.timeline-degree { font-size:1.1rem; font-weight:700; margin-bottom:4px; }
.timeline-inst { font-size:.88rem; color:var(--primary); font-weight:600; margin-bottom:4px; }
.timeline-field { font-size:.82rem; color:var(--text-muted); }
.timeline-desc { font-size:.82rem; color:var(--text-muted); margin-top:8px; line-height:1.6; }

/* ─── Experience Cards ────────────────────────── */
.exp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.exp-card {
  background:var(--bg-card); padding:28px; border-radius:var(--radius);
  box-shadow:var(--shadow); transition:var(--transition); border-top:3px solid transparent;
  position:relative; overflow:hidden;
}
.exp-card::after {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(212,165,116,.04), transparent);
  transition:.6s;
}
.exp-card:hover::after { left:100%; }
.exp-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-top-color:var(--gold); }
.exp-card-year { font-size:.72rem; color:var(--gold-dark); font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
.exp-card-position { font-size:1rem; font-weight:700; margin-bottom:4px; }
.exp-card-inst { font-size:.85rem; color:var(--primary); font-weight:600; margin-bottom:8px; }
.exp-card-desc { font-size:.82rem; color:var(--text-muted); line-height:1.6; }

/* ─── Varian Karir Profesional ────────────────── */
/* Kelas .exp-card tetap dipakai supaya kartu ini ikut terindeks pencarian di
   layouts/main.php; gaya di bawah hanya menimpa varian --career, sehingga
   kartu Liputan Media yang memakai .exp-card polos tidak ikut berubah. */
.exp-grid--career { gap:20px; }
.exp-card--career {
  display:flex; flex-direction:column; padding:26px;
  border-top:0; border-left:3px solid rgba(30,58,95,.12);
  background:radial-gradient(130% 90% at 100% 0%, rgba(212,165,116,.10), transparent 62%), var(--bg-card);
}
.exp-card--career.is-active { border-left-color:var(--gold); }
.exp-card--career:hover { border-left-color:var(--gold-dark); }

/* Ikon besar samar di sudut: memberi tekstur tanpa menambah teks baru. */
.exp-card-watermark {
  position:absolute; right:14px; bottom:-10px; font-size:4.2rem; line-height:1;
  color:var(--primary); opacity:.05; pointer-events:none; transition:var(--transition);
}
.exp-card--career:hover .exp-card-watermark {
  opacity:.09; color:var(--gold-dark); transform:rotate(-6deg) scale(1.06);
}

.exp-card-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.exp-card--career .exp-card-year {
  display:inline-flex; align-items:center; gap:6px; margin-bottom:0;
  padding:4px 11px; border-radius:50px; font-size:.68rem;
  background:rgba(212,165,116,.14);
}
.exp-card--career .exp-card-year i { font-size:.62rem; opacity:.8; }
.exp-card-flag {
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:50px;
  font-size:.62rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:#0f766e; background:rgba(16,185,129,.12);
}
.exp-card-flag::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.18);
}

.exp-card--career .exp-card-position { font-size:1.05rem; line-height:1.4; margin-bottom:10px; }
.exp-card--career .exp-card-inst {
  display:flex; align-items:flex-start; gap:9px; margin-bottom:0; line-height:1.5;
}
.exp-card-inst-ic {
  flex:0 0 26px; width:26px; height:26px; border-radius:8px; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(30,58,95,.07); color:var(--primary); font-size:.7rem;
}
.exp-card--career.is-active .exp-card-inst-ic { background:rgba(212,165,116,.18); color:var(--gold-dark); }
.exp-card--career .exp-card-desc {
  margin-top:14px; padding-top:14px; border-top:1px dashed rgba(30,58,95,.13);
}

/* Tombol "Lihat Semua" untuk seksi berlatar terang. Padanan tombol buku yang
   memakai gaya sebaris karena seksinya berlatar gelap. */
.btn-more {
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 30px; border-radius:50px; cursor:pointer;
  font-family:inherit; font-size:.9rem; font-weight:700;
  color:var(--gold-dark); background:rgba(212,165,116,.12);
  border:1px solid rgba(212,165,116,.3);
  transition:background .3s, border-color .3s, transform .3s;
}
.btn-more:hover { background:rgba(212,165,116,.22); border-color:var(--gold); transform:translateY(-2px); }

/* ─── Publications ────────────────────────────── */
.pub-tabs { display:flex; justify-content:center; gap:8px; margin-bottom:40px; flex-wrap:wrap; }
.pub-tab {
  padding:8px 20px; border-radius:50px; font-size:.82rem; font-weight:600;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.1); cursor:pointer; transition:var(--transition);
}
.pub-tab.active,.pub-tab:hover { background:rgba(212,165,116,.15); color:var(--gold-light); border-color:var(--gold); }
.pub-list { max-width:900px; margin:0 auto; }
.pub-item {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:24px; margin-bottom:16px; transition:var(--transition);
  backdrop-filter:blur(4px); position:relative; overflow:hidden;
}
.pub-item::before {
  content:''; position:absolute; top:0; left:0; width:3px; height:0;
  background:var(--gold); transition:.4s; border-radius:0 0 3px 3px;
}
.pub-item:hover::before { height:100%; }
.pub-item:hover { background:rgba(212,165,116,.06); border-color:rgba(212,165,116,.15); transform:translateX(4px); }
.pub-item[style*="display:none"] { display:none; }
.pub-type-badge {
  display:inline-block; font-size:.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; padding:3px 10px; border-radius:50px; margin-bottom:8px;
}
.pub-type-jurnal { background:rgba(59,130,246,.2); color:#60a5fa; }
.pub-type-buku { background:rgba(16,185,129,.2); color:#34d399; }
.pub-type-prosiding { background:rgba(245,158,11,.2); color:#fbbf24; }
.pub-type-hki { background:rgba(168,85,247,.2); color:#c084fc; }
.pub-title { font-size:1rem; font-weight:700; color:#fff; margin-bottom:6px; line-height:1.4; }
.pub-journal { font-size:.82rem; color:rgba(255,255,255,.5); margin-bottom:4px; }
.pub-authors { font-size:.78rem; color:rgba(255,255,255,.35); margin-bottom:8px; }
.pub-doi { font-size:.78rem; color:var(--gold); display:inline-flex; align-items:center; gap:4px; }
.pub-doi:hover { text-decoration:underline; }

/* ─── Research ────────────────────────────────── */
.research-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.research-card {
  background:var(--bg-card); padding:28px; border-radius:var(--radius);
  box-shadow:var(--shadow); transition:var(--transition); position:relative;
  border-left:4px solid var(--primary); overflow:hidden;
}
.research-card::after {
  content:''; position:absolute; top:0; right:0; width:80px; height:100%;
  background:linear-gradient(90deg, transparent, rgba(30,58,95,.03));
  pointer-events:none;
}
.research-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.research-year { font-size:.72rem; color:var(--gold-dark); font-weight:700; letter-spacing:1px; margin-bottom:8px; }
.research-title { font-size:1rem; font-weight:700; margin-bottom:8px; }
.research-funder { font-size:.82rem; color:var(--primary); font-weight:600; margin-bottom:4px; }
.research-role { font-size:.78rem; color:var(--text-muted); display:inline-flex; align-items:center; gap:4px; }
.research-desc { font-size:.82rem; color:var(--text-muted); margin-top:8px; line-height:1.6; }

/* Dark section book cards override */
.section-dark .research-card {
  background:rgba(255,255,255,.06); border-left-color:var(--gold);
  backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08);
  border-left:4px solid var(--gold);
}
.section-dark .research-card:hover { background:rgba(255,255,255,.1); border-color:rgba(212,165,116,.2); border-left:4px solid var(--gold-light); }
.section-dark .research-title { color:#fff; }
.section-dark .research-funder { color:var(--gold-light); }
.section-dark .research-role { color:rgba(255,255,255,.5); }
.section-dark .research-desc { color:rgba(255,255,255,.4); }
.section-dark .research-year { color:var(--gold); }

/* Book grid 3 columns for dark section */
.section-dark .research-grid { grid-template-columns:repeat(3,1fr); }

/* ─── Teaching ────────────────────────────────── */
.teaching-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.teaching-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:24px; transition:var(--transition);
  backdrop-filter:blur(4px); position:relative; overflow:hidden;
}
.teaching-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  opacity:0; transition:.3s;
}
.teaching-card:hover::before { opacity:1; }
.teaching-card:hover { background:rgba(212,165,116,.06); border-color:rgba(212,165,116,.15); transform:translateY(-6px); }
.teaching-icon { width:48px; height:48px; border-radius:12px; background:rgba(212,165,116,.12); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.2rem; margin-bottom:14px; }
.teaching-name { font-size:.95rem; font-weight:700; color:#fff; margin-bottom:6px; }
.teaching-meta { font-size:.78rem; color:rgba(255,255,255,.4); margin-bottom:8px; }
.teaching-meta span { display:inline-flex; align-items:center; gap:4px; }
.teaching-desc { font-size:.82rem; color:rgba(255,255,255,.5); line-height:1.6; }

/* ─── Awards ──────────────────────────────────── */
.award-list { max-width:800px; margin:0 auto; }
.award-item {
  display:flex; gap:20px; padding:24px; margin-bottom:16px;
  background:var(--bg-card); border-radius:var(--radius); box-shadow:var(--shadow);
  transition:var(--transition); align-items:flex-start;
  position:relative; overflow:hidden;
}
.award-item::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  opacity:0; transition:.3s;
}
.award-item:hover { transform:translateX(6px); box-shadow:var(--shadow-lg); }
.award-item:hover::before { opacity:1; }
.award-icon {
  width:50px; height:50px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.2rem; box-shadow:0 4px 15px rgba(212,165,116,.25);
}
.award-content { flex:1; }
.award-year { font-size:.72rem; color:var(--gold-dark); font-weight:700; letter-spacing:1px; margin-bottom:4px; }
.award-title { font-size:1rem; font-weight:700; margin-bottom:4px; }
.award-inst { font-size:.82rem; color:var(--primary); font-weight:600; margin-bottom:4px; }
.award-desc { font-size:.82rem; color:var(--text-muted); }

/* ─── Gallery ─────────────────────────────────── */
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.gallery-item {
  border-radius:14px; overflow:hidden; position:relative;
  aspect-ratio:4/3; cursor:pointer; box-shadow:var(--shadow);
}
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.4,0,.2,1), filter .3s; }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-item-overlay {
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,transparent 60%);
  opacity:0; transition:var(--transition); display:flex; align-items:flex-end; padding:16px;
}
.gallery-item:hover .gallery-item-overlay { opacity:1; }
.gallery-item-title { color:#fff; font-size:.82rem; font-weight:600; }

/* ─── Contact ─────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.contact-info-item {
  display:flex; gap:16px; margin-bottom:20px; align-items:flex-start;
}
.contact-info-icon {
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  background:rgba(30,58,95,.06); display:flex; align-items:center; justify-content:center;
  color:var(--primary); font-size:1rem; transition:var(--transition);
}
.contact-info-item:hover .contact-info-icon { background:var(--gold); color:#fff; transform:scale(1.05); }
.contact-info-text h4 { font-size:.9rem; font-weight:700; margin-bottom:2px; }
.contact-info-text p { font-size:.85rem; color:var(--text-muted); }
.contact-map { border-radius:var(--radius); overflow:hidden; height:200px; margin-top:24px; }
.contact-map iframe { width:100%; height:100%; border:0; }
.contact-form input,.contact-form textarea {
  width:100%; padding:14px 18px; border:2px solid #e5e7eb; border-radius:12px;
  font-size:.9rem; font-family:'Inter',sans-serif; margin-bottom:14px;
  transition:var(--transition); outline:none; background:#fff;
}
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(30,58,95,.08); }
.contact-form textarea { resize:vertical; min-height:120px; }

/* ─── Footer ──────────────────────────────────── */
.footer {
  background:linear-gradient(160deg,var(--bg-dark) 0%,var(--primary-dark) 50%,var(--bg-dark) 100%);
  padding:60px 0 0;
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:40px; }
.footer-brand h3 { color:#fff; font-size:1.2rem; margin-bottom:8px; }
.footer-brand p { color:rgba(255,255,255,.4); font-size:.85rem; line-height:1.7; }
.footer-heading { color:var(--gold); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; margin-bottom:16px; font-family:'Inter',sans-serif; }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:8px; }
.footer-links a { color:rgba(255,255,255,.5); font-size:.85rem; transition:var(--transition); }
.footer-links a:hover { color:var(--gold); padding-left:4px; }
.footer-social { display:flex; gap:10px; margin-top:16px; }
.footer-social a {
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.5); font-size:.85rem;
  transition:var(--transition); border:1px solid rgba(255,255,255,.08);
}
.footer-social a:hover { background:var(--gold); color:#fff; border-color:var(--gold); transform:translateY(-3px); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.06); padding:20px 0; text-align:center;
  font-size:.85rem; color:rgba(255,255,255,.3);
}
.footer-bottom a { color:var(--gold); }

/* ─── Back to Top ─────────────────────────────── */
.back-to-top {
  position:fixed; bottom:24px; right:24px; width:46px; height:46px;
  border-radius:12px; background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:pointer; z-index:999; opacity:0; visibility:hidden;
  transition:var(--transition); box-shadow:0 4px 20px rgba(212,165,116,.3);
  border:none;
}
.back-to-top.show { opacity:1; visibility:visible; }
.back-to-top:hover { transform:translateY(-4px); box-shadow:0 8px 30px rgba(212,165,116,.4); }

/* ─── Preloader ───────────────────────────────── */
.preloader {
  position:fixed; inset:0; background:var(--bg-dark); z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  transition:opacity .5s, visibility .5s;
}
.preloader.hide { opacity:0; visibility:hidden; }
.preloader-spinner {
  width:44px; height:44px; border:3px solid rgba(212,165,116,.15);
  border-top:3px solid var(--gold); border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── Theme Toggle Button ─────────────────────── */
.theme-toggle {
  position:fixed; bottom:80px; right:24px; width:46px; height:46px;
  border-radius:12px; border:none; cursor:pointer; z-index:999;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; transition:var(--transition);
  background:linear-gradient(135deg,#1e3a5f,#0f2440);
  color:#fbbf24; box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.theme-toggle:hover { transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,0,0,.35); }
.theme-toggle .fa-sun { display:none; }
.theme-toggle .fa-moon { display:inline; }

/* ─── Light Mode Overrides ────────────────────── */
body.light-mode { background:#f8f9fc; color:var(--text-main); }
body.light-mode .theme-toggle {
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  color:#1e3a5f; box-shadow:0 4px 20px rgba(251,191,36,.3);
}
body.light-mode .theme-toggle .fa-sun { display:inline; }
body.light-mode .theme-toggle .fa-moon { display:none; }

/* Navbar */
body.light-mode .navbar.scrolled {
  background:rgba(255,255,255,.92); backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:0 2px 20px rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.06);
}
body.light-mode .navbar.scrolled .nav-brand-text { color:var(--primary-dark); }
body.light-mode .navbar.scrolled .nav-links a { color:var(--text-muted); }
body.light-mode .navbar.scrolled .nav-links a:hover,
body.light-mode .navbar.scrolled .nav-links a.active { color:var(--primary); }
body.light-mode .navbar.scrolled .nav-toggle { color:var(--primary-dark); }

/* Hero — stays dark (intentional, premium feel) */

/* Sections */
body.light-mode .section { background:#fff; }
body.light-mode .section-alt { background:#f1f5f9; }
body.light-mode .section-dark {
  background:linear-gradient(160deg,#f1f5f9 0%,#e2e8f0 50%,#f8fafc 100%);
  color:var(--text-main);
}
body.light-mode .section-desc { color:var(--text-muted); }
body.light-mode .section-dark .section-desc { color:var(--text-muted); }
body.light-mode .section-dark .section-title { color:var(--text-main); }
body.light-mode .section-badge { color:var(--gold-dark); }

/* Cards */
body.light-mode .timeline-card { background:#fff; box-shadow:0 2px 16px rgba(0,0,0,.06); }
body.light-mode .timeline-dot { border-color:#f1f5f9; }
body.light-mode .exp-card { background:#fff; box-shadow:0 2px 16px rgba(0,0,0,.06); }
body.light-mode .exp-card--career { background:radial-gradient(130% 90% at 100% 0%, rgba(212,165,116,.10), transparent 62%), #fff; }
body.light-mode .research-card { background:#fff; box-shadow:0 2px 16px rgba(0,0,0,.06); }
body.light-mode .section-dark .research-card {
  background:#fff; border:1px solid #e2e8f0; border-left:4px solid var(--gold);
  backdrop-filter:none;
}
body.light-mode .section-dark .research-card:hover {
  background:#f8fafc; border-color:#d1d5db; border-left:4px solid var(--gold-dark);
}
body.light-mode .section-dark .research-title { color:var(--text-main); }
body.light-mode .section-dark .research-funder { color:var(--primary); }
body.light-mode .section-dark .research-role { color:var(--text-muted); }
body.light-mode .section-dark .research-desc { color:var(--text-muted); }
body.light-mode .section-dark .research-year { color:var(--gold-dark); }
body.light-mode .award-item { background:#fff; box-shadow:0 2px 16px rgba(0,0,0,.06); }

/* Publications — dark section overrides */
body.light-mode .pub-tab {
  background:rgba(0,0,0,.04); color:var(--text-muted);
  border-color:rgba(0,0,0,.08);
}
body.light-mode .pub-tab.active,
body.light-mode .pub-tab:hover {
  background:rgba(212,165,116,.12); color:var(--gold-dark);
  border-color:var(--gold);
}
body.light-mode .pub-item {
  background:#fff; border:1px solid #e2e8f0;
  backdrop-filter:none; box-shadow:0 2px 12px rgba(0,0,0,.04);
}
body.light-mode .pub-item:hover { background:#fefce8; border-color:rgba(212,165,116,.3); }
body.light-mode .pub-title { color:var(--text-main); }
body.light-mode .pub-journal { color:var(--text-muted); }
body.light-mode .pub-authors { color:#9ca3af; }

/* Teaching — dark section overrides */
body.light-mode .teaching-card {
  background:#fff; border:1px solid #e2e8f0;
  backdrop-filter:none; box-shadow:0 2px 12px rgba(0,0,0,.04);
}
body.light-mode .teaching-card:hover {
  background:#fefce8; border-color:rgba(212,165,116,.3);
}
body.light-mode .teaching-name { color:var(--text-main); }
body.light-mode .teaching-meta { color:var(--text-muted); }
body.light-mode .teaching-desc { color:var(--text-muted); }

/* Gallery */
body.light-mode .gallery-item { box-shadow:0 2px 16px rgba(0,0,0,.08); }

/* Contact */
body.light-mode .contact-form input,
body.light-mode .contact-form textarea {
  background:#fff; border-color:#e2e8f0; color:var(--text-main);
}

/* Footer — stays dark (intentional, professional look) */

/* Back to top */
body.light-mode .back-to-top { box-shadow:0 4px 20px rgba(212,165,116,.2); }

/* Mobile nav */
body.light-mode .nav-links.open {
  background:rgba(255,255,255,.98); backdrop-filter:blur(20px);
}
body.light-mode .nav-links.open a { color:var(--text-muted); }
body.light-mode .nav-links.open a:hover { color:var(--primary); }

/* Visitor stats footer override */
body.light-mode .vsf-badge { color:var(--gold-light); }

/* Preloader */
body.light-mode .preloader { background:#f8f9fc; }
body.light-mode .preloader-spinner { border-color:rgba(212,165,116,.15); border-top-color:var(--gold-dark); }

/* ─── Light Mode: Stat Counter Cards ──────────── */
body.light-mode .stat-counter-card {
  background:#fff; border:1px solid #e2e8f0;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
body.light-mode .stat-counter-card:hover {
  border-color:rgba(212,165,116,.3); background:#fefce8;
}
body.light-mode .stat-counter-num { color:var(--primary-dark); }
body.light-mode .stat-counter-label { color:var(--text-muted); }

/* ─── Light Mode: Section titles with inline style="color:#fff" ── */
body.light-mode .section-dark .section-title { color:var(--text-main) !important; }
body.light-mode .section-dark .section-badge { color:var(--gold-dark); }

/* ─── Light Mode: Publication inline year span ─── */
body.light-mode .pub-item span[style] { color:var(--text-muted) !important; }

/* ─── Light Mode: Supervision Section ─────────── */
body.light-mode .sv-tab {
  background:rgba(0,0,0,.04); color:var(--text-muted);
  border-color:rgba(0,0,0,.08);
}
body.light-mode .sv-tab.active,
body.light-mode .sv-tab:hover {
  background:rgba(212,165,116,.12); color:var(--gold-dark);
  border-color:var(--gold);
}
body.light-mode .sv-item {
  background:#fff; border:1px solid #e2e8f0;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
body.light-mode .sv-item:hover {
  background:#fefce8; border-color:rgba(212,165,116,.3);
}
body.light-mode .sv-name { color:var(--text-main); }
body.light-mode .sv-thesis { color:var(--text-muted); }
body.light-mode .sv-meta { color:#6b7280; }
body.light-mode .sv-badge { border:1px solid rgba(0,0,0,.06); }

/* ─── Light Mode: Book Section inline styles ──── */
body.light-mode .section-dark [style*="color:#e8c8a0"],
body.light-mode .section-dark [style*="color:#94a3b8"] {
  color:var(--text-muted) !important;
}
body.light-mode .section-dark [style*="background:rgba(212,165,116"] {
  background:rgba(212,165,116,.08) !important;
  border-color:rgba(212,165,116,.2) !important;
}

/* Book toggle button */
body.light-mode #btnToggleBooks {
  background:rgba(212,165,116,.08) !important;
  color:var(--gold-dark) !important;
  border-color:rgba(212,165,116,.25) !important;
}

/* ─── Light Mode: Book Modal ──────────────────── */
body.light-mode .book-modal-content {
  background:#fff; border:1px solid #e2e8f0;
  box-shadow:0 30px 80px rgba(0,0,0,.15);
}
body.light-mode .book-modal-close {
  background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.1); color:var(--text-main);
}
body.light-mode .book-modal-close:hover { background:rgba(239,68,68,.1); }
body.light-mode .book-modal-cover { background:linear-gradient(160deg,#f1f5f9,#e2e8f0); }
body.light-mode .book-modal-title { color:var(--text-main); }
body.light-mode .book-modal-meta-item { color:var(--text-muted); }
body.light-mode .book-modal-desc { color:var(--text-muted); }
body.light-mode .bm-btn-link {
  background:rgba(212,165,116,.08); color:var(--gold-dark);
  border-color:rgba(212,165,116,.2);
}
body.light-mode .bm-btn-link:hover { color:var(--gold-dark); }

/* ─── Light Mode: PKM Section ─────────────────── */
body.light-mode .pkm-card {
  background:#fff; border:1px solid #e2e8f0;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
body.light-mode .pkm-card:hover { box-shadow:0 10px 30px rgba(0,0,0,.1); }

/* ─── Light Mode: Lightbox ────────────────────── */
body.light-mode .lightbox { background:rgba(0,0,0,.85); }

/* ─── Light Mode: Gallery Caption ─────────────── */
body.light-mode .gallery-item-caption { color:#fff; /* stays white on image overlay */ }

/* ─── Responsive ──────────────────────────────── */
@media(max-width:968px) {
  /* Saat ditumpuk, isi hero lebih tinggi dari layar sehingga align-items:center
     membuat bagian atas (foto) terdorong ke luar layar dan tertutup navbar yang
     melayang. Karena itu isinya dimulai dari atas dan diberi ruang setinggi navbar. */
  .hero { align-items:flex-start; padding:104px 0 56px; }
  .hero .container { grid-template-columns:1fr; text-align:center; gap:40px; }
  .hero-content { order:2; }
  .hero-photo { order:1; }
  .hero-name { font-size:2.2rem; }
  .hero-stats { justify-content:center; }
  .hero-btns { justify-content:center; }
  .hero-tagline { margin:0 auto 32px; }
  .about-grid { grid-template-columns:1fr; }
  .exp-grid { grid-template-columns:1fr 1fr; }
  .research-grid { grid-template-columns:1fr; }
  .section-dark .research-grid { grid-template-columns:1fr 1fr; }
  .teaching-grid { grid-template-columns:1fr 1fr; }
  .gallery-grid { grid-template-columns:repeat(3,1fr); }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .section-title { font-size:1.8rem; }
}
@media(max-width:640px) {
  .nav-links { display:none; }
  .nav-toggle { display:block; }
  .nav-brand { flex:1 1 auto; }
  .nav-brand-text { font-size:.95rem; }
  .nav-links.open {
    display:flex; flex-direction:column; position:absolute;
    top:100%; left:0; right:0; background:rgba(10,15,26,.98);
    padding:16px; gap:4px; backdrop-filter:blur(20px);
  }
  .hero-photo-frame { width:260px; height:320px; }
  .hero-name { font-size:1.8rem; }
  .hero-stats { gap:16px; flex-wrap:wrap; }
  .teaching-grid { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .about-info-grid { grid-template-columns:1fr; }
  .exp-grid { grid-template-columns:1fr; }
  .research-grid { grid-template-columns:1fr; }
  .section-dark .research-grid { grid-template-columns:1fr; }
  .section { padding:70px 0; }
}

@media(max-width:400px) {
  .nav-brand-text { display:none; }
  .container { padding:0 16px; }
}

/* ─── Widget statistik pengunjung di footer ──────────────────── */
.visitor-panel {
  display:flex; flex-wrap:wrap; align-items:center; gap:1.3rem 2.2rem;
  border:1px solid rgba(212,165,116,.14); border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  padding:22px 26px; margin:0 0 32px;
  box-shadow:0 18px 40px -28px rgba(0,0,0,.8);
}
.vp-title { display:flex; align-items:center; gap:.8rem; }
.vp-ico {
  width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#1a1206; font-size:1rem;
  box-shadow:0 8px 18px -8px rgba(212,165,116,.6);
}
.vp-title-text { display:flex; flex-direction:column; line-height:1.3; }
.vp-title-text b { color:#fff; font-size:.95rem; }
.vp-title-text small { color:rgba(255,255,255,.45); font-size:.76rem; }

.vp-stats { display:flex; gap:.7rem; flex-wrap:wrap; }
/* Tiap angka berdiri sebagai kartu kecil supaya tidak menyatu jadi deretan teks. */
.vp-stat {
  display:flex; flex-direction:column; gap:.1rem; cursor:help; line-height:1.15;
  min-width:7.4rem; padding:.6rem .95rem .55rem; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  transition:border-color .18s, transform .18s, background .18s;
}
.vp-stat:hover {
  border-color:rgba(212,165,116,.4); transform:translateY(-2px);
  background:linear-gradient(180deg, rgba(212,165,116,.12), rgba(255,255,255,.03));
}
.vp-stat b { font-size:1.65rem; font-weight:800; display:inline-flex; align-items:center; gap:.45rem; }
.vp-stat b [data-vp] {
  background:linear-gradient(135deg,#f5e0b8 10%,var(--gold) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.vp-stat span { font-size:.64rem; text-transform:uppercase; letter-spacing:.09em; color:rgba(255,255,255,.45); font-weight:700; white-space:nowrap; }
.vp-stat-online b [data-vp] { background:linear-gradient(135deg,#bbf7d0 10%,#22c55e 75%); -webkit-background-clip:text; background-clip:text; }
.vp-dot {
  width:9px; height:9px; border-radius:50%; background:#22c55e; flex:none;
  box-shadow:0 0 0 3px rgba(34,197,94,.18); animation:vpPulse 2s ease-in-out infinite;
}
@keyframes vpPulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* Kilas singkat saat angka disegarkan otomatis. */
.vp-ubah { animation:vpUbah 1s ease-out; }
@keyframes vpUbah {
  0%   { filter:brightness(1.6) drop-shadow(0 0 10px rgba(212,165,116,.75)); transform:translateY(-2px); }
  100% { filter:none; transform:none; }
}

.vp-flags { display:flex; flex-wrap:wrap; gap:.45rem; flex:1; justify-content:flex-end; min-width:220px; }
.vp-flag {
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  border-radius:999px; padding:.3rem .75rem; font-size:.78rem; font-weight:600; color:rgba(255,255,255,.82);
  transition:background .15s, transform .15s;
}
.vp-flag:hover { background:rgba(255,255,255,.11); transform:translateY(-1px); }
.vp-flag img { border-radius:2px; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.15); }
.vp-flag b { color:var(--gold); font-weight:800; }
.vp-flag-empty { color:rgba(255,255,255,.4); font-weight:500; border-style:dashed; }

@media(max-width:900px) { .vp-flags { justify-content:flex-start; min-width:0; } }
@media(max-width:640px) {
  .visitor-panel { padding:18px; gap:1.1rem 1.4rem; }
  .vp-stats { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; width:100%; }
  .vp-stat { min-width:0; padding:.55rem .7rem; }
  .vp-stat b { font-size:1.35rem; }
}
@media(prefers-reduced-motion:reduce) {
  .vp-ubah, .vp-dot { animation:none; }
  .vp-stat:hover, .vp-flag:hover { transform:none; }
}

/* ─── Efek shine pada kredit "Berkah Kreasi Camp" ────────────
   Pita cahaya menyapu tulisan sekali tiap 6 detik.
   Ukuran latar 250% + rentang sapuan 150% dipilih supaya pita melintas
   selama ~1,7 detik; dengan nilai yang lebih sempit, kilaunya lewat
   secepat kedipan dan justru terlihat seperti gangguan. */
.footer-bottom a.bkc-shine {
  display:inline-block; font-weight:700;
  background-image:linear-gradient(
    100deg,
    var(--gold)  0%,
    var(--gold) 32%,
    #fff2d8     45%,
    #ffffff     50%,
    #fff2d8     55%,
    var(--gold) 68%,
    var(--gold) 100%
  );
  background-size:250% 100%;
  /* WAJIB berulang: gradasi diawali dan diakhiri warna emas yang sama, jadi
     sambungannya tak terlihat. Dengan no-repeat, posisi di luar rentang
     0-100% menyisakan bagian teks tanpa latar sehingga hurufnya transparan. */
  background-repeat:repeat-x;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:bkcShine 6s linear infinite;
  transition:filter .3s;
}
.footer-bottom a.bkc-shine:hover {
  filter:drop-shadow(0 0 9px rgba(212,165,116,.6));
  animation-duration:2.6s;
}
@keyframes bkcShine {
  0%       { background-position:100% 0; }
  33%,100% { background-position:-50% 0; }
}
/* Catatan: footer tetap gelap di mode terang (latarnya gradasi navy),
   jadi tidak perlu varian warna khusus untuk body.light-mode. */
/* Tanpa animasi: emas solid, bukan teks transparan. */
@media(prefers-reduced-motion:reduce) {
  .footer-bottom a.bkc-shine {
    animation:none; background-image:none;
    -webkit-background-clip:border-box; background-clip:border-box;
    color:var(--gold);
  }
}

/* ═══════════════════════════════════════════════
   MULTIBAHASA
   ═══════════════════════════════════════════════ */

/* ─── Pemilih bahasa di navbar ─── */
/* Memakai <details>, jadi buka-tutupnya ditangani browser tanpa JavaScript. */
.lang-switch { position:relative; }
.lang-switch > summary {
  list-style:none; cursor:pointer; user-select:none;
  height:38px; padding:0 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.75); font-size:.75rem; font-weight:700; letter-spacing:.5px;
  display:flex; align-items:center; gap:7px; transition:all .3s;
}
.lang-switch > summary::-webkit-details-marker { display:none; }
.lang-switch > summary::marker { content:''; }
.lang-switch > summary:hover,
.lang-switch[open] > summary {
  background:rgba(212,165,116,.15); border-color:rgba(212,165,116,.3); color:var(--gold-light);
}
.lang-switch ul {
  position:absolute; top:calc(100% + 8px); right:0; z-index:1200; min-width:172px;
  list-style:none; padding:6px; margin:0; border-radius:12px;
  background:rgba(10,15,26,.98); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 12px 40px rgba(0,0,0,.45); backdrop-filter:blur(20px);
}
.lang-switch li a {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:9px 12px; border-radius:8px; font-size:.86rem;
  color:rgba(255,255,255,.72); transition:all .2s;
}
.lang-switch li a:hover { background:rgba(212,165,116,.14); color:#fff; }
.lang-switch li a.aktif { color:var(--gold); font-weight:700; }
.lang-switch li a small { font-size:.66rem; letter-spacing:1px; opacity:.55; }
body.light-mode .navbar.scrolled .lang-switch > summary {
  border-color:rgba(30,58,95,.15); background:rgba(30,58,95,.05); color:var(--text-muted);
}

/* ─── Huruf untuk aksara non-Latin ─── */
/* Playfair Display dan Inter tidak memuat aksara Arab, Han, dan Devanagari,
   jadi bahasa yang memerlukannya memakai keluarga Noto yang sepadan. */
html[lang="ar"] body, html[lang="ar"] h1, html[lang="ar"] h2,
html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] h5 {
  font-family:'Noto Naskh Arabic','Segoe UI',Tahoma,serif;
}
html[lang="zh"] body, html[lang="zh"] h1, html[lang="zh"] h2,
html[lang="zh"] h3, html[lang="zh"] h4, html[lang="zh"] h5 {
  font-family:'Noto Sans SC','Microsoft YaHei','PingFang SC',sans-serif;
}
html[lang="hi"] body, html[lang="hi"] h1, html[lang="hi"] h2,
html[lang="hi"] h3, html[lang="hi"] h4, html[lang="hi"] h5 {
  font-family:'Noto Sans Devanagari','Nirmala UI',sans-serif;
}
/* Aksara Arab dan Devanagari punya tinggi huruf lebih besar, sedikit dilegakan. */
html[lang="ar"] body, html[lang="hi"] body { line-height:1.9; }

/* ─── Tata letak kanan-ke-kiri (bahasa Arab) ─── */
[dir="rtl"] .hero-tagline {
  border-left:0; border-right:3px solid var(--gold);
  padding-left:0; padding-right:16px;
}
[dir="rtl"] .timeline { padding-left:0; padding-right:40px; }
[dir="rtl"] .timeline::before { left:auto; right:15px; }
[dir="rtl"] .timeline-dot { left:auto; right:-33px; }
[dir="rtl"] .timeline-card { border-left:0; border-right:3px solid var(--gold); }
[dir="rtl"] .research-card { border-left:0; border-right:4px solid var(--primary); }
[dir="rtl"] .section-dark .research-card { border-left:0; border-right:4px solid var(--gold); }
[dir="rtl"] .pub-item { border-left:0; border-right:4px solid var(--gold); }
[dir="rtl"] .footer-links a:hover { padding-left:0; padding-right:4px; }
[dir="rtl"] .lang-switch ul { right:auto; left:0; }
[dir="rtl"] .search-result-item { flex-direction:row-reverse; }
[dir="rtl"] .about-info-item, [dir="rtl"] .contact-info-item { flex-direction:row-reverse; text-align:right; }
[dir="rtl"] .exp-card-inst i, [dir="rtl"] .exp-card-desc { text-align:right; }
[dir="rtl"] .exp-card--career { border-left:0; border-right:3px solid rgba(30,58,95,.12); }
[dir="rtl"] .exp-card--career.is-active { border-right-color:var(--gold); }
[dir="rtl"] .exp-card--career:hover { border-right-color:var(--gold-dark); }
[dir="rtl"] .exp-card-watermark { right:auto; left:14px; }
[dir="rtl"] .exp-card-flag { margin-left:0; margin-right:auto; }

/* Nama, institusi, dan data kontak tetap berhuruf Latin. unicode-bidi:plaintext
   membuat arah tiap teks ditentukan dari isinya sendiri, sehingga tanda titik
   tidak melompat ke depan saat halaman berarah kanan-ke-kiri. */
[dir="rtl"] .hero-name, [dir="rtl"] .nav-brand-text, [dir="rtl"] .hero-institution,
[dir="rtl"] .footer-brand h3, [dir="rtl"] .footer-brand p, [dir="rtl"] .about-info-item strong,
[dir="rtl"] .contact-info-text p, [dir="rtl"] .timeline-inst, [dir="rtl"] .exp-card-inst,
[dir="rtl"] .research-title, [dir="rtl"] .pub-title, [dir="rtl"] .exp-card-position {
  unicode-bidi:plaintext;
}