<?php 

session_start();

// check if the user has already filled in the information
if(isset($_SESSION['information_filled']) && $_SESSION['information_filled'] === true) {
    // if yes, redirect to the index page
    header("Location: index.php");
    exit();
}

// if the form is submitted, save the information and mark it as filled
if($_SERVER['REQUEST_METHOD'] === 'POST') {
    // save the information to database or file or wherever you want
    
    // mark the information as filled
    $_SESSION['information_filled'] = true;
    
    // redirect to the index page
    header("Location: index.php");
    exit();
}

include 'config.php';


$ip = $_SERVER["REMOTE_ADDR"];
$user_onesignal = $_COOKIE['user_onesignal'] ?? null;
$user_token = $_COOKIE['user_token'] ?? null;
$myUser = $db->query("SELECT * FROM kullanicilar WHERE user_token = '$user_token'")->fetch(PDO::FETCH_ASSOC);

if (!empty($user_onesignal) && !empty($user_token)) {
    // Kullanıcının çerezleri varsa
    if (basename($_SERVER['PHP_SELF']) == 'login.php' || basename($_SERVER['PHP_SELF']) == 'register.php') {
        // Eğer kullanıcı login ya da register sayfasındaysa ve veritabanından alınan user_cinsiyet, user_sehir ve user_yas değerleri boş değilse
        if (!empty($myUser['user_yas']) && !empty($myUser['user_cinsiyet']) && !empty($myUser['user_sehir'])) {
            // Tüm değerler doluysa, index sayfasına yönlendir.
            if (basename($_SERVER['PHP_SELF']) != 'index.php') {
                header("Location: index.php");
                exit();
            }
        } else {
            // Eğer bir veya daha fazla değer boşsa, bilgi_doldur sayfasına yönlendir.
            if (basename($_SERVER['PHP_SELF']) != 'bilgi_doldur.php') {
                header("Location: bilgi_doldur.php");
                exit();
            }
        }
    } elseif (basename($_SERVER['PHP_SELF']) == 'bilgi_doldur.php') {
        // Eğer kullanıcı bilgi_doldur sayfasındaysa ve tüm değerler doluysa, index sayfasına yönlendir.
        if (!empty($myUser['user_yas']) && !empty($myUser['user_sehir']) && !empty($myUser['user_cinsiyet'])) {
            header("Location: index.php");
            exit();
        }
    } elseif (basename($_SERVER['PHP_SELF']) != 'register.php' && basename($_SERVER['PHP_SELF']) != 'login.php') {
        // Kullanıcı login, register veya bilgi_doldur sayfalarında değilse
        if (empty($myUser) || empty($myUser['user_cinsiyet']) || empty($myUser['user_sehir']) || is_null($myUser['user_yas'])) {
            // Eğer user_cinsiyet, user_sehir veya user_yas değerleri boşsa veya $myUser dizisi boşsa veya user_yas NULL ise, bilgi_doldur sayfasına yönlendir.
            header("Location: bilgi_doldur.php");
            exit();
        }
    }
} elseif (!empty($user_token)) {
    // Sadece $user_token çerezi varsa
    setcookie('user_token', '', time() - 3600, '/', '.app.heysen.net');
    session_destroy();
    if (basename($_SERVER['PHP_SELF']) == 'login.php' || basename($_SERVER['PHP_SELF']) == 'register.php') {
        // Eğer kullanıcı login ya da register sayfasındaysa, doğrudan sayfada kalın
    } else {
        // Eğer kullanıcı login veya register sayfalarında değilse, login sayfasına yönlendir.
        header("Location: login.php");
        exit();
    }
} else {
    // Kullanıcının hiçbir çerezi yoksa
    if (basename($_SERVER['PHP_SELF']) == 'login.php' || basename($_SERVER['PHP_SELF']) == 'register.php') {
        // Kullanıcının hangi sayfada ise o sayfada kalsın.
    } else {
        // Eğer kullanıcı login veya register sayfalarındaysa, login sayfasına yönlendir.
        header("Location: login.php");
        exit();
    }
}



?>
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
	<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
	<link rel="preconnect" href="https://fonts.googleapis.com">
<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=Roboto:wght@400;500&display=swap" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110488191-7"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-110488191-7');
</script>
  <title>Yeni Üyelik Sistemi</title>
  <link rel="stylesheet" href="style.css">
  <style type="text/css">
  
