/* =========================================
   HALAMAN DETAIL SEKBID — PROFIL TIM
   Tema gelap navy + emas, sama dengan Beranda & Struktur.
   Nama kelas TIDAK berubah (HTML & sekbid.js tetap aman).
 
   Daftar isi
   0. Token & dasar halaman
   1. Hero
   2. Tugas umum
   3. Sorotan koordinator
   4. Anggota tim
   5. What we do
   6. Galeri dokumentasi
   7. Teaser bidang berikutnya
   8. Lightbox
   9. Animasi scroll
   10. Responsif
   11. Reduced motion
   ========================================= */
 
/* =========================================
   0. TOKEN & DASAR HALAMAN
   Memakai token Beranda bila ada; nilai kedua = cadangan.
   ========================================= */
:root {
    --sekbid-bg-950: var(--ink-950, #050b1a);
    --sekbid-bg-900: var(--ink-900, #0a1530);
    --sekbid-bg-800: var(--ink-800, #101f44);
    --sekbid-bg-700: var(--ink-700, #1a2d5c);
 
    --sekbid-gold-300: var(--gold-300, #ffe08a);
    --sekbid-gold: var(--gold-400, #ffc94d);
    --sekbid-gold-500: var(--gold-500, #f5b025);
    --sekbid-blue: #1e5fd6;                       /* hanya untuk cahaya dekoratif */
 
    --sekbid-text: var(--text-main, #f1f5ff);
    --sekbid-muted: var(--text-muted, #a9b7d6);
    --sekbid-line: var(--card-border, rgba(255, 201, 77, 0.12));
    --sekbid-line-hover: var(--card-border-hover, rgba(255, 201, 77, 0.42));
    --sekbid-glass: var(--card-bg, linear-gradient(180deg, rgba(16, 31, 68, 0.62), rgba(10, 21, 48, 0.78)));
 
    --sekbid-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
 
/* Latar halaman ini ikut gelap (hanya halaman yang punya .bidang-hero) */
html:has(.bidang-hero),
body:has(.bidang-hero) {
    background-color: var(--sekbid-bg-950);
}
 
body:has(.bidang-hero) {
    color: var(--sekbid-text);
}
 
/* Foto HEIF/HEIC: <picture> default-nya inline, dipaksa block
   supaya ukurannya konsisten dan tidak bikin celah di grid/flex. */
.bidang-hero picture,
.koordinator-photo-wrap picture,
.anggota-tim-card picture,
.galeri-strip picture,
.next-bidang-section picture {
    display: block;
    width: 100%;
    height: 100%;
}
 
/* =========================================
   1. HERO — foto tim full-bleed
   ========================================= */
.bidang-hero {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background-color: var(--sekbid-bg-950);
}
 
.bidang-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 80%;                  /* naikkan/turunkan angka ini untuk menggeser fokus foto */
}
 
/* Gradasi navy gelap supaya teks terbaca + sedikit cahaya emas di atas */
.bidang-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 201, 77, 0.12), transparent 60%),
        linear-gradient(180deg, rgba(5, 11, 26, 0.2) 0%, rgba(5, 11, 26, 0.25) 40%, rgba(5, 11, 26, 0.9) 100%);
}
 
/* Memudar menyatu ke warna halaman di dasar hero */
.bidang-hero::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 140px;                                /* makin besar = area pudar makin tinggi */
    background: linear-gradient(to bottom, rgba(5, 11, 26, 0) 0%, var(--sekbid-bg-950) 100%);
    z-index: 2;                                   /* di atas foto/overlay, di bawah teks (z-index 3) */
    pointer-events: none;
}
 
/* Bulatan dekoratif pojok kiri atas */
.bidang-hero-deco-circle {
    position: absolute;
    top: -60px;
    left: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--sekbid-blue) 0%, rgba(30, 95, 214, 0) 70%);
    opacity: 0.5;
    z-index: 2;
}
 
/* Pola titik dekoratif */
.bidang-hero-deco-dots {
    position: absolute;
    top: 40px;
    left: 24px;
    width: 70px;
    height: 70px;
    background-image: radial-gradient(rgba(255, 201, 77, 0.5) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    z-index: 2;
}
 
.bidang-hero-content {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    z-index: 3;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    color: #ffffff;
}
 
.bidang-hero-content .badge-gold {
    background: rgba(5, 11, 26, 0.45);
    border-color: rgba(255, 201, 77, 0.4);
    color: var(--sekbid-gold);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
 
.bidang-hero-content h1 {
    margin: 14px 0 10px;
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    letter-spacing: -1px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
 
/* Garis emas kecil di bawah judul hero */
.bidang-hero-content h1::after {
    content: '';
    display: block;
    width: 72px;
    height: 3px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, transparent, var(--sekbid-gold), transparent);
    border-radius: 2px;
}
 
.bidang-hero-content p {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}
 
/* Animasi masuk hero — jalan otomatis begitu halaman dibuka */
@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}
 
@keyframes hero-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
 
.bidang-hero-content .badge-gold {
    animation: hero-fade-up 0.8s var(--sekbid-ease) both;
    animation-delay: 0.1s;
}
 
.bidang-hero-content h1 {
    animation: hero-fade-up 0.9s var(--sekbid-ease) both;
    animation-delay: 0.28s;
}
 
.bidang-hero-content p {
    animation: hero-fade-up 0.9s var(--sekbid-ease) both;
    animation-delay: 0.46s;
}
 
.bidang-hero-deco-circle {
    animation: hero-fade-in 1.4s ease both;
}
 
.bidang-hero-deco-dots {
    animation: hero-fade-in 1.4s ease both;
    animation-delay: 0.2s;
}
 
/* =========================================
   2. TUGAS UMUM
   ========================================= */
.tugas-section {
    background: var(--sekbid-bg-950);
    padding: 70px 20px;
}
 
.tugas-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 40px;
    align-items: center;
}
 
.tugas-grid h2 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--sekbid-text);
}
 
/* Garis emas pendek di bawah judul */
.tugas-grid h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 16px;
    background: linear-gradient(90deg, var(--sekbid-gold-300), var(--sekbid-gold-500));
    border-radius: 2px;
}
 
