@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap');

/* ── 1. Universal box model fix ──────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box; /* padding/border never adds to declared width */
  margin: 0;
  padding: 0;
}

/* ── 2. Root scaling guard ───────────────────────────────── */
html {
  overflow-x: hidden;    /* catch any stray overflow at root level */
  scroll-behavior: smooth;
}

body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;    /* belt-and-suspenders against horizontal scroll */
  -webkit-text-size-adjust: 100%; /* prevent iOS auto font-size inflation */
}

/* ── 3. Fluid media ──────────────────────────────────────── */
img,
video,
svg,
iframe,
canvas {
  display: block;
  max-width: 100%;  /* never wider than their container */
  height: auto;     /* maintain aspect ratio */
}

/* ── Generic section/container wrapper ───────────────────── */
.container,
.wrapper,
section,
.section {
  width: 100%;
  /* use padding, never fixed width, for inner breathing room */
  padding-inline: clamp(16px, 5vw, 80px);
  /* avoid any fixed max that breaks at small sizes */
  max-width: 1280px;
  margin-inline: auto;
}

/* ── Flex rows that must wrap on mobile ──────────────────── */
.flex-row {
  display: flex;
  flex-wrap: wrap;     /* prevents children from escaping the row */
  gap: clamp(16px, 3vw, 32px);
  min-width: 0;        /* lets the flex container itself shrink */
}

.flex-row > * {
  min-width: 0;        /* lets each child shrink below its content size */
  flex: 1 1 280px;     /* grow/shrink freely; wrap when below 280px */
}

/* ── Grid that auto-stacks on narrow screens ─────────────── */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  /*                                        ↑ min() clamps the track
       so on a 320px screen the column is 100% not 280px, avoiding overflow */
  gap: clamp(16px, 3vw, 28px);
}

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════ */
:root {
  --primary-blue:   #3852B4;
  --primary-yellow: #FFD700;
  --bg-white:       #FEFEFA;
  --text-dark:      #33353A;
  --accent-gray:    #B0B5C0;
  --shadow-color:   rgba(0, 0, 0, 0.1);

  /* derived */
  --blue-dark:      #2A3D8F;
  --blue-deeper:    #1E2D6B;
  --blue-mid:       rgba(56, 82, 180, 0.6);
  --white-a10:      rgba(255, 255, 255, 0.10);
  --white-a18:      rgba(255, 255, 255, 0.18);
  --white-a30:      rgba(255, 255, 255, 0.30);
  --white-a60:      rgba(255, 255, 255, 0.60);
  --white-a80:      rgba(255, 255, 255, 0.80);
  --yellow-glow:    rgba(255, 215, 0, 0.20);

  --navbar-h:       64px;
  --radius-sm:      8px;
  --radius-md:      14px;
  --radius-lg:      22px;
  --radius-xl:      32px;
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition:     0.28s var(--ease-out);
}

/* ═══════════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  background: var(--bg-white);
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100dvh;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ═══════════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 900;
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(20px, 5vw, 56px);
  background: rgba(254, 254, 250, 0.78);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid rgba(56, 82, 180, 0.10);
  transition: box-shadow var(--transition), background var(--transition);
  will-change: box-shadow;
}

/* Perbaikan responsivitas navbar pasca penambahan menu baru */
@media (min-width: 769px) {
  .navbar__menu {
    gap: 8px; /* Mengurangi gap antar link agar muat di layar medium */
  }
  .navbar__link {
    padding: 8px 12px; /* Sedikit memperkecil padding horizontal */
    font-size: 0.88rem;
  }
}

.navbar.is-scrolled {
  background: rgba(254, 254, 250, 0.95);
  box-shadow: 0 2px 24px rgba(56, 82, 180, 0.12);
}

/* logo */
.navbar__logo {
  font-family: 'Segoe UI', sans-serif;
  font-size: clamp(1.15rem, 3vw, 1.35rem);
  font-weight: 800;
  color: var(--primary-blue);
  letter-spacing: -0.03em;
  flex-shrink: 0;
  transition: opacity var(--transition);
}
.navbar__logo:hover { opacity: 0.75; }

