@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Raleway:ital,wght@0,100..900;1,100..900&);

/*----------------- Default settings      */
html {
    scroll-behavior: smooth;
}
body {
    font-family: "Raleway",sans-serif;
    font-size: 14px;
    font-weight: 400; 
    height: 100%;

    background-image: radial-gradient(at 9.2% 73.7%, #ffddc9 0px, transparent 50%),
    radial-gradient(at 92.3% 7.6%, #fff9cf 0px, transparent 50%);
}
/*-----------------  MAIN page     ----------------*/
hgroup{
  position: fixed;
  width: 100%;
  z-index: 99;
}
article{
  padding-top: 77px;
}

.Baslik {
  text-align: center;
  font-size: 30px;
  height:50px;
  margin-top: 0px;
  padding: 10px;
  font-family: "Audiowide", "Raleway";
  font-weight: bold;
  background-color: #eb770a;
  color: #eaea9d;
}

.header {
  position: absolute;
  padding-top: 0px;
  margin-top: 0px;
  left: -80%;
  width: 60%;
  transition: top 0.8s;
}
.nav{
  padding-top: 0px;
  margin-top: 0px;
}
.header ul {
  font-size: 1.2em;
  text-align: center;
  text-transform: uppercase;
  list-style: none;
  background-color: #e00da1;
}
.header a {
  display: block;
  padding: 10px;
  border-bottom: 1px solid #eee;
  background-color: #e00da1;
  text-decoration: none;
  color: white;
  -webkit-transition: background-color 300ms;
  transition: background-color 300ms;
}
/*----------------- Subtitels English     */

/* Desktop screens - hover enabled */
.English {
  font-family: "Raleway", "Arial";
  font-size: 13px;
  color: inherit;
  display: none; 
  height: auto;
  width: auto;
  text-align: center;
}

/* Mobile Styles */
/* Mobile styles */
@media (max-width: 480px) {
  .English {
    color:black;
    display: inline; 
    font-size: 12px;
  }
  .submenu > .English{
    display: none; 
  }
  
}

/* Tablet styles */
@media (min-width: 481px) and (max-width: 768px) {
  .English {
    color:black;
    display: inline; 
    font-size: 13px;
  }
  .submenu > .English{
    display: none; 
  }

}
/*--------tiptext--------*/
.tipText{
  font-size:smaller;
  color:rgb(6, 134, 6);
  width: 99%;
  text-align: center;
}

/*-----------------  */
/** Mobile Bar **/
.toggle-nav {
  display: none;
  z-index: 99;
}

.mobile-bar {
  position: relative;
  width: 100%;
  height: 70px;
  background-color: #bb1088;
  -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);

}
.mobile-bar label {
  position: absolute;
  top: 0;
  left: 10px;
  width: 60px;
  height: 60px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: -webkit-transform 500ms ease;
  transition: -webkit-transform 500ms ease;
  transition: transform 500ms ease;
  transition: transform 500ms ease, -webkit-transform 500ms ease;

}
.mobile-bar label:after {
  content: "☰";
  font-size: 2em;
  color: #eee;
  line-height: 60px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: color 500ms ease;
  transition: color 500ms ease;

}

/** Slide-Out Effect **/
.toggle-nav:checked ~ .container {
  /** when the checkbox is checked the container slide-out **/
  -webkit-transform: translateX(70%);
  transform: translateX(70%);
  -webkit-transform: translate3d(70%, 0, 0);
  transform: translate3d(70%, 0, 0);
  z-index: 99;
}

/** Label Effect (Menu Icon) **/
.toggle-nav:checked + .mobile-bar label {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.toggle-nav:checked + .mobile-bar label:after {
  color: #4e4a4a;
}

/** Container **/
.container {
  padding-top: 0px;
  -webkit-transition: -webkit-transform 500ms ease;
  transition: -webkit-transform 500ms ease;
  transition: transform 500ms ease;
  transition: transform 500ms ease, -webkit-transform 500ms ease;
  z-index: 1;
}

/** mobile menu */

.mobilebaslik
{
  font-size: 20px;
  margin-left: 100px;
  font-family: "Audiowide", "Raleway";
  /* font-display: swap; */
  font-weight: bold;
  color: #fbfbee;
  line-height: 60px;

  
}

@media (max-width: 730px) {
  .Baslik {
    display: none;
  }

}
@media (min-width: 730px) {
  .mobile-bar {
    display: none;
  }
  .toggle {display: none;}
  .toggle-nav:checked ~ .container {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  .container {
    /* position:none; */
    -webkit-transition: none;
    transition: none;
  }

  .header {
    position:relative;
    left: 0;
    width: 100%;
  }

  .header ul {
    font-size: 1.1em;
  }

  .header li, .header a {
    box-shadow: 0px 13px 14px -7px #3e7327;
    background: linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
    border-radius: 8px;
    border: 1px solid #4b8f29;
    display: inline-block;
    z-index: 99;
  }

  .header li {
    margin-right: 0px;
  }
  
  /**  menu text  **/
  .header a {
    font-size: 1.5rem;
    line-height: 1.3;
    text-transform: uppercase;
    text-align: center;
    font-family: "Dosis", sans-serif;
    padding: 1px 4px;
    border-bottom: none;
  }

  .header a:hover {
    background-color: #920880;
    text-decoration: none;
  }
}

/* .foot { z-index:99;} */
/** choose language */
.dil {
  cursor: pointer;
  display: inline-block;
}
/* form button to change language  */
.btn {
  cursor:pointer;
  width:40px;
  border: 0px;
  background-color: transparent;
  /* color: #34db37; */
   box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
}
.btn1 {
  cursor:pointer;
  width:40px;
  border: 0px;
  background-color: transparent;
  color: #3498db;
   box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
}




/*-----------------    kelime ogren  section -------------- */
.words-container {
  flex: 1 auto;
  border: 5px solid rgb(180, 11, 160);
  width: 95%;
  border-radius: 15px;
  margin: 10px auto;
  max-width: 375px;
  max-height: fit-content;
  /* height: 280px; */
  background-color: rgb(235, 232, 225);
  box-shadow: 0 .75rem .5rem -.5rem hsl(0 50% 80%);
}

.words-container > .Gramer {
  line-height: calc(1em + 1px);
  margin: 0px;
}

@media (min-width:780px)  {
  .words-container {
    max-width: 450px;
  }
}

    /*-------------- slider in kelime ogren  */

    .slider{
      position: relative;
      margin: auto;
      height: 510px; 
      overflow: hidden;
      display:none;
    }
    #slider-1{
      display:contents;
    }

    /* #slider .slider {
      transition: transform 0.3s ease-in-out;
    } */

    a.control_prev, a.control_next {
      transform: translateY(-50%);
      color: rgb(50, 101, 198);
      padding: 10px;
      text-decoration: none;
      cursor: pointer;
      z-index: 1;
    }

    a.control_prev {
      margin-left: 1px;
    }
 
    a.control_next {
      margin-right: 1px;
    } 


/*-----------------    videolar  section -------------- */
.videotext p{
  color: white;
  text-align: center;
}
.videotext a{
  color:rgb(232, 197, 19);
}
.videolist a{
  font-size: 13px;
  color: white;
  text-decoration: none;
}
.videolist p{
  font-size: 11px;
  font-weight: 400;
  color:rgb(233, 213, 112);
}
.videolist img{
  float: right;
}
.videolist{
  display:grid;

  padding: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 10%;
  grid-template-columns: 1fr  1fr; /* Two columns for image and text */
  gap: 10px;
  align-items: center;
  
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  background: linear-gradient(to bottom, rgba(180, 11, 160, 0.105) 93%, rgba(87, 5, 78, 0.2)  );
 
  width: auto;
  height: 180px;
}


/*-----------------   testler  style section -------------- */
.testler{
  display:flex;
  flex-wrap: wrap;
}
.testler img{
  width:inherit;
  height:inherit;
  padding:5px;
}


.testler .card{
  background-color:white;
  margin-left:20px;

}
.testler .btn { width:140px;}
.testler .card-header{background-color:cyan;}
.testler .card-footer{font-size:11px;}

@media (max-width:780px) {
  .testler .card{margin-bottom:20px;}
}


/*-----------------   testler sub pages  style section -------------- */

    .testMenu{
      background-color:#f9e5de;
      width: auto;
      margin-top: 5px;
      display:flex;
    }

    .testMenu:hover {
      background-color: #f39836;
      display:inline;
    }
    .basti{
      background-color: #f39836;
    }

    .question {
        margin: 10px 0;
    }
    .renkliText{
      position: absolute;
      color:#0098b3;
      padding-left: 40px; 
      white-space: nowrap; 
    }

    label{
      margin-left: 10px;
      width:auto;
    }
    
    .goster{ display:none;} 
    label:hover .goster{ display:inline;} 

    @media (max-width:780px) {
      .test02 {
        background-color: #c3dbb8;
        display:flex;
        width:300px;
        height:50px;
        border: #3498db;
        border-radius: 10px;
      }
      .test02 label{
        width:70px;
      }
      .testMenu{
        display: inline-flex;
      }

    }
    .dogru{
      pointer-events:none;
    }

    .input-box {
        padding: 5px;
        width: 170px;
    }
    .input-img {
      width: 170px;
      height:170px;
  }

    /* Correct answer styling */
    .correct {
        border: 2px solid green;
        background-color: #e6ffe6;
    }

    /* Incorrect answer styling */
    .incorrect {
        border: 2px solid red;
        background-color: #ffe6e6;
    }

    /* Test for Ekler  page -------------------*/

    .form-container {
      justify-content: center;
      margin-left: 5px;
      align-items: center;
      min-height: 85vh;  
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      width: 98vw;
      margin-bottom: 30px;

    }
    @media (min-width:780px) {
      .form-container {
        margin-left: 20%;
        width: 50vw;
      }

    }
    
    h1 {
      text-align: center;
      margin-bottom: 18px;
    }
    
    .question {
      margin-bottom: 15px;
    }
    
    button {
      display: block;
      width: 100%;
      padding: 10px;
      background: #4192e9;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    button:hover {
      background: #0056b3;
    }
    
    #result {
      margin-top: 20px;
      font-size: 18px;
      text-align: center;
    }
    .wrong-answer {
      color: rgb(182, 23, 23);
    }
    
    .correct-answer {
      color:rgb(5, 100, 40);
    }
    .tip {
      font-size: 14px;
      color: #555;
      margin-top: 5px;
      font-style: italic;
    }
  
    /*  ekler test menu -------------------------------*/

    #menu-container{
      position: absolute;
      margin-top: 20%;
      margin-left: 5px;
      display: inline-flex;
    }
    #menu ul {
      list-style-type: none;
      height:22px;
    }
    #menu li{
      padding-bottom: 2px;
      padding-left: 6px;
      margin-bottom: 2px;
      background-color: #1871d1a4;
      border-color: #120101;
      padding-right: 20px;
    } 
    
    #menu a{
      color: white;      
      text-decoration: none;
      /* float:left; */
    }
    
    #menu ul li a:hover {
      text-decoration: underline;

    }
    
    /* For screens below 780px */
    @media (max-width: 780px) {
      #menu-container{
        display: block;
        position:relative;
        margin-top: inherit;
      }
      #menu ul {
        display: inline-flex;
        justify-content: space-around;
      }
    }
    
