/* LANJUTAN CSS - Tambahkan setelah Part 1 */ .afc-timeline { padding: 4rem 2rem; background: #f8fafc; text-align: center; } .afc-timeline h3 { font-size: 2.5rem; font-weight: 700; color: #1C3167; margin-bottom: 3rem; } .afc-timeline-container { display: flex; justify-content: center; gap: 3rem; max-width: 900px; margin: 0 auto; } .afc-timeline-item { display: flex; flex-direction: column; align-items: center; } .afc-timeline-dot { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #1C3167, #47D0DD); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; margin-bottom: 1rem; box-shadow: 0 8px 20px rgba(28, 49, 103, 0.3); animation: dotPulse 2s ease-in-out infinite; cursor: pointer; transition: all 0.3s ease; } @keyframes dotPulse { 0%, 100% { transform: scale(1); box-shadow: 0 8px 20px rgba(28, 49, 103, 0.3); } 50% { transform: scale(1.1); box-shadow: 0 12px 25px rgba(28, 49, 103, 0.5); } } .afc-timeline-content { background: white; padding: 1.2rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); min-width: 140px; transition: transform 0.3s ease; } .afc-timeline-content:hover { transform: translateY(-5px); } .afc-timeline-date { font-weight: 700; color: #1C3167; margin-bottom: 0.5rem; } .afc-timeline-desc { font-size: 0.9rem; color: #666; } /* ========== BRACKET STYLES - OPTIMIZED ========== */ .afc-bracket { padding: 5rem 2rem; background: linear-gradient(135deg, #1C3167 0%, #2a4a8a 100%); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative; } .afc-bracket h3 { font-size: 2.5rem; font-weight: 700; color: white; margin-bottom: 1rem; text-align: center; } .afc-bracket-subtitle { font-size: 1.2rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 3rem; text-align: center; } /* TOMBOL FULLSCREEN YANG LEBIH MENARIK */ .afc-fullscreen-btn { position: absolute; top: 1.5rem; right: 1.5rem; background: linear-gradient(135deg, #47D0DD 0%, #1C3167 100%); color: white; border: 2px solid rgba(255, 255, 255, 0.3); padding: 1rem 2rem; border-radius: 50px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 8px 25px rgba(71, 208, 221, 0.4), 0 0 40px rgba(71, 208, 221, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; overflow: hidden; position: relative; } .afc-fullscreen-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s; } .afc-fullscreen-btn:hover::before { left: 100%; } .afc-fullscreen-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 35px rgba(71, 208, 221, 0.6), 0 0 60px rgba(71, 208, 221, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.6); } .afc-fullscreen-btn:active { transform: translateY(-1px) scale(1.02); } .afc-fullscreen-btn i { font-size: 1.2rem; animation: pulseIcon 2s ease-in-out infinite; } @keyframes pulseIcon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .afc-fullscreen-btn .fullscreen-text { font-weight: 700; letter-spacing: 0.5px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* BAGAN LEBIH RAPAT DI TAMPILAN NORMAL */ .afc-bracket-container { background: linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(26, 31, 58, 0.95) 100%); padding: 1.5rem; border-radius: 20px; overflow-x: auto; overflow-y: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .afc-bracket-wrapper { display: flex; justify-content: center; align-items: center; gap: 0.5rem; min-width: fit-content; padding: 1rem 0; } .afc-bracket-side { display: flex; flex-direction: column; gap: 0.4rem; } .afc-bracket-left { flex-direction: row; } .afc-bracket-right { flex-direction: row-reverse; } .afc-bracket-center { display: flex; flex-direction: column; gap: 0.8rem; padding: 0 0.5rem; justify-content: center; } .afc-bracket-round { display: flex; flex-direction: column; gap: 0.3rem; } .afc-round-title { background: linear-gradient(135deg, #47D0DD, #1C3167); color: white; padding: 0.4rem 0.8rem; border-radius: 8px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.75rem; text-align: center; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(71, 208, 221, 0.3); margin-bottom: 0.4rem; } /* ✅ MATCH BOX - PADDING KONSISTEN TANPA SPACE EKSTRA */ .afc-match-box { background: linear-gradient(135deg, rgba(28, 49, 103, 0.6) 0%, rgba(71, 208, 221, 0.15) 100%); border: 1px solid rgba(71, 208, 221, 0.3); border-radius: 10px; padding: 0.3rem 0.5rem; min-width: 180px; margin: 0.15rem 0; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; position: relative; } .afc-match-box:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(71, 208, 221, 0.4); border-color: rgba(71, 208, 221, 0.6); } /* ========== STYLING WAKTU PERTANDINGAN DI SAMPING VS ========== */ .match-time { display: inline-block; background: rgba(71, 208, 221, 0.15); color: #47D0DD; padding: 2px 8px; border-radius: 10px; font-size: 0.6rem; font-weight: 600; border: 1px solid rgba(71, 208, 221, 0.3); white-space: nowrap; backdrop-filter: blur(5px); font-family: 'Poppins', sans-serif; letter-spacing: 0.3px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .match-time i { margin-right: 4px; font-size: 0.65rem; } .match-live .match-time { background: rgba(255, 71, 87, 0.15); color: #ff4757; border-color: rgba(255, 71, 87, 0.3); animation: timePulseLive 1.5s ease-in-out infinite; } .match-finished .match-time { background: rgba(46, 213, 115, 0.15); color: #2ed573; border-color: rgba(46, 213, 115, 0.3); } @keyframes timePulseLive { 0%, 100% { box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3); } 50% { box-shadow: 0 4px 15px rgba(255, 71, 87, 0.6); transform: scale(1.05); } } /* ✅ MATCH TEAM - PADDING LEBIH KECIL */ .afc-match-team { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 6px; margin: 0.08rem 0; transition: all 0.3s ease; } .afc-match-team.winner { background: linear-gradient(135deg, rgba(71, 208, 221, 0.3), rgba(28, 49, 103, 0.3)); border: 1px solid rgba(71, 208, 221, 0.5); box-shadow: 0 0 15px rgba(71, 208, 221, 0.3); } .afc-match-team.loser { opacity: 0.6; } .team-seed { background: linear-gradient(135deg, #47D0DD, #1C3167); color: white; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; font-family: 'Poppins', sans-serif; min-width: 28px; text-align: center; } .team-name { flex: 1; color: white; font-size: 0.75rem; font-weight: 600; font-family: 'Poppins', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-score { background: rgba(71, 208, 221, 0.2); color: #47D0DD; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: 700; font-family: 'Poppins', sans-serif; min-width: 32px; text-align: center; } /* ✅ MATCH VS - TANPA MARGIN EKSTRA */ .match-vs { text-align: center; color: rgba(255, 255, 255, 0.4); font-size: 0.65rem; font-weight: 700; padding: 0.05rem 0; margin: 0; display: flex; align-items: center; justify-content: center; gap: 0.3rem; line-height: 1.1; } .winner-icon { font-size: 0.9rem; animation: crownBounce 1s ease-in-out infinite; } @keyframes crownBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .match-live { border: 2px solid #ff4757; box-shadow: 0 0 20px rgba(255, 71, 87, 0.5); animation: livePulse 1.5s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { box-shadow: 0 0 20px rgba(255, 71, 87, 0.5); } 50% { box-shadow: 0 0 30px rgba(255, 71, 87, 0.8); } } .live-badge { position: absolute; top: -8px; right: -8px; background: #ff4757; color: white; padding: 0.2rem 0.5rem; border-radius: 12px; font-size: 0.65rem; font-weight: 700; box-shadow: 0 4px 15px rgba(255, 71, 87, 0.5); animation: liveBadge 1s ease-in-out infinite; } @keyframes liveBadge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .afc-bracket-finals { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; } .afc-bracket-third { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; margin-top: 0.8rem; } .match-final { border: 2px solid #FFD700; box-shadow: 0 0 30px rgba(255, 215, 0, 0.4); } .champion-announcement { background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(71, 208, 221, 0.2)); border: 2px solid #FFD700; border-radius: 15px; padding: 1rem; margin-top: 0.8rem; text-align: center; box-shadow: 0 8px 30px rgba(255, 215, 0, 0.4); animation: championGlow 2s ease-in-out infinite; } @keyframes championGlow { 0%, 100% { box-shadow: 0 8px 30px rgba(255, 215, 0, 0.4); } 50% { box-shadow: 0 8px 40px rgba(255, 215, 0, 0.6); } } .champion-trophy { font-size: 2.5rem; margin-bottom: 0.5rem; animation: trophyFloat 3s ease-in-out infinite; } @keyframes trophyFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .champion-title { color: #FFD700; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 0.3rem; } .champion-name { color: white; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.2rem; margin-bottom: 0.2rem; } .champion-seed { color: #47D0DD; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.9rem; } /* LANJUTAN CSS - Tambahkan setelah Part 2 */ /* FULLSCREEN MODE */ .afc-bracket-container.afc-bracket-fullscreen { background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0a0e27 100%); padding: 0 !important; margin: 0 !important; width: 100vw !important; height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; border-radius: 0 !important; } .afc-bracket-container.afc-bracket-fullscreen .afc-bracket-wrapper { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform: scale(0.38); transform-origin: center center; gap: 0.5rem; } /* ========== ZOOM CONTROLS ========== */ .afc-zoom-controls { position: fixed; bottom: 2rem; right: 2rem; background: linear-gradient(135deg, rgba(28, 49, 103, 0.95), rgba(71, 208, 221, 0.95)); backdrop-filter: blur(10px); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50px; padding: 1rem 1.5rem; display: none; align-items: center; gap: 1rem; z-index: 1000; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); animation: slideInUp 0.5s ease-out; } .afc-zoom-controls.visible { display: flex; } @keyframes slideInUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .zoom-btn { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 50%; color: white; font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .zoom-btn:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.1); border-color: rgba(255, 255, 255, 0.6); } .zoom-btn:active { transform: scale(0.95); } .zoom-slider-container { display: flex; align-items: center; gap: 0.8rem; } .zoom-slider { width: 150px; height: 6px; background: rgba(255, 255, 255, 0.2); border-radius: 10px; outline: none; -webkit-appearance: none; cursor: pointer; } .zoom-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: white; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } .zoom-slider::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 4px 15px rgba(255, 255, 255, 0.5); } .zoom-slider::-moz-range-thumb { width: 20px; height: 20px; background: white; border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } .zoom-slider::-moz-range-thumb:hover { transform: scale(1.2); box-shadow: 0 4px 15px rgba(255, 255, 255, 0.5); } .zoom-percentage { color: white; font-weight: 700; font-size: 0.9rem; min-width: 50px; text-align: center; font-family: 'Poppins', sans-serif; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .zoom-reset-btn { background: rgba(255, 71, 87, 0.3); border: 2px solid rgba(255, 71, 87, 0.5); padding: 0.5rem 1rem; border-radius: 20px; color: white; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; } .zoom-reset-btn:hover { background: rgba(255, 71, 87, 0.5); border-color: rgba(255, 71, 87, 0.7); transform: scale(1.05); } /* GALLERY STYLES */ .afc-gallery { padding: 5rem 2rem; background: linear-gradient(135deg, #f8fafc, #ffffff); text-align: center; } .afc-gallery h3 { font-size: 2.5rem; font-weight: 700; color: #1C3167; margin-bottom: 1rem; } .afc-gallery-subtitle { font-size: 1.2rem; color: #666; margin-bottom: 3rem; max-width: 600px; margin-left: auto; margin-right: auto; } .afc-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; } .afc-gallery-item { aspect-ratio: 16/10; background: linear-gradient(135deg, #e2e8f0, #f1f5f9); border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed #cbd5e1; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; } .afc-gallery-item.has-image { border: 2px solid #47D0DD; background: none; } .afc-gallery-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 0%, rgba(28, 49, 103, 0.7) 70%, rgba(28, 49, 103, 0.9) 100%); opacity: 0; transition: all 0.3s ease; } .afc-gallery-item:hover .afc-gallery-overlay { opacity: 1; } .afc-gallery-item.has-image .afc-gallery-content { position: absolute; bottom: 15px; left: 15px; right: 15px; color: white; text-align: left; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; z-index: 2; } .afc-gallery-item.has-image:hover .afc-gallery-content { opacity: 1; transform: translateY(0); } .afc-gallery-item:not(.has-image) .afc-gallery-content { position: static; transform: none; opacity: 1; color: #64748b; } .afc-gallery-item::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(71, 208, 221, 0.1), transparent); transition: all 0.3s ease; transform: translateX(-100%); } .afc-gallery-item:hover::before { transform: translateX(100%); } .afc-gallery-item:hover { transform: translateY(-10px) scale(1.02); border-color: #47D0DD; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); } .afc-gallery-item i { font-size: 3rem; color: #94a3b8; margin-bottom: 1rem; transition: all 0.3s ease; } .afc-gallery-item:hover i { color: #47D0DD; transform: scale(1.2); } .afc-gallery-text { font-size: 1rem; color: #64748b; font-weight: 600; } .afc-gallery-desc { font-size: 0.85rem; color: #94a3b8; margin-top: 0.5rem; padding: 0 1rem; text-align: center; } .afc-gallery-item.has-image .afc-gallery-text { color: white; font-size: 1.1rem; margin-bottom: 0.3rem; } .afc-gallery-item.has-image .afc-gallery-desc { color: rgba(255, 255, 255, 0.9); padding: 0; text-align: left; } /* FEATURES STYLES */ .afc-features { padding: 5rem 2rem; background: white; } .afc-features-container { max-width: 1200px; margin: 0 auto; text-align: center; } .afc-features h2 { font-size: 2.8rem; font-weight: 800; color: #1C3167; margin-bottom: 1rem; } .afc-features-subtitle { font-size: 1.2rem; color: #666; max-width: 600px; margin: 0 auto 4rem; line-height: 1.6; } .afc-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 3rem; } .afc-feature-card { background: white; padding: 2.5rem 2rem; border-radius: 20px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); border: 1px solid #f0f0f0; transition: all 0.3s ease; position: relative; } .afc-feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(135deg, #47D0DD, #1C3167); border-radius: 20px 20px 0 0; } .afc-feature-card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); } .afc-feature-icon { width: 70px; height: 70px; background: linear-gradient(135deg, #47D0DD, #1C3167); border-radius: 15px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: 0 8px 20px rgba(71, 208, 221, 0.3); transition: all 0.3s ease; } .afc-feature-card:hover .afc-feature-icon { transform: scale(1.1) rotate(5deg); } .afc-feature-icon i { font-size: 1.8rem; color: white; } .afc-feature-title { font-size: 1.4rem; font-weight: 700; color: #1C3167; margin-bottom: 1rem; } .afc-feature-desc { font-size: 1rem; line-height: 1.6; color: #666; } /* Sponsors Section */ .afc-sponsors { padding: 5rem 2rem; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); position: relative; overflow: hidden; } .afc-sponsors::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 50%, rgba(71, 208, 221, 0.08), transparent 60%); pointer-events: none; } .afc-sponsors-container { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; } .afc-sponsors-title { font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, #47D0DD, #1C3167); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: center; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; } .afc-sponsors-subtitle { text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 1.1rem; margin-bottom: 3.5rem; font-weight: 300; } .afc-sponsors-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem 1.5rem; align-items: center; justify-items: center; max-width: 1200px; margin: 0 auto; } .afc-sponsor-item { width: 100%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .afc-sponsor-logo { max-width: 100%; max-height: 140px; width: auto; height: auto; object-fit: contain; filter: brightness(0.95) contrast(1.05); transition: all 0.3s ease; padding: 1.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 12px; border: 1px solid rgba(71, 208, 221, 0.15); } .afc-sponsor-item:hover .afc-sponsor-logo { filter: brightness(1.1) contrast(1.15); transform: scale(1.05) translateY(-5px); background: rgba(255, 255, 255, 0.08); border-color: rgba(71, 208, 221, 0.4); box-shadow: 0 10px 30px rgba(71, 208, 221, 0.3); } /* ANIMASI NOTIFICATION */ @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } /* SCROLLBAR STYLING */ .afc-bracket-container::-webkit-scrollbar { height: 10px; } .afc-bracket-container::-webkit-scrollbar-track { background: rgba(28, 49, 103, 0.3); border-radius: 10px; } .afc-bracket-container::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #47D0DD, #1C3167); border-radius: 10px; } .afc-bracket-container::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #5adee9, #2a4589); } /* LANJUTAN CSS - RESPONSIVE (BAGIAN TERAKHIR CSS) */ /* Tambahkan setelah Part 3, lalu tutup dengan */ /* RESPONSIVE ZOOM CONTROLS */ @media (max-width: 768px) { .afc-zoom-controls { bottom: 1rem; right: 1rem; left: 1rem; padding: 0.8rem 1rem; flex-wrap: wrap; justify-content: center; } .zoom-slider { width: 120px; } .zoom-btn { width: 35px; height: 35px; font-size: 1rem; } } @media (max-width: 480px) { .afc-zoom-controls { gap: 0.5rem; padding: 0.6rem 0.8rem; } .zoom-slider { width: 100px; } .zoom-percentage { font-size: 0.8rem; min-width: 40px; } } /* RESPONSIVE MOBILE */ @media (max-width: 1200px) { .afc-sponsors-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 992px) { .afc-sponsors-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .afc-sponsor-logo { max-height: 120px; } } @media (max-width: 768px) { .match-time { font-size: 0.55rem; padding: 2px 6px; } .match-time i { font-size: 0.5rem; margin-right: 2px; } .match-vs { font-size: 0.6rem; gap: 0.25rem; } .afc-logo { top: 1rem; left: 1rem; } .afc-logo img { height: 60px; } .afc-smpi-btn { top: 1rem; right: 1rem; padding: 0.6rem 1rem; font-size: 0.8rem; } .afc-hero { padding-top: 6rem; } .afc-hero-content { grid-template-columns: 1fr; text-align: center; gap: 3rem; } .afc-title { font-size: 3rem; } .afc-subtitle { font-size: 2rem; } .afc-field-container { width: 350px; height: 240px; } .afc-timeline-container { flex-direction: column; gap: 2rem; } .afc-features-grid { grid-template-columns: 1fr; } .afc-gallery-grid { grid-template-columns: 1fr; } .afc-buttons { flex-direction: column; align-items: center; } .afc-btn { width: 100%; max-width: 250px; justify-content: center; } .afc-fullscreen-btn { padding: 0.75rem 1.25rem; font-size: 0.85rem; top: 1rem; right: 1rem; gap: 0.5rem; } .afc-fullscreen-btn i { font-size: 1rem; } .afc-bracket-container { padding: 1rem; } .afc-bracket-wrapper { gap: 0.3rem; } .afc-match-box { min-width: 150px; padding: 0.25rem 0.4rem; } .afc-round-title { font-size: 0.65rem; padding: 0.3rem 0.6rem; } .team-name { font-size: 0.7rem; } .team-seed { font-size: 0.65rem; padding: 0.1rem 0.3rem; } .team-score { font-size: 0.75rem; padding: 0.1rem 0.4rem; } .afc-sponsors { padding: 3rem 1.5rem; } .afc-sponsors-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .afc-sponsors-title { font-size: 2rem; } .afc-sponsor-logo { max-height: 100px; padding: 1rem; } } @media (max-width: 480px) { .match-time { font-size: 0.5rem; padding: 1px 5px; } .match-time i { font-size: 0.45rem; } .match-vs { font-size: 0.55rem; gap: 0.2rem; } .afc-title { font-size: 2.5rem; } .afc-subtitle { font-size: 1.5rem; } .afc-year { font-size: 1.5rem; } .afc-field-container { width: 280px; height: 200px; } .afc-stats { flex-direction: column; gap: 0.5rem; } .afc-stat { min-width: 70px; padding: 0.8rem; } .afc-fullscreen-btn { padding: 0.6rem 1rem; font-size: 0.75rem; } .afc-fullscreen-btn .fullscreen-text { display: none; } .afc-match-box { min-width: 130px; } .afc-round-title { font-size: 0.6rem; } .afc-sponsors-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .afc-sponsor-logo { max-height: 90px; padding: 0.8rem; } .afc-sponsors-subtitle { font-size: 0.95rem; } }

AFC (Copy)

AFC

Futsal Championship

2025

SMP Islam Al Abidin

Bergabunglah dalam turnamen futsal paling bergengsi dan kompetitif tahun ini. Tunjukkan skill terbaik timmu dan raih gelar juara dengan hadiah menarik yang menanti!

Daftar Sekarang Lihat Galeri

32

Tim Peserta

1

Total Hadiah

2

Hari Event

Timeline Event

1-15 Feb

Pendaftaran Tim

18 Feb

Technical Meeting

20-25 Feb

Babak Penyisihan

26 Feb

Final & Awarding

Galeri Foto AFC

Dokumentasi momen-momen terbaik dari AFC Futsal Championship - aksi pertandingan, kegembiraan tim, dan pencapaian juara

Aksi Pertandingan

Foto-foto aksi terbaik dari setiap pertandingan seru

Team Photos

Dokumentasi resmi tim-tim peserta AFC

Penyerahan Hadiah

Momen bersejarah penyerahan trofi dan medali

Behind The Scenes

Momen kebersamaan di luar lapangan

Best Moments

Highlight dan momen tak terlupakan turnamen

Video Highlights

Cuplikan video terbaik dari setiap pertandingan

Mengapa Ikut AFC?

Turnamen futsal dengan standar internasional dan pengalaman tak terlupakan bagi setiap tim yang berpartisipasi dalam kompetisi bergengsi ini

Kompetisi Berkualitas

Sistem kompetisi profesional dengan wasit berlisensi, lapangan standar FIFA, dan format pertandingan yang fair untuk semua tim peserta.

Hadiah Spektakuler

Total hadiah jutaan rupiah, trofi bergilir, medali untuk juara 1-3, dan penghargaan khusus untuk pemain terbaik.

Dokumentasi Premium

Live streaming pertandingan, dokumentasi foto & video profesional, dan highlights setiap pertandingan.