/* desktop nav links */
.navbar__menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbar__link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-gray);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.navbar__link:hover,
.navbar__link.is-active {
  color: var(--primary-blue);
  background: rgba(56, 82, 180, 0.08);
}

/* burger — hidden on desktop */
.navbar__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  flex-shrink: 0;
}
.navbar__burger:hover { background: rgba(56, 82, 180, 0.08); }
.navbar__burger span {
  display: block;
  height: 2px;
  background: var(--primary-blue);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.25s var(--ease-out), opacity 0.25s;
  will-change: transform, opacity;
}

/* burger open state */
.navbar__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero {
  position: relative;
  min-height: 100dvh;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--blue-dark) 55%, var(--blue-deeper) 100%);
  display: flex;
  align-items: center;
  padding-block: calc(var(--navbar-h) + 40px) 60px;
  padding-inline: clamp(20px, 6vw, 80px);
  overflow: hidden;
 
  /* ✅ FIX 1: Ensure hero always spans full viewport width */
  width: 100%;
 
  /* ✅ FIX 2: Remove any inherited max-width constraint that boxes it in */
  max-width: none;
 
  /* ✅ FIX 3: Kill any auto centering margin — centering belongs on .hero__inner, not here */
  margin-inline: 0;
 
  /* ✅ FIX 4: padding-inline must not eat into the background — border-box ensures it doesn't */
  box-sizing: border-box;
}
 
/* decorative background grid lines */
.hero__grid {
  position: absolute;
  inset: 0;
  display: flex;
  gap: calc(100% / 4);
  pointer-events: none;
  overflow: hidden;
}
.hero__grid span {
  display: block;
  width: 1px;
  background: var(--white-a10);
  height: 100%;
  flex-shrink: 0;
}
 
/* decorative orbs */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.hero__orb--1 {
  width: clamp(280px, 45vw, 560px);
  height: clamp(280px, 45vw, 560px);
  background: radial-gradient(circle, rgba(255, 215, 0, 0.12) 0%, transparent 65%);
  top: -15%;
  right: -10%;
}
.hero__orb--2 {
  width: clamp(200px, 32vw, 400px);
  height: clamp(200px, 32vw, 400px);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, transparent 70%);
  bottom: 5%;
  left: 5%;
}
 
/* two-column inner — this is where centering & max-width live */
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
 
/* ── LEFT COLUMN ── */
.hero__left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
 
/* eyebrow label */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-yellow);
  opacity: 0.9;
}
.hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-yellow);
  flex-shrink: 0;
  animation: pulse-dot 2.4s ease-in-out infinite;
}
 
/* main title */
.hero__title {
  font-family: 'Segoe UI', sans-serif;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  font-weight: 900;
  color: var(--bg-white);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-top: -4px;
}
.hero__title-accent {
  color: var(--primary-yellow);
  position: relative;
  display: inline-block;
}
.hero__title-accent::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: var(--primary-yellow);
  border-radius: 2px;
  opacity: 0.5;
}
 
/* tagline */
.hero__tagline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  color: var(--primary-yellow);
  line-height: 1.4;
  opacity: 0.95;
}
 
/* description */
.hero__desc {
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  color: var(--white-a80);
  line-height: 1.7;
  max-width: 48ch;
}
 
/* CTA row */
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
 
/* stats strip */
.hero__stats {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
  padding: 16px 20px;
  background: var(--white-a10);
  border: 1px solid var(--white-a18);
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px);
  width: fit-content;
}
.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__stat strong {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 800;
  color: var(--primary-yellow);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.hero__stat span {
  font-size: 0.72rem;
  color: var(--white-a60);
  font-weight: 500;
  white-space: nowrap;
}
.hero__stat-divider {
  width: 1px;
  height: 28px;
  background: var(--white-a18);
  flex-shrink: 0;
}
 
/* ── RIGHT COLUMN — profile card ── */
.hero__right {
  display: flex;
  justify-content: center;
}
 
.hero__card {
  position: relative;
  background: var(--white-a10);
  border: 1px solid var(--white-a18);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  padding: clamp(24px, 4vw, 36px);
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 var(--white-a18);
  transition: transform var(--transition), box-shadow var(--transition);
}
.hero__card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 var(--white-a30);
}
 