#login {
    bottom: 10px;
    left: 50%;
	margin-bottom: 40px;
    padding: 10px 30px;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    font-size: 18px;
    border: none;
    width: calc(100% - 30vw);

}

#loginText {
  bottom: 35px;
  left: 50%;
  color: white;
  font-size: 16px;
}

p {
	font-family: 'Roboto', sans-serif;
}

  </style>
<script>

function goTetikle(){
Android.goLoginAc()
}


<?=$randcim = rand(150,250)?>

$( document ).ready(function() {
   

setTimeout(() => {
  if (!sessionStorage.getItem('vitrin_hakki_gosterildi')) {
    swal.fire({
      title: 'Tebrikler!',
      html: "Ücretsiz Vitrin Hakkı Kazandın!<br>Günün şanslı kişisi sensin.</b><br> Hemen Ücretsiz Üye Ol!",
      type: 'success',
      showCancelButton: false,
      confirmButtonColor: 'green',
      confirmButtonText: 'Tamam'
    }).then(function() {
                        
 //window.location.href = "register.php";

});
    sessionStorage.setItem('vitrin_hakki_gosterildi', true);
  }
}, 1000);

 console.log( "ready!" );
});


$(document).ready(function() {
  let stepNumber = 1;

  const prevButton = $('#prev');
  const nextButton = $('#next');
  const submitButton = $('#submit');

  prevButton.prop('disabled', true);
  nextButton.prop('disabled', true);
  submitButton.prop('disabled', true);

  prevButton.addClass('disabled');
  nextButton.addClass('disabled');
  submitButton.addClass('disabled');

function checkStepCompletion(stepNumber) {
  const currentStep = $(`.step${stepNumber}`);
  const nextStep = $(`.step${stepNumber + 1}`);

  const inputs = currentStep.find('input, select');
  
  let isValid = true;
  
  inputs.each(function() {
    if ($(this).val() === '' || $(this).val() === '0') {
      isValid = false;
    }
  });

  if (stepNumber === 2) { // check for step 2
    const nameInput = $('#nameInput');
    if (nameInput.val().length < 3) {
      isValid = false;
    }
  }

  if (isValid) {
    if (stepNumber === 6) {
      const password1 = $('#password1').val();
      const password2 = $('#password2').val();

      if (password1 === password2 && password1.length >= 6 && password2.length >= 6) {
        submitButton.prop('disabled', false);
        submitButton.removeClass('disabled');
        nextButton.prop('disabled', true);
        nextButton.addClass('disabled');
      } else {
        submitButton.prop('disabled', true);
        submitButton.addClass('disabled');
        nextButton.prop('disabled', true);
        nextButton.addClass('disabled');
      }
    } else {
      nextButton.prop('disabled', false);
      nextButton.removeClass('disabled');
      submitButton.prop('disabled', true);
      submitButton.addClass('disabled');
    }
  } else {
    nextButton.prop('disabled', true);
    nextButton.addClass('disabled');
    submitButton.prop('disabled', true);
    submitButton.addClass('disabled');
  }

  if (stepNumber > 1) {
    prevButton.prop('disabled', false);
    prevButton.removeClass('disabled');
  }
  
    if (stepNumber === 1) {
    $('#login, #loginText').show();
  } else {
    $('#login, #loginText').hide();
  }
  
}

	var randomsayiErk = Math.floor(Math.random() * (200 - 100 + 1)) + 200;
	var randomsayiKad = Math.floor(Math.random() * (200 - 100 + 1)) + 100;

  $('.step1 input, .step1 select').on('change', function() {
    checkStepCompletion(1);
	var randomsayi = Math.floor(Math.random() * (200 - 100 + 1)) + 100;
	var cins = ""
	var cuml = ""
	if($('input[name="gender"]:checked').val()=='kadin'){
		cins = "<b><u>Erkek</u></b>"
		randomsayi = randomsayiKad;
		cuml = "<b>Kadın olduğunu söyledin.</b><br><br>" 
	}else{
		cins = "<b><u>Kadın</u></b>"
		randomsayi = randomsayiErk;
		cuml = "<b>Erkek olduğunu söyledin.</b><br><br>" 
	}
	
	$("#onlinekullanici").html(cuml+"Yakınlarında <font color='green'>"+randomsayi+" Çevrimiçi</font> "+cins+" var");
	
  });

$('#nameInput').on('input', function() {
  const regex = /^[a-zA-ZöçşığüÖÇŞİĞÜ\s]+$/g;
  const value = $(this).val();
  if (!regex.test(value)) {
    $(this).val($(this).val().replace(/[^a-zA-ZöçşığüÖÇŞİĞÜ\s]/gi, ""));
    //alert("Lütfen sadece harf ve boşluk kullanın!");
  } else {
    checkStepCompletion(2);
    $('#greetingsText').html("Tanıştığımıza memnun olduk,<br> "+$(this).val()+". <br><br><b>Peki kaç yaşındasın?</b>");
  }
});



  $('.step3 select').on('change', function() {
    checkStepCompletion(3);
  });

  $('.step4 select').on('change', function() {
    checkStepCompletion(4);
  });
  
 
$('.step5 input').on('input', function(event) {
  if (event.target.value.indexOf(' ') !== -1) {
    event.target.value = event.target.value.replace(/\s+/g, '');
  }
});


function isValidEmail(email) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}(?<!\.)$/;
  
  if (!emailRegex.test(email)) {
    return false; // Geçersiz regular expression
  }
  
  const parts = email.split('@');
  
  if (parts.length !== 2 || parts[0].length === 0 || parts[1].length === 0) {
    return false; // @ sembolü olmadan önce ve sonra en az bir karakter olmalıdır
  }
  
  const domainParts = parts[1].split('.');
  
  for (let i = 0; i < domainParts.length; i++) {
    if (domainParts[i].length === 0) {
      return false; // . sembolü ile ayrılan her parça en az bir karakter içermelidir
    }
  }
  
  return true;
}