.tugas-grid p {
    padding-left: 22px;
    border-left: 3px solid var(--sekbid-gold);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--sekbid-muted);
}
 
/* =========================================
   3. SOROTAN KOORDINATOR
   ========================================= */
.koordinator-section {
    position: relative;
    overflow: hidden;
    padding: 80px 20px;
    background:
        radial-gradient(ellipse 60% 70% at 85% 30%, rgba(255, 201, 77, 0.08), transparent 70%),
        radial-gradient(ellipse 50% 60% at 10% 80%, rgba(30, 95, 214, 0.12), transparent 70%),
        var(--sekbid-bg-900);
    border-top: 1px solid var(--sekbid-line);
    border-bottom: 1px solid var(--sekbid-line);
}
 
.koordinator-deco-dots {
    position: absolute;
    top: 50px;
    left: 24px;
    width: 80px;
    height: 80px;
    background-image: radial-gradient(rgba(255, 201, 77, 0.35) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
}
 
.koordinator-deco-stripes {
    position: absolute;
    top: 0;
    right: -40px;
    width: 220px;
    height: 100%;
    background: repeating-linear-gradient(
        115deg,
        rgba(255, 201, 77, 0.06),
        rgba(255, 201, 77, 0.06) 6px,
        transparent 6px,
        transparent 22px
    );
    pointer-events: none;
}
 
.koordinator-grid {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 50px;
    align-items: center;
}
 
.koordinator-photo-wrap img {
    width: 100%;
    max-width: 460px;
    /* Disiapkan untuk foto PNG transparan (background dihapus) supaya
       foto "menyatu" ke section. Kalau masih JPG berlatar polos,
       efeknya belum terlihat. */
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.45));
}
 
.koordinator-label {
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sekbid-gold);
}
 
.koordinator-name {
    margin-bottom: 6px;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--sekbid-text);
}
 
/* Info kelas — di bawah nama koordinator */
.koordinator-kelas {
    margin-bottom: 24px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--sekbid-muted);
}
 
/* Kartu motto */
.motto-card {
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--sekbid-line);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--sekbid-bg-700), var(--sekbid-bg-800));
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6);
}
 
.motto-card-label {
    padding: 10px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sekbid-gold);
    border-bottom: 1px solid var(--sekbid-line);
}
 
.motto-card-quote {
    padding: 18px 20px;
    text-align: center;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sekbid-text);
}
 