/*-----------------   zamanlar style section -------------- */
.zmn {
  margin-top: 5px;
  margin-left: 10px ;
  z-index: -1;
}
.zmn-ul{
  list-style: none;
	padding-left: 4px;
	margin: 0;

	display: flex;
	flex-wrap: wrap;
  z-index: -1;
}

.zmn-li a{
	text-decoration: none;
	color: #3d3d3d;
	font-size: 22px;
	display: block;
	padding: 10px 15px;
	position: relative;
}
.zmn-ul .zmn-li a:hover:before, .zmn-ul .zmn-li a:hover:after{
	transform: scaleX(1);
}

/*-----------------   about page section -------------- */
.yazi {
	font-size: 20vw;
	margin: 0;
	color: white;
	font-family: sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	background-image: linear-gradient(
		to right,
		rgb(231, 134, 102),
		orange,
		gold,
		lightgreen,
		rgb(42, 125, 125),
		rgb(20, 57, 93),
		rgb(92, 31, 212),
		rgb(76, 52, 64),
		orangered);
	background-size: 110vw;
	animation: sliding 30s linear infinite;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  z-index: -1;
}
.cik{ 
  opacity:0.15;
}
@keyframes sliding {
	to {
		background-position: -2000vw;
	}
}

  /* For screens above 780px */
  @media (min-width: 780px) {
    .yazi {
      font-size: 8vw;
      margin: 0;
      color: white;
      font-family: sans-serif;
    }
  }
