.bismillah {
  background-color: #a7d686;
  display: block;
  border-radius: 10px 10px 10px;
  width: 100%; 
}
.baba::after { 
  content: "";
  clear: both;
  display: grid;
  grid-template-columns: auto auto auto auto;
}
.bababa::after {
  content: "";
  clear: both; 
  display: table;
}
.babababa {
  max-width: 100%;
  display: block;
  text-align: center;
}
.disbosluk {
  padding: 2px;
}
.kutu {
  border-right: 1% solid green; 
  border-radius: 12%;
  margin-right: 3px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.album img{
  width: 100%;
}
.dip {
  padding: 20px 20px;
  background-color: #a7d686;
  color: black;
  width: 100%;
  height: 50px;
  display: block;
}
.boslukyok {
 padding: 0 !important;
 margin: 0 !important;
}
.sistem {
  font-family: Arial;
  font-size: 16px;
  padding: 1%;
  margin: 5%;
  border: 1px solid #ccd0d4;
  box-shadow: 0 10px 3px rgba(0,0,0,.04);

} 
[class*="kardes-"] {
  float: left;
  width: 100%;
  padding-right: 1%;
  box-shadow: 0px 30px 75px rgba(127,255,0,0.55);
}
/* ust menu */ 
.ustmenu {
  overflow: hidden;
  background-color: #68d619;
}

.ustmenu a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.acik {
  background-color: #68d619;
  color: white;
}


.ustmenu .icon {
  display: none;
}

.ac-kapa {
  float: left;
  overflow: hidden;
}

.ac-kapa .bttn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.ac-kapa-ort {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  opacity: 0.8;
}

.ac-kapa-ort a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.ustmenu a:hover, .ac-kapa:hover .bttn {
  background-color: #a7d686;
  color: white;
}

.ac-kapa-ort a:hover {
  background-color: #a7d686;
  color: black;
  margin: 10px;
  padding-top: 5%;
}

.ac-kapa:hover .ac-kapa-ort {
  display: block;
}

/* slide */ 
* {box-sizing:border-box}


/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
  border: 2px solid green;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
/*Kategoriler içi vs */
.kategorisayfasici1 {
  font-family: calibri;
  background-color: lightblue;
  border-right: 5px solid blue;
  border-radius: 10px 10px 10px 10px;
  margin: 3%;
}
.kategorisayfasici2 {
  font-family: calibri;
  background-color: lightblue;
  border-radius: 10px 10px 10px 10px;
  margin: 3%;

}

.arabosluk {
  margin: 3%;
  padding: 10px;
}
.kategoribaslikvs {
  max-width: 100%;

}
.kategoribaslikvs img{
  width: 100%;
  height: 100%;
  border-radius: 5%;
}
/*SAĞ KATEGORİ VS */
.kategori {
  padding: 5;
  /*border-bottom:5px solid red; */ 
}
.kategori .baslik {

  box-shadow: red;
  text-align: center;
  border-bottom:1px solid black;
}
.kategori li {
  padding: 5px;
  margin: 5px;
  background-color: #03A9F4; /*03A9F4  f2f2f2*/
  border-bottom:1px solid green;

}
.kategori li :hover {
  padding: 5px;
  margin: 5px;
  color: white;
  box-shadow: 44px 8px 16px 0px rgba(2,0,4,0.2); /* background-color: #6AE; 03A9F4 717171 f2f2f2*/
  border-bottom:1px solid red;
  font-size: 25px;
  font-family: monospace;

}
.kategori a {

  font-family: cursive;
  font-size: 18px;
  color: white;
  text-decoration: none;
}

/* yazi ayarları */

.yaziortala {
  text-align: center;
}
.bslk3 {
  font-family: Calibri,helvetica;
  border-bottom: 1px dotted green;
  max-width: 100%;
}
.sayfayazarvs {
  font-family: calibri;
  float: right;
  border-bottom: 1px dotted blue;
  border-left: 1px dotted green;
  padding-right: 1%;
  padding-left: 3%;
  font-size: 15px;

}
.okundu{
  float: right;
}
.yzan {
  height: 80%;
  background: red;
  position: relative;
  animation: baslikkay 10s;
  animation-fill-mode: forwards;
}
@keyframes baslikkay {
  from {left: -1000px;}
  to {left: -6%; background-color: lightblue;}
}
.yzan2 {
  height: 80%;
  background: red;
  position: relative;
  animation: baslikkays 10s;
  animation-fill-mode: forwards;
}
@keyframes baslikkays {
  from {top: -1000px;}
  to {top: -3%; background-color: lightblue;}
}
.sayfaici {
  font-family: Arial;
  border-radius: 10px 10px 10px 10px;
  padding: 2%;
  padding-bottom: 5%;
  background-color: lightblue;
  font-size: 15px;

}
/* - ortası için - */
.soltaraf {
  background-color:#2196F3;
  padding:20px;
  float:left;
  padding-right: 5px;
  width:20%; 
}

.orta {
  background-color:#f1f1f1;
  padding:20px;
  float:left;
  padding-right: 5px;
  width:60%;
}

.sagtarf {
  background-color:#4CAF50;
  padding:20px;
  float:right;
  width:20%;
  padding-right: 5px;
  padding-top: 20px;
}

/* - dip için- */ 
.enalt {
  /* border: 2px dotted blue; */
  margin-top: 3%; 
  border-radius: 0px  0px 10px 10px;
  background-color: #68d619;
  padding: 5px;
}

.yorumlar {
  margin:1%;
  padding: 1%;
  background: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0,0,0,06);
}
.yorumcvp { 
  padding-left: 50px;
  background: #fff;
  box-sizing: border-box;
}