/* Kartu pengalaman organisasi & kepanitiaan */
.pengalaman-card {
    padding: 18px 20px;
    background: var(--sekbid-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--sekbid-line);
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}
 
.pengalaman-title {
    margin-bottom: 14px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--sekbid-gold);
}
 
.pengalaman-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
 
.pengalaman-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
 
.pengalaman-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sekbid-gold-300), var(--sekbid-gold-500));
    font-size: 0.9rem;
}
 
.pengalaman-item h4 {
    margin-bottom: 2px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--sekbid-text);
}
 
.pengalaman-item span {
    font-size: 0.78rem;
    color: var(--sekbid-muted);
}
 
/* =========================================
   4. ANGGOTA TIM
   ========================================= */
.anggota-tim-section {
    background: var(--sekbid-bg-950);
    padding: 90px 20px 100px;
}
 
.anggota-tim-head {
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
}
 
.anggota-tim-eyebrow {
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sekbid-gold);
}
 
.anggota-tim-head h2 {
    margin-bottom: 10px;
    font-size: clamp(1.9rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #ffffff;
}
 
.anggota-tim-head p {
    font-size: 0.95rem;
    color: var(--sekbid-muted);
}
 
.anggota-tim-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 26px;
}
 
.anggota-tim-card {
    display: flex;
    flex-direction: column;
}
 
.anggota-tim-card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-bottom: 14px;
    object-fit: cover;
    border: 1px solid var(--sekbid-line);
    border-radius: 16px;
}
 
.anggota-tim-card h3 {
    margin-bottom: 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}
 
/* Info kelas — di bawah nama, sebelum badge role */
.anggota-tim-kelas {
    display: block;
    margin-bottom: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--sekbid-muted);
}
 
.anggota-tim-role {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--sekbid-gold);
    background: rgba(255, 201, 77, 0.08);
    border: 1px solid rgba(255, 201, 77, 0.28);
    border-radius: 999px;
}
 
.anggota-tim-card .motto-card {
    margin-bottom: 14px;
}
 
.anggota-tim-card .pengalaman-card {
    margin-bottom: 0;
}
 
/* =========================================
   5. WHAT WE DO
   ========================================= */
.whatwedo-section {
    background: var(--sekbid-bg-900);
    padding: 90px 20px;
    border-top: 1px solid var(--sekbid-line);
}
 
.whatwedo-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.4fr;
    gap: 50px;
}
 
.whatwedo-heading h2 {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #ffffff;
}
 
.whatwedo-intro {
    align-self: center;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--sekbid-muted);
}
 
.whatwedo-list {
    grid-column: 1 / -1;
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px 40px;
}
 
.whatwedo-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
 
.whatwedo-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.1rem;
    color: var(--sekbid-gold);
    background: rgba(255, 201, 77, 0.1);
    border: 1px solid rgba(255, 201, 77, 0.25);
}
 
.whatwedo-item h3 {
    margin-bottom: 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}
 
.whatwedo-item p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--sekbid-muted);
}
 
/* =========================================
   6. GALERI DOKUMENTASI
   ========================================= */
.galeri-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
 
.galeri-strip img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
}
 
/* =========================================
   7. TEASER BIDANG BERIKUTNYA
   ========================================= */
.next-bidang-section {
    position: relative;
    min-height: 45vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--sekbid-bg-950);
    border-top: 1px solid var(--sekbid-line);
}
 
.next-bidang-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
}
 
.next-bidang-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 90% 100%, rgba(245, 176, 37, 0.14), transparent 60%),
        linear-gradient(180deg, rgba(5, 11, 26, 0.65) 0%, rgba(5, 11, 26, 0.94) 100%);
}
 
.next-bidang-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
 
.next-bidang-content h2 {
    margin-bottom: 6px;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
    color: #ffffff;
}
 
.next-bidang-content p {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--sekbid-muted);
}
 
.btn-next-bidang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    color: var(--sekbid-bg-950);
    background: linear-gradient(135deg, var(--sekbid-gold-300), var(--sekbid-gold-500));
    border-radius: 999px;
    box-shadow: 0 14px 30px -8px rgba(245, 176, 37, 0.5);
    transition: transform 0.3s var(--sekbid-ease), box-shadow 0.3s var(--sekbid-ease);
}
 
