/* ================================================================
style.css — PBJ Community Website
Design System: RACING POWER — Bold Orange + Deep Black
"Built for Mama & Papa Racing"
================================================================ */
/* ----------------------------------------------------------------
GOOGLE FONTS
Font (Inter, Space Grotesk, Barlow Condensed) di-load lewat SATU
di index.html. Dulu ada @import di sini juga yang
memuat font YANG SAMA — browser jadi request font dua kali (dobel
network round-trip, lebih lambat). Sudah dihapus; kalau butuh ganti
berat/keluarga font, edit di index.html, bukan di sini.
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
CSS CUSTOM PROPERTIES (VARIABLES)
---------------------------------------------------------------- */
:root {
/* === WARNA UTAMA — Bright & Cheerful (cream hangat + putih) === */
--clr-bg: #fff7ef; /* Latar utama — cream hangat, ceria & ramah */
--clr-bg-2: #fff0e2; /* Background section selang-seling, sedikit lebih hangat */
--clr-bg-card: #fffaf2; /* Kartu putih gading (ivory hangat) — lembut, tak menyilaukan */
--clr-surface: rgba(28,43,74,0.05); /* Isian halus (input, chip) di latar terang */
--clr-border: rgba(28,43,74,0.12); /* Garis tepi lembut di latar terang */
--clr-border-hot: rgba(255,107,0,0.35);
/* === WARNA ACCENT — PBJ Racing Orange === */
--clr-orange: #ff6b00; /* Oranye utama — PBJ logo */
--clr-orange-lt: #e85d00; /* Oranye pekat untuk TEKS di latar terang (kontras cukup) */
--clr-orange-dk: #cc5500; /* Oranye gelap */
--clr-amber: #ffb347; /* Amber/emas untuk highlight */
--clr-red: #e8002d; /* Merah aksen */
--clr-accent: var(--clr-orange);
/* === Warna ceria pendukung (dari logo & aksen playful) === */
--clr-navy: #1c2b4a; /* Navy dari logo — heading & teks utama */
--clr-sky: #1aa9c9; /* Biru langit — sentuhan ceria */
--clr-green: #17a866; /* Hijau segar */
--clr-purple: #7c5cff; /* Ungu playful */
/* Gradients utama */
--gradient-fire: linear-gradient(135deg, #e8002d 0%, #ff6b00 50%, #ffb347 100%);
--gradient-orange: linear-gradient(135deg, #ff6b00 0%, #ffb347 100%);
--gradient-hot: linear-gradient(135deg, #ff5a00 0%, #ff7d1a 60%, #ff9d3c 100%);
--gradient-hero: linear-gradient(135deg, rgba(255,107,0,0.12) 0%, rgba(232,0,45,0.06) 50%, transparent 100%);
--gradient-card: linear-gradient(145deg, rgba(255,107,0,0.05) 0%, rgba(255,107,0,0.02) 100%);
/* === WARNA TEKS === */
--clr-text: #26324a; /* Body — navy-abu gelap, mudah dibaca & terpercaya */
--clr-text-muted: #5f6d84; /* Teks sekunder */
--clr-text-dim: #94a0b3; /* Teks tersier */
--clr-white: #ffffff; /* Untuk teks DI ATAS oranye/gelap */
--clr-heading: #1c2b4a; /* Warna judul (navy) */
/* === FONT === */
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--font-heading: 'Space Grotesk', 'Inter', sans-serif;
--font-racing: 'Barlow Condensed', 'Inter', sans-serif; /* Font racing untuk judul besar */
/* === BORDER RADIUS === */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px;
/* === SHADOW === */
--shadow-card: 0 8px 32px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
--shadow-glow: 0 0 60px rgba(255,107,0,0.25), 0 8px 40px rgba(0,0,0,0.5);
--shadow-glow-sm: 0 0 20px rgba(255,107,0,0.3);
--shadow-orange: 0 4px 24px rgba(255,107,0,0.4);
--shadow-navbar: 0 4px 30px rgba(0,0,0,0.7), 0 1px 0 rgba(255,107,0,0.1);
/* === TRANSISI === */
--transition-fast: 0.15s ease;
--transition-normal: 0.25s ease;
--transition-slow: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
/* === SPACING === */
--section-py: clamp(64px, 10vw, 120px);
}
/* ----------------------------------------------------------------
RESET & BASE STYLES
---------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
}
body {
font-family: var(--font-body);
background-color: var(--clr-bg);
color: var(--clr-text);
line-height: 1.65;
overflow-x: hidden;
min-height: 100vh;
}
/* Racing texture overlay — subtle speed lines on body */
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
repeating-linear-gradient(
-45deg,
transparent,
transparent 60px,
rgba(255,107,0,0.012) 60px,
rgba(255,107,0,0.012) 61px
);
pointer-events: none;
z-index: 0;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--clr-heading); }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--font-body); cursor: pointer; border: none; }
/* ----------------------------------------------------------------
RACING STRIPE ACCENT — Global top accent line
---------------------------------------------------------------- */
body::after {
content: '';
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--gradient-fire);
z-index: 9999;
box-shadow: 0 0 20px rgba(255,107,0,0.8), 0 0 40px rgba(255,107,0,0.4);
}
/* ----------------------------------------------------------------
UTILITY CLASSES
---------------------------------------------------------------- */
/* Atribut hidden HTML harus SELALU menang, termasuk atas elemen yang
punya display:flex/grid sendiri. Tanpa ini, elemen ber-atribut hidden
bisa tetap tampil (bug kelas ini pernah terjadi pada .view-toggle). */
[hidden] { display: none !important; }
.container {
width: 100%;
max-width: 1200px;
margin-inline: auto;
padding-inline: clamp(16px, 4vw, 48px);
position: relative;
z-index: 1;
}
/* Kerangka section generik: dipakai section baru (#events, #instagram,
#faq) lewat class="section" supaya jarak vertikal & offset anchor
terhadap navbar konsisten tanpa menyalin dua deklarasi ini. */
.section {
padding-block: var(--section-py);
scroll-margin-top: 80px;
}
.section-header {
text-align: center;
margin-bottom: 56px;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,107,0,0.12);
border: 1px solid rgba(255,107,0,0.35);
color: var(--clr-orange-lt);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 7px 18px;
border-radius: var(--radius-full);
margin-bottom: 20px;
backdrop-filter: blur(8px);
}
.section-badge i { color: var(--clr-orange); }
.section-title {
font-family: var(--font-racing);
font-size: clamp(2.2rem, 5vw, 3.5rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: 0.01em;
text-transform: uppercase;
margin-bottom: 16px;
}
.section-subtitle {
font-size: 1.05rem;
color: var(--clr-text-muted);
max-width: 580px;
margin-inline: auto;
}
/* ----------------------------------------------------------------
BUTTON COMPONENTS
---------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 30px;
border-radius: var(--radius-full);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: transform var(--transition-normal),
box-shadow var(--transition-normal),
opacity var(--transition-fast);
border: none;
font-family: inherit;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0); }
/* Primary — blazing orange */
.btn--primary {
background: var(--gradient-hot);
color: var(--clr-white);
box-shadow: 0 4px 24px rgba(255,107,0,0.45), 0 0 0 0 rgba(255,107,0,0.3);
animation: pulse-btn 3s ease-in-out infinite;
}
.btn--primary:hover {
box-shadow: 0 8px 40px rgba(255,107,0,0.65), 0 0 60px rgba(255,107,0,0.2);
}
@keyframes pulse-btn {
0%, 100% { box-shadow: 0 4px 24px rgba(255,107,0,0.45), 0 0 0 0 rgba(255,107,0,0.3); }
50% { box-shadow: 0 4px 24px rgba(255,107,0,0.6), 0 0 40px rgba(255,107,0,0.15); }
}
/* Ghost — glass outline */
.btn--ghost {
background: var(--clr-surface);
color: var(--clr-text);
border: 1.5px solid var(--clr-border);
backdrop-filter: blur(8px);
}
.btn--ghost:hover {
border-color: var(--clr-orange);
color: var(--clr-orange-lt);
background: rgba(255,107,0,0.08);
}
.btn--full { width: 100%; justify-content: center; }
/* ----------------------------------------------------------------
NAVBAR
---------------------------------------------------------------- */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 0 clamp(16px, 4vw, 48px);
transition: background var(--transition-normal), box-shadow var(--transition-normal);
margin-top: 3px; /* offset top racing stripe */
}
.navbar--scrolled {
background: rgba(255,247,239,0.9);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow: var(--shadow-navbar);
border-bottom: 1px solid var(--clr-border);
}
.navbar__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
max-width: 1200px;
margin-inline: auto;
}
/* Logo */
.navbar__logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo-img {
width: 40px; height: 40px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 16px rgba(255,107,0,0.6), 0 0 0 2px rgba(255,107,0,0.3);
flex-shrink: 0;
transition: box-shadow var(--transition-normal);
}
.logo-img:hover {
box-shadow: 0 0 28px rgba(255,107,0,0.9), 0 0 0 2px rgba(255,107,0,0.5);
}
.logo-img--sm { width: 36px; height: 36px; }
.logo-text {
font-family: var(--font-racing);
font-size: clamp(1.05rem, 2vw, 1.4rem);
font-weight: 900;
/* Navy solid (warna logo & judul section), BUKAN gradient oranye:
gradient oranye tenggelam di latar krem/oranye sehingga sulit dibaca */
color: var(--clr-navy);
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
}
.logo-sub {
font-size: 0.65rem;
color: var(--clr-text-muted);
display: block;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* Nav links */
.navbar__nav {
display: flex;
align-items: center;
gap: 4px;
}
.nav-link {
padding: 8px 16px;
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 600;
color: var(--clr-text-muted);
transition: color var(--transition-fast), background var(--transition-fast);
letter-spacing: 0.02em;
}
.nav-link:hover { color: var(--clr-heading); background: rgba(28,43,74,0.06); }
.nav-link--cta {
background: var(--gradient-hot);
color: var(--clr-white) !important;
box-shadow: 0 2px 16px rgba(255,107,0,0.4);
margin-left: 8px;
text-transform: uppercase;
font-size: 0.82rem;
letter-spacing: 0.04em;
}
.nav-link--cta:hover {
box-shadow: 0 4px 28px rgba(255,107,0,0.65);
background: var(--gradient-fire);
}
/* Hamburger */
.navbar__hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
padding: 8px;
}
.navbar__hamburger span {
display: block;
width: 24px; height: 2px;
background: var(--clr-orange);
border-radius: 2px;
transition: transform var(--transition-normal), opacity var(--transition-normal);
}
.navbar__hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar__hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile menu */
.mobile-menu {
display: none;
flex-direction: column;
gap: 0;
max-height: 0;
overflow: hidden;
background: rgba(255,247,239,0.98);
backdrop-filter: blur(24px);
border-top: 1px solid rgba(255,107,0,0.2);
transition: max-height 0.35s ease;
}
.mobile-menu.open { max-height: 400px; }
.mobile-nav-link {
padding: 16px 24px;
font-size: 1rem;
font-weight: 600;
color: var(--clr-text-muted);
border-bottom: 1px solid var(--clr-surface);
transition: color var(--transition-fast), background var(--transition-fast), padding-left var(--transition-fast);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.9rem;
}
.mobile-nav-link:hover { color: var(--clr-orange-lt); background: rgba(255,107,0,0.06); padding-left: 32px; }
.mobile-nav-link--cta { color: var(--clr-orange) !important; font-weight: 800; }
/* ----------------------------------------------------------------
HERO SECTION
---------------------------------------------------------------- */
.hero {
position: relative;
min-height: 100vh;
display: flex;
/* flex-start = konten hero (badge dst.) mepet ke atas, tepat di bawah navbar
(tinggi navbar sudah di-reserve lewat padding-top di bawah) */
align-items: flex-start;
overflow: hidden;
padding-top: 75px;
/* Background utama hero: banner branded PBJ (anak balance bike + skyline Jakarta) */
background-color: var(--clr-bg); /* Fallback saat gambar belum termuat */
background-image: url('../assets/bg/PBJ-bg-1.webp');
background-size: cover; /* Isi penuh area hero, jaga aspek rasio */
background-position: center center; /* Fokus ke tengah komposisi gambar */
background-repeat: no-repeat;
background-attachment: fixed; /* Diam saat halaman di-scroll (parallax) */
}
/* Scrim gelap di atas gambar background — jaga keterbacaan teks (kiri)
sambil membiarkan skyline & aksen oranye gambar tembus di kanan.
Gradient bawah menyatukan hero ke section berikutnya (var(--clr-bg)). */
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg,
rgba(255,247,239,0.7) 0%,
rgba(255,247,239,0.48) 35%,
rgba(255,247,239,0.2) 56%,
rgba(255,247,239,0.04) 78%,
rgba(255,247,239,0) 100%),
linear-gradient(to bottom,
rgba(255,247,239,0.14) 0%,
rgba(255,247,239,0) 25%,
rgba(255,247,239,0) 58%,
var(--clr-bg) 100%);
pointer-events: none;
z-index: 0;
}
/* Animated speed lines behind hero */
.hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(
-15deg,
transparent,
transparent 120px,
rgba(255,107,0,0.025) 120px,
rgba(255,107,0,0.025) 122px
);
pointer-events: none;
z-index: 0;
animation: speed-lines 8s linear infinite;
}
@keyframes speed-lines {
0% { background-position: 0 0; }
100% { background-position: -200px 0; }
}
/* Orbs */
.hero__orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
.hero__orb--1 {
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(255,107,0,0.2) 0%, rgba(200,60,0,0.08) 50%, transparent 70%);
top: -150px; left: -150px;
animation: orb-pulse 6s ease-in-out infinite;
}
.hero__orb--2 {
width: 450px; height: 450px;
background: radial-gradient(circle, rgba(232,0,45,0.15) 0%, transparent 70%);
bottom: -80px; right: 5%;
animation: orb-pulse 8s ease-in-out infinite 2s;
}
.hero__orb--3 {
width: 350px; height: 350px;
background: radial-gradient(circle, rgba(255,179,71,0.1) 0%, transparent 70%);
top: 25%; right: 25%;
animation: orb-pulse 7s ease-in-out infinite 4s;
}
@keyframes orb-pulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
}
.hero__content {
position: relative;
z-index: 1;
max-width: 55%;
/* Top padding tipis: badge nempel dekat header (navbar) tapi tetap ada
jarak kecil; sisa ruang bawah tetap lapang. */
padding: clamp(4px, 0.6vw, 8px) clamp(16px, 4vw, 48px) var(--section-py);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1024px) {
.hero { justify-content: flex-start; }
.hero__content {
margin-left: calc((100vw - 1200px) / 2 + 24px);
margin-right: 0;
padding-right: 0;
}
}
.hero__badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,107,0,0.1);
border: 1px solid rgba(255,107,0,0.3);
color: var(--clr-orange-lt);
font-size: 0.78rem;
font-weight: 700;
padding: 7px 18px;
border-radius: var(--radius-full);
margin-bottom: 24px;
backdrop-filter: blur(8px);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hero__badge i { color: var(--clr-orange); animation: blink-loc 2s ease-in-out infinite; }
@keyframes blink-loc {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.hero__title {
font-family: var(--font-racing);
font-size: clamp(2rem, 5vw, 3.6rem);
font-weight: 900;
line-height: 1.08;
letter-spacing: 0.02em;
text-transform: uppercase;
margin-bottom: 24px;
/* Halo terang agar judul navy tetap tajam di atas gambar */
text-shadow: 0 2px 14px rgba(255,255,255,0.9), 0 1px 2px rgba(255,255,255,0.85);
}
/* Gradient text accent */
.hero__title--accent {
background: var(--gradient-fire);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
/* Matikan halo putih warisan; pakai bayangan gelap lembut agar tepi tegas di atas gambar */
text-shadow: none;
filter: drop-shadow(0 2px 8px rgba(28,43,74,0.35));
}
.hero__subtitle {
font-size: 1.1rem;
color: var(--clr-text-muted);
margin-bottom: 40px;
max-width: 500px;
line-height: 1.7;
/* Halo terang halus agar subtitle terbaca di atas gambar */
text-shadow: 0 1px 10px rgba(255,255,255,0.9);
}
.hero__subtitle em { color: var(--clr-orange-lt); font-style: normal; font-weight: 600; }
.hero__subtitle strong { color: var(--clr-heading); font-weight: 700; }
.hero__cta-group {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 52px;
}
/* Stats */
.hero__stats {
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
padding: 20px 24px;
background: var(--clr-bg-card);
border: 1px solid rgba(255,107,0,0.12);
border-radius: var(--radius-lg);
backdrop-filter: blur(8px);
width: fit-content;
}
.stat-item { display: flex; flex-direction: column; }
.stat-number {
font-family: var(--font-racing);
font-size: 2.4rem;
font-weight: 900;
line-height: 1;
background: var(--gradient-orange);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--clr-text-muted);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.stat-divider {
width: 1px; height: 40px;
background: linear-gradient(to bottom, transparent, rgba(255,107,0,0.3), transparent);
}
/* Floating cards */
.hero__visual {
display: flex; /* Changed from none */
flex-direction: column; /* Added for vertical stacking */
gap: 36px;
position: absolute;
/* max() = jarak dari kanan tidak pernah kurang dari 40px, jadi kartu
tidak terpotong di layar sempit (dulu bisa negatif saat layar <1200px).
+80px = digeser lebih ke kiri dari tepi konten di layar lebar. */
right: max(40px, calc((100vw - 1200px) / 2 + 80px));
top: 50%;
transform: translateY(-50%);
z-index: 1;
width: auto; /* Changed from 380px */
height: auto; /* Changed from 420px */
}
.floating-card {
position: relative; /* Changed from absolute to relative for stacking */
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
background: rgba(255,255,255,0.85);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
box-shadow: 0 10px 30px rgba(28,43,74,0.14);
backdrop-filter: blur(20px);
font-size: 0.9rem;
font-weight: 700;
color: var(--clr-text);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.85rem;
margin-top: 50px;
margin-bottom: 50px;
}
.floating-card i {
color: var(--clr-orange);
font-size: 1.2rem;
filter: drop-shadow(0 0 6px rgba(255,107,0,0.6));
}
.fc--1 { animation: float 4s ease-in-out infinite; }
.fc--2 { animation: float 4s ease-in-out infinite 1.3s; }
.fc--3 { animation: float 4s ease-in-out infinite 2.6s; }
.fc--4 { animation: float 4s ease-in-out infinite 3.9s; }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-22px); }
}
/* ----------------------------------------------------------------
SECTION DIVIDER — Racing-inspired separator
---------------------------------------------------------------- */
.section-divider {
height: 2px;
background: linear-gradient(90deg, transparent 0%, rgba(255,107,0,0.4) 30%, rgba(255,107,0,0.8) 50%, rgba(255,107,0,0.4) 70%, transparent 100%);
margin: 0;
}
/* ----------------------------------------------------------------
SCHEDULE SECTION
---------------------------------------------------------------- */
.schedule {
padding-block: var(--section-py);
background: var(--clr-bg-2);
position: relative;
overflow: hidden;
}
.schedule::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,107,0,0.05) 0%, transparent 70%);
pointer-events: none;
}
/* Filter bar */
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 40px;
}
.filter-btn {
padding: 10px 22px;
border-radius: var(--radius-full);
font-size: 0.82rem;
font-weight: 700;
background: var(--clr-surface);
color: var(--clr-text-muted);
border: 1.5px solid var(--clr-border);
transition: all var(--transition-normal);
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.filter-btn:hover { border-color: rgba(255,107,0,0.4); color: var(--clr-orange-lt); background: rgba(255,107,0,0.07); }
.filter-btn--active {
background: var(--gradient-hot);
color: white;
border-color: transparent;
box-shadow: 0 4px 20px rgba(255,107,0,0.4);
}
.schedule-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
.schedule-card {
background: var(--clr-bg-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: var(--shadow-card);
transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
overflow: hidden;
}
/* Left orange accent bar */
.schedule-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--gradient-orange);
opacity: 0;
transition: opacity var(--transition-normal);
}
.schedule-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-glow);
border-color: rgba(255,107,0,0.25);
}
.schedule-card:hover::before { opacity: 1; }
.schedule-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.schedule-card__icon {
width: 48px; height: 48px;
background: linear-gradient(135deg, rgba(255,107,0,0.2), rgba(255,107,0,0.08));
border: 1px solid rgba(255,107,0,0.2);
border-radius: var(--radius-sm);
display: grid;
place-items: center;
font-size: 1.3rem;
color: var(--clr-orange);
flex-shrink: 0;
filter: drop-shadow(0 0 8px rgba(255,107,0,0.3));
}
.schedule-card__day-badge {
font-size: 0.72rem;
font-weight: 800;
padding: 4px 12px;
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.badge--selasa { background: rgba(124,92,255,0.14); color: #6a48e0; border: 1px solid rgba(124,92,255,0.28); }
.badge--jumat { background: rgba(23,168,102,0.14); color: #0f8b52; border: 1px solid rgba(23,168,102,0.28); }
.badge--minggu { background: rgba(255,107,0,0.14); color: #d85400; border: 1px solid rgba(255,107,0,0.28); }
.badge--event { background: rgba(245,158,11,0.16); color: #b45309; border: 1px solid rgba(245,158,11,0.30); }
.schedule-card__title {
font-size: 1.05rem;
font-weight: 700;
color: var(--clr-heading);
line-height: 1.3;
}
.schedule-card__details {
display: flex;
flex-direction: column;
gap: 8px;
}
.schedule-detail-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.875rem;
color: var(--clr-text-muted);
}
.schedule-detail-item i {
width: 16px;
color: var(--clr-orange);
flex-shrink: 0;
}
/* ----------------------------------------------------------------
MAP SECTION
---------------------------------------------------------------- */
.map-section {
padding-block: var(--section-py);
background: var(--clr-bg);
}
.map-layout {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 900px) {
.map-layout { grid-template-columns: 1fr 320px; }
}
.map-wrapper {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-glow);
border: 1px solid rgba(255,107,0,0.15);
min-height: 480px;
}
.leaflet-map {
width: 100%;
height: 100%;
min-height: 480px;
}
.location-sidebar {
background: var(--clr-bg-card);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255,107,0,0.12);
border-radius: var(--radius-xl);
padding: 24px;
overflow-y: auto;
max-height: 520px;
box-shadow: var(--shadow-card);
}
.sidebar-title {
font-size: 1rem;
font-weight: 700;
color: var(--clr-heading);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.875rem;
}
.sidebar-title i { color: var(--clr-orange); }
.location-item {
padding: 14px 0;
border-bottom: 1px solid var(--clr-border);
cursor: pointer;
transition: padding-left var(--transition-fast), color var(--transition-fast);
display: flex;
flex-direction: column;
gap: 4px;
}
.location-item:last-child { border-bottom: none; }
.location-item:hover { padding-left: 8px; }
.location-item__name {
font-size: 0.9rem;
font-weight: 700;
color: var(--clr-text);
transition: color var(--transition-fast);
}
.location-item:hover .location-item__name { color: var(--clr-orange-lt); }
.location-item__addr { font-size: 0.8rem; color: var(--clr-text-muted); }
.location-item__schedule {
font-size: 0.78rem;
color: var(--clr-orange);
font-weight: 700;
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Baris jadwal dua kolom: kolom hari lebar tetap supaya jam rata kiri
(efek "tab": Selasa/Jumat/Minggu sejajar, jam-jam juga sejajar) */
.schedule-line { display: flex; gap: 10px; }
.schedule-line__day { flex: 0 0 62px; }
.leaflet-popup-content-wrapper {
background: var(--clr-bg-card) !important;
border: 1px solid rgba(255,107,0,0.2) !important;
border-radius: var(--radius-md) !important;
box-shadow: var(--shadow-glow) !important;
color: var(--clr-text) !important;
}
.leaflet-popup-tip { background: var(--clr-bg-card) !important; }
.popup-title { font-weight: 700; color: var(--clr-heading); margin-bottom: 4px; font-family: var(--font-heading); }
.popup-time { font-size: 0.85rem; color: var(--clr-orange); font-weight: 700; }
.popup-addr { font-size: 0.82rem; color: var(--clr-text-muted); margin-top: 4px; }
/* ----------------------------------------------------------------
INFO SECTION
---------------------------------------------------------------- */
.info-section {
padding-block: var(--section-py);
background: var(--clr-bg-2);
position: relative;
overflow: hidden;
}
.info-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 50% at 80% 50%, rgba(255,107,0,0.05) 0%, transparent 70%);
pointer-events: none;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
margin-bottom: 64px;
}
.info-card {
background: var(--clr-bg-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
padding: 32px;
text-align: center;
transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
position: relative;
overflow: hidden;
}
.info-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(--gradient-orange);
transform: scaleX(0);
transition: transform var(--transition-normal);
}
.info-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-glow); border-color: rgba(255,107,0,0.2); }
.info-card:hover::after { transform: scaleX(1); }
.info-card--featured {
background: linear-gradient(145deg, rgba(255,107,0,0.1), rgba(255,107,0,0.04));
border-color: rgba(255,107,0,0.25);
box-shadow: 0 0 40px rgba(255,107,0,0.08);
}
.info-card__icon {
width: 60px; height: 60px;
background: var(--gradient-hot);
border-radius: var(--radius-md);
display: grid;
place-items: center;
font-size: 1.5rem;
color: white;
margin: 0 auto 20px;
box-shadow: 0 4px 24px rgba(255,107,0,0.4);
}
.info-card__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-racing); }
.info-card__text { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.7; }
/* About pushbike */
.about-pushbike {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center;
background: var(--clr-bg-card);
border: 1px solid rgba(255,107,0,0.1);
border-radius: var(--radius-xl);
padding: clamp(24px, 4vw, 48px);
}
@media (min-width: 768px) {
.about-pushbike { grid-template-columns: 1fr 1fr; }
}
.about-pushbike__text h3 { font-family: var(--font-racing); font-size: 1.8rem; font-weight: 800; margin-bottom: 16px; text-transform: uppercase; }
.about-pushbike__text p { color: var(--clr-text-muted); margin-bottom: 16px; font-size: 0.95rem; line-height: 1.75; }
.about-pushbike__text em { color: var(--clr-orange-lt); font-style: normal; font-weight: 600; }
.about-pushbike__badges { display: flex; flex-wrap: wrap; gap: 10px; }
.feature-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: var(--clr-bg-card);
border: 1px solid rgba(255,107,0,0.15);
border-radius: var(--radius-full);
font-size: 0.82rem;
font-weight: 700;
color: var(--clr-text-muted);
transition: all var(--transition-fast);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.feature-badge:hover { color: var(--clr-orange-lt); border-color: rgba(255,107,0,0.4); background: rgba(255,107,0,0.07); }
.feature-badge i { color: var(--clr-orange); }
/* Blok About tambahan (Batch B): Founder & Sejarah, Sistem Pelatihan, Nilai & Spirit,
Jenjang Atlet. Reuse "bahasa visual" .about-pushbike (kartu bg-card + border + radius-xl)
supaya konsisten dengan kartu About yang sudah ada, tapi satu kolom (teks saja, tanpa
grid badge) karena isinya lebih panjang / naratif. */
.about-block {
background: var(--clr-bg-card);
border: 1px solid rgba(255,107,0,0.1);
border-radius: var(--radius-xl);
padding: clamp(24px, 4vw, 48px);
margin-top: 28px;
}
.about-block__title {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-racing);
font-size: 1.4rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: 16px;
}
.about-block__title i { color: var(--clr-orange); }
.about-block p { color: var(--clr-text-muted); margin-bottom: 16px; font-size: 0.95rem; line-height: 1.75; }
.about-block p:last-child { margin-bottom: 0; }
/* Slogan PBJ ditonjolkan sebagai pull-quote, bukan teks paragraf biasa */
.about-slogan {
font-family: var(--font-racing);
font-size: clamp(1.25rem, 3vw, 1.7rem);
font-weight: 800;
font-style: normal;
color: var(--clr-orange);
text-align: center;
margin: 0 0 20px;
padding: 20px;
background: rgba(255,107,0,0.06);
border-radius: var(--radius-md, 14px);
}
/* ----------------------------------------------------------------
MANFAAT SECTION — "Bukan Sekadar Mainan" (trust + bukti riset)
---------------------------------------------------------------- */
.benefit-section { padding-block: var(--section-py); background: var(--clr-bg); }
/* Impact band — angka bukti riset */
.impact-band {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-bottom: 48px;
}
.impact-card {
background: var(--clr-bg-card);
border: 1px solid var(--clr-border);
border-top: 3px solid var(--clr-orange);
border-radius: var(--radius-lg);
padding: 30px 24px;
text-align: center;
box-shadow: var(--shadow-card);
}
.impact-number {
display: block;
font-family: var(--font-racing);
font-size: 3rem;
font-weight: 900;
line-height: 1;
color: var(--clr-orange);
margin-bottom: 14px;
}
.impact-number small { font-size: 1.2rem; font-weight: 700; }
.impact-number i { font-size: 2.4rem; }
.impact-label { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.6; }
.impact-label em { color: var(--clr-orange-lt); font-style: normal; font-weight: 700; }
.source-note {
text-align: center;
margin-top: 36px;
font-size: 0.85rem;
color: var(--clr-text-muted);
}
.source-note i { color: var(--clr-green); margin-right: 6px; }
/* ----------------------------------------------------------------
KEAMANAN SECTION — Checklist perlengkapan wajib
---------------------------------------------------------------- */
.safety-section { padding-block: var(--section-py); background: var(--clr-bg-2); }
.safety-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
.safety-card {
background: var(--clr-bg-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
padding: 28px 24px;
box-shadow: var(--shadow-card);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.safety-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow); }
.safety-card__icon {
width: 54px; height: 54px;
border-radius: var(--radius-md);
background: var(--gradient-hot);
color: #fff;
display: grid; place-items: center;
font-size: 1.4rem;
margin-bottom: 18px;
box-shadow: 0 6px 18px rgba(255,107,0,0.35);
}
.safety-card__title {
font-family: var(--font-racing);
font-size: 1.15rem;
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 10px;
}
.safety-card p { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.65; }
/* ----------------------------------------------------------------
GALERI SECTION — Grid foto/video + lightbox
---------------------------------------------------------------- */
.gallery-section { padding-block: var(--section-py); background: var(--clr-bg-2); }
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
.gallery-item {
margin: 0;
background: var(--clr-bg-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.gallery-item[role="button"] { cursor: pointer; }
.gallery-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow); }
.gallery-item[role="button"]:focus-visible { outline: 3px solid var(--clr-orange); outline-offset: 2px; }
.gallery-media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.gallery-media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.gallery-item:hover .gallery-media img { transform: scale(1.06); }
.gallery-placeholder {
width: 100%; height: 100%;
display: grid; place-items: center;
background: linear-gradient(145deg, rgba(255,107,0,0.14), rgba(255,107,0,0.04));
color: var(--clr-orange);
font-size: 2.4rem;
}
.gallery-play {
position: absolute; inset: 0;
display: grid; place-items: center;
background: rgba(28,43,74,0.3);
}
.gallery-play i {
width: 56px; height: 56px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--gradient-hot);
color: #fff; font-size: 1.1rem;
padding-left: 4px;
box-shadow: 0 6px 20px rgba(255,107,0,0.5);
}
.gallery-tag {
position: absolute; top: 10px; left: 10px;
background: rgba(255,255,255,0.92);
color: var(--clr-orange-lt);
font-size: 0.68rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.06em;
padding: 4px 10px;
border-radius: var(--radius-full);
backdrop-filter: blur(4px);
}
.gallery-caption {
padding: 14px 16px;
font-size: 0.88rem;
font-weight: 600;
color: var(--clr-text);
}
/* Lightbox overlay */
.lightbox {
position: fixed; inset: 0;
background: rgba(15,20,32,0.92);
backdrop-filter: blur(10px);
display: grid; place-items: center;
z-index: 10000;
padding: 24px;
animation: fadeIn 0.25s ease;
}
.lightbox__body { max-width: 960px; width: 100%; }
.lightbox__body img {
width: 100%; max-height: 82vh;
object-fit: contain;
border-radius: var(--radius-md);
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-video { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.lightbox-video iframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: none;
border-radius: var(--radius-md);
}
.lightbox__close {
position: absolute; top: 20px; right: 24px;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
color: #fff; font-size: 1.2rem;
display: grid; place-items: center;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.lightbox__close:hover { background: var(--gradient-hot); transform: rotate(90deg); }
/* ----------------------------------------------------------------
WATERMARK LOGO — Logo PBJ samar di tengah tiap section (selain hero)
mix-blend-mode: multiply membuang latar PUTIH pada logo_PBJ.jpg,
sehingga hanya bentuk logonya yang tampil sebagai watermark.
CARA PAKAI: cukup tambahkan class "has-watermark" pada tag
di HTML. Tidak perlu mengedit CSS lagi untuk section baru.
---------------------------------------------------------------- */
.has-watermark {
position: relative;
}
.has-watermark::after {
content: '';
position: absolute;
inset: 0;
background-image: url('../assets/logo_PBJ.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: min(1300px, 105%);
mix-blend-mode: multiply; /* buang latar putih JPG → hanya logo tampil */
opacity: 0.13; /* watermark samar tapi terlihat */
pointer-events: none;
z-index: 0; /* di belakang .container (z-index:1) */
}
/* Watermark responsif: di layar kecil ukuran relatif dinaikkan supaya logo
tetap terlihat jelas (105% dari lebar HP terlalu kecil untuk section
yang tinggi). */
@media (max-width: 1023px) {
.has-watermark::after {
background-size: min(700px, 165%);
}
}
/* ----------------------------------------------------------------
PENGURUS SECTION
---------------------------------------------------------------- */
.pengurus-section { padding-block: var(--section-py); background: var(--clr-bg); }
.pengurus-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.pengurus-card {
background: var(--clr-bg-card);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
padding: 24px;
display: flex;
flex-direction: column;
gap: 20px;
transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.pengurus-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-glow-sm);
border-color: rgba(255,107,0,0.2);
}
.pengurus-card--multi { grid-column: span 2; }
@media (max-width: 700px) { .pengurus-card--multi { grid-column: span 1; } }
.pengurus-card__header {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 16px;
border-bottom: 1px solid var(--clr-border);
}
.pengurus-card__icon {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--gradient-hot);
display: grid;
place-items: center;
font-size: 1rem;
color: white;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(255,107,0,0.4);
}
.pengurus-card__meta { display: flex; flex-direction: column; gap: 2px; }
.pengurus-jabatan {
font-size: 0.95rem;
font-weight: 700;
color: var(--clr-heading);
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.pengurus-count {
font-size: 0.72rem;
color: var(--clr-orange);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
}
.pengurus-members { display: flex; flex-direction: column; gap: 12px; }
.pengurus-members--grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.pengurus-member { display: flex; align-items: center; gap: 10px; }
.pengurus-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255,107,0,0.2), rgba(255,107,0,0.08));
border: 1.5px solid rgba(255,107,0,0.3);
display: grid;
place-items: center;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 800;
color: var(--clr-orange-lt);
flex-shrink: 0;
letter-spacing: -0.02em;
}
.pengurus-member-name {
font-size: 0.875rem;
font-weight: 500;
color: var(--clr-text);
line-height: 1.3;
}
/* ----------------------------------------------------------------
REGISTER SECTION
---------------------------------------------------------------- */
.register-section {
padding-block: var(--section-py);
background: var(--clr-bg-2);
position: relative;
overflow: hidden;
}
.register-orb {
position: absolute;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
}
.register-orb--1 {
width: 500px; height: 500px;
background: rgba(255,107,0,0.15);
bottom: -150px; left: -150px;
}
.register-orb--2 {
width: 350px; height: 350px;
background: rgba(232,0,45,0.1);
top: -80px; right: 5%;
}
.register-wrapper {
display: grid;
grid-template-columns: 1fr;
gap: 56px;
position: relative;
z-index: 1;
}
@media (min-width: 900px) {
.register-wrapper { grid-template-columns: 1fr 1fr; align-items: center; }
}
.register-title {
font-family: var(--font-racing);
font-size: clamp(2.2rem, 5vw, 3.2rem);
font-weight: 900;
margin: 16px 0;
text-transform: uppercase;
line-height: 1.1;
}
.register-desc { color: var(--clr-text-muted); margin-bottom: 28px; font-size: 0.95rem; line-height: 1.75; }
.register-perks { display: flex; flex-direction: column; gap: 14px; }
.register-perks li {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.9rem;
color: var(--clr-text-muted);
}
.register-perks li i {
width: 22px; height: 22px;
background: rgba(255,107,0,0.15);
border: 1px solid rgba(255,107,0,0.3);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--clr-orange);
font-size: 0.7rem;
flex-shrink: 0;
}
/* Form */
.register-form {
background: var(--clr-bg-card);
border: 1px solid rgba(255,107,0,0.15);
border-radius: var(--radius-xl);
padding: clamp(24px, 4vw, 40px);
box-shadow: var(--shadow-glow);
position: relative;
overflow: hidden;
}
.register-form::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--gradient-fire);
}
.form-title {
font-family: var(--font-racing);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 28px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.form-label { font-size: 0.82rem; font-weight: 700; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.input-wrapper { position: relative; }
.input-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--clr-text-dim);
font-size: 0.9rem;
pointer-events: none;
transition: color var(--transition-fast);
}
.form-input {
width: 100%;
padding: 14px 16px 14px 44px;
background: var(--clr-surface);
border: 1.5px solid var(--clr-border);
border-radius: var(--radius-md);
color: var(--clr-text);
font-size: 0.95rem;
font-family: var(--font-body);
outline: none;
transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
-webkit-appearance: none;
appearance: none;
}
.form-input:focus {
border-color: var(--clr-orange);
background: rgba(255,107,0,0.04);
box-shadow: 0 0 0 3px rgba(255,107,0,0.12);
}
.form-input:focus + .input-icon,
.input-wrapper:focus-within .input-icon { color: var(--clr-orange); }
.form-input::placeholder { color: var(--clr-text-dim); }
.form-select option { background: var(--clr-bg-card); color: var(--clr-text); }
.form-note {
font-size: 0.78rem;
color: var(--clr-text-dim);
text-align: center;
margin-top: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
/* ----------------------------------------------------------------
HALAMAN DAFTAR MEMBER BARU (register.html)
Iframe Google Form TIDAK bisa lapor tinggi kontennya ke halaman ini
(cross-origin) sehingga tidak ada auto-resize sejati — dipakai
min-height perkiraan (beda mobile/desktop) + overflow:auto di
wrapper sebagai jaring pengaman kalau form ternyata lebih panjang.
---------------------------------------------------------------- */
.registration-embed-section { padding-bottom: var(--section-py); }
.registration-embed-card {
max-width: 760px;
margin-inline: auto;
background: var(--clr-bg-card);
border-radius: var(--radius-md);
padding: clamp(16px, 3vw, 32px);
box-shadow: 0 8px 32px rgba(38,50,74,0.08);
}
.registration-embed-loading {
text-align: center;
color: var(--clr-text-muted);
font-size: 0.9rem;
margin-bottom: 12px;
}
.registration-embed-loading i { color: var(--clr-orange); margin-right: 6px; }
.registration-embed-frame {
width: 100%;
overflow: auto;
border-radius: calc(var(--radius-md) - 4px);
}
.registration-embed-frame iframe {
width: 100%;
/* Google Form tidak bisa lapor tinggi konten asli ke halaman ini
(cross-origin) — angka ini perkiraan tampilan AWAL form (judul +
deskripsi + tombol "Isi formulir"), bukan seluruh pertanyaan.
overflow:auto di .registration-embed-frame jadi jaring pengaman
kalau kontennya ternyata lebih panjang (form discroll di dalam kartu).
CATATAN: tombol "?" (Help bawaan Google) posisinya fixed ke bawah
viewport iframe, sedangkan footer "Google Formulir" ikut alur konten
— keduanya sejajar hanya "kebetulan" di tinggi tertentu, bukan hal
yang bisa diatur presisi dari sisi kita (isi iframe cross-origin). */
height: 391px;
border: 0;
display: block;
}
.registration-embed-fallback {
text-align: center;
font-size: 0.85rem;
color: var(--clr-text-muted);
margin-top: 14px;
}
.registration-embed-fallback a { color: var(--clr-orange-lt); font-weight: 600; }
.registration-help {
text-align: center;
padding-bottom: clamp(32px, 6vw, 64px);
}
.registration-help__text { color: var(--clr-text-muted); margin-bottom: 14px; }
.registration-help__buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* ----------------------------------------------------------------
FOOTER
---------------------------------------------------------------- */
.footer {
background: var(--clr-bg-2);
padding-top: var(--section-py);
padding-bottom: 32px;
border-top: 1px solid rgba(255,107,0,0.12);
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--gradient-fire);
opacity: 0.5;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
}
@media (min-width: 768px) {
.footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
.footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-logo-text {
font-family: var(--font-racing);
font-size: 1.6rem;
font-weight: 900;
display: block;
line-height: 1;
background: var(--gradient-orange);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.footer-logo-sub { font-size: 0.65rem; color: var(--clr-text-muted); display: block; text-transform: uppercase; letter-spacing: 0.08em; }
.footer-tagline { font-size: 0.875rem; color: var(--clr-text-muted); margin-bottom: 24px; line-height: 1.7; max-width: 320px; }
.footer-social { display: flex; gap: 10px; }
.social-link {
width: 40px; height: 40px;
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
display: grid;
place-items: center;
color: var(--clr-text-muted);
font-size: 1rem;
transition: all var(--transition-normal);
}
.social-link:hover {
background: var(--gradient-hot);
border-color: transparent;
color: white;
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(255,107,0,0.4);
}
.footer-links__title { font-size: 0.78rem; font-weight: 800; color: var(--clr-heading); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.1em; }
.footer-links ul, .footer-contact ul { display: flex; flex-direction: column; gap: 10px; }
.footer-links a, .footer-contact a { font-size: 0.875rem; color: var(--clr-text-muted); transition: color var(--transition-fast), padding-left var(--transition-fast); }
.footer-links a:hover, .footer-contact a:hover { color: var(--clr-orange-lt); padding-left: 6px; }
.footer-contact li { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--clr-text-muted); }
.footer-contact i { color: var(--clr-orange); width: 16px; }
.footer-tech-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,107,0,0.08);
border: 1px solid rgba(255,107,0,0.2);
padding: 8px 14px;
border-radius: var(--radius-full);
font-size: 0.78rem;
color: var(--clr-text-muted);
margin-top: 20px;
}
.footer-tech-badge strong { color: var(--clr-orange-lt); }
.footer-divider { border: none; border-top: 1px solid var(--clr-border); margin: 40px 0 20px; }
.footer-copy { font-size: 0.8rem; color: var(--clr-text-dim); text-align: center; }
/* ----------------------------------------------------------------
MODAL
---------------------------------------------------------------- */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(28,43,74,0.55);
backdrop-filter: blur(12px);
display: grid;
place-items: center;
z-index: 9999;
padding: 24px;
animation: fadeIn 0.25s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
background: var(--clr-bg-card);
border: 1px solid rgba(255,107,0,0.2);
border-radius: var(--radius-xl);
padding: 48px 40px;
text-align: center;
max-width: 400px;
width: 100%;
animation: slideUp 0.35s var(--transition-slow);
box-shadow: var(--shadow-glow);
position: relative;
overflow: hidden;
}
.modal-box::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--gradient-fire);
}
@keyframes slideUp {
from { transform: translateY(24px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.modal-icon { font-size: 3.5rem; color: #4ade80; margin-bottom: 20px; }
.modal-title { font-family: var(--font-racing); font-size: 1.6rem; margin-bottom: 12px; text-transform: uppercase; }
.modal-text { color: var(--clr-text-muted); margin-bottom: 28px; font-size: 0.95rem; }
/* ----------------------------------------------------------------
SCROLL TO TOP
---------------------------------------------------------------- */
.scroll-top {
position: fixed;
bottom: 28px;
right: 28px;
width: 50px; height: 50px;
background: var(--gradient-hot);
border-radius: 50%;
display: grid;
place-items: center;
color: white;
font-size: 1rem;
box-shadow: 0 4px 24px rgba(255,107,0,0.5);
z-index: 999;
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
animation: slideUp 0.3s ease;
}
.scroll-top:hover { transform: translateY(-5px); box-shadow: 0 8px 36px rgba(255,107,0,0.7); }
/* ----------------------------------------------------------------
FAQ SECTION — SEO Accordion
---------------------------------------------------------------- */
/* #faq memakai kerangka .section (padding & scroll-margin) */
.faq-list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: var(--clr-bg-card);
border: 1px solid rgba(255,107,0,0.2);
border-radius: 12px;
overflow: hidden;
transition: border-color var(--transition-normal);
}
.faq-item[open] {
border-color: rgba(255,107,0,0.5);
}
.faq-question {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 22px;
font-family: var(--font-racing);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--clr-text);
cursor: pointer;
list-style: none;
transition: color var(--transition-normal);
user-select: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question i {
color: var(--clr-orange);
font-size: 1rem;
flex-shrink: 0;
}
.faq-item[open] .faq-question {
color: var(--clr-orange);
}
.faq-question::after {
content: '+';
margin-left: auto;
font-size: 1.3rem;
color: var(--clr-orange);
transition: transform 0.3s ease;
line-height: 1;
}
.faq-item[open] .faq-question::after {
content: '−';
}
.faq-answer {
padding: 0 22px 18px;
color: var(--clr-text-dim);
font-size: 0.95rem;
line-height: 1.7;
border-top: 1px solid rgba(255,107,0,0.1);
padding-top: 14px;
}
.faq-answer strong {
color: var(--clr-orange);
font-weight: 600;
}
/* Judul pemisah dua kelompok FAQ ("Mau Gabung?" vs "Seputar Balance Bike & Pushbike").
Kelompok kedua dan seterusnya diberi garis pemisah tipis + jarak ekstra di atas
supaya jelas terlihat sebagai kelompok baru, bukan cuma judul biasa. */
.faq-group-title {
font-family: var(--font-racing);
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--clr-orange);
margin: 0 0 4px;
}
.faq-group-title:not(:first-child) {
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid rgba(255,107,0,0.15);
}
/* Tombol "salin link" — hanya ada di FAQ Kelompok A (operasional), supaya admin
bisa membalas DM dengan satu link presisi ke jawaban spesifik. Lihat mekanik
hash + clipboard di main.js. */
.faq-copy-btn {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 14px;
padding: 6px 12px;
background: none;
border: 1px solid rgba(255,107,0,0.35);
border-radius: 8px;
color: var(--clr-orange);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: background var(--transition-normal), color var(--transition-normal);
}
.faq-copy-btn:hover {
background: rgba(255,107,0,0.1);
}
.faq-copy-btn i {
font-size: 0.75rem;
}
/* ----------------------------------------------------------------
MEDIA QUERIES
---------------------------------------------------------------- */
/* Layar sedang (tablet landscape): rapatkan nav agar semua link muat */
@media (min-width: 768px) and (max-width: 1120px) {
.navbar__nav { gap: 0; }
.nav-link { padding: 8px 10px; font-size: 0.8rem; }
.nav-link--cta { padding: 8px 14px; }
}
@media (max-width: 1023px) {
.hero__visual { display: none; }
/* Tablet & HP: pakai gambar background versi portrait (logo di atas, bagian
tengah lapang) — lebih pas untuk layar sempit/vertikal dan menghindari
tabrakan judul dengan logo yang di versi landscape berada di tengah. */
.hero {
background-image: url('../assets/bg/PBJ-bg-1-mobile.webp');
background-position: center top;
/* Konten di-top-align (bukan center) supaya badge & judul menempel dekat
header, tak turun ke tengah viewport di layar sempit. */
align-items: flex-start;
/* FIX BUG "background putih di iPhone Safari": rule dasar .hero (di atas)
pakai background-attachment: fixed untuk efek parallax. iOS Safari
TIDAK mendukung fixed di elemen yang juga punya overflow: hidden
(lihat rule dasar .hero) — gambar gagal dilukis sama sekali, sehingga
background-color fallback (putih) yang tampil, bukan gambarnya.
'scroll' = perilaku background normal (ikut scroll bareng konten),
aman & didukung semua browser; efek parallax memang cuma bonus
desktop, jadi tidak masalah dimatikan di mobile. */
background-attachment: scroll;
}
/* Jarak kecil dari header (navbar sudah di-reserve lewat padding-top .hero). */
.hero__content { padding-top: 16px; }
/* Konten hero jadi lebih lebar/terpusat di layar sempit, jadi scrim
horizontal (kiri) tidak cukup. Ganti ke scrim vertikal yang merata agar
teks tetap terbaca di atas gambar terang, di posisi teks mana pun. */
.hero::before {
background:
linear-gradient(to bottom,
rgba(255,247,239,0.6) 0%,
rgba(255,247,239,0.42) 28%,
rgba(255,247,239,0.3) 55%,
rgba(255,247,239,0.5) 78%,
var(--clr-bg) 100%);
}
}
@media (max-width: 767px) {
.navbar__nav { display: none; }
.navbar__hamburger { display: flex; }
.mobile-menu { display: flex; }
.hero__cta-group { flex-direction: column; }
.hero__stats {
gap: 16px;
flex-wrap: wrap;
padding: 16px 18px;
width: 100%;
}
.hero__content { max-width: 100%; }
.schedule-grid { grid-template-columns: 1fr; }
/* Pengurus: 1 kolom di semua HP */
.pengurus-grid { grid-template-columns: 1fr; }
.pengurus-card--multi { grid-column: span 1; }
}
@media (max-width: 480px) {
.section-header { margin-bottom: 36px; }
.filter-bar { gap: 6px; }
.filter-btn { padding: 8px 16px; font-size: 0.75rem; }
/* Pengurus: 1 kolom agar tidak ada yang terpotong */
.pengurus-grid { grid-template-columns: 1fr; }
.pengurus-card--multi { grid-column: span 1; }
.register-form { padding: 24px 16px; }
/* Hero: pastikan konten tidak overflow */
.hero__content { max-width: 100%; padding-inline: 20px; }
/* Badge hero: nowrap agar tidak pecah-pecah */
.hero__badge { white-space: nowrap; font-size: 0.7rem; padding: 6px 12px; }
/* Title hero: ukuran ringkas di HP sempit (4 baris, tidak menutupi logo) */
.hero__title { font-size: clamp(1.8rem, 8.5vw, 2.6rem); }
/* Stats: ukuran angka lebih kecil */
.stat-number { font-size: 1.8rem; }
}
/* ----------------------------------------------------------------
GALERI GOOGLE DRIVE — toggle mode & kartu folder (gdrive-gallery.js)
---------------------------------------------------------------- */
/* Toggle "Kategori | Folder" di atas filter galeri */
.view-toggle {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 18px;
}
/* (Perilaku hidden ditangani aturan global [hidden] di bagian atas file) */
.view-toggle-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 20px;
font: inherit;
font-size: 0.85rem;
font-weight: 700;
color: var(--clr-text-muted);
background: transparent;
border: 1px solid rgba(255, 107, 0, 0.35);
border-radius: var(--radius-full);
cursor: pointer;
transition: all 0.2s ease;
}
/* Hover hanya untuk tombol NON-aktif; tombol aktif tetap putih di atas
oranye (kalau tidak, teksnya jadi oranye di latar oranye = "hilang") */
.view-toggle-btn:not(.view-toggle-btn--active):hover { color: var(--clr-orange); }
.view-toggle-btn--active,
.view-toggle-btn--active:hover {
color: #fff;
background: var(--clr-orange);
border-color: var(--clr-orange);
}
/* Kartu folder pada mode "Folder" */
.drive-folder-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 32px 20px;
font: inherit;
border: 1px solid rgba(255, 107, 0, 0.25);
border-radius: var(--radius-md, 14px);
background: rgba(255, 107, 0, 0.06);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.drive-folder-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-glow); }
.drive-folder-card__icon { font-size: 2.2rem; color: var(--clr-orange); }
.drive-folder-card__name { font-weight: 700; color: var(--clr-text); }
.drive-folder-card__count { font-size: 0.8rem; color: var(--clr-text-muted); }
/* Header saat sebuah folder dibuka (tombol kembali + nama folder) */
.drive-folder-header {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 4px;
}
.drive-folder-header__title {
font-weight: 700;
color: var(--clr-text);
}
.drive-folder-header__title i { color: var(--clr-orange); margin-right: 6px; }
/* ----------------------------------------------------------------
EVENTS SECTION — Kalender event / race (events.js)
---------------------------------------------------------------- */
#events {
/* padding & scroll-margin dari kerangka .section */
background: var(--clr-bg-2);
/* Section selalu setinggi satu layar penuh, konten di tengah vertikal,
supaya tetap lapang meski event masih kosong (hanya kartu placeholder). */
min-height: 100vh;
display: flex;
align-items: center;
}
#events .container { width: 100%; }
.events-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
max-width: 1100px;
margin-inline: auto;
}
.event-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
border-radius: var(--radius-md, 14px);
border: 1px solid rgba(255, 107, 0, 0.2);
background: var(--clr-bg);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.event-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-glow); }
.event-card--done { opacity: 0.75; }
.event-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.event-card__kategori {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--clr-orange);
background: rgba(255, 107, 0, 0.12);
padding: 4px 12px;
border-radius: var(--radius-full);
}
.event-card__status {
font-size: 0.72rem;
font-weight: 700;
color: #1a7f37;
background: rgba(26, 127, 55, 0.12);
padding: 4px 12px;
border-radius: var(--radius-full);
}
.event-card__status--done {
color: var(--clr-text-muted);
background: rgba(120, 120, 120, 0.12);
}
.event-card__title { font-size: 1.15rem; color: var(--clr-text); }
.event-card__meta {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.88rem;
color: var(--clr-text-muted);
}
.event-card__meta i { color: var(--clr-orange); width: 18px; }
.event-card__desc { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.6; }
.event-card__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: auto;
}
.event-card__btn { font-size: 0.82rem; padding: 9px 16px; }
/* ---------------- MODAL DETAIL EVENT (embed Instagram) ---------------- */
.event-modal {
position: fixed;
inset: 0;
z-index: 2000;
display: none;
align-items: flex-start;
justify-content: center;
padding: 24px 16px;
overflow-y: auto;
}
.event-modal.is-open { display: flex; }
.event-modal__backdrop {
position: fixed;
inset: 0;
background: rgba(15, 18, 25, 0.72);
backdrop-filter: blur(3px);
}
.event-modal__dialog {
position: relative;
z-index: 1;
width: 100%;
max-width: 560px;
margin: auto;
background: var(--clr-bg);
border: 1px solid rgba(255, 107, 0, 0.25);
border-radius: var(--radius-md, 14px);
padding: 44px 22px 24px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.event-modal__close {
position: absolute;
top: 12px;
right: 12px;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 1.05rem;
color: var(--clr-text);
background: rgba(120, 120, 120, 0.14);
transition: background var(--transition-fast), color var(--transition-fast);
}
.event-modal__close:hover { background: rgba(255, 107, 0, 0.16); color: var(--clr-orange); }
.event-modal__title { font-size: 1.2rem; color: var(--clr-text); margin-bottom: 6px; }
.event-modal__desc {
font-size: 0.9rem;
color: var(--clr-text-muted);
line-height: 1.6;
margin-bottom: 16px;
}
.event-modal__embed { min-height: 60px; }
.event-modal__iframe {
width: 100%;
height: 640px; /* tinggi awal; disesuaikan otomatis via pesan MEASURE dari IG */
border: none;
display: block;
background: #fff;
border-radius: 4px;
}
.event-modal__ig-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-size: 0.85rem;
font-weight: 700;
color: var(--clr-orange);
}
.event-modal__ig-link:hover { color: var(--clr-orange-lt); text-decoration: underline; }
/* Kartu galeri "Per Latihan" (gallery-sessions.js) — gaya mengikuti .event-card
supaya konsisten dengan kartu event, dipakai di dalam .gallery-grid yang sama
dengan galeri Kategori (grid generik auto-fill sudah ada). */
.session-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 24px;
border-radius: var(--radius-md, 14px);
border: 1px solid rgba(255, 107, 0, 0.2);
background: var(--clr-bg);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.session-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-glow); }
.session-card__header {
display: flex;
align-items: center;
gap: 14px;
}
.session-card__icon {
font-size: 1.4rem;
color: var(--clr-orange);
flex-shrink: 0;
}
.session-card__tanggal { font-weight: 700; color: var(--clr-text); }
.session-card__sesi { font-size: 0.88rem; color: var(--clr-text-muted); }
.session-card__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: auto;
}
.session-card__btn { font-size: 0.82rem; padding: 9px 16px; }
.session-card__empty { font-size: 0.85rem; color: var(--clr-text-muted); font-style: italic; }
/* Placeholder saat data event belum dikonfigurasi */
.events-fallback {
grid-column: 1 / -1;
text-align: center;
padding: 96px 24px;
border: 1px dashed rgba(255, 107, 0, 0.4);
border-radius: var(--radius-md, 14px);
background: rgba(255, 107, 0, 0.05);
}
.events-fallback__icon { font-size: 2.2rem; color: var(--clr-orange); margin-bottom: 12px; }
.events-fallback__title { font-weight: 700; color: var(--clr-text); margin-bottom: 6px; }
.events-fallback__text { color: var(--clr-text-muted); font-size: 0.92rem; }
.events-fallback__text a { color: var(--clr-orange); font-weight: 600; text-decoration: none; }
.events-fallback__text a:hover { text-decoration: underline; }
/* ----------------------------------------------------------------
FOOTER — link admin kecil (khusus pengurus)
---------------------------------------------------------------- */
.footer-admin-link {
margin-left: 12px;
font-size: 0.75rem;
color: var(--clr-text-muted);
opacity: 0.55;
text-decoration: none;
}
.footer-admin-link:hover { opacity: 1; color: var(--clr-orange); }
/* Mobile: beri ruang ekstra di bawah copyright supaya link Admin tidak
tertutup tombol scroll-to-top yang melayang di kanan bawah */
@media (max-width: 768px) {
.footer-bottom { padding-bottom: 72px; }
}
/* ----------------------------------------------------------------
INSTAGRAM SECTION — Grid postingan @pushbikejakarta (instagram.js)
---------------------------------------------------------------- */
.instagram-handle { color: var(--clr-orange); text-decoration: none; }
.instagram-handle:hover { text-decoration: underline; }
/* Jarak atas-bawah section standar (sama seperti Pengurus/Galeri) —
tanpa ini konten Instagram menempel ke section sebelumnya. */
/* #instagram memakai kerangka .section (padding & scroll-margin) */
/* Section Instagram memakai container lebih lebar dari section lain
supaya grid postingan terasa penuh di layar laptop/desktop. */
#instagram .container { max-width: 1500px; }
.instagram-grid {
/* Flex (bukan grid) supaya baris terakhir yang tidak penuh
otomatis rata tengah, tidak menggantung di kiri. */
display: flex;
flex-wrap: wrap;
justify-content: center;
--ig-gap: 18px;
gap: var(--ig-gap);
margin-bottom: 40px;
}
/* Kartu postingan: rasio persegi seperti feed Instagram, 3 kolom di desktop
(6 post dari Behold → tersusun rapi 3×2). */
.instagram-card {
position: relative;
display: block;
width: calc((100% - 2 * var(--ig-gap)) / 3);
aspect-ratio: 1 / 1;
border-radius: var(--radius-md, 14px);
overflow: hidden;
background: rgba(255, 107, 0, 0.08);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.instagram-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow); }
.instagram-card:focus-visible { outline: 3px solid var(--clr-orange); outline-offset: 2px; }
.instagram-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.instagram-card:hover img { transform: scale(1.06); }
/* Overlay ikon IG saat hover */
.instagram-card__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #fff;
background: rgba(255, 107, 0, 0.55);
opacity: 0;
transition: opacity 0.25s ease;
}
.instagram-card:hover .instagram-card__overlay { opacity: 1; }
/* Penanda video/reel di pojok kartu */
.instagram-card__type {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
color: #fff;
background: rgba(0, 0, 0, 0.55);
border-radius: 50%;
}
/* Kartu fallback saat feed belum dikonfigurasi */
.instagram-fallback {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 48px 24px;
text-align: center;
text-decoration: none;
border: 1px dashed rgba(255, 107, 0, 0.4);
border-radius: var(--radius-md, 14px);
background: rgba(255, 107, 0, 0.06);
transition: transform 0.25s ease, background 0.25s ease;
}
.instagram-fallback:hover { transform: translateY(-4px); background: rgba(255, 107, 0, 0.12); }
.instagram-fallback__icon { font-size: 2.4rem; color: var(--clr-orange); }
.instagram-fallback__title { color: var(--clr-text); font-weight: 700; }
.instagram-fallback__handle { color: var(--clr-orange); font-weight: 700; letter-spacing: 0.04em; }
.instagram-cta { text-align: center; }
/* HP: 2 kolom dengan jarak lebih rapat */
@media (max-width: 768px) {
.instagram-grid { --ig-gap: 12px; }
.instagram-card { width: calc((100% - var(--ig-gap)) / 2); }
}
/* ----------------------------------------------------------------
GLOW PULSE ANIMATION — General reusable class
---------------------------------------------------------------- */
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px rgba(255,107,0,0.3); }
50% { box-shadow: 0 0 40px rgba(255,107,0,0.6), 0 0 80px rgba(255,107,0,0.2); }
}
/* ----------------------------------------------------------------
HERO DESKTOP VISUAL DISPLAY
---------------------------------------------------------------- */
@media (min-width: 1024px) {
.hero__visual { display: block; }
}