<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Saring Daring</title>
  <link rel="icon" type="image/x-icon" href="assets/saringdaring-logo.ico">

  <!-- Bootstrap CSS -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<nav class="navbar navbar-expand-lg bg-white shadow-sm sticky-top">
  <div class="container">
    <!-- Logo -->
    <a class="navbar-brand" href="#">
      <img src="assets/saringdaring-logo.png" alt="Logo" height="60px">
    </a>
    <!-- Toggler -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Menu -->
    <div class="collapse navbar-collapse text-center" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#sec-tentang-saringdaring">Tentang Saring Daring</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sec-kompetisi">Kompetisi</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sec-program">Program</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sec-pendaftaran">Pendaftaran</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sec-peta">Peta Partisipan</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sec-asah-digital">Asah Digital</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sec-galeri">Kampanye</a>
        </li>
        <li class="nav-item me-2">
          <a class="nav-link" href="#sec-faq">FAQ</a>
        </li>
        <li class="nav-item">
          <a class="nav-link daftar" href="#sec-daftar">Daftar</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid p-0">
	<div class="container-fluid p-0">
	  <div id="carouselExampleIndicators" class="carousel slide">
	    <div class="carousel-indicators">
	      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
	      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
	      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
	      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
	      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
	    </div>
	    <div class="carousel-inner">
	      <div class="carousel-item active">
	        <img src="assets/hero-1-min.png" class="d-block w-100" alt="...">
	      </div>
	      <div class="carousel-item">
	        <img src="assets/hero-2.jpg" class="d-block w-100" alt="...">
	      </div>
	      <div class="carousel-item">
	        <img src="assets/hero-3.jpg" class="d-block w-100" alt="...">
	      </div>
	      <div class="carousel-item">
	        <img src="assets/hero-4.jpg" class="d-block w-100" alt="...">
	      </div>
	      <div class="carousel-item">
	        <img src="assets/hero-5.jpg" class="d-block w-100" alt="...">
	      </div>
	    </div>
	    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
	      <img src="assets/arrow-left.png">
	      <span class="visually-hidden">Previous</span>
	    </button>
	    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
	      <img src="assets/arrow-right.png">
	      <span class="visually-hidden">Next</span>
	    </button>
	  </div>
	</div>
</div>
<div class="container-fluid bg-blue">
	<div class="container">
		<div class="row">
			<div class="col-md-10 mt-3 mb-3">
			  <p class="text-white fs-15 fw-400 mb-2">
			    Dipersembahkan Oleh:
			  </p>
			  <a href="https://www.usaid.gov/id/indonesia" target="_BLANK">
			  	<img class="imgper" src="assets/usaid.png">
			  </a>
			  &nbsp;&nbsp;&nbsp;
			  <a href="https://indonesia.fb.com/inisiatif-melek-digital/" target="_BLANK">
			  	<img class="imgper" src="assets/meta_asah_logo.png">
			  </a>
			</div>
			<div class="col-md-2 mt-3 mb-3">
			  <p class="text-white fs-15 fw-400 mb-2">
			    Didukung Oleh:
			  </p>
			  <a href="https://www.lovefrankie.co/" target="_BLANK">
			  	<img class="imgduk" src="assets/lovefrankie-logo.png">
			  </a>
			</div>

		</div>
	</div>
</div>


<!-- TENTANG -->
<section id="sec-tentang-saringdaring">
	<div class="container-fluid position-relative">
		<div class="container mt-custom">
		  <div class="row position-relative" >
		    <div class="col-md-7 order-2 order-md-1 img-bg-1 mt-3 mt-md-5 py-5 px-3">
		      
		    	<img 
				    src="assets/yt-1.png" 
				    class="youtube-vid" 
				    alt="YouTube Video Thumbnail" 
				    onclick="playVideo()" 
				    style="width: 100%; max-width: 100%; height: auto; cursor: pointer; display: block; object-fit: contain;">

				  <!-- YouTube Video -->
				  <iframe 
				    id="youtube-video" 
				    src="" 
				    title="YouTube video player" 
				    frameborder="0" 
				    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
				    referrerpolicy="strict-origin-when-cross-origin" 
				    allowfullscreen 
				    style="display: none; width: 100%; height: auto; max-width: 100%;">
				  </iframe>
		    </div>
		    <div class="col-md-5 order-1 order-md-2 mt-5 mt-md-5 px-3">
		      <h1 class=""><span class="fw-300 fs-48 text-grey">Tentang</span> <br/> <span class="fw-700 fs-64 text-red" >Saring Daring</span></h1>
		      <div class="short-border-yellow mb-3"></div>
		      <p class="fw-300 fs-24 text-grey">
		      	Halo, Sobat Daring!
				Selamat datang di Saring Daring University Challenge Indonesia—program edukasi peningkatan kapasitas sekaligus kompetisi nasional buat mahasiswa!
			</p>
			<p class="fw-300 fs-24 text-grey">
				Di sini, kamu akan belajar tentang literasi digital dan berpikir kritis sambil merancang kampanye digital kreatif dari isu nyata yang ada di masyarakat.
			</p>
			<p class="fw-300 fs-24 text-grey">
				Mulai dari mengenali informasi yang kredibel hingga melawan hoaks, kamu akan diajak menggali ide-ide segar untuk mempromosikan literasi digital yang positif dan kritis di era media sosial.
		      </p>
		    </div>
		  </div>
		</div>
		<div class="col-12 col-md-7 offset-md-5 order-3 order-md-3 pr-0 backimgdotted-1">
		    <img src="assets/dotted.png" class="w-100">
		</div>
	</div>
</section>



<!-- KOMPETISI -->
<section id="sec-kompetisi">
	<div class="container-fluid position-relative">
		<div class="container mt-custom">
		  <div class="row position-relative" >
		    
		    <div class="col-md-5 order-1 order-md-1 mt-5 mt-md-5 px-3 d-flex flex-column justify-content-center">
			    <h1 class=""><span class="fw-300 fs-48">Kompetisi</span> <br/> <span style="font-weight: 700;" class="text-blue fs-64">Saring Daring</span></h1>
			    <div class="short-border-red mb-3"></div>
			    <p class="fw-300 fs-24">
			        Program ini nggak cuma belajar, tapi juga menantang kamu untuk merancang kampanye digital dengan hadiah total <b class="fw-600">Rp21.000.000!</b> 🎉✨
			    </p>
			    <p class="fw-300 fs-24">
			        Jadi, selain menambah ilmu, kamu juga berkesempatan menciptakan karya yang impactful dan relevan.
			    </p>
			</div>
		    <div class="col-md-6 offset-md-1 order-3 order-md-3 mt-3 mt-md-5 px-3 pt-5">
		    	<img src="assets/kompetisi.png" style="width: 100%; max-width: 100%; height: auto; cursor: pointer; display: block; object-fit: contain;">
		    </div>
		  
		  </div>
		</div>
		<div class="col-12 col-md-7 order-2 order-md-3 pr-0 backimgdotted-2">
	        <img src="assets/dotted.png" class="w-100">
	    </div>
	</div>
</section>
<!-- END KOMPETISI -->