/* corner accent brackets */
.hero__card-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--primary-yellow);
  border-style: solid;
  opacity: 0.7;
}
.hero__card-corner--tl { top: 12px; left: 12px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.hero__card-corner--tr { top: 12px; right: 12px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.hero__card-corner--bl { bottom: 12px; left: 12px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.hero__card-corner--br { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }
 
/* photo wrap */
.hero__photo-wrap {
  position: relative;
  flex-shrink: 0;
}
.hero__photo-frame {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 215, 0, 0.4);
  animation: spin-slow 18s linear infinite;
}
.hero__photo {
  width: clamp(120px, 18vw, 168px);
  height: clamp(120px, 18vw, 168px);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid var(--white-a30);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  display: block;
}
 
/* star badge on photo */
.hero__photo-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.hero__photo-badge svg {
  width: 14px;
  height: 14px;
  stroke: var(--blue-deeper);
  fill: var(--blue-deeper);
  stroke-width: 1.5;
}
 
/* profile text */
.hero__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: center;
}
.hero__name {
  font-family: 'Segoe UI', sans-serif;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  font-weight: 700;
  color: var(--bg-white);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.hero__dept {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--white-a60);
  line-height: 1.4;
}
.hero__divider {
  width: 40px;
  height: 1px;
  background: var(--white-a18);
  margin: 6px 0;
}
.hero__btn-row {
  display: flex;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}
 
/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — mobile fix (preserves full-width on desktop)
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }
 
  .hero__right {
    order: -1;
  }
 
  .hero__card {
    max-width: 300px;
  }
 
  .hero__stats {
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition:
    transform 0.2s var(--ease-spring),
    box-shadow 0.2s var(--ease-out),
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
  will-change: transform;
  white-space: nowrap;
  text-decoration: none;
  min-height: 46px;
}
.btn:active { transform: scale(0.97); }

.btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out);
}
.btn:hover .btn__icon { transform: translateX(3px); }

/* primary — hero CTA */
.btn--primary {
  background: var(--primary-yellow);
  color: var(--blue-deeper);
  font-size: 0.95rem;
  padding: 13px 26px;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.35);
}
.btn--primary:hover {
  background: #FFE433;
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.50);
  transform: translateY(-2px);
}

