#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-logo {
  width: 120px;
  height: auto;
  animation: fadeInZoom 1.2s ease-in-out;
}

@keyframes fadeInZoom {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}










#loader {
  position: fixed;
  z-index: 9999;
  background-color: #fff;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1s ease-out 2.4s forwards;
}

.loader-logo {
  width: 120px;
  opacity: 0;
  transform: scale(0.5) rotate(0deg);
  animation: logoIn 1.2s ease-out forwards, logoOut 0.8s ease-in 1.6s forwards;
}

@keyframes logoIn {
  0% {
    transform: scale(0.5) rotate(-15deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes logoOut {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(1.3) rotate(10deg);
    opacity: 0;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}











#preloader {
  position: fixed;
  background-color: #fff;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg-logo svg {
  width: 150px;
  height: auto;
  stroke: #f5cf58;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease-out forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
    fill: #f5cf58;
  }
}








.svg-logo svg {
  width: 150px;
  height: auto;
  stroke: #f5cf58;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease-out forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.svg-logo svg path {
  animation: fillLogo 1s ease-in forwards;
  animation-delay: 2s; /* stroke tamamlandıktan sonra dolgu başlasın */
}

@keyframes fillLogo {
  from {
    fill: none;
  }
  to {
    fill: #f5cf58;
  }
}







#pageLoad {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.8s ease;
}

#pageLoad.hidden {
  opacity: 0;
  pointer-events: none;
}








.svg-logo svg {
  width: 150px;
  height: auto;
  stroke: #f5cf58;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease-out forwards;
}

.svg-logo svg path {
  animation: fillLogo 0.8s ease-in forwards;
  animation-delay: 2s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fillLogo {
  from {
    fill: none;
  }
  to {
    fill: #f5cf58;
  }
}







.draw-path {
  fill: transparent;
  stroke: #f5cf58;
  stroke-width: 2;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 2.5s ease forwards;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}




#preloader {
  position: fixed;
  background: #fff;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease;
}

.logo-anim {
  width: 150px;
  height: auto;
}

.draw-path {
  fill: transparent;
  stroke: #f5cf58;
  stroke-width: 2;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: draw 2.5s ease forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}







.draw-path {
  fill: transparent;
  stroke: #f5cf58;
  stroke-width: 2;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: draw 2.5s ease forwards;
  transition: fill 0.6s ease, filter 0.6s ease;
}

.filled {
  fill: #f5cf58;
  filter: drop-shadow(0 0 12px #f5cf58);
}









#preloader {
  background: #ffffff;
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg-logo {
  width: 200px;
  height: auto;
}

.draw-path {
  fill: none;
  stroke: #f5cf58;
  stroke-width: 2;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: draw 2.5s ease forwards;
  transition: fill 0.6s ease, filter 0.6s ease;
}

.draw-path.filled {
  fill: #f5cf58; /* Logonun iç rengi */
  stroke: #f5cf58;
  filter: drop-shadow(0 0 20px #f5cf58aa);
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}








#preloader {
  background: white;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-path {
  width: 200px;
  stroke: #f5cf58;
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawLine 2.5s ease forwards;
}

.logo-path.filled {
  fill: #f5cf58;
  filter: drop-shadow(0 0 15px #f5cf58aa);
  transition: fill 0.6s ease;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}


























#preloader {
  position: fixed;
  background: #fff;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.draw-logo {
  width: 180px;
  height: auto;
  stroke: #f5cf58;
  stroke-width: 2;
  fill: none;
  animation: draw 2.5s ease forwards, fillin 0.5s ease 5.7s forwards, fadeOut 0.7s ease 3.2s forwards;
}

@keyframes draw {
  0% {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
  }
}

@keyframes fillin {
  0% {
    fill: transparent;
  }
  100% {
    fill: #f5cf58;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: scale(1.1);
  }
}












#preloader {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #f5cf58;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.draw-logo {
  width: 200px;
  height: auto;
}

.draw-path {
  stroke: white;
  stroke-width: 3;
  fill: transparent;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease forwards, fillIn 1s ease forwards 2s, shine 1s ease forwards 3s, fadeOut 0.5s ease forwards 4.5s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fillIn {
  to {
    fill: white;
  }
}

@keyframes shine {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(3);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: scale(1.1);
  }
}










#preloader {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #f5cf58;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.draw-logo {
  width: 200px;
  height: auto;
}

.draw-path {
  stroke: white;
  stroke-width: 3;
  fill: transparent;
  stroke-dasharray: 2000; /* uzun yolu temsil eder */
  stroke-dashoffset: 2000;
  animation: draw 3s ease forwards, fillIn 1s ease forwards 3s, shine 1s ease forwards 4s, fadeOut 0.5s ease forwards 5s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fillIn {
  to {
    fill: white;
  }
}

@keyframes shine {
  0% { filter: brightness(1); }
  50% { filter: brightness(3); }
  100% { filter: brightness(1); }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: scale(1.05);
  }
}










#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f5cf58;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.svg-logo {
  width: 220px;
  height: auto;
}

.draw-path {
  stroke: white;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation:
    draw 3s ease forwards,
    fillIn 1s ease forwards 3s,
    shine 1s ease forwards 4s,
    fadeOut 0.6s ease forwards 5s;
}

/* Çizim */
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Dolgu */
@keyframes fillIn {
  to {
    fill: white;
  }
}

/* Parlama */
@keyframes shine {
  0% { filter: brightness(1); }
  50% { filter: brightness(2.5); }
  100% { filter: brightness(1); }
}

/* Kaybolma */
@keyframes fadeOut {
  to {
    opacity: 0;
    transform: scale(1.05);
  }
}







#preloader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: #f5cf58;
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-logo {
  width: 200px;
  height: auto;
}

.draw-path {
  stroke: white;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation:
    draw 2.5s ease forwards,
    fillIn 1s ease forwards 2.5s,
    shine 1s ease forwards 3.5s,
    fadeOut 0.6s ease forwards 4.5s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fillIn {
  to {
    fill: white;
  }
}

@keyframes shine {
  0% { filter: brightness(1); }
  50% { filter: brightness(2.5); }
  100% { filter: brightness(1); }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: scale(1.1);
  }
}




/* STROKE ONLY PRELOADER */
#preloader {
  position: fixed;
  inset: 0;
  background: #f5cf58;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#logo-stroke {
  width: 200px;
  height: auto;
  stroke: white;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawOnly 3s ease forwards;
}

@keyframes drawOnly {
  to {
    stroke-dashoffset: 0;
  }
}





#logo-stroke {
  width: 200px;
  height: auto;
  stroke: white;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawOnly 2s ease forwards;
}