$('.step5 input').on('change keyup', function() {
  const email = $(this).val().trim(); // Boşlukları kaldırın

  if (isValidEmail(email)) {
    checkStepCompletion(5);
  } else {
    nextButton.prop('disabled', true);
    nextButton.addClass('disabled');
  }
});


$('#submit').on('click', function() {
$('#submit').css({'pointer-events': 'none', 'background': 'grey'}).html("Lütfen Bekleyin");
  const name = $('#nameInput').val();
  const email = $('#emailInput').val();
  const password = $('#password1').val();
  const password2 = $('#password2').val();
  const onesignal = $('#onesignal').val();
  const city = $('#sehir').val();
  const age = $('#yas').val();
	const cinsiyet = $('input[name="gender"]:checked').val();

  if (password === password2 && password.length >= 6 && password2.length >= 6) {
    $.post('assets/api.php', {"type":"registerNew", "name":name, "email":email, "password":password, "password2":password2, "onesignal":onesignal, "city":city, "age":age, "cinsiyet":cinsiyet}, function(response){
		
	setTimeout(function(){
 $('#submit').css({'pointer-events': 'auto', 'background': ''}).html("Kaydı Tamamla!");
      }, 2000);
     
	 if(response.result== "100"){
// boş alan var
//alert('boş alan var');

swal.fire({
title: 'Hata!',
html: "Boş alan bırakmamalısınız!",
type: 'error',
showCancelButton: false,
confirmButtonColor: 'green',
confirmButtonText: 'Tamam'
})

    }else if(response.result== "0") {
// üyelik başarılı
//alert('üyelik başarılı');
Cookies.set('user_token', response.cookie, { expires: 365, domain: '.app.heysen.net' });

swal.fire({
  type: 'success',
  title: 'Üyelik Oluşturuldu',
  html: 'Aramıza Hoş Geldiniz!',
  showConfirmButton: false,
  timer: 4000
}).then(function() {
  window.location.href = "https://app.heysen.net/index.php";
})



    }else if(response.result== "2") {
// eposta kullanımda

//alert('eposta kullanımda');
swal.fire({
title: 'Hata!',
html: "Bu E-posta ile daha önce kaydolunmuş, şifremi unuttum bölümünden şifrenizi sıfırlayabilirsiniz!",
type: 'error',
showCancelButton: false,
confirmButtonColor: 'green',
confirmButtonText: 'Tamam'
})

    }else if(response.result== "3") {
// şifreler aynı değil


//alert('şifreler aynı değil');
swal.fire({
title: 'Hata!',
html: "Girdiğiniz şifreler uyuşmuyor, lütfen dikkat ederek tekrar yazın!",
type: 'error',
showCancelButton: false,
confirmButtonColor: 'green',
confirmButtonText: 'Tamam'
})
    }else if(response.result== "4") {
//şifre çok kısa

//alert('şifre çok kısa');
swal.fire({
title: 'Hata!',
html: "Girdiğiniz şifre çok kısa, en az 6 karakterden oluşan bir şifre girin!",
type: 'error',
showCancelButton: false,
confirmButtonColor: 'green',
confirmButtonText: 'Tamam'
})
    }else if(response.result== "6") {
// isimsoyisim boşluktan oluşmalı

//alert('isimsoyisim boşluktan oluşmalı');
swal.fire({
title: 'Hata!',
html: "İsim Soyisim bölümünde özel karakter kullanılamaz, sadece Büyük Küçük Harf ve Boşluk kullanılabilir!",
type: 'error',
showCancelButton: false,
confirmButtonColor: 'green',
confirmButtonText: 'Tamam'
})
    }else if(response.result== "7") {
// geçerli bir email değil

//alert('geçerli bir email değil');
swal.fire({
title: 'Hata!',
html: "Geçerli bir E-Posta adresi girdiğinizden emin olun!",
type: 'error',
showCancelButton: false,
confirmButtonColor: 'green',
confirmButtonText: 'Tamam'
})
    }else if(response.result== "101") {
// geçerli bir email değil

//alert('geçerli bir email değil');
swal.fire({
title: 'Hata!',
html: "Sadece mobil uygulamamız üzerinden kayıt olabilirsiniz!",
type: 'error',
showCancelButton: false,
confirmButtonColor: 'green',
confirmButtonText: 'Tamam'
})
    }else if(response.result== "8") {
// geçerli bir email değil

//alert('geçerli bir email değil');
swal.fire({
title: 'Hata!',
html: "Birden fazla üyelik oluşturamazsınız!<br /><br />Kayıtlı Mailiniz: "+response.mail,
type: 'error',
showCancelButton: false,
confirmButtonColor: 'green',
confirmButtonText: 'Tamam'
})
    }
	  
	  
	  
    }, 'json');
  } else {
		setTimeout(function(){
 $('#submit').css({'pointer-events': 'auto', 'background': ''}).html("Kaydı Tamamla!");
      }, 2000);
	   swal.fire({
title: 'Hata!',
html: "Lütfen şifreleri kontrol edin. Şifreler eşleşmiyor veya herhangi bir şifre 6 karaktere eşit ya da daha uzun değil!",
type: 'error',
showCancelButton: false,
confirmButtonColor: 'green',
confirmButtonText: 'Tamam'
})
  }
});

  nextButton.on('click', function() {
    const currentStep = $(`.step${stepNumber}`);
    const nextStep = $(`.step${stepNumber + 1}`);

    const inputs = currentStep.find('input, select');

    let isValid = true;

    inputs.each(function() {
      if ($(this).val() === '' || $(this).val() === '0') {
        isValid = false;
      }
    });

    if (isValid) {
      currentStep.hide();
      nextStep.show();

      stepNumber++;

      checkStepCompletion(stepNumber);
    }
  });

  prevButton.on('click', function() {
    const currentStep = $(`.step${stepNumber}`);
    const prevStep = $(`.step${stepNumber - 1}`);

    currentStep.hide();
    prevStep.show();

    stepNumber--;

    checkStepCompletion(stepNumber);
  });
});