/* CV button — solid white */
.btn--cv {
  flex: 1;
  background: var(--bg-white);
  color: var(--primary-blue);
  font-size: 0.8rem;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  min-height: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.btn--cv:hover {
  background: var(--primary-yellow);
  color: var(--blue-deeper);
  transform: translateY(-2px);
}
.btn--cv .btn__icon { transform: translateY(0); }
.btn--cv:hover .btn__icon { transform: translateY(2px); }

/* portfolio button — outlined */
.btn--portfolio {
  flex: 1;
  background: transparent;
  color: var(--bg-white);
  font-size: 0.8rem;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--white-a30);
  min-height: 40px;
}
.btn--portfolio:hover {
  background: var(--white-a10);
  border-color: var(--white-a60);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
═══════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}
[data-reveal-delay] {
  transition-delay: 150ms;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════════ */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
═══════════════════════════════════════════════════════════ */

/* ── up to 768px — single column ── */
@media (max-width: 768px) {
  /* navbar: show burger */
  .navbar__burger { display: flex; }

  /* nav slides down from top */
  .navbar__menu {
    position: fixed;
    top: var(--navbar-h);
    inset-inline: 0;
    background: rgba(254, 254, 250, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(56, 82, 180, 0.10);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 20px;
    gap: 4px;
    /* hidden by default */
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    pointer-events: none;
    transition:
      clip-path 0.32s var(--ease-out),
      opacity 0.28s var(--ease-out);
  }
  .navbar__menu.is-open {
    clip-path: inset(0 0 0% 0);
    opacity: 1;
    pointer-events: all;
  }
  .navbar__link {
    font-size: 1rem;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    min-height: 48px;
    justify-content: flex-start;
  }

  /* hero: single column, card below */
  .hero {
    padding-block: calc(var(--navbar-h) + 32px) 48px;
    padding-inline: clamp(16px, 5vw, 32px);
    align-items: flex-start;
  }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* left col adjustments */
  .hero__title {
    font-size: clamp(2.4rem, 11vw, 3.4rem);
  }
  .hero__stats {
    width: 100%;
    justify-content: space-around;
  }

  /* card: full width, centered */
  .hero__right { width: 100%; }
  .hero__card  { max-width: 100%; }

  .hero__photo {
    width: clamp(100px, 28vw, 140px);
    height: clamp(100px, 28vw, 140px);
  }

  .hero__btn-row {
    flex-direction: row;
  }
}

/* ── very narrow — 375px and below ── */
@media (max-width: 375px) {
  .hero__stats {
    padding: 12px 14px;
    gap: 14px;
  }
  .hero__btn-row {
    flex-direction: column;
  }
  .btn--cv,
  .btn--portfolio {
    width: 100%;
  }
}

/* ── 769px+ — enforce 2 columns ── */
@media (min-width: 769px) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── large screens — widen title ── */
@media (min-width: 1100px) {
  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 2 — MATERIALS SECTION
═══════════════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.materials {
  background: var(--bg-white);
  padding-block: clamp(60px, 9vw, 100px);
  padding-inline: clamp(20px, 6vw, 80px);
}

/* ── Section header ── */
.materials__header {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.materials__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-blue);
  background: rgba(56, 82, 180, 0.08);
  padding: 5px 14px;
  border-radius: 99px;
  margin-bottom: 14px;
}

.materials__title {
  font-family: 'Segoe UI', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  color: var(--text-dark);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 12px;
}

.materials__sub {
  font-size: clamp(0.9rem, 1.6vw, 1rem);
  color: var(--accent-gray);
  line-height: 1.65;
}

/* ── Two-column layout ── */
.materials__layout {
  display: grid;
  grid-template-columns: 288px 1fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
  max-width: 1240px;
  margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════ */
.sidebar {
  position: sticky;
  top: calc(var(--navbar-h) + 16px);
}

.sidebar__card {
  background: var(--primary-blue);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow:
    0 4px 16px rgba(56, 82, 180, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ── Search bar ── */
.sidebar__search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.sidebar__search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.40);
  pointer-events: none;
  flex-shrink: 0;
}

.sidebar__search {
  width: 100%;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.88rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  padding: 10px 36px 10px 36px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  min-height: 44px;
}
.sidebar__search::placeholder { color: rgba(255, 255, 255, 0.35); }
.sidebar__search:focus {
  border-color: var(--primary-yellow);
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.18);
}
.sidebar__search::-webkit-search-cancel-button { -webkit-appearance: none; }

.sidebar__search-clear {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.40);
  border-radius: 4px;
  padding: 0;
  transition: color 0.2s, background 0.2s;
}
.sidebar__search-clear:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
}
.sidebar__search-clear svg { width: 14px; height: 14px; }

/* ── Sections ── */
.sidebar__section { display: flex; flex-direction: column; gap: 10px; }

.sidebar__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.40);
}

/* ── Filter tags ── */
.sidebar__tags { display: flex; flex-wrap: wrap; gap: 7px; }

.stag {
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.70);
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  padding: 5px 13px;
  cursor: pointer;
  min-height: 34px;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s var(--ease-spring);
  white-space: nowrap;
}
.stag:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  transform: translateY(-1px);
}
.stag.is-active {
  background: var(--primary-yellow);
  border-color: var(--primary-yellow);
  color: #1E2D6B;
  box-shadow: 0 3px 10px rgba(255, 215, 0, 0.30);
}