.btn-next-bidang:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -8px rgba(245, 176, 37, 0.65);
}
 
/* =========================================
   8. LIGHTBOX — klik foto untuk lihat full
   ========================================= */
.lb-clickable {
    cursor: zoom-in;
}
 
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 11, 26, 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
 
.lightbox-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
 
.lightbox-overlay img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    transform: scale(0.92);
    transition: transform 0.3s ease;
    cursor: default;
}
 
.lightbox-overlay.is-open img {
    transform: scale(1);
}
 
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 28px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
    color: #ffffff;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 201, 77, 0.2);
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
 
.lightbox-close:hover {
    color: var(--sekbid-bg-950);
    background: var(--sekbid-gold);
    transform: rotate(90deg);
}
 
/* =========================================
   9. ANIMASI SCROLL
   Class ditambahkan otomatis oleh sekbid.js — tidak perlu ditulis di HTML.
   .reveal-right : foto (koordinator, anggota tim, galeri) muncul dari kanan
   .reveal-up    : judul, deskripsi, motto-card, pengalaman-card, whatwedo-item muncul dari bawah
   ========================================= */
.reveal-right {
    opacity: 0;
    transform: translateX(70px);
    transition: opacity 0.7s var(--sekbid-ease), transform 0.7s var(--sekbid-ease);
    transition-delay: var(--reveal-delay, 0s);
}
 
.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}
 
.reveal-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--sekbid-ease), transform 0.7s var(--sekbid-ease);
    transition-delay: var(--reveal-delay, 0s);
}
 
.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
 
/* =========================================
   10. RESPONSIF
   ========================================= */
@media (max-width: 900px) {
    .tugas-grid,
    .koordinator-grid,
    .whatwedo-grid {
        grid-template-columns: 1fr;
        text-align: left;
    }
 
    .koordinator-photo-wrap {
        display: flex;
        justify-content: center;
    }
 
    .galeri-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}
 
@media (max-width: 640px) {
    /* Hero: foto tampil utuh, memudar di dasar, teks di bawah foto */
    .bidang-hero {
        display: block;
        min-height: auto;
    }

    .bidang-hero-photo {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        /* Dasar foto memudar menyatu ke warna halaman.
           Ubah 70% → makin kecil = area pudar makin tinggi. */
        -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    }

    /* Overlay gelap dimatikan supaya foto tidak tertutup;
       efek pudar dipegang oleh mask di foto */
    .bidang-hero::before,
    .bidang-hero::after {
        display: none;
    }

    .bidang-hero-content {
        position: relative;
        bottom: auto;
        margin-top: -36px;             /* teks naik sedikit ke area pudar */
        padding: 0 20px 44px;
    }

    .bidang-hero-deco-circle {
        top: -40px;
        left: -40px;
        width: 150px;
        height: 150px;
    }

    .bidang-hero-deco-dots {
        top: 20px;
        left: 16px;
        width: 50px;
        height: 50px;
        background-size: 11px 11px;
    }

    /* Section */
    .anggota-tim-section,
    .whatwedo-section,
    .koordinator-section,
    .tugas-section {
        padding: 55px 20px;
    }

    /* Galeri */
    .galeri-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .galeri-strip img {
        height: 160px;
    }

    /* Teaser bidang berikutnya */
    .next-bidang-section {
        min-height: auto;
        padding: 50px 0;
    }

    .next-bidang-content {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .btn-next-bidang {
        width: 100%;
        justify-content: center;
    }

    /* Lightbox */
    .lightbox-close {
        top: 14px;
        right: 14px;
        width: 36px;
        height: 36px;
        font-size: 1.3rem;
    }
}
 
@media (max-width: 400px) {
    .bidang-hero {
        min-height: auto;
    }

    .bidang-hero-content h1 {
        font-size: 1.9rem;
    }

    .anggota-tim-grid,
    .whatwedo-list {
        grid-template-columns: 1fr;
    }
}
 
/* =========================================
   11. REDUCED MOTION
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .bidang-hero-content .badge-gold,
    .bidang-hero-content h1,
    .bidang-hero-content p,
    .bidang-hero-deco-circle,
    .bidang-hero-deco-dots {
        animation: none;
    }
 
    .reveal-right,
    .reveal-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}