$( document ).ready(function() {
var base_color = "rgb(230,230,230)";
var active_color = "rgb(237, 40, 70)";



var child = 1;
var length = $("section").length - 1;
$("#prev").addClass("disabled");
$("#submit").addClass("disabled");

$("section").not("section:nth-of-type(1)").hide();
$("section").not("section:nth-of-type(1)").css('transform','translateX(100px)');

var svgWidth = length * 200 + 24;
$("#svg_wrap").html(
  '<svg version="1.1" id="svg_form_time" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 ' +
    svgWidth +
    ' 24" xml:space="preserve"></svg>'
);

function makeSVG(tag, attrs) {
  var el = document.createElementNS("http://www.w3.org/2000/svg", tag);
  for (var k in attrs) el.setAttribute(k, attrs[k]);
  return el;
}

for (i = 0; i < length; i++) {
  var positionX = 12 + i * 200;
  var rect = makeSVG("rect", { x: positionX, y: 9, width: 200, height: 6 });
  document.getElementById("svg_form_time").appendChild(rect);
  // <g><rect x="12" y="9" width="200" height="6"></rect></g>'
  var circle = makeSVG("circle", {
    cx: positionX,
    cy: 12,
    r: 12,
    width: positionX,
    height: 6
  });
  document.getElementById("svg_form_time").appendChild(circle);
}

var circle = makeSVG("circle", {
  cx: positionX + 200,
  cy: 12,
  r: 12,
  width: positionX,
  height: 6
});
document.getElementById("svg_form_time").appendChild(circle);

$('#svg_form_time rect').css('fill',base_color);
$('#svg_form_time circle').css('fill',base_color);
$("circle:nth-of-type(1)").css("fill", active_color);

 
$(".button").click(function () {
  $("#svg_form_time rect").css("fill", active_color);
  $("#svg_form_time circle").css("fill", active_color);
  var id = $(this).attr("id");
  if (id == "next") {
    $("#prev").removeClass("disabled");
    if (child >= length) {
      $(this).addClass("disabled");
      $('#submit').removeClass("disabled");
    }
    if (child <= length) {
      child++;
    }
  } else if (id == "prev") {
    $("#next").removeClass("disabled");
    $('#submit').addClass("disabled");
    if (child <= 2) {
      $(this).addClass("disabled");
    }
    if (child > 1) {
      child--;
    }
  }
  var circle_child = child + 1;
  $("#svg_form_time rect:nth-of-type(n + " + child + ")").css(
    "fill",
    base_color
  );
  $("#svg_form_time circle:nth-of-type(n + " + circle_child + ")").css(
    "fill",
    base_color
  );
  var currentSection = $("section:nth-of-type(" + child + ")");
  currentSection.fadeIn();
  currentSection.css('transform','translateX(0)');
 currentSection.prevAll('section').css('transform','translateX(-100px)');
  currentSection.nextAll('section').css('transform','translateX(100px)');
  $('section').not(currentSection).hide();
});

});