/* -----       -------------- */ 
.loginiduzenle {
  align-content: center;
}
/* Full-width input fields */
input {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
/* Set a style for all buttons */
.girisbutton {
  float: right;
  background-color: #03A9F4;
  position: relative;
  color: white;
  padding: 14 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 20%;
}

.girisbutton:hover {
  opacity: 0.8;
}
.uyebutton {
  background-color: green;
  float: right;
  color: white;
  padding: 2px;
  margin: 2px 5px;
  border: none;
  cursor: pointer;
  width: auto;  
  opacity: 0.8;
}
.uyebutton:hover {
  opacity: 2;
}
/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.giriscontainer {
  padding: 30px;
}

span.psw {
  float: right;
  padding-top: 16px;
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5px auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}

@media screen and (max-width:650px) {
  .soltaraf, .orta, .sagtaraf {
    width:100%;
  }
}

@media screen and (max-width: 600px) {
  .ustmenu a:not(:first-child), .ac-kapa .bttn {
    display: none;
  }
  .ustmenu a.icon {
    float: right;
    display: block;
    z-index: 1;
  }
}

@media screen and (max-width: 600px) {
  .ustmenu.responsive {position: relative;}
  .ustmenu.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
  }
  .ustmenu.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .ustmenu.responsive .ac-kapa {float: none;}
  .ustmenu.responsive .ac-kapa-ort {position: relative;}
  .ustmenu.responsive .ac-kapa .bttn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
table {
  text-align: center;
  width: 100%; 
  border:1px solid black;
}
td {
  border:1px solid black;
}

@media only screen and (min-width: 600px) {
  /* Tablet için: */
  .kardes-s-1 {width: 8.33%;}
  .kardes-s-2 {width: 16.66%;}
  .kardes-s-3 {width: 25%;}
  .kardes-s-4 {width: 33.33%;}
  .kardes-s-5 {width: 41.66%;}
  .kardes-s-6 {width: 50%;}
  .kardes-s-7 {width: 58.33%;}
  .kardes-s-8 {width: 66.66%;}
  .kardes-s-9 {width: 75%;}
  .kardes-s-10 {width: 83.33%;}
  .kardes-s-11 {width: 91.66%;}
  .kardes-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* Bilgisayar ve Üstü İçin: */
  .kardes-1 {width: 8.33%;}
  .kardes-2 {width: 16.66%;}
  .kardes-3 {width: 25%;}
  .kardes-4 {width: 33.33%;}
  .kardes-5 {width: 41.66%;}
  .kardes-6 {width: 50%;}
  .kardes-7 {width: 58.33%;}
  .kardes-8 {width: 66.66%;}
  .kardes-9 {width: 75%;}
  .kardes-10 {width: 83.33%;}
  .kardes-11 {width: 91.66%;}
  .kardes-12 {width: 100%;}
}

.kullanici {
  font-family: Arial;
  font-size: 16px;
  padding: 1%;
  margin: 5% 5% 5% 5%;
  border: 1px solid #ccd0d4;
  box-shadow: 0 5px 3px rgba(0,0,0,.04);
}
.kategori {  
  font-family: Arial;
  font-size: 16px;
  padding: 1%;
  margin: 5% 5% 5% 5%;
  border: 1px solid #ccd0d4;
  box-shadow: 0 5px 3px rgba(0,0,0,.04);
}
table {
  text-align: center;
  width: 100%; 
  border:1px solid black;
}
td {
  border:1px solid black;
}

/* The Modal (background) */
.acilir {
  font-family: Arial;
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
  padding-top: 60px;
}
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.acilircontainer {
  padding: 10%;
} 
/* Modal Content/Box */
.acilir-icksm {
  background-color: #fefefe;
  margin: 5px auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.kapat {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */
.kapat:hover,
.kapat:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}


.ozlur:hover {  
   z-index:1;
 -ms-transform: scale(4.50); /* IE 9 */
 -webkit-transform: scale(4.50); /* Safari 3-8 */
  transform: scale(4.50); 
} 

.ozlu:hover {  
   z-index:1;
 -ms-transform: scale(1.3); /* IE 9 */
 -webkit-transform: scale(1.3); /* Safari 3-8 */
  transform: scale(1.4); 
}