<!DOCTYPE html>
<html lang="tr">
{{ block "head" . }}
	{{ partial "head" . }}
{{ end }}
<body>
	{{ block "header" . }}
		{{ partial "header" . }}
	{{ end }}
	{{ block "features" . }}
		{{ partial "features" . }}
	{{ end }}

	<section class="video" id="more-info-video">
		<div class="container">
			<div class="col-md-6">
				<h1 class="video-title">Ortalama 20 dakika içinde <br> güvenli bağlantınız hazır</h1>
				<div class="setup-steps">
					<p><span>1</span>Sunucunuzu Kurun</p>
					<p><span>2</span>Cihazlarınızı Yapılandırın</p>
					<p><span>3</span>Güvenli ve Hızlı İnternetin Tadını Çıkarın!</p>
				</div>
				<p>
					Çayınızı alın ve anlaşılır video yönlendirmeleri ile kendi VPN kurulumunuzu basit bir şekilde tamamlayın. İnternete hızlı ve güvenli bağlanın.
				</p>
				<a href="yonergeler/" target="_blank" class="btn btn-success btn-lg">Şimdi Başlayın</a>
			</div>
			<div class="col-md-6">
				<div class="videoWrapper">
					<iframe width="540" height="358" style="padding-top: 20px" src="https://www.youtube.com/embed/SusN8g45JiI" frameborder="0" allowfullscreen></iframe>
				</div>
			</div>
		</div>
	</section>
	<section class="devices">
		<div class="container">
			<div class="col-md-12 text-align">
				<h1>Tüm cihazlarınızda kullanabilirsiniz.</h1>
				<a href="https://www.gnu.org" target="_blank"><img src="img/gnu-logo.png" width="100"></a>
				<a href="https://stallman.org/apple.html" target="_blank"><img src="img/macos-logo.png" width="100"></a>
				<a href="https://www.fsf.org/windows/" target="_blank"><img src="img/windows-logo.png" width="100"></a>
				<img src="img/bsd-logo.png" width="100">
				<a href="https://openwrt.org" target="_blank"><img src="img/openwrt-logo.png" width="100"></a>
				<a href="https://librecmc.org" target="_blank"><img src="img/librecmc-logo.png" width="100"></a>
				<a href="https://fsfe.org/campaigns/android/android.tr.html" target="_blank"><img src="img/android-logo.png" width="100"></a>
				<a href="https://stallman.org/apple.html" target="_blank"><img src="img/ios-logo.png" width="100"></a>
			</div>
		</div>
	</section>
	<!-- @todo: İcon koyulacak sosyal medya kısmına unutma!! -->
	<section class="social-media">
		<div class="">
			<div class="col-md-6 social-media-box">
				<a href="https://facebook.com/kendibaglantim" target="_blank"><div class="facebook">Mastodon'da takip edin</div></a>
			</div>
			<div class="col-md-6 social-media-box">
				<a href="https://twitter.com/kendibaglantim" target="_blank"><div class="twitter">Twitter'da Takip Edin</div></a>
			</div>
			<div class="clear"></div>
		</div>
	</section>

	<div class="clear"></div>

	{{ block "footer" . }}
		{{ partial "footer" . }}
	{{ end }}
	{{ block "script" . }}
		{{ partial "script" . }}
	{{ end }}
	<script type="text/javascript">
		$(document).ready(function(){
			$(".more-info").click(function(e) {
				e.preventDefault();
				$('html, body').animate({
					scrollTop: $("#more-info-video").offset().top
				}, 500);
			});
		});
	</script>
</body>
</html>