</script>

</head>
<body>
<!-- partial:index.partial.html -->

<center><img src="https://app.heysen.net/assets/img/logo.png" alt="logo" style="max-height: 30px; margin-top:35px; margin-bottom: 10px;" class="logo"></center>
 <h1>Ücretsiz Aramıza Katıl!</h1>
 <div id="svg_wrap"></div>
<section class="step1">
<input type="hidden" id="onesignal" value="<?=$_COOKIE['user_onesignal']?>" />
   <p><b>Hoş Geldin!</b><br><br>Kendi Cinsiyetini seç ve çevrende kaç kullanıcı var görelim.</p>
   <div class="radio-container">
     <input type="radio" name="gender" id="male" value="erkek" class="radio-input">
     <label for="male" class="radio-label male-label custom-button male-button">Erkek</label>
     <input type="radio" name="gender" id="female" value="kadin" class="radio-input">
     <label for="female" class="radio-label female-label custom-button female-button">Kadın</label>
   </div>
   <div id="onlinekullanici"></div>
 </section>

 <section class="step2">
   <p>Tamam, hadi profilini ayarlayalım!<br><br> <b>İlk olarak, adın nedir?</b></p>
   <input type="name" id="nameInput" placeholder="İsim Soyisim" />
 </section>

 <section class="step3">
   <p id="greetingsText">Tanıştığımıza memnun olduk. <br>Peki kaç yaşındasın?</p>
   <select class="form-control custom-select" id="yas">
     <option value="0">Buraya Dokun ve Yaşını Seç</option>
     <?php 
     for ($i=18; $i < 91; $i++) { 
       echo '<option value="'.$i.'">'.$i.' Yaşındayım</option>';
     }
     ?>
   </select>
 </section>

 <section class="step4">
   <p><b>Hangi şehirde yaşıyorsun?</b></p>
   <select class="form-control custom-select" id="sehir">
     <?php
     $iller = array('Adana', 'Adıyaman', 'Afyon', 'Ağrı', 'Amasya', 'Ankara', 'Antalya', 'Artvin',
'Aydın', 'Balıkesir', 'Bilecik', 'Bingöl', 'Bitlis', 'Bolu', 'Burdur', 'Bursa', 'Çanakkale',
'Çankırı', 'Çorum', 'Denizli', 'Diyarbakır', 'Edirne', 'Elazığ', 'Erzincan', 'Erzurum', 'Eskişehir',
'Gaziantep', 'Giresun', 'Gümüşhane', 'Hakkari', 'Hatay', 'Isparta', 'Mersin', 'İstanbul', 'İzmir', 
'Kars', 'Kastamonu', 'Kayseri', 'Kırklareli', 'Kırşehir', 'Kocaeli', 'Konya', 'Kütahya', 'Malatya', 
'Manisa', 'Kahramanmaraş', 'Mardin', 'Muğla', 'Muş', 'Nevşehir', 'Niğde', 'Ordu', 'Rize', 'Sakarya',
'Samsun', 'Siirt', 'Sinop', 'Sivas', 'Tekirdağ', 'Tokat', 'Trabzon', 'Tunceli', 'Şanlıurfa', 'Uşak',
'Van', 'Yozgat', 'Zonguldak', 'Aksaray', 'Bayburt', 'Karaman', 'Kırıkkale', 'Batman', 'Şırnak',
'Bartın', 'Ardahan', 'Iğdır', 'Yalova', 'Karabük', 'Kilis', 'Osmaniye', 'Düzce');
     ?>
     <option value="0">Buraya Dokun ve Şehir Seç</option>
     <?php
     foreach($iller as $veri){ ?>
       <option value="<?=$veri?>"><?=$veri?></option>
     <?php
     }
     ?>
   </select>
 </section>

 <section class="step5">
   <p><b>Şimdi e-posta adresini girer misin?</b><br>Asla mail göndermeyeceğiz.</p>
   <input type="email" id="emailInput" placeholder="E-posta adresi" />
 </section>

 <section class="step6">
   <p>Son bir adım kaldı<br><br> <b>Şimdi bir şifre seçin ve insanlarla tanışmaya başlayın.</b></p>
   <input type="text" id="password1" placeholder="Şifreni gir" />
   <input type="text" id="password2" placeholder="Şifreni tekrar gir" />