<!-- KAMPANYE -->
<div class="container-fluid p-0 pb-3 position-relative">
	<div class="col-11 back-red"></div>
	<div class="col-4 back-eclipse"></div>
	<div class="container mt-custom">
		<div class="row">
			<div class="col-12 mt-4 mb-2">
				<h4 class="text-md-center">
					<span class="fw-300 text-white fs-28">Bikin Kampanye Yang</span><br/><b class="text-white fs-28 fw-500">Seru dan Berdampak!</b>
				</h4>
			</div>
			<div class="col-md-3">
				<div class="col-md-12 box-campaign rounded p-4 text-red">
					<h5 class="mb-3 text-uppercase fs-20 fw-700">Buat Strategi Kampanye 1 Bulan</h5>
					<p class="text-red fs-18 fw-300">Rancang kampanye media sosial yang berjalan selama 1 bulan. Fokusnya? Meningkatkan literasi digital!</p>

					<p class="text-red fs-18 fw-300">Siapkan konten yang menarik dan jadwal posting yang tepat. Tim terpilih akan menerima dana produksi hingga <b class="fw-700 text-red">Rp5.000.000</b> untuk mewujudkan ide mereka dan mentorship dari <b class="fw-700 text-red">Meta Mates</b>.</p>
				</div>
			</div>
			<div class="col-md-3">
				<div class="col-md-12 box-campaign rounded p-4 text-red">
					<h5 class="mb-3 text-uppercase fs-20 fw-700">Jawab Masalah Dari CSO</h5>
					<p class="text-red fs-18 fw-300">Kampanye kamu harus bisa menjawab masalah yang diberikan Organisasi Masyarakat Sipil (OMS).</p>

					<p class="text-red fs-18 fw-300">Misalnya, bagaimana cara melawan hoaks atau meningkatkan kesadaran bermedia sosial dengan bijak, partisipasi demokrasi digital, atau masalah-masalah lain yang akan diberikan ke team kamu.</p>
				</div>
			</div>
			<div class="col-md-3">
				<div class="col-md-12 box-campaign rounded p-4 text-red">
					<h5 class="mb-3 text-uppercase fs-20 fw-700">Kreatif dan Iteraktif</h5>
					<p class="text-red fs-18 fw-300">Kampanye kamu harus beda! Bikin yang kreatif, seru, dan bikin orang ingin ikut terlibat.</p>

					<p class="text-red fs-18 fw-300">Pakai meme, video, kuis—bebas, yang penting asyik!</p>
				</div>
			</div>
			<div class="col-md-3">
				<div class="col-md-12 box-campaign rounded p-4 text-red">
					<h5 class="mb-3 text-uppercase fs-20 fw-700">Gunakan Platform Meta dan Targetkan Audiens Nyata</h5>
					<p class="text-red fs-18 fw-300">Jalankan kampanye di platform Meta (seperti Facebook atau Instagram).</p>

					<p class="text-red fs-18 fw-300">Pastikan kamu menyasar audiens yang relevan, bukan cuma teman dekat.</p>
				</div>
			</div>
			<div class="col-12 mt-2">
				<h5 class="fs-24 fw-300 text-md-center text-white">
					Gampang, kan? Yuk, bikin kampanye yang seru dan bermanfaat! 🎉
				</h5>
			</div>
			
		</div>
	</div>
</div>
<!-- END KAMPANYE -->

<section id="sec-program">
	<div class="container pt-3 mt-custom">
		<h1 class="">
			<span class="fs-48 fw-300">Tahap</span> <br/> <span class="fs-48 fw-500 text-dark">Program</span>
		</h1>
		<div class="short-border-blue "></div>
		<div class="row">
			<div class="col-md-4 mt-5">
				<div class="row">
					<div class="col-8">
						<div class="col-12 bg-blue  rounded p-2">
							<span class="text-white fs-16 fw-700">
								Tahap 1
							</span>
							<br/>
							<span class="text-white fs-24 fw-700">
								Pendaftaran & Pengenalan
							</span>
						</div>
					</div>
					<div class="col-4 d-flex justify-content-center align-items-center">
					    <img src="assets/red-triangle.png" class="w-50 red-triangle">
					</div>
					<div class="col-12">
						<i class="fa-solid fa-circle thedotestep"></i>
					</div>
					<div class="col-12">
						<div class="col-12 thelinestep">
							
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-12">
						<div class="col-12 rounded-4 border borded-blue mt-4 p-3 akomthp">
							<p class="fs-20 fw-600 mb-2">✨ Pendaftaran (10 Februari - 4 Maret 2025)</p>
							<p class="fs-20 fw-400 mb-5">Kumpulkan tim kalian (maksimal 3 orang) untuk mewakili universitas! Nggak harus dari jurusan atau angkatan yang sama, yang penting dari FISIP/Humaniora. Ayo daftar sekarang dan tunjukkan semangat kalian!</p>
							
							<p class="fs-20 fw-600 mb-2">✨ Onboarding (April 2025)</p>
							<p class="fs-20 fw-400 mb-5"> 
							Selamat datang di WhatsApp Community Saring Daring! Di sini tempat kalian akan berinteraksi dan belajar bareng sepanjang program.
							</p>
							<p class="fs-20 fw-600 mb-2">✨ Masterclass (April - Mei 2025)</p>
							<p class="fs-20 fw-400">Kalian bakal belajar dari para ahli tentang literasi digital, cara berpikir kritis, dan menghubungkannya ke strategi kampanye sosial. Semua dilakukan online, jadi fleksibel banget!</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-4 mt-5">
				<div class="row">
					<div class="col-8">
						<div class="col-12 bg-yellow  rounded p-2">
							<span class="text-white fs-16 fw-700">
								Tahap 2
							</span>
							<br/>
							<span class="text-white fs-24 fw-700">
								Kompetisi Bagian Pertama
							</span>
						</div>
					</div>
					<div class="col-4 d-flex justify-content-center align-items-center">
					    <img src="assets/red-triangle.png" class="w-50 red-triangle">
					</div>
					<div class="col-12">
						<i class="fa-solid fa-circle thedotestep"></i>
					</div>
					<div class="col-12">
						<div class="col-12 thelinestep">
							
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-12">
						<div class="col-12 rounded-4 border borded-yellow mt-4 p-3 akomthp">
							<p class="fs-20 fw-600 mb-2">🚀 Pengembangan Proposal Kampanye & Pitching (Mei - Juni 2025)</p>
							<p class="fs-20 fw-400 mb-5">Bikin proposal kampanye kalian berdasarkan isu nyata yang disampaikan oleh challenge owner kalian - Organisasi Masyarakat Sipil (OMS)! Nanti, kalian bakal pitching di depan panel juri. Siapkan ide terbaik yang bisa bikin ‘client’ terpukau!</p>
							
							<p class="fs-20 fw-600 mb-2">🎯 Bootcamp (Agustus 2025)</p>
							<p class="fs-20 fw-400"> 
							Buat yang lolos tahap Pitching, akan diundang untuk Bootcamp seru di Jakarta! Kalian akan belajar cara bikin dan menyampaikan kampanye sosial yang efektif. Jangan lupa bawa energi positif kalian, ya!
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-4 mt-5">
				<div class="row">
					<div class="col-8">
						<div class="col-12 bg-red  rounded p-2">
							<span class="text-white fs-16 fw-700">
								Tahap 3
							</span>
							<br/>
							<span class="text-white fs-24 fw-700">
								Kompetisi Bagian Kedua
							</span>
						</div>
					</div>
					<div class="col-12">
						<i class="fa-solid fa-circle thedotestep"></i>
					</div>
					<div class="col-12">
						<div class="col-12 thelinestep">
							
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-12">

						<div class="col-12 rounded-4 border borded-red mt-4 p-3 akomthp">
							<p class="fs-20 fw-600 mb-2">🎬 Produksi Kampanye & Bimbingan (Agustus - Oktober 2025)</p>
							<p class="fs-20 fw-400 mb-5">Tim terbaik dari tiap universitas akan dapat bimbingan dan dukungan dana buat memproduksi
	kampanye mereka. Saatnya kalian menunjukkan aksi nyata!</p>
							
							<p class="fs-20 fw-600 mb-2">🏆 National Summit (Oktober 2025)</p>
							<p class="fs-20 fw-400 mb-4"> 
							Finalis bakal tampil di National Summit Jakarta! Ini kesempatan kalian buat pamer hasil kampanye dan dampak luar biasa yang kalian ciptakan.
							</p>
							<p class="fs-20 fw-400">
							Ayo, tunggu apa lagi? Mari bikin perubahan dan jadikan kampanye kalian yang terbaik! 💪
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>