/* ── About ── */
.sidebar__about { padding-top: 4px; }

.sidebar__about-text {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.65;
}

.sidebar__about-stats {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebar__about-stats span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.50);
}
.sidebar__about-stats strong {
  color: var(--primary-yellow);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   CARDS GRID
═══════════════════════════════════════════════════════════ */
.mat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
  align-items: start;
}

/* ── Individual card ── */
.mcard {
  background: var(--primary-blue);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 4px 16px rgba(56, 82, 180, 0.20),
    0 1px 3px rgba(0, 0, 0, 0.12);
  /* filter state transition */
  transition:
    opacity 0.28s var(--ease-out),
    transform 0.28s var(--ease-out),
    box-shadow 0.22s var(--ease-out);
  will-change: opacity, transform;
}
.mcard:hover {
  transform: translateY(-5px);
  box-shadow:
    0 12px 32px rgba(56, 82, 180, 0.30),
    0 2px 6px rgba(0, 0, 0, 0.14);
}

/* hidden/filtered state — CSS-driven, no reflow */
.mcard.is-hidden {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  position: absolute; /* take out of flow without display:none to keep transition */
  visibility: hidden;
}

/* Ribbon */
.mcard__ribbon {
  background: rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  padding: 8px 20px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-yellow);
}

/* Body */
.mcard__body {
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.mcard__meta {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.50);
  font-weight: 500;
}

.mcard__title {
  font-family: 'Segoe UI', sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.mcard__desc {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.6;
}

/* Keyword badges */
.mcard__kw {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mkw {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  padding: 3px 10px;
  /* interactive but not navigational */
  cursor: default;
  user-select: none;
  transition: background 0.18s, border-color 0.18s, transform 0.15s var(--ease-spring);
}
.mkw:hover {
  background: rgba(255, 215, 0, 0.20);
  border-color: rgba(255, 215, 0, 0.35);
  color: var(--primary-yellow);
  transform: translateY(-1px);
}

/* Materi list */
.mcard__materi {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mcard__materi-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.40);
  margin-bottom: 4px;
}

.mcard__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mcard__item {
  display: flex;
  width: 100%;
  min-width: 0; /* critical: allows flex children to shrink below content size */
}

.mcard__link {
  display: flex;
  align-items: flex-start; /* top-align icon when text wraps to 2 lines */
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  width: 100%;
  min-width: 0; /* allows text node to shrink */
  white-space: normal; /* never prevent wrapping */
  word-break: break-word; /* break long URLs/words if needed */
  overflow-wrap: break-word;
  transition: background 0.18s, color 0.18s;
  line-height: 1.45;
}

.mcard__link:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.mcard__file-icon {
  font-size: 0.9rem;
  flex-shrink: 0; /* never squish the icon */
  line-height: 1.45; /* vertically aligns with first text line */
}

/* Extra (hidden) items — smooth height expand */
.mcard__item--extra {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  /* collapsed state must also zero the item's own height */
  height: 0;
  transition:
    grid-template-rows 0.32s var(--ease-out),
    height             0.32s var(--ease-out),
    opacity            0.28s var(--ease-out);
  opacity: 0;

}
.mcard__item--extra > .mcard__link {
  min-height: 0;
  overflow: hidden;
}

.mcard__item--extra.is-open {
  grid-template-rows: 1fr;
  /* auto lets the item grow to fit its grid content naturally */
  height: auto;
  opacity: 1;
}

/* Toggle button */
.mcard__toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-yellow);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.18s;
}
.mcard__toggle:hover { opacity: 0.75; }

.mcard__toggle-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.28s var(--ease-out);
  flex-shrink: 0;
}
.mcard__toggle.is-open .mcard__toggle-icon { transform: rotate(180deg); }