<br><br>
    <label style="font-size: 11px; display: inline-block; color: black !important;" class="custom-control-label text-muted" for="customChecka1">Kayıt olarak 18 yaşından büyük olduğunuzu ve <a href="https://app.heysen.net/terms_heysen.html" style="color: orange !important;">Üyelik Sözleşmesini</a> kabul etmiş sayılırsınız.</label>



 </section>
 <style>
 .login-with-google-btn {
  transition: background-color .3s, box-shadow .3s;
    
  padding: 15px 16px 16px 42px;
  border: none;
  border-radius: 3px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
  
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
  background-color: white;
  background-repeat: no-repeat;
  background-position: 12px 16px;
  
  width: calc(100% - 15vw);
  
  &:hover {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
  }
  
  &:active {
    background-color: #eeeeee;
  }
  
  &:focus {
    outline: none;
    box-shadow: 
      0 -1px 0 rgba(0, 0, 0, .04),
      0 2px 4px rgba(0, 0, 0, .25),
      0 0 0 3px #c8dafc;
  }
  
  &:disabled {
    filter: grayscale(100%);
    background-color: #ebebeb;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    cursor: not-allowed;
  }
}



 </style>

 <div class="button" id="prev">&larr; Geri</div>
 <div class="button" style="margin-bottom: 30px;" id="next">Devam &rarr;</div>
 <div class="button" id="submit">Kaydı Tamamla!</div>

  <br>
<p id="loginText"><button onclick="goTetikle();" type="button" class="login-with-google-btn" >
  Google Hesabı ile Hızlı Kaydol
</button></p> 
  
    <p id="loginText" style="margin-top:20px; color: white;" onclick="goTetikle();">Zaten üyeliğin var mı?</p>
  
  <div onclick="window.location.href = 'login.php';" class="button" id="login" style="background-color: #007bff;">E-Posta ile Giriş Yap</div>


</body>
</html>