<!-- NATIONAL SUMMIT -->

<div class="container-fluid p-0 pb-3 position-relative">
	<div class="col-9 back-blue">
		
	</div>
	<div class="col-4 back-eclipse-2"></div>
	<div class="container mt-custom">
		<div class="row ms-3">
			
			<div class="row position-relative" >
			    <div class="col-md-7 order-2 order-md-1 mt-3 mt-md-5 py-5 px-3">
			      
			    	<img 
					    src="assets/yt-1.png" 
					    class="youtube-vid2" 
					    alt="YouTube Video Thumbnail" 
					    onclick="playVideo2()" 
					    style="width: 100%; max-width: 100%; height: auto; cursor: pointer; display: block; object-fit: contain;">

					  <!-- YouTube Video -->
					  <iframe 
					    id="youtube-video2" 
					    src="" 
					    title="YouTube video player" 
					    frameborder="0" 
					    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
					    referrerpolicy="strict-origin-when-cross-origin" 
					    allowfullscreen 
					    style="display: none; width: 100%; height: auto; max-width: 100%;">
					  </iframe>
			    </div>
			    <div class="col-md-5 order-1 order-md-2 mt-5 mt-md-5 px-3 position-relative d-flex flex-column justify-content-center align-items-center text-center">
				    <img src="assets/piala.png" class="w-50">
				    <h5 class="mt-4 text-white fs-24 fw-400 ln-1-5">
				        Pemenang utama akan <br/>mendapatkan hadiah sebesar <br/>
				        <span class="text-white fw-600">Rp21.000.000!</span> 🎉 ✨
				    </h5>
				</div>
			  </div>
			
		</div>
	</div>
	<div class="col order-3 order-md-3 pr-0 dotblue-1">
	    <img src="assets/dotblue-1.png" class="w-100">
	</div>
	<div class="col order-3 order-md-3 pr-0 dotblue-2">
	    <img src="assets/dotblue-2.png" class="w-100">
	</div>
</div>
<!-- NATIONAL SUMMIT -->


<!-- PERSYARATAN -->

<section id="sec-pendaftaran">
	<div class="container-fluid p-0 bg-red position-relative">
		<div class="container py-5 mt-custom">
			<div class="row">
				<div class="col-md-12">
					<h1 class="text-center">
						<span class="fw-300 fs-48 text-white">Persyaratan</span> <br/> <span class="fs-48 fw-500 text-white">Pendaftaran</span>
					</h1>
					<div class="short-border-blue-center mb-5"></div>
				</div>
				<div class="col-md-10 offset-md-1">
    <div class="row justify-content-center">
        <div class="col-12 col-md-6 order-2 order-md-1 d-flex justify-content-center align-items-center">
            <img src="assets/pendaftaran.png" class="w-100">
        </div>
        <div class="col-12 col-md-6 order-1 order-md-2 d-flex flex-column justify-content-center align-items-center">
            <p>
                <ol>
                    <li class="fs-18 text-white">Berusia 18 tahun ke atas.</li>
                    <li class="fs-18 text-white">Mahasiswa aktif dari Fakultas Ilmu Sosial dan Politik di salah satu dari 10 universitas mitra.</li>
                    <li class="fs-18 text-white">Memiliki tim dengan 3 anggota (termasuk kamu), berasal dari fakultas yang sama, tetapi boleh dari jurusan dan angkatan berbeda.</li>
                    <li class="fs-18 text-white">Berkomitmen untuk belajar, berbagi ilmu, dan bersenang-senang sambil memberikan dampak positif selama masa program 🚀</li>
                </ol>
            </p>
            <button class="ms-3 px-3 py-2 text-red bg-yellow rounded-pill border border-0 mt-auto fs-16 fw-500 mb-5" style="width:max-content">Daftar Sekarang</button>
        </div>
    </div>
</div>


			</div>
		</div>
		<div class="col order-3 order-md-3 pr-0 dotblue-3">
		    <img src="assets/dotblue-3.png" class="w-100">
		</div>
	</div>
</section>
<!-- END PERSYARATAN -->


<!-- PETA -->
<section id="sec-peta">
	<div class="container-fluid p-0 position-relative">
		<div class="container pt-5 mt-5">
			<div class="row">
				<div class="col-md-12 mb-5">
					<h1 class="text-center">
						<span class="fw-300 text-dark fs-48">Peta</span> <br/> <span class="fs-48 fw-500 text-dark">Partisipan</span>
					</h1>
					<div class="short-border-yellow-center "></div>
				</div>
				<div class="col-md-12 position-relative">
					<img src="assets/peta.png" class="w-100">
				</div>

			</div>
		</div>
	</div>
</section>
<!-- PETA -->


<!-- ASAH DIGITAL -->
<section id="sec-asah-digital">
	<div class="container mt-custom">
	  <div class="row position-relative" >
	    
	    <div class="col-md-6 order-1 order-md-1 mt-5 mt-md-5 px-3 d-flex flex-column justify-content-center">
		    <h1 class=""><span class="fs-48 fw-300">Tentang</span> <br/> <span class="fs-48 fw-500 text-blue">Asah Digital</span></h1>
		    <div class="short-border-red mb-5"></div>
		    <p class="fs-24 fw-300">
		        Asah Digital adalah program dari Meta, yang menaungi Facebook, Messenger, Instagram, dan Whatsapp, yang bertujuan untuk menciptakan lingkungan internet yang aman dan nyaman.
		    </p>
		    <p class="fs-24 fw-300">
		        Program ini membagikan berbagai sumber daya untuk membangun komunitas global warga digital yang bertanggung jawab dan memiliki bekal keterampilan dalam dunia digital.
		    </p>
		</div>

	    <div class="col-md-6  order-3 order-md-3 mt-3 mt-md-5 px-3">
	    	<img src="assets/asah-digital.png" style="width: 100%; max-width: 100%; height: auto; cursor: pointer; display: block; object-fit: contain;">
	    </div>
	  </div>
	</div>
</section>
<!-- END ASAH DIGITAL -->