/* Card footer */
.mcard__footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.10);
  min-height: 52px;
  display: flex;
  align-items: center;
}
.mcard__footer--empty { padding: 0; min-height: 0; border-top: none; background: transparent; }

.mcard__github {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s var(--ease-spring);
}
.mcard__github:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.38);
  color: #fff;
  transform: translateY(-1px);
}
.mcard__github-icon { width: 15px; height: 15px; flex-shrink: 0; }

/* Empty state */
.mat-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 64px 20px;
  text-align: center;
  color: var(--accent-gray);
}
.mat-empty[hidden] { display: none; }
.mat-empty svg { width: 56px; height: 56px; color: rgba(56, 82, 180, 0.20); margin-bottom: 4px; }
.mat-empty p { font-size: 1rem; font-weight: 700; color: var(--text-dark); }
.mat-empty span { font-size: 0.85rem; }

/* ── Grid layout wrapper fix when cards hidden ──
   Use a wrapper trick: we keep hidden cards out-of-flow cleanly */
.mat-grid {
  position: relative; /* needed for absolute hidden cards */
}

/* ═══════════════════════════════════════════════════════════
   PHASE 3 — CONTACT SECTION & FOOTER
═══════════════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.contact {
  background: var(--bg-white);
  padding-block: clamp(60px, 9vw, 100px);
  padding-inline: clamp(20px, 6vw, 80px);
  border-top: 1px solid rgba(56, 82, 180, 0.08);
}

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
}

/* ── Left Column ── */
.contact__left {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-blue);
}

.contact__title {
  font-family: 'Segoe UI', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  color: var(--text-dark);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.contact__desc {
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
  color: #55575c;
  line-height: 1.7;
}

.contact__note {
  display: flex;
  gap: 12px;
  background: rgba(56, 82, 180, 0.05);
  border-left: 3px solid var(--primary-blue);
  padding: 14px 18px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-top: 6px;
}

.contact__note-icon {
  width: 20px;
  height: 20px;
  color: var(--primary-blue);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact__note p {
  font-size: 0.82rem;
  color: #4a4d52;
  font-weight: 500;
  line-height: 1.5;
}

/* ── Right Column: Form Box ── */
.contact__right {
  display: flex;
  justify-content: center;
}

.contact__form-box {
  background: var(--primary-blue);
  width: 100%;
  max-width: 480px;
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius-xl);
  box-shadow: 
    0 10px 30px rgba(56, 82, 180, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Form Group Controls */
.cform {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cform__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cform__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.cform__input,
.cform__textarea,
.cform__select {
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text-dark);
  background: #ffffff;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 11px 16px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}

.cform__textarea {
  resize: vertical;
  min-height: 100px;
}

.cform__input:focus,
.cform__textarea:focus,
.cform__select:focus {
  border-color: var(--primary-yellow);
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.25);
}

/* Custom Select Wrapper for arrow */
.cform__select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cform__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.cform__select-wrapper::after {
  content: '';
  position: absolute;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--primary-blue);
  border-bottom: 2px solid var(--primary-blue);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Submit Button Override */
.btn--submit {
  background: var(--primary-yellow);
  color: var(--blue-deeper);
  font-size: 0.92rem;
  width: 100%;
  padding-block: 13px;
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.3);
  margin-top: 6px;
}

.btn--submit:hover {
  background: #FFE433;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.45);
}

/* ── Validation Shake Error Style ── */
.cform__input.input-shake-error,
.cform__textarea.input-shake-error,
.cform__select.input-shake-error {
  border-color: #ff4d4d !important;
  box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.25) !important;
  animation: shake 0.4s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* ═══════════════════════════════════════════════════════════
   ACADEMIC FOOTER
═══════════════════════════════════════════════════════════ */
.footer {
  background: var(--blue-deeper);
  color: #ffffff;
  padding-top: clamp(48px, 6vw, 64px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1.51fr 0.8fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 6vw, 80px);
  padding-bottom: 40px;
}

/* Footer columns structure */
.footer__col {
  display: flex;
  flex-direction: column;
}

.footer__logo {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.footer__author {
  font-size: 0.85rem;
  color: var(--white-a80);
  margin-bottom: 12px;
}

.footer__highlight {
  color: var(--primary-yellow);
  font-weight: 600;
}

.footer__bio {
  font-size: 0.82rem;
  color: var(--white-a60);
  line-height: 1.65;
  max-width: 44ch;
}

.footer__title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-yellow);
  margin-bottom: 18px;
}

/* Column 2: Nav List */
.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__link {
  font-size: 0.85rem;
  color: var(--white-a80);
  transition: color var(--transition), transform var(--transition);
  display: inline-block;
  width: fit-content;
}

.footer__link:hover {
  color: #ffffff;
  transform: translateX(4px);
}

/* Column 3: Communication channels */
.footer__channels {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__channel-item {
  display: flex;
  aria-items: center;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--white-a80);
  background: var(--white-a10);
  border: 1px solid transparent;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.footer__channel-item:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--white-a18);
  color: #ffffff;
}