.yazi-about{
  margin-left: 10px;
  margin-right: 10px;
  justify-content: center; 
  align-items: center; 
  width: auto;
  font-size: 20px;
  color: rgb(250, 246, 246);
  opacity: 0; /* Initially hidden */
  transition:  1s ease-in-out; /* Smooth fade effect */
  display: none; /* Hide from layout initially */
  
}
.yazi-about.visible {
  opacity: 1; /* Fully visible */
  display: block; /* Bring back to layout */
  animation: fadeIn 3s ease-in forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(.5);
  }
  100% {
    opacity: 1;
    transform: scale(1.4);
  }
}

/*----------------------- customized alert YABADA.NL-----*/
.alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* Alert box */
.alert-box {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: 300px;
}

/* Heading */
.alert-heading {
  font-size: 18px;
  font-weight: bold;
  color: darkblue;
  margin-bottom: 10px;
}

/* Message */
.alert-message {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}

/* Close button */
.alert-button {
  background: darkblue;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}
/*----------------------- customized alert YABADA.NL-----*/

/*------------------------EXTRA-------------*/
.SariRenkliArkaPlan{
  background-color: rgb(239, 236, 231);
}
.btn-info{
  margin-bottom: 2px;
}
.btn-info:hover{
  background-color: #d8771c;
}
.txtBoxCevirici{
   
   border-radius: 5px;
   border-color: #0056b3;
   background-color: #ffffff;
}
.ikikolon{
  display: grid;
  grid-template-columns: auto auto;
  color:#120101;
  line-height: 1;
  margin-left:20px;
  margin-right:20px;
}
@media (max-width:550px) {
  .ikikolon span{
    font-size:20px;
  }
  
}