<!-- TOPIK -->
<div class="container mt-custom">
	<div class="row">
		<div class="col-12">
			<h4 class="fw-500 fs-28 text-center">Topik Utama Dalam Program</h4>
		</div>
		<div class="col-md-6 mt-3">
			<div class="col-12 bg-yellow p-4 rounded-4 position-relative atopikbox">
				
				<div class="row">
					<div class="col-9">
						<p class="fw-700 fs-20 text-red">MEMAJUKAN DEMOKRASI DIGITAL</p>
					</div>
					<div class="col-3 position-relative">
						<img src="assets/cht-1.png" class="cht-img">
					</div>
				</div>
				
				<p class="fw-300 fs-18 text-red">Fokus pada <b class="fw-600 text-red">literasi digital, berpikir kritis</b>, serta menjaga <b class="fw-700 fs-18 text-red">hak asasi manusia</b> dan <b class="fw-700 fs-18 text-red">kebebasan berekspresi</b> di ruang digital. Tujuannya adalah membangun masyarakat digital yang tangguh, inklusif, dan demokratis</p>
			</div>
		</div>
		<div class="col-md-6 mt-3">
			<div class="col-12 bg-yellow p-4 rounded-4 position-relative atopikbox">
				<div class="row">
					<div class="col-9">
						<p class="fw-700 fs-20  text-red">PENGEMBANGAN STRATEGI KAMPANYE</p>
					</div>
					<div class="col-3 position-relative">
						<img src="assets/cht-2.png" class="cht-img">
					</div>
				</div>
				<p class="fw-300 fs-18 text-red">Belajar <b class="fw-700 fs-18 text-red">Komunikasi Strategis</b> dan <b class="fw-600 text-red">Perencanaan Konten</b>, termasuk pembuatan pesan kunci, pemilihan media yang tepat, serta strategi menarik untuk menciptakan kampanye yang relevan dan efektif.</p>
			</div>
		</div>
	</div>
</div>
<!-- END TOPIK -->


<!-- CONTOH KAMPANYE -->
<section id="sec-galeri">
	<div class="container-fluid p-0">
		<div class="container py-5 position-relative mt-custom">
			<div class="row">
				<div class="col-md-12">
					<h1 class="text-center">
						<span class="fw-300 fs-48 text-dark">Contoh</span> <br/> <span class="fs-48 fw-500 text-dark">Kampanye</span>
					</h1>
					<div class="short-border-blue-center "></div>
				</div>
				<div class="col-md-4 position-relative imgcontoh mt-3">
					<div class="col-12">
						<a href="https://www.instagram.com/penyelamatdemokrasi/?hl=en" target="_BLANK">
							<img src="assets/cth-1.png" class="w-100">
						</a>
					</div>
				</div>
				<div class="col-md-4 position-relative imgcontoh mt-3">
					<div class="col-12">
						<a href="https://www.instagram.com/lawanpolitikuang_?igsh=cjh5ZThiYjhrcHd6" target="_BLANK">
							<img src="assets/cth-2.png" class="w-100">
						</a>
					</div>
				</div>
				<div class="col-md-4 position-relative imgcontoh mt-3">
					<div class="col-12">
						<a href="ttps://www.instagram.com/colxative?igsh=YjN3dTZhMmI5OG41" target="_BLANK">
							<img src="assets/cth-3.png" class="w-100">
						</a>
					</div>
				</div>
				<div class="col-md-4 position-relative imgcontoh mt-3">
					<div class="col-12">
						<a href="https://www.instagram.com/umalu.journey?igsh=OXZqM2lyMzIxZ294" target="_BLANK">
							<img src="assets/cth-4.png" class="w-100">
						</a>
					</div>
				</div>
				<div class="col-md-4 position-relative imgcontoh mt-3">
					<div class="col-12">
						<a href="https://www.instagram.com/baluttemurun/?hl=en" target="_BLANK">
							<img src="assets/cth-5.png" class="w-100">
						</a>
					</div>
				</div>
				<div class="col-md-4 position-relative imgcontoh mt-3">
					<div class="col-12">
						<a href="https://www.facebook.com/share/r/U1rRVkAmMegDVw2a/?mibextid=WC7FNe">
							<img src="assets/cth-6.png" class="w-100">
						</a>
					</div>
				</div>
				<div class="col-4 back-eclipse-3"></div>

			</div>
		</div>
	</div>
</section>
<!-- END CONTOH KAMPANYE -->


<!-- FAQ -->
<section id="sec-faq">
	<div class="container-fluid p-0">
		<div class="container py-5 position-relative mt-5">
			<div class="row">
				<div class="col-md-12">
					<h1 class="text-center">
						<span class="fw-300 fs-48 text-dark">Pertanyaan Yang</span> <br/> <span class="fs-48 fw-500 text-dark">Sering Ditanyakan (FAQ)</span>
					</h1>
					<div class="short-border-red-center "></div>
				</div>
				<div class="col-12 mt-5">
					<div class="accordion" id="accordionExample">
					  <div class="accordion-item">
					    <h2 class="accordion-header" style="border:none">
					      <button class="accordion-button fs-20 fw-600 collapsed text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
					        1. Persyaratan dan Pendaftaran
					      </button>
					    </h2>
					    <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
					      <div class="accordion-body fs-18">
					        <div class="question">
						        <p class="question-title">♦️ Pertanyaan 1:</p>
						        <p>Dapatkah mahasiswa selain dari fakultas Ilmu Sosial dan Politik mendaftar dalam program Saring Daring?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Saat ini program Saring Daring 2024 hanya dibuka bagi mahasiswa yang belajar di Fakultas Ilmu Sosial dan Politik di sepuluh universitas mitra Indonesia yaitu:</p>
						            <ul>
						                <li class="fw-300">Universitas Gadjah Mada</li>
						                <li class="fw-300">Universitas Riau</li>
						                <li class="fw-300">Universitas Negeri Makassar</li>
						                <li class="fw-300">Universitas Sriwijaya</li>
						                <li class="fw-300">Universitas Nusa Cendana</li>
						                <li class="fw-300">Universitas Pendidikan Nasional</li>
						                <li class="fw-300">Universitas Tanjungpura</li>
						                <li class="fw-300">Universitas Mulawarman</li>
						                <li class="fw-300">Universitas Multimedia Nusantara</li>
						                <li class="fw-300">Universitas Airlangga</li>
						            </ul>
						        </div>
						    </div>
						    
						    <div class="question">
						        <p class="question-title">♦️ Pertanyaan 2:</p>
						        <p>Apakah ada persyaratan usia untuk peserta?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Peserta harus berusia 18 tahun ke atas dan merupakan mahasiswa aktif terdaftar di universitas mitra Saring Daring. Bagi mahasiswa tingkat akhir, mereka diharuskan masih aktif sebagai mahasiswa hingga akhir program.</p>
						        </div>
						    </div>
						    
						    <div class="question">
						        <p class="question-title">♦️ Pertanyaan 3:</p>
						        <p>Apakah mahasiswa perorangan dapat berpartisipasi, atau wajib membentuk kelompok?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Peserta diharuskan membentuk kelompok yang mewakili universitas masing-masing dengan 3 anggota, boleh dari jurusan yang berbeda di dalam fakultas yang sama.</p>
						        </div>
						    </div>
						    
						    <div class="question">
						        <p class="question-title">♦️ Pertanyaan 4:</p>
						        <p>Bagaimana cara mendaftarkan kelompok untuk Saring Daring Challenge?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Pendaftaran kelompok dapat dilakukan melalui pengisian formulir online yang dapat diakses di 
						                <a class="link" href="https://saringdaringchallenge.com/" target="_blank">https://saringdaringchallenge.com/</a>. 
						                Proses pendaftaran dilakukan oleh satu orang perwakilan kelompok. Informasi tentang anggota kelompok dapat dimasukkan saat mengisi formulir.</p>
						        </div>
						    </div>
						    
						    <div class="question">
						        <p class="question-title">♦️ Pertanyaan 5:</p>
						        <p>Apakah pergantian anggota kelompok setelah pendaftaran diperbolehkan?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Ya, pergantian anggota kelompok masih dapat dilakukan setelah pendaftaran dan dapat dilakukan hingga pada periode sebelum bootcamp. Harap menghubungi panitia penyelenggara untuk memperbarui informasi anggota kelompok.</p>
						        </div>
						    </div>
						    
						    <div class="question">
						        <p class="question-title">♦️ Pertanyaan 6:</p>
						        <p>Apakah ada batas waktu untuk mendaftarkan kelompok?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Ya, pastikan untuk memeriksa tanggal tutup pendaftaran yang telah ditentukan di situs web 
						                <a class="link" href="https://saringdaringchallenge.com/" target="_blank">https://saringdaringchallenge.com/</a>. 
						                Pastikan untuk mendaftar sebelum batas waktu agar kelompok kamu dapat berpartisipasi dalam Saring Daring.</p>
						        </div>
						    </div>
						    
						    <div class="question">
						        <p class="question-title">♦️ Pertanyaan 7:</p>
						        <p>Bagaimana saya tahu apabila kelompok saya diterima di program Saring Daring?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Kelompok yang diterima dalam program Saring Daring akan diinformasikan melalui konfirmasi melalui email, nomor yang terdaftar pada formulir pendaftaran, dan melalui akun sosial media <strong>@saringdaring</strong>.</p>
						        </div>
						    </div>
					      </div>
					    </div>
					  </div>

					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button fs-20 fw-600 collapsed text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
					        2. Periode Program
					      </button>
					    </h2>
					    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
					      <div class="accordion-body">
					        <div class="question">
							    <p class="question-title">♦️ Pertanyaan 1:</p>
							    <p>Apakah tim boleh bergabung setelah program berjalan?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Peserta harus bergabung sejak program dimulai dan diwajibkan untuk mengikuti seluruh rangkaian program.</p>
							    </div>
							</div>

							<div class="question">
							    <p class="question-title">♦️ Pertanyaan 2:</p>
							    <p>Apakah ada istirahat atau jeda selama periode program sepuluh bulan?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Kegiatan-kegiatan dalam program Saring Daring TIDAK diadakan setiap hari atau secara terus menerus dari April hingga Oktober; sebaliknya, akan ada jeda yang dijadwalkan untuk kegiatan kelompok secara mandiri tertentu seperti penulisan proposal, produksi kampanye, penilaian, dan lain sebagainya. Peserta sebaiknya merencanakan keterlibatan mereka dengan baik. Seluruh jadwal dan informasi penting terkait program dapat dibaca pada Handbook peserta yang dibagikan.</p>
							    </div>
							</div>

					      </div>
					    </div>
					  </div>

					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button fs-20 fw-600 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
					        3. WHATSAPP COMMUNITY (WAC) Saring Daring
					      </button>
					    </h2>
					    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
					      <div class="accordion-body">
					        <div class="question">
							    <p class="question-title">♦️ Pertanyaan 1:</p>
							    <p>Apa itu WhatsApp Community (WAC) Saring Daring? Dan bagaimana cara peserta berkomunikasi dengan satu sama lain dan mendapatkan informasi/pengumuman terkait program?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">WhatsApp Community (WAC) adalah fitur dalam WhatsApp yang memungkinkan pengguna untuk dengan cepat mengelompokkan grup-grup umum ke dalam grup-grup besar, mirip dengan komunitas virtual. WAC Saring Daring adalah saluran komunikasi utama bagi peserta dari enam universitas yang berbeda dalam program ini. WAC berfungsi sebagai ruang untuk berbagi informasi, dokumen, interaksi, permainan, dan berjejaring. Di dalam WAC akan ada grup-grup yang memiliki fungsi masing-masing:</p>
							        <ul>
							            <li class="fw-300"><strong>Pengumuman (Announcement):</strong> Grup ini berisi seluruh peserta dari enam universitas. Grup ini utamanya digunakan untuk pengumuman, pengiriman dokumen, kuis, dan permainan.</li>
							            <li class="fw-300"><strong>Group Universitas:</strong> Setiap universitas memiliki grup tersendiri yang berisi peserta dari universitas tersebut. Grup ini digunakan untuk koordinasi yang khususnya menyangkut universitas terkait, seperti persiapan Bootcamp dan hal-hal lainnya.</li>
							        </ul>
							        <p class="fw-300">Dengan struktur grup ini, diharapkan komunikasi dan kolaborasi antar peserta dapat berlangsung secara efisien dan terorganisir.</p>
							    </div>
							</div>
						    <div class="question">
						        <p class="question-title">♦️ Pertanyaan 2:</p>
						        <p>Bagaimana cara saya bergabung dengan WAC Saring Daring?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Setelah kamu terdaftar sebagai peserta, kamu akan menerima tautan undangan untuk bergabung dengan Komunitas WhatsApp. Ikuti tautan tersebut untuk bergabung dan mulai berinteraksi dengan peserta lainnya.</p>
						        </div>
						    </div>
						    <div class="question">
						        <p class="question-title">♦️ Pertanyaan 3:</p>
						        <p>Apakah partisipasi dalam Komunitas WhatsApp ini wajib?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Komunitas ini adalah platform komunikasi utama untuk berbagi informasi yang berkaitan dengan program dan materi-materi yang disampaikan, berkolaborasi, dan berjaringan sepanjang program. Sangat dianjurkan kamu dan anggota kelompok kamu bergabung di WAC Saring Daring ya.</p>
						        </div>
						    </div>
						    <div class="question">
						        <p class="question-title">♦️ Pertanyaan 4:</p>
						        <p>Apa waktu operasional Komunitas WhatsApp Saring Daring (WAC)?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">WAC beroperasi selama jam kerja pada hari kerja, Senin sampai dengan Jumat pkl. 09.00 - 17.00 WIB. Kecuali pada saat pelaksanaan Masterclass & Bootcamp di akhir pekan.</p>
						        </div>
						    </div>

					      </div>
					    </div>
					  </div>

					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button fs-20 fw-600 collapsed text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
					        4. MasterClass
					      </button>
					    </h2>
					    <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
					      <div class="accordion-body">
							    <div class="question">
							        <p class="question-title">♦️ Pertanyaan 1:</p>
							        <p>Apa itu Masterclass?</p>
							        <div class="answer">
							            <p class="fw-600">Jawaban:</p>
							            <p class="fw-300">Masterclass adalah rangkaian kelas yang dirancang untuk membekali peserta mengenai topik-topik yang diantaranya meliputi literasi digital, nilai demokrasi dalam ruang digital, dan materi lain yang penting dalam membantu kalian untuk menyusun proposal kampanye sosial. Kelas ini dipandu oleh para ahli di bidang literasi digital dan kampanye digital.</p>
							        </div>
							    </div>
							    <div class="question">
							        <p class="question-title">♦️ Pertanyaan 2:</p>
							        <p>Berapa banyak masterclass yang akan diselenggarakan?</p>
							        <div class="answer">
							            <p class="fw-600">Jawaban:</p>
							            <p class="fw-300">Akan ada total 4 masterclass:</p>
							            <ul>
							                <li>27 April: Masterclass #1</li>
							                <li>4 Mei: Masterclass #2</li>
							                <li>11 Mei: Masterclass #3</li>
							                <li>12 Juni: Masterclass #4</li>
							            </ul>
							            <p class="fw-300"><em>*Jadwal masih dapat berubah ya, pantau info terkini melalui WAC.</em></p>
							        </div>
							    </div>
							    <div class="question">
							        <p class="question-title">♦️ Pertanyaan 3:</p>
							        <p>Apakah masterclass akan diadakan secara langsung?</p>
							        <div class="answer">
							            <p class="fw-600">Jawaban:</p>
							            <p class="fw-300">Masterclass dilakukan secara daring melalui Google Meet/Zoom.</p>
							        </div>
							    </div>
							    <div class="question">
							        <p class="question-title">♦️ Pertanyaan 4:</p>
							        <p>Apakah materi dalam masterclass akan dibagikan?</p>
							        <div class="answer">
							            <p class="fw-600">Jawaban:</p>
							            <p class="fw-300">Setiap sesi masterclass akan direkam. Rekaman tersebut akan tersedia untuk peserta, sehingga dapat ditonton ulang materi sesuai kebutuhan. Materi presentasi juga akan dibagikan kepada para peserta melalui WAC Saring Daring.</p>
							        </div>
							    </div>
							    <div class="question">
							        <p class="question-title">♦️ Pertanyaan 5:</p>
							        <p>Berapa banyak masterclass yang harus diikuti untuk dianggap lulus program Saring Daring?</p>
							        <div class="answer">
							            <p class="fw-600">Jawaban:</p>
							            <p class="fw-300">Peserta harus mengikuti paling tidak 3 dari 4 masterclass dan juga mengikuti bootcamp untuk dianggap lulus dalam program Saring Daring.</p>
							        </div>
							    </div>
							    <div class="question">
							        <p class="question-title">♦️ Pertanyaan 6:</p>
							        <p>Bagaimana sistem kehadiran diukur?</p>
							        <div class="answer">
							            <p class="fw-600">Jawaban:</p>
							            <p class="fw-300">Kehadiran akan dihitung per individu, bukan perwakilan kelompok. Peserta diwajibkan mengisi formulir absensi dan survei yang akan disediakan selama program berlangsung.</p>
							        </div>
							    </div>
					      </div>
					    </div>
					  </div>

					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button fs-20 fw-600 collapsed text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
					        5. Bootcamp
					      </button>
					    </h2>
					    <div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
					      <div class="accordion-body">
							    <div class="question">
							        <p class="question-title">♦️ Pertanyaan 1:</p>
							        <p>Apa itu Bootcamp Saring Daring?</p>
							        <div class="answer">
							            <p class="fw-600">Jawaban:</p>
							            <p class="fw-300">Bootcamp adalah kegiatan intensif selama 1 hari penuh yang dilakukan secara langsung di kampus masing-masing. Kegiatan ini akan fokus pada praktik untuk mengasah keterampilan literasi digital, strategi komunikasi, dan materi penting lainnya. Di dalam bootcamp juga akan ada workshop tentang strategi kampanye untuk membuat proposal kampanye sosial kalian. Bootcamp ini akan melibatkan fasilitator-fasilitator berpengalaman sebagai pembicara ahli yang akan membimbing kamu selama workshop.</p>
							        </div>
							    </div>
							    <div class="question">
							        <p class="question-title">♦️ Pertanyaan 2:</p>
							        <p>Kapan jadwal bootcamp di kampus saya?</p>
							        <div class="answer">
							            <p class="fw-600">Jawaban:</p>
							            <ul>
							                <li>18 Mei: Bootcamp #1: Yogyakarta</li>
							                <li>25 Mei: Bootcamp #2: Riau</li>
							                <li>8 Juni: Bootcamp #3: Sulawesi Selatan</li>
							                <li>15 Juni: Bootcamp #4: Sumatera Selatan</li>
							                <li>22 Juni: Bootcamp #5: Nusa Tenggara Timur</li>
							                <li>29 Juni: Bootcamp #6: Bali</li>
							            </ul>
							            <p class="fw-300"><em>*Jadwal masih dapat berubah ya, pantau info terkini melalui WAC.</em></p>
							        </div>
							    </div>
							    <div class="question">
							        <p class="question-title">♦️ Pertanyaan 3:</p>
							        <p>Dimana lokasi dan ruang pelaksanaan bootcamp?</p>
							        <div class="answer">
							            <p class="fw-600">Jawaban:</p>
							            <p class="fw-300">Bootcamp akan diselenggarakan di kampus kalian. Detail mengenai ruangan dan logistik lain akan diumumkan melalui WAC.</p>
							        </div>
							    </div>
							    <div class="question">
							        <p class="question-title">♦️ Pertanyaan 4:</p>
							        <p>Apakah seluruh anggota kelompok harus hadir bootcamp atau dapat berupa perwakilan?</p>
							        <div class="answer">
							            <p class="fw-600">Jawaban:</p>
							            <p class="fw-300">Seluruh anggota kelompok diwajibkan mengikuti bootcamp, bukan hanya perwakilan kelompok. Setiap peserta juga akan mengisi formulir kehadiran untuk mendapatkan sertifikat.</p>
							        </div>
							    </div>
							    <div class="question">
							        <p class="question-title">♦️ Pertanyaan 5:</p>
							        <p>Apakah ada biaya untuk mengikuti bootcamp?</p>
							        <div class="answer">
							            <p class="fw-600">Jawaban:</p>
							            <p class="fw-300">Tidak ada biaya untuk mengikuti bootcamp. Para peserta juga akan disediakan konsumsi dan alat tulis yang dibutuhkan untuk workshop.</p>
							        </div>
							    </div>

					      </div>
					    </div>
					  </div>

					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button fs-20 fw-600 collapsed text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
					        6. PITCHING
					      </button>
					    </h2>
					    <div id="collapseSix" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
					      <div class="accordion-body">
					        <div class="question">
						        <p class="question-title">♦️ Pertanyaan 1:</p>
						        <p>Apa itu pitching?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Pitching adalah sesi presentasi di mana kamu dan kelompokmu akan memaparkan proposal kampanye yang telah dibuat untuk menanggapi tantangan yang diberikan oleh Organisasi Masyarakat Sipil (OMS) pasangan kalian. Presentasi ini akan dinilai oleh panel juri.</p>
						        </div>
						    </div>
						    <div class="question">
						        <p class="question-title">♦️ Pertanyaan 2:</p>
						        <p>Bagaimana jadwal pitching ditentukan?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Jadwal pitching akan diundi untuk setiap kelompok. Informasi tentang slot presentasi akan dibagikan melalui Google Calendar dan email oleh tim Saring Daring.</p>
						        </div>
						    </div>
						    <div class="question">
						        <p class="question-title">♦️ Pertanyaan 3:</p>
						        <p>Bagaimana cara melakukan presentasi?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Presentasi dilakukan secara virtual melalui platform Google Meet. Link untuk mengakses presentasi akan dibagikan melalui WAC. Panduan lengkap mengenai sesi pitching dapat dibaca di Panduan Presentasi Pitching yang akan dibagikan.</p>
						        </div>
						    </div>
						    <div class="question">
						        <p class="question-title">♦️ Pertanyaan 4:</p>
						        <p>Berapa durasi waktu untuk pitching?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Durasi pitching akan ditentukan, pastikan kelompok kamu sudah berlatih sesuai dengan waktu yang ditentukan. Tim Saring Daring akan memberikan pengingat waktu.</p>
						        </div>
						    </div>
						    <div class="question">
						        <p class="question-title">♦️ Pertanyaan 5:</p>
						        <p>Bagaimana penilaian terhadap presentasi kelompok saya?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Presentasi kelompok akan dinilai berdasarkan sejauh mana proposal kalian mengacu pada topik dan rubrik penilaian yang telah dibagikan pada masa pembuatan proposal. Kriteria akan dibagikan dan dijelaskan saat kalian bootcamp ya. Pastikan proposal kamu sesuai dengan kriteria yang telah ditetapkan untuk meningkatkan peluang mendapatkan penilaian yang baik dari panel juri perwakilan dari USAID, Meta, dan Love Frankie.</p>
						        </div>
						    </div>
						    <div class="question">
						        <p class="question-title">♦️ Pertanyaan 6:</p>
						        <p>Apakah kami akan menerima umpan balik terhadap presentasi yang kami buat?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Setelah presentasi, panelis akan memberikan umpan balik terhadap presentasi kelompok. Umpan balik ini merupakan bagian penting untuk pengembangan proposal kalian lebih lanjut.</p>
						        </div>
						    </div>
						    <div class="question">
						        <p class="question-title">♦️ Pertanyaan 7:</p>
						        <p>Dalam bahasa apa presentasi harus disampaikan?</p>
						        <div class="answer">
						            <p class="fw-600">Jawaban:</p>
						            <p class="fw-300">Presentasi disampaikan menggunakan Bahasa Indonesia yang baik dan benar.</p>
						        </div>
						    </div>
					      </div>
					    </div>
					  </div>

					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button fs-20 fw-600 collapsed text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
					        7. BIMBINGAN DAN PEMBUATAN KAMPANYE SOSIAL
					      </button>
					    </h2>
					    <div id="collapseSeven" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
					      <div class="accordion-body">
					        <div class="question">
							    <p class="question-title">♦️ Pertanyaan 1:</p>
							    <p>Dapatkah peserta memilih topik kampanye media sosial mereka sendiri?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Peserta akan merancang kampanye bersama dengan Organisasi Masyarakat Sipil (OMS) tentang topik terkait literasi dan demokrasi digital. Panduan lebih lanjut perihal pembuatan kampanye akan disosialisasikan secara berkala.</p>
							    </div>
							</div>

							<div class="question">
							    <p class="question-title">♦️ Pertanyaan 2:</p>
							    <p>Apakah ada kriteria khusus dalam penilaian kampanye yang dikompetisikan?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Ya, kampanye akan dinilai berdasarkan kriteria-kriteria rubrik penilaian yang akan disosialisasikan kepada peserta pada periode penulisan proposal.</p>
							    </div>
							</div>

							<div class="question">
							    <p class="question-title">♦️ Pertanyaan 3:</p>
							    <p>Bagaimana Organisasi Masyarakat Sipil (OMS) dipasangkan dengan kelompok peserta untuk kolaborasi kampanye?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">OMS akan diperkenalkan kepada masing-masing universitas, dan setiap organisasi tersebut akan dijodohkan dengan satu tim dari universitas oleh tim Saring Daring. Kolaborasi ini bertujuan untuk bersama-sama menanggapi tantangan di dunia digital yang dihadapi oleh masing-masing organisasi tersebut berdasarkan isu-isu sosial yang akan diangkat.</p>
							    </div>
							</div>

							<div class="question">
							    <p class="question-title">♦️ Pertanyaan 4:</p>
							    <p>Bagaimana proses bimbingan dilakukan selama periode produksi kampanye?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">
							        	<ul>
							                <li class="fw-300">Tim terpilih dari setiap universitas akan menerima bimbingan secara virtual selama masa produksi kampanye.</li>
							                <li class="fw-300">Setiap minggu akan ada satu kesempatan untuk melakukan bimbingan dengan mentor-mentor ahli dari Meta.</li>
							                <li class="fw-300">Penentuan waktu pelaksanaan bimbingan akan dimoderasi oleh tim Saring Daring sesuai dengan kesediaan mentor dan juga pilihan peserta Saring Daring.</li>
							                <li class="fw-300">Peserta wajib melakukan paling tidak 2 kali bimbingan selama proses produksi kampanye. </li>
							                <li class="fw-300">Setiap sesi bimbingan dilakukan maksimal 1 jam saja.</li>
							                <li class="fw-300">Tidak semua anggota tim harus hadir dalam waktu bimbingan.</li>
							            </ul>
							        </p>
							    </div>
							</div>

					      </div>
					    </div>
					  </div>


					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button fs-20 fw-600 collapsed text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
					        8. National SUMMIT
					      </button>
					    </h2>
					    <div id="collapseEight" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
					      <div class="accordion-body">
					        <div class="question">
							    <p class="question-title">♦️ Pertanyaan 1:</p>
							    <p>Apa itu National Summit?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">National Summit adalah acara puncak dari serangkaian kegiatan Saring Daring. Acara ini menandai perayaan pencapaian yang telah dilakukan oleh seluruh peserta, universitas, dan seluruh mitra. Fokus utama acara ini adalah untuk memamerkan kampanye sosial yang dihasilkan seluruh finalis dan pengumuman pemenang Saring Daring University Challenge Indonesia 2024.</p>
							    </div>
							</div>

							<div class="question">
							    <p class="question-title">♦️ Pertanyaan 2:</p>
							    <p>Dimana lokasi Saring Daring National Summit?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">National Summit akan diselenggarakan di Jakarta. Apabila ada perubahan, akan diumumkan kemudian.</p>
							    </div>
							</div>

							<div class="question">
							    <p class="question-title">♦️ Pertanyaan 4:</p>
							    <p>Kapan dan apa saja agenda dari National Summit?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Jadwal dan agenda akan diumumkan kemudian melalui WAC.</p>
							    </div>
							</div>

							<div class="question">
							    <p class="question-title">♦️ Pertanyaan 5:</p>
							    <p>Apa syarat untuk mengikuti National Summit?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Syaratnya adalah kamu harus terpilih sebagai kelompok finalis perwakilan kampus.</p>
							    </div>
							</div>

							<div class="question">
							    <p class="question-title">♦️ Pertanyaan 6:</p>
							    <p>Apakah logistik seperti biaya transportasi dan akomodasi ditanggung oleh Saring Daring?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Saring Daring akan menanggung biaya logistik seperti transportasi (termasuk penerbangan) dan akomodasi.</p>
							    </div>
							</div>

							<div class="question">
							    <p class="question-title">♦️ Pertanyaan 7:</p>
							    <p>Apakah ada dosen perwakilan kampus yang akan mendampingi kelompok finalis di National Summit?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Ya, akan ada dosen perwakilan kampus yang akan ikut mendampingi kelompok finalis.</p>
							    </div>
							</div>

							<div class="question">
							    <p class="question-title">♦️ Pertanyaan 8:</p>
							    <p>Dapatkah peserta dapat memilih untuk tidak hadir di National Summit?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Seluruh peserta dari tim finalis terpilih sangat disarankan untuk hadir National Summit. Apabila karena satu dan lain hal berhalangan untuk hadir, silakan menghubungi panitia.</p>
							    </div>
							</div>


					      </div>
					    </div>
					  </div>


					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button fs-20 fw-600 collapsed text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNine" aria-expanded="false" aria-controls="collapseNine">
					        9. SERTIFIKAT, DANA DUKUNGAN DAN HADIAH
					      </button>
					    </h2>
					    <div id="collapseNine" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
					      <div class="accordion-body">
					        
					      	<div class="question">
							    <p class="question-title">♦️ Pertanyaan 1:</p>
							    <p>Jenis hadiah apa yang diberikan kepada kelompok yang menang?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Detail mengenai hadiah akan diinfokan kemudian.</p>
							    </div>
							</div>

							<div class="question">
							    <p class="question-title">♦️ Pertanyaan 3:</p>
							    <p>Berapa banyak kelompok yang menerima hadiah di National Summit?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Akan ada 1 kelompok pemenang utama. Apabila ada pemenang dalam kategori lain akan diinformasikan lebih lanjut sesuai dengan ketentuan yang berlaku.</p>
							    </div>
							</div>

							<div class="question">
							    <p class="question-title">♦️ Pertanyaan 4:</p>
							    <p>Apakah seluruh peserta akan mendapatkan sertifikat?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Untuk mendapatkan sertifikat keikutsertaan dalam program ini, peserta wajib menghadiri paling tidak 3 Masterclass dan wajib menghadiri Bootcamp di universitas masing-masing. Sertifikat akan dikirimkan melalui email setelah periode Masterclass dan Bootcamp selesai.</p>
							    </div>
							</div>

					      </div>
					    </div>
					  </div>


					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button fs-20 fw-600 collapsed text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTen" aria-expanded="false" aria-controls="collapseTen">
					        10. KEKAYAAN INTELEKTUAL
					      </button>
					    </h2>
					    <div id="collapseTen" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
					      <div class="accordion-body">
					        <div class="question">
							    <p class="question-title">♦️ Pertanyaan 1:</p>
							    <p>Dapatkah peserta menggunakan elemen dari kampanye atau proyek yang sudah pernah dihasilkan oleh pihak lain?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Semua proposal kampanye dan kontennya harus orisinil dan dikembangkan oleh peserta kelompok.</p>
							    </div>
							</div>

							<div class="question">
							    <p class="question-title">♦️ Pertanyaan 2:</p>
							    <p>Apakah ada batasan bagi peserta menggunakan kampanye mereka untuk tujuan pribadi atau akademis setelah kompetisi berakhir?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Peserta tetap memiliki hak kekayaan intelektual atas kampanye mereka dan dapat menggunakannya hanya untuk tujuan edukasi setelah program Saring Daring selesai.</p>
							    </div>
							</div>


					      </div>
					    </div>
					  </div>


					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button fs-20 fw-600 collapsed text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEleven" aria-expanded="false" aria-controls="collapseEleven">
					        11. KODE ETIK
					      </button>
					    </h2>
					    <div id="collapseEleven" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
					      <div class="accordion-body">
					        <div class="question">
							    <p class="question-title">♦️ Pertanyaan 1:</p>
							    <p>Tindakan apa yang dianggap perilaku tidak pantas yang dapat menyebabkan diskualifikasi?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Perilaku tidak pantas mencakup, tetapi tidak terbatas pada pelecehan, diskriminasi, kecurangan, plagiarisme atau setiap tindakan yang bertentangan dengan prinsip profesionalisme dan integritas.</p>
							    </div>
							</div>

							<div class="question">
							    <p class="question-title">♦️ Pertanyaan 2:</p>
							    <p>Bagaimana laporan perilaku tidak pantas selama program ditangani?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Laporan perilaku tidak pantas harus disampaikan kepada panitia Saring Daring, yang akan melakukan penyelidikan dan mengambil tindakan yang sesuai.</p>
							    </div>
							</div>



					      </div>
					    </div>
					  </div>


					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button fs-20 fw-600 collapsed text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwelve" aria-expanded="false" aria-controls="collapseTwelve">
					        12. PENGAKHIRAN PARTISIPASI
					      </button>
					    </h2>
					    <div id="collapseTwelve" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
					      <div class="accordion-body">
					        <div class="question">
							    <p class="question-title">♦️ Pertanyaan 1:</p>
							    <p>Bisakah peserta (individu) secara sukarela mengundurkan diri dari kompetisi?</p>
							    <div class="answer">
							        <p class="fw-600">Jawaban:</p>
							        <p class="fw-300">Pengakhiran partisipasi dapat diajukan kepada panitia dan pihak universitas untuk dipertimbangkan dan dimusyawarahkan lebih lanjut.</p>
							    </div>
							</div>

					      </div>
					    </div>
					  </div>



					</div>
				</div>

			</div>
		</div>
	</div>
</section>
<!-- END CONTOH KAMPANYE -->


<div class="container-fluid mt-5" style="background: #1F366C;">
	<div class="container pt-5 pb-4">
	  <div class="row text-center text-md-start">
	    <div class="col-md-3 position-relative mb-4 mb-md-0">
	      <img src="assets/saringdaring-white.png" class="w-50 mx-auto d-block d-md-inline">
	      <p class="text-white fw-400 fs-15 mt-4">
	        Saring Daring University Challenge Indonesia adalah program edukasi peningkatan kapasitas sekaligus kompetisi nasional buat mahasiswa.
	      </p>
	    </div>
	    <div class="col-md-6">
	      <div class="col-md-12 mt-3 mb-3">
	        <p class="text-white fs-15 fw-400 mb-2">
	          Dipersembahkan Oleh:
	        </p>
	        <div class="d-flex justify-content-center justify-content-md-start gap-3">
	          <a href="https://www.usaid.gov/id/indonesia" target="_BLANK">
	            <img class="imgper" src="assets/usaid.png">
	          </a>
	          <a href="https://indonesia.fb.com/inisiatif-melek-digital/" target="_BLANK">
	            <img class="imgper" src="assets/meta_asah-logofooter.png">
	          </a>
	        </div>
	      </div>
	      <div class="col-md-12 mt-3 mb-3">
	        <p class="text-white fs-15 fw-400 mb-2">
	          Didukung Oleh:
	        </p>
	        <div class="d-flex justify-content-center justify-content-md-start">
	          <a href="https://www.lovefrankie.co/" target="_BLANK">
	            <img class="imgduk" src="assets/lovefrankie-logo.png">
	          </a>
	        </div>
	      </div>
	    </div>
	    <div class="col-md-3 text-center text-md-start">
	      <button class="px-3 py-2 text-white bg-red rounded-pill border border-0 mt-auto mb-3" style="width:max-content">
	        Daftar Sekarang
	      </button>
	      <div class="col-md-12 mt-5 mb-3">
	        <p class="text-white mb-2 fs-15 fw-400">
	          Social Media Kami:
	        </p>
	        <div class="socmed-container d-flex justify-content-center justify-content-md-start gap-3">
	          <a href="mailto:saringdaring@lovefrankie.co" target="_BLANK">
	            <img class="socmed" src="assets/tl.png" alt="Email">
	          </a>
	          <a href="https://www.facebook.com/profile.php?id=100089241793349" target="_BLANK">
	            <img class="socmed" src="assets/fb.png" alt="Facebook">
	          </a>
	          <a href="https://www.instagram.com/saringdaring/" target="_BLANK">
	            <img class="socmed" src="assets/ig.png" alt="Instagram">
	          </a>
	        </div>
	      </div>
	    </div>
	    <div class="col-12 mt-5">
	      <p class="fs-14 text-white text-center">© 2025 Saring Daring. All rights reserved.</p>
	    </div>
	  </div>
	</div>

</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