.footer__channel-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Footer Base Copyright Row */
.footer__base {
  border-top: 1px solid var(--white-a10);
  padding-block: 20px;
  text-align: center;
}

.footer__base p {
  font-size: 0.76rem;
  color: var(--white-a60);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   PHASE 3 RESPONSIVE MEDIA QUERIES
═══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .contact__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .contact__form-box {
    max-width: 100%;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 32px;
  }

  .footer__title {
    margin-bottom: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   MATERIALS RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .materials__layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static; /* un-stick on mobile */
  }

  /* horizontal scroll for tag row on very narrow */
  .sidebar__tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sidebar__tags::-webkit-scrollbar { display: none; }
}

@media (max-width: 520px) {
  .mat-grid {
    grid-template-columns: 1fr;
  }

  .mcard__ribbon { font-size: 0.62rem; }
}

@media (max-width: 768px) {

  /* ── Force single-column stacking ───────────────────────── */
  .two-col,
  .three-col,
  .sidebar-layout {
    display: flex;
    flex-direction: column; /* explicit stack, no ambiguity */
  }

  /* ── Unstick sidebars on mobile ──────────────────────────── */
  .sidebar,
  [class*="sidebar"] {
    position: static;   /* sticky/fixed sidebars break scroll on mobile */
    width: 100%;
  }

  /* ── Full-width form controls ────────────────────────────── */
  input,
  textarea,
  select,
  button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* ── Remove any hard pixel widths that escaped the reset ─── */
  [style*="width:"],
  [style*="min-width:"] {
    /* Can't override inline styles here without !important —
       fix them at the HTML level instead (remove inline styles). */
  }

  /* ── Tables — horizontal scroll instead of overflow ─────── */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {

  /* ============================================================
     (1) SEARCH / FILTER SIDEBAR CARD
     Maps to: .sidebar, .sidebar__card, .sidebar__tags, .stag
     ============================================================ */

  /* Un-stick the sidebar — sticky makes no sense in single-column */
  .sidebar {
    position: static;
    width: 100%;
  }

  .sidebar__card {
    /* Full bleed, comfortable internal padding */
    width: 100%;
    padding: 16px;
    gap: 16px;
    /* Reduce shadow weight on mobile for performance */
    box-shadow: 0 2px 12px rgba(56, 82, 180, 0.18);
    border-radius: var(--radius-md);
  }

  /* Search input — full width, larger touch target */
  .sidebar__search {
    font-size: 1rem;      /* prevents iOS auto-zoom on focus (must be ≥ 16px) */
    min-height: 48px;     /* comfortable thumb tap */
    padding: 12px 40px 12px 38px;
  }

  .sidebar__search-icon {
    width: 18px;
    height: 18px;
  }

  /* Tag cloud — horizontal scroll instead of wrapping into many rows */
  .sidebar__tags {
    display: flex;
    flex-wrap: nowrap;          /* keep all tags on one scrollable row */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* Firefox */
    padding-bottom: 4px;        /* room for scroll momentum shadow */
    gap: 8px;
  }
  .sidebar__tags::-webkit-scrollbar { display: none; } /* Chrome/Safari */

  /* Individual filter tags — never shrink below their label */
  .stag {
    flex-shrink: 0;             /* prevent squishing in scroll row */
    font-size: 0.82rem;
    padding: 7px 14px;
    min-height: 38px;           /* touch-friendly */
  }

  /* About stats row — stack if needed on very narrow */
  .sidebar__about-stats {
    flex-wrap: wrap;
    gap: 10px;
  }


  /* ============================================================
     (2) COURSE / MATERIAL CARDS
     Maps to: .mat-grid, .mcard, .mcard__ribbon, .mcard__body,
              .mcard__kw, .mkw, .mcard__materi, .mcard__link,
              .mcard__toggle, .mcard__footer, .mcard__github
     ============================================================ */

  /* Grid: single column, full width */
  .mat-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Card: full width, remove hover lift (irrelevant on touch) */
  .mcard {
    width: 100%;
    min-width: 0;
  }
  .mcard:hover {
    transform: none;            /* no hover state on touch screens */
  }

  /* Ribbon label — slightly larger for readability */
  .mcard__ribbon {
    font-size: 0.70rem;
    padding: 8px 16px;
    letter-spacing: 0.10em;
  }

  /* Card body — tighter padding on mobile */
  .mcard__body {
    padding: 16px 16px 12px;
    gap: 10px;
  }

  /* Title — slightly smaller so long names don't overflow */
  .mcard__title {
    font-size: 1rem;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Description — keep readable but compact */
  .mcard__desc {
    font-size: 0.82rem;
    line-height: 1.55;
  }

  /* Keyword badges — horizontal scroll (same pattern as tags) */
  .mcard__kw {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
  }
  .mcard__kw::-webkit-scrollbar { display: none; }

  .mkw {
    flex-shrink: 0;             /* never squish badges */
    font-size: 0.68rem;
    padding: 3px 10px;
  }

  /* Materi list — ensure items don't clip */
  .mcard__materi {
    padding-top: 10px;
  }

  /* Each document link row — full width, wrapping text */
  .mcard__link {
    font-size: 0.82rem;
    padding: 8px 6px;           /* larger tap target */
    min-height: 40px;           /* comfortable thumb target */
    align-items: flex-start;    /* icon aligns to first text line when wrapping */
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .mcard__file-icon {
    flex-shrink: 0;
    margin-top: 1px;            /* optical alignment with first text line */
  }

  /* Toggle button — larger tap area */
  .mcard__toggle {
    padding: 4px 0;
    min-height: 36px;
    font-size: 0.78rem;
  }

  /* Footer — pad for thumb reach, GitHub button full width on very small */
  .mcard__footer {
    padding: 12px 16px;
  }

  .mcard__github {
    font-size: 0.78rem;
    padding: 8px 14px;
    min-height: 40px;
  }


  /* ============================================================
     (3) MATERIALS SECTION SHELL
     Ensures the two-column layout wrapper itself stacks cleanly
     ============================================================ */

  .materials {
    padding-inline: 16px;
    padding-block: clamp(40px, 8vw, 64px);
  }

  .materials__layout {
    display: flex;
    flex-direction: column;     /* sidebar above cards */
    gap: 20px;
  }

  .materials__title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .materials__sub {
    font-size: 0.9rem;
  }

}


/* ================================================================
   EXTRA BREAKPOINT — very narrow phones (≤ 380px)
   Only add overrides that break at sub-380px, nothing else.
   ================================================================ */

@media (max-width: 380px) {

  .sidebar__card { padding: 14px; }

  .mcard__body   { padding: 14px 14px 10px; }
  .mcard__footer { padding: 10px 14px; }

  .mcard__github {
    width: 100%;                /* stretch button across narrow footer */
    justify-content: center;
  }

  .mcard__title  { font-size: 0.95rem; }

}