/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@600&family=Poppins:wght@400;500;700&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 4.5rem;

  /*========== Colors ==========*/ 
  /* LINK , ICON */
  /*  hsl(26, 100%, 50%) */  
  --first-color: #000;

  /* BUTON */
  --gradient-color: linear-gradient(90deg,
                    hsl(21, 90%, 48%),  /*  RENK KODU = #EA580C */
                    hsl(25, 95%, 53%)); /*  RENK KODU = #F97316 */

  --title-color: hsl(27, 96%, 61%);
  /* hsl(21, 90%, 48%) */
  --text-color: #000;

  --description-color: #C7C4D6;
  --white-color: #fff;

  --navy-blue: #05040f;
  --paragraf-color: #575a7b;


  --body-color:   
  linear-gradient(180deg, #05040F 0%, #0B091A 40%, #100E24 70%, #15122F 100%);


  /* linear-gradient(180deg, #05040F 0%, #0B091A 40%, #100E24 70%, #15122F 100%) */
   --body-color2: 
   linear-gradient(180deg, hsl(30, 20%, 90%), hsl(30, 15%, 97%));
  
  
   --color122e: #FFE9C4 ;

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;
  --second-font: "Lora", serif;
  --biggest-font-size: 2.25rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1024px) {
  :root {
    --biggest-font-size: 4rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
  /* background-color: var(--body-color); */
  background: var(--body-color);
  color: var(--text-color);

  background-repeat: no-repeat;
  background-size: cover;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}



/* ================ GastroKaravan Page Transition Loader ================= */
/* ========================================================
   CINEMATIC "DEEP SPACE" PRELOADER (Final Version)
   ======================================================== */
/* ========================================================
   CINEMATIC PRELOADER (BAR BETWEEN ICON & REFLECTION)
   ======================================================== */

.gt-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #110F24 0%, #020205 100%);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.gt-loader.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.gt-loader.is-fadeout {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* --- VIGNETTE --- */
.gt-loader__vignette {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10; pointer-events: none;
    background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.7) 90%);
}

/* --- YILDIZLAR --- */
.gt-loader__star-layer {
    position: absolute; top: 0; left: 0; width: 2px; height: 2px;
    background: transparent; opacity: 0; z-index: 0;
    border-radius: 50%;
    animation: starTwinkle 4s ease-in-out infinite alternate;
}

.layer-1 {
    width: 1px; height: 1px; color: rgba(255, 255, 255, 0.5); 
    box-shadow: 10vw 10vh, 20vw 80vh, 35vw 40vh, 50vw 10vh, 80vw 20vh, 90vw 85vh, 5vw 90vh, 15vw 30vh, 25vw 60vh, 75vw 10vh, 95vw 30vh, 12vw 55vh, 98vw 5vh, 28vw 92vh;
    animation-duration: 3s;
}
.layer-2 {
    width: 2px; height: 2px; color: rgba(255, 255, 255, 0.7);
    box-shadow: 40vw 70vh, 60vw 20vh, 85vw 80vh, 10vw 60vh, 90vw 10vh;
    animation-duration: 5s; animation-delay: 1s;
}
@keyframes starTwinkle {
    0% { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 0.8; transform: scale(1.1); }
}

/* --- SAHNE --- */
.gt-loader__scene {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    perspective: 800px;
    z-index: 5; 
}

/* --- Zemin Işığı --- */
.gt-loader__floor-spot {
    position: absolute;
    top: 60%;
    width: 280px;
    height: 70px;
    background: radial-gradient(ellipse at center, rgba(234, 88, 12, 0.15) 0%, rgba(0,0,0,0) 70%);
    transform: rotateX(60deg);
    z-index: 0;
    animation: spotPulse 4s infinite alternate;
}

/* --- Karavan Wrapper (Her şeyi kapsar) --- */
.gt-loader__truck-wrapper {
    position: relative;
    width: 250px;
    z-index: 2;
    animation: gentleFloat 5s ease-in-out infinite;
    /* İçerik hizalama */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gt-loader__img { width: 100%; height: auto; display: block; }

.main-truck {
    position: relative;
    z-index: 5; /* Barın ve yansımanın üstünde */
    animation: neonTurnOn 1.5s forwards;
    filter: brightness(1.1) contrast(1.15);
}

/* --- Pencere Işığı --- */
.gt-loader__window-glow {
    position: absolute;
    top: 48%; left: 45%; width: 20%; height: 20%;
    background: radial-gradient(circle, rgba(255, 200, 100, 0.4) 0%, transparent 70%);
    z-index: 6; mix-blend-mode: screen;
    animation: interiorPulse 3s ease-in-out infinite;
}

/* --- Duman --- */
.gt-loader__steam-box {
    position: absolute; top: 32%; left: 54%; width: 40px; height: 40px; z-index: 4; pointer-events: none;
}
.steam-particle {
    position: absolute; bottom: 0; left: 50%; width: 6px; height: 6px;
    background: rgba(255, 255, 255, 0.3); border-radius: 50%; filter: blur(4px);
    opacity: 0; animation: steamRise 3.5s infinite ease-out;
}
.s1 { animation-delay: 0s; transform: scale(1); }
.s2 { animation-delay: 1.5s; transform: scale(1.3); left: 30%; }
.s3 { animation-delay: 2.5s; transform: scale(0.8); left: 70%; }

/* --- STATUS BAR (ORTADA KONUMLANDIRMA) --- */
.gt-loader__status {
    /* Absolute ile karavanın tam altına çiviliyoruz */
    position: absolute;
    top: 100%; /* Görselin bittiği yer */
    left: 50%;
    transform: translateX(-50%);
    
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 4; /* Yansımanın üstünde, karavanın altında */
    
    padding-top: 10px; /* Görsel ile bar arası boşluk */
}

.gt-loader__track {
    width: 140px;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.gt-loader__bar {
    position: absolute; top: 0; left: 0; height: 100%; width: 0%;
    background: #EA580C;
    box-shadow: 0 0 8px #EA580C, 0 0 16px rgba(234, 88, 12, 0.6);
    animation: loadProgress 1.2s ease-in-out infinite;
}

/* --- YANSIMA (AŞAĞI İTİLDİ) --- */
.gt-loader__reflection {
    position: absolute;
    /* Bar için yer açmak adına 115% yaptık */
    top: 115%; 
    left: 0;
    width: 100%;
    height: 60%;
    transform: scaleY(-1); 
    opacity: 0.3; 
    z-index: 1;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 80%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 80%);
    filter: blur(2px);
}
.reflection-truck { animation: neonTurnOn 1.5s forwards; }


/* --- Keyframes --- */
@keyframes gentleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes steamRise {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    40% { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(-40px) scale(2) translateX(6px); }
}
@keyframes spotPulse {
    0% { opacity: 0.4; transform: rotateX(60deg) scale(1); }
    100% { opacity: 0.6; transform: rotateX(60deg) scale(1.05); }
}
@keyframes loadProgress {
    0% { left: 0; width: 0%; }
    50% { left: 0; width: 60%; } 
    100% { left: 100%; width: 100%; }
}
@keyframes neonTurnOn {
    0% { opacity: 0; filter: brightness(0); }
    10% { opacity: 0.5; filter: brightness(0.5); }
    15% { opacity: 0.1; filter: brightness(0.1); }
    20% { opacity: 1; filter: brightness(1.2) drop-shadow(0 0 20px rgba(234, 88, 12, 0.4)); }
    100% { opacity: 1; filter: brightness(1.05) drop-shadow(0 0 25px rgba(234, 88, 12, 0.3)); }
}
@keyframes interiorPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* Mobil */
@media screen and (max-width: 576px) {
    .gt-loader__truck-wrapper { width: 200px; }
    .gt-loader__track { width: 120px; }
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1120px;
  margin-inline: 1.5rem;
}

.main {
  overflow: hidden; /* For animation */
}

/*=============== HEADER & NAV ===============*/
.header{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: var(--navy-blue);       
  z-index: var(--z-fixed);
}

.nav{
  position: relative;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*flex-wrap: nowrap;     burası   */
}

/* =========================== BURASI NAV LOGO START =========================== */

.nav__logo {
  display: flex;
  align-items: center;
  max-height: 80px;
}

.nav__logo img {
  width: 100%;
  max-width: 150px;
  padding-bottom: 0.3rem;
  height: auto;
  object-fit: contain;
}

/* Navigation for mobile devices */
@media screen and (max-width: 1025px)
{
  .nav{
    height: calc(var(--header-height) + 1rem);
    column-gap: 3rem;                                    /* NAV DÜZENLEMELERİ LOGO LİNK ARALARINI AÇ   */ 
  }

  .nav__menu{
    position: fixed;
    top: -100%;
    left: 0;
    background-color: var(--body-color);
    width: 100%;
    box-shadow: 0 1px 16px hsla(210, 55%, 24%, .1);
    padding-block: 3.5rem 2rem;
    display: flex;
    flex-direction: column;
    row-gap: 2.5rem;
    transition: top .4s;
  }
    .nav__logo{
      height: calc(var(--header-height) + 4rem);
    }
    .nav__logo img{
    max-width: 110px;
    width: auto;        /* oranı koru                           */
  }

}

/* 2) Masaüstü 1025 px ve üzeri */
@media screen and (min-width: 1025px){
  .nav__toggle,
  .nav__close{ display:none; }

  .nav__menu{
    width: 100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
}

/* Navigation for mobile devices */
@media screen and (max-width: 376px)
{
  .nav{
    height: calc(var(--header-height)); 
  }
    .nav__logo img{
    max-width: 90px;   /*  ← sizin  <1023  kuralını taşıdık   */
    width: auto;        /* oranı koru                           */
  }
}


/* =========================== BURASI NAV LOGO END =========================== */

.nav__toggle,
.nav__close{
  display: inline-flex;
  font-size: 1.25rem;
  color: var(--title-color);
  cursor: pointer;
}


.nav__list{
  display: flex;
  flex-direction: column;
  text-align: center;
  row-gap: 2rem;
}

.nav__link{
  color: var(--title-color);
  transition: color .3s;
}

/* .nav__link:hover{
  color: #FFECCF;
} */

/* ================================
   NAV LINK & ACTIVE UNDERLINE
   ================================ */
.nav__link {
  position: relative;
  color: var(--title-color);    /* Metin rengi hep turuncu kalsın */
  transition: color .3s ease;
}

/* Alt çizgi için ::after pseudosu */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.2rem;              /* Metin ile çizgi arasındaki mesafe */
  width: 0;
  height: 2px;
  background-color: var(--title-color);
  transition: none;
}

/* Hover’da da çizgi gelsin isterseniz ekleyin */
.nav__link:hover::after,
.nav__link.active-link::after {
  width: 100%;
}

.nav__buttons{
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: .75rem;
}

.nav__button-link,
.nav__button-ghost{
  display: inline-block;
  color: var(--title-color);
}

.nav__button-ghost{
  background-color: hsla(0, 0, 100%, .3);
  padding: 1rem 2.5rem;
  border: 2px solid var(--title-color);
  border-radius: .75rem;
}

.nav__close{
  position: absolute;
  top: 1rem;
  right: 1.5rem;

}

/* Show menu */
.show-menu{
  background-color: var(--navy-blue);
  top: 0;
}

/* Change background header */

.bg-header{
  box-shadow: 0 1px 16px hsla(210, 55%, 24%, .12);
}

/*=============== HOME ===============*/
.home{
  position: relative;
}

.home__container{
  padding-top: 8rem;
  height: 100vh;
}

.home__content{
  position: relative;
  z-index: 2;
}

.home__data{
  display: grid;
  row-gap: .5rem;
}

.home__subtitle{
  font-size: var(--small-font-size);
  color: var(--title-color);
  letter-spacing: 3px;
}

.home__title{
  font-size: var(--biggest-font-size);
  font-family: var(--second-font);
  color: #FFECCF;
}

.home__description{
  margin-bottom: 1.1rem;
  color: #C7C4D6;
}


.home__button {
   display: inline-flex;           /* İkon eklenirse de hizalama kolay olsun */
  align-items: center;
  justify-content: center;

  background: var(--gradient-color);
  color: var(--white-color);

  padding: 1rem 2rem;             /* .about__button ile aynı padding */
  border-radius: 0.75rem; 


  box-shadow: 0 24px 32px hsla(210, 54%, 24%, .3);
  font-weight: var(--font-medium);

  max-width: 280px;               /* Çok uzamasın */
  white-space: nowrap;            /* Satır kırma olmasın */
  transition: transform 0.3s ease, background 0.3s ease;
}

.home__button:hover {
  transform: translateY(-3px);
  background: linear-gradient(90deg, hsl(21, 90%, 40%), hsl(25, 95%, 45%));
}

.home__button-icon {
  font-size: 1.2rem;
  margin-left: .75rem;
  vertical-align: middle;
}


                                                      /*  BURADAYIM */
.home__images .home__img-1{
  position: absolute;
  bottom: 2rem;
  left: 47rem;
  width: 34%;
}

.home__images .home__img-3{
  position: absolute;
  width: 16%;
  bottom: 2rem;
  left: 70rem;
}

/* =================================================================== BURALARLA OYNA 10/05/2025  GİRİŞ KISMI ANİMASYON KARAVAN / İNSANLAR   ====================*/

/* ── Tablet (1024px altı, 768px üzeri) ── */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .home__images .home__img-1 {
    left: 63%;
    width: 55%;                    /* biraz daha genişletildi */
    transform: translateX(-50%) scale(0.9);
    bottom: 0.5rem;                /* biraz daha yukarı */
  }
  .home__images .home__img-3 {
    left: 88%;                     /* karavanın hemen önünde */
    width: 30%;                    /* makina karavandan küçük */
    transform: translateX(-52%) scale(0.9);
    bottom: 0.6rem;                /* karavanın önü hizasında */
  }
}

/* ── Küçük tablet / büyük telefon (768px altı, 480px üzeri) ── */
@media screen and (max-width: 768px) and (min-width: 481px) {
  .home__images .home__img-1 {
    left: 50%;   /* 50 */
    width: 65%;
    transform: translateX(-50%) scale(0.85);
    bottom: -0.9rem;
  }
  .home__images .home__img-3 {
    left: 85%;   /* 65 */
    width: 30%;
    transform: translateX(-65%) scale(0.85);
  }
}

@media (max-width: 576px) {
  .home__button{
    padding: .7rem 1.25rem;   /* Yükseklik & genişlik ↓ */
    font-size: .9rem;         /* Varsayılan font-size 1rem ise %10 kadar ↓ */
    max-width: 230px;         /* İsteğe göre daha da küçültebilirsiniz */
  }

  .home__button-icon{
    font-size: 1rem;          /* İkonu da orantılı küçült */
    margin-left: .5rem;       /* Boşluğu biraz daralt */
  }
}

/* ── Mobil (480px altı) ── */
@media screen and (max-width: 480px) {
  
  .home__images .home__img-1 {
    left: 40%;
    width: 90%;
    transform: translateX(-50%) scale(0.75);
    /* biraz daha yukarıya çekebilirsiniz */
    bottom: -0.9rem;  
  }
  .home__images .home__img-3 {
    left: 81%;
    width: 45%;
    transform: translateX(-60%) scale(0.75);
    bottom: 0.5rem;
  }
}

/* ── Mobil (390px altı) ── */
@media screen and (max-width: 390px) {
  .home__container {
    padding-top: 5rem;
  }
  .home__images .home__img-1 {
    left: 40%;
    width: 90%;
    transform: translateX(-50%) scale(0.75);
    /* biraz daha yukarıya çekebilirsiniz */
    bottom: -2.9rem;  
  }
  .home__images .home__img-3 {
    left: 83%;
    width: 45%;
    transform: translateX(-60%) scale(0.75);
    bottom: -0.9rem;
  }
}

.home__bird-1,
.home__bird-2{
  position: absolute;
  width: 60px;
}
/*========================================================  MOBİLDE ALTTAKI KUŞ U KALDIRDIK  =============================*/
.home__bird-1{
  display: none;
  bottom: -6rem;
  rotate: -30deg;
}

.home__bird-2{
  top: 4.5rem;
  right: 0;
  rotate: -15deg;
}

.home__images{
  z-index: 1;
}

.home__images img{
  position: absolute;
  max-width: initial;
  width: 600px;
  left: -7rem;
  bottom: 0;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 305px){
  .container{
    margin-inline: 1rem;
  }

  .home__title{
    font-size: 2rem;
  }
}

/* For taller devices */
@media screen and (min-width : 376px) and (min-height : 800px){
  .home__container{
    padding-top: 8rem;
  }
  .home__images img{
    width: 700px;
    left: -12rem;
  }
}


/* For medium devices */
@media screen and (min-width: 480px){
  .home__content{
    max-width: 305px;
  }

  .home__bird-2{
    right: -3rem;
  }

  .home__images img{
    width: initial;
    left: 0;
  }
}
/*   ========================================================                         BURA  1025                        *      /
/* For large devices */
@media screen and (min-width: 1025px){
  .nav{
    height: calc(var(--header-height) + 2rem);
    column-gap: 3rem;                                    /* NAV DÜZENLEMELERİ LOGO LİNK ARALARINI AÇ   */ 
  }

  .nav__toggle,
  .nav__close{
    display: none;
  }

  .nav__menu{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav__list{
    flex-direction: row;
    column-gap: 3rem;
  }
  .nav__buttons{
    flex-direction: row;
    column-gap: 3rem;
  }
  .home__content{
    max-width: 550px;
  }

  .home__data{
    row-gap: 1rem;
  }
  .home__subtitle{
    font-size: var(--normal-font-size);
  }
  .home__description{
    margin-bottom: 3rem;
  }

}

@media screen and (min-width: 1120px){
  .container{
    margin-inline: auto;
  }
}

@media screen and (min-width: 1300px){
  .home__container{
    height: 950px;
    padding-top: 10rem;
  }
  .home__bird-1,
  .home__bird-2{
    width: 80px;
  }
  .home__bird-1{
    bottom: -7rem;
    left: -7rem;
  }
  .home__bird-2{
    top: 0;
    right: -6rem;
  }
  .home__images img{
    bottom: -3rem;
  }

  ::-webkit-scrollbar{
    width: .6rem;
    border-radius: .5rem;
    background-color: hsl(220, 24%, 15%);
  }
  ::-webkit-scrollbar-thumb{
    border-radius: .5rem;
    background-color: hsl(220, 24%, 25%);
  }
}

/* For 2K resolutions (2048 x 1152) */

@media screen and (min-width: 2048px){
  .container{
    max-width: 1300px;
  }

  .home__container{
    height: 1200px;
    padding-top: 15rem;
  }  
}

/*=============== SERVICES ===============*/
.services {
  padding: 6rem 0;
  background: var(--body-color2);
  position: relative;
  overflow: hidden;
}

/* Small decorative shapes */
.services::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  background: var(--gradient-color);
  border-radius: 50%;
  opacity: 0.1;
  top: -50px;
  left: -50px;
}

.services::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: var(--gradient-color);
  border-radius: 50%;
  opacity: 0.1;
  bottom: -50px;
  right: -50px;
}

.services::before,
.services::after {
  animation: move 6s infinite alternate;
}

@keyframes move {
  from {
    transform: translateX(0) translateY(0);
  }
  to {
    transform: translateX(20px) translateY(-20px);
  }
}


.services__container {
  text-align: center;
}

.services__title {
  font-size: var(--biggest-font-size);
  font-family: var(--second-font);
  color: var(--title-color);
  margin-bottom: 1rem;
}

.services__description {
  font-size: var(--normal-font-size);
  line-height: 1.6;
  color: var(--text-color);
  margin-bottom: 3rem;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.service__item {
  background: var(--white-color);
  border-radius: .75rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 8px 16px hsla(210, 54%, 24%, .1);
  transition: transform .3s, box-shadow .3s;
}

.service__item:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 24px hsla(210, 54%, 24%, .2);
}

.service__icon {
  display: inline-block;
  width: 78px;
  height: 78px;
/*
  margin-bottom: 1rem;
  */
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast; /* png keskinliği */
  transition: transform .25s ease;
}

.service__item:hover .service__icon{
  transform: translateY(-2px) scale(1.04);
}

.service__title {
  font-size: 1.5rem;
  color: var(--navy-blue);
  margin-bottom: .5rem;
}

.service__text {
  font-size: var(--small-font-size);
  color: var(--paragraf-color);
  line-height: 1.8;
}

@media screen and (max-width: 768px) {
  .services__grid {
    grid-template-columns: 1fr;
  }
}

/*=============== ABOUT ===============*/
.about {
  padding: 6rem 1.5rem;
  background: var(--body-color);
  position: relative;
  overflow: hidden;
}

.about__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
}

.about__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about__title {
  font-size: var(--biggest-font-size);
  font-family: var(--second-font);
  color: var(--title-color);
}

.about__description {
  font-size: var(--normal-font-size);
  line-height: 1.6;
  color: var(--description-color);
}

.about__description span{
  color: var(--title-color);
  font-weight: bold;
}

.about__stats {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.3rem;
}

.about__stat {
  text-align: center;
  background: var(--white-color);
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 120px;
}

.about__stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.about__stat-icon {
  font-size: 2rem;
  color: var(--title-color);
  margin-bottom: 0.5rem;
}

.about__stat-number {
  font-size: 1.8rem;
  font-weight: var(--font-semi-bold);
  color: var(--navy-blue);
  margin-bottom: 0.5rem;
}

.about__stat-text {
  font-size: 0.9rem;
  color: var(--paragraf-color);
}

.about__button {
  display: inline-flex;            /* İçerik genişlerse kendi boyutunda kalsın */
  align-items: center;             /* İkon + yazı ortalanır */
  justify-content: center;
  background: var(--gradient-color);
  color: var(--white-color);
  padding: 1rem 2rem;              /* Home butonuyla aynı padding */
  border-radius: 0.75rem;
  box-shadow: 0 24px 32px hsla(210, 54%, 24%, .3);
  font-weight: var(--font-medium);
  max-width: 280px;                /* İstediğin maksimum genişlik */
  white-space: nowrap;             /* Satır kırma olmasın */
  transition: transform 0.3s ease, background 0.3s ease;
}

.about__button:hover {
  transform: translateY(-3px);
  background: linear-gradient(
    90deg,
    hsl(21, 90%, 40%),
    hsl(25, 95%, 45%)
  );
}

.about__button-icon {
  font-size: 1.2rem;
  margin-left: 0.60rem;   /* Metinden sonra boşluk */
  vertical-align: middle;
}

/* Layer Overlap Image Styling */
.about__image-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about__main-img {
  width: 100%;
  border-radius: 1.5rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  z-index: 2;
  position: relative;
  transform: scale(1.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.about__image-box {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 120%;
  height: 120%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2rem;
  z-index: 1;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 768px) {
  .about__container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about__main-img {
    width: 100%;
  }


  .about__image-box {
    display: none;
  }
}

/*  SONRADAN  */

/* 504px ve altındaki cihazlar için */
/*==================== BİZ KİMİZ? RESPONSIVE (≤500px) ====================*/
@media screen and (max-width: 500px) {
  /* Kartları 2 sütunlu grid yap, otomatik sarmanı sağlar */
  .about__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem;      /* dikey ve yatay boşluk */
    justify-items: center; /* kartları sütun içinde ortala */
    margin-bottom: 1rem;
  }

  /* Kartların genişlik sınırlamasını kaldır, grid hücresine uyumlu olsun */
  .about__stat {
    width: 100%;
    max-width: none;
  }

  /* 3. kartı tam satır ve ortalamak için */
  .about__stat:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 60%;       /* istenen büyüklükte ayarla */
  }

  /* İçerik ve buton ortalaması, alt boşluk */
  .about__content {
    text-align: center;
  }
  .about__button {
    margin: 2rem auto 0;
  }

  /* Resim alt boşluğu */
  .about__image-container {
    margin-top: 1.5rem;
  }
  .about__main-img {
    width: 100%;
    height: auto;
  }
}



/*=============== GALLERY ===============*/
.gallery {
  position: relative;
  background: var(--body-color2); 
  padding: 6rem 1.5rem;
  overflow: hidden;
}

.gallery__decorative::before,
.gallery__decorative::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--gradient-color);
  opacity: 0.1;
  animation: move 9s infinite alternate;
}

.gallery__decorative::before {
  width: 180px;
  height: 180px;
  top: 10%;
  right: -60px;
}

.gallery__decorative::after {
  width: 140px;
  height: 140px;
  bottom: 5%;
  left: -40px;
  animation-delay: 2s;
}

.gallery__container {
  text-align: center;
}

.gallery__title {
  font-size: var(--biggest-font-size);
  font-family: var(--second-font); 
  color: var(--title-color); 
  margin-bottom: 1rem;
}

.gallery__description {
  font-size: var(--normal-font-size);
  color: var(--text-color); 
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: 4rem;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* === MOBİL ÖNCELİKLİ KART TASARIMI === */
.gallery__item {
  position: relative;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 8px 16px hsla(210, 54%, 24%, .1);
  /* Geniş ekran için geçişler daha sonra eklenecek */
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* MOBİLDE HER ZAMAN GÖRÜNÜR OLAN KATMAN */
.gallery__item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background: linear-gradient(to top, hsla(240, 25%, 5%, 0.85) 10%, transparent 100%);
  /* Varsayılan olarak opaklık 1, yani görünür */
  opacity: 1;
}

/* MOBİLDE HER ZAMAN GÖRÜNÜR OLAN BAŞLIK */
.gallery__item-title {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  z-index: 2;
  color: var(--title-color); 
  font-size: 1.2rem;
  font-weight: var(--font-semi-bold);
  text-align: left;
  /* Varsayılan olarak görünür ve yerinde */
  opacity: 1;
  transform: translateY(0);
}

/* === SADECE GENİŞ EKRANLAR İÇİN HOVER EFEKTİ === */
/* Bu kurallar, 1024px ve üzeri ekran genişliğine sahip cihazlarda geçerli olur */
@media (min-width: 1024px) {
  .gallery__item {
    cursor: pointer;
    /* Hover efektlerinin akıcı olması için transition'ları buraya taşıyoruz */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }
  .gallery__item:hover {
    transform: translateY(-10px); 
    box-shadow: 0 12px 24px hsla(210, 54%, 24%, .2);
  }

  .gallery__img {
    transition: transform 0.4s ease;
  }
  .gallery__item:hover .gallery__img {
    transform: scale(1.05);
  }
  
  /* Geniş ekranda varsayılan olarak katmanı GİZLE */
  .gallery__item::after {
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  /* Geniş ekranda üzerine gelince GÖSTER */
  .gallery__item:hover::after {
    opacity: 1;
  }
  
  /* Geniş ekranda varsayılan olarak başlığı GİZLE ve aşağı it */
  .gallery__item-title {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: 0.1s;
  }
  /* Geniş ekranda üzerine gelince GÖSTER ve yerine oturt */
  .gallery__item:hover .gallery__item-title {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Grid Ayarlamaları */
@media screen and (max-width: 768px) {
  .gallery {
    padding: 4rem 1rem;
  }
  .gallery__title {
    font-size: 2rem;
  }
  .gallery__description {
    font-size: var(--small-font-size);
    margin-bottom: 3rem;
  }
  .gallery__grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }
}

/*=============== CONTACT ===============*/

.contact{
  padding:6rem 1.5rem;
  background:var(--body-color);
  overflow:hidden;
}

.contact__container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}
@media(max-width:992px){
  .contact__container{grid-template-columns:1fr;}
}

/* ---- SOL BLOK ---- */
.contact__content{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.contact__title{
  font-family:var(--second-font);
  font-size:var(--biggest-font-size);
  color:var(--title-color);
}
.contact__text{
  color:var(--description-color);
  line-height:1.6;
}
.contact__list{
  display:flex;
  flex-direction:column;
  gap:1rem;
  font-size:var(--normal-font-size);
  color:var(--white-color);
}
.contact__list li{
  display:flex;
  align-items:center;
}
.contact__list i{
  font-size:1.25rem;
  color:var(--title-color);
  margin-right:.6rem;
}
.contact__list a{color:inherit;transition:color .3s;}
.contact__list a:hover{color:var(--title-color);}

/* Sosyal medya ikonları */
.contact__social{
  margin-top:1.5rem;
  display:flex;
  gap:1rem;
}
.contact__social a{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  font-size:1.35rem;       /* Font-size anchor’dan ion-icon’a miras kalır */
  color:#fff;
  background:var(--gradient-color);
  transition:transform .3s;
}
.contact__social a:hover{
  transform:translateY(-4px);
}

/* ---- FORM KARTI ---- */
.contact__form{
  background:var(--white-color);
  border-radius:.75rem;
  padding:2.5rem;
  box-shadow:0 8px 16px hsla(210,54%,24%,.12);
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.contact__input-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
}
@media(max-width:560px){
  .contact__input-grid{grid-template-columns:1fr;}
}
.contact__form input,
.contact__form textarea{
  width:100%;
  padding:1rem 1.25rem;
  background:hsl(0 0% 98%);
  border:2px solid hsl(0 0% 90%);
  border-radius:.65rem;
  font-family:var(--body-font);
  font-size:var(--small-font-size);
  resize:none;
  transition:border-color .3s,box-shadow .3s;
}
.contact__form input:focus,
.contact__form textarea:focus{
  outline:none;
  border-color:hsl(25 95% 53%);
  box-shadow:0 0 0 3px hsla(25,95%,53%,.25);
}

/* Gönder butonu  →  About butonuyla tamamen aynı görünüm */
.contact__button{
  border:none;
  outline:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:var(--gradient-color);
  color:var(--white-color);

  padding:1rem 2rem;
  border-radius:.75rem;
  box-shadow:0 24px 32px hsla(210,54%,24%,.30);

  font-weight:var(--font-medium);
  font-family: var(--body-fonts);
  max-width:280px;          /* İsterseniz kaldırabilirsiniz */
  white-space:nowrap;

  transition:transform .3s ease, background .3s ease;
}

.contact__button:hover{
  transform:translateY(-3px);
  background:linear-gradient(
              90deg,
              hsl(21,90%,40%),
              hsl(25,95%,45%)
            );
}

.contact__button i{
  font-size:1.2rem;
  margin-left:.60rem;   /* About butonundaki ikon-boşluk */
  vertical-align:middle;
}


/*================  FOOTER  ==================*/

.footer {
  overflow: hidden;
  background: var(--body-color);
  color: #495057;
}

.footer-top {
  padding: 4rem 2rem;
}

.footer-brand .logo {
  font-size: 2rem;
  font-weight: bold;
  color: var(--title-color);
  margin-bottom: 1rem;
}

.footer-text {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--white-color);
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.social-list {
  display: flex;
  gap: 0.75rem;
}

.social-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  font-size: 1.5rem;
  color: white;
  background: var(--gradient-color);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.social-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.footer-list {
  margin-top: 2rem;
}

.footer-list-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--title-color);
  margin-bottom: 1rem;
}

.footer-list-item {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--description-color);
}

.footer-bottom {
  background: #0d0b1e;
  text-align: center;
  padding: 1rem 0;
}

.copyright-text{
  color: var(--white-color);
}

.copyright-link span{
  color: var(--title-color);   /*  BURAYI KONTROL ET RENGİ GÖRMÜYOR */
  text-decoration: none;
  font-weight: 500;
}


/* Media Queries */
@media (min-width: 768px) {
  .footer-top .container {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 2rem;
  }

  .social-list {
    margin-top: 1rem;
  }
}

@media (min-width: 992px) {
  .footer-top {
    padding: 7rem 3rem;
  }

  .footer-brand .logo {
    font-size: 2.5rem;
  }

  .footer-list-title {
    font-size: 1.5rem;
  }
}


/* =========================================== */
/*              REFERANSLAR (MARQUEE)         */
/* =========================================== */

.references {
  position: relative;
  padding: 6rem 1.5rem;
  background: linear-gradient(180deg, #FEFAF6 0%, #FFF 100%);
  overflow: hidden;
}

/* Arka plan süslemeleri */
.references::before,
.references::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--gradient-color);
  opacity: .08;
  animation: move 8s infinite alternate;
}
.references::before { width: 180px; height: 180px; top: 10%; right: -60px; }
.references::after  { width: 140px; height: 140px; bottom: 6%; left: -40px; }

.references__container { text-align: center; }

.references .section__title {
  font-size: var(--biggest-font-size);
  font-family: var(--second-font);
  color: var(--title-color);
  margin-bottom: 1rem;
}

.references .section__subtitle {
  max-width: 600px;
  margin: 0 auto 3rem;
  font-size: var(--normal-font-size);
  line-height: 1.6;
  color: var(--text-color);
}

/* --- MARQUEE (KAYAN ŞERİT) YAPISI --- */

.marquee-container {
  width: 100%;
  overflow: hidden; /* Taşanları gizle */
  margin-block: 2rem;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); /* Kenarları yumuşat */
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
  display: flex;
  gap: 2rem; /* Logolar arası boşluk */
  width: max-content; /* KRİTİK: İçerik kadar genişle (Asla alt satıra inme) */
  will-change: transform; /* GPU Hızlandırma */
}

/* LOGO KUTUSU */
.marquee-item {
  flex: 0 0 200px; /* Sabit Genişlik */
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}

.marquee-item img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .7;
  transition: filter .3s, opacity .3s;
}

/* HOVER EFEKTLERİ */
.marquee-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
  z-index: 10; /* Öne çıkar */
}
.marquee-item:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* Durdurma Efekti: Mouse üstüne gelince akış dursun */
.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

/* --- ANİMASYONLAR --- */

/* Sağa Doğru Akış (Üst Şerit) */
.marquee--top .marquee-track {
  animation: scroll-right 50s linear infinite;
}

/* Sola Doğru Akış (Alt Şerit) */
.marquee--bottom .marquee-track {
  animation: scroll-left 50s linear infinite;
}

@keyframes scroll-right {
  0%   { transform: translateX(-50%); } /* Yarıdan başla (2. set) */
  100% { transform: translateX(0%); }   /* Başa dön */
}

@keyframes scroll-left {
  0%   { transform: translateX(0%); }   /* Baştan başla */
  100% { transform: translateX(-50%); } /* Yarıya git */
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .marquee-item { flex: 0 0 160px; height: 100px; }
  .marquee-track { gap: 1.5rem; }
  .references { padding: 4rem 1rem; }
}

@media (max-width: 480px) {
  .marquee-item { flex: 0 0 130px; height: 90px; }
  .marquee-track { gap: 1rem; }
}

/* =========================================== */
/*         İLETİŞİM FORMU SONUÇ MESAJI         */
/* =========================================== */

.form-message-box {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;       /* .contact__button ile aynı köşe yumuşaklığı */
  font-family: var(--body-font);
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  
  display: none;                /* Başlangıçta gizli JS ile açılacak */
  align-items: center;
  gap: 0.75rem;
  
  /* Sitenin genel animasyon stiline uygun giriş efekti */
  animation: messageFadeIn 0.4s ease forwards;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* BAŞARI DURUMU (Yeşil - Doğal Tonlar) */
.form-message-box.success {
  background-color: #ecfdf5;    /* Çok açık nane yeşili */
  color: #047857;               /* Koyu yeşil metin */
  border: 1px solid #d1fae5;    /* İnce çerçeve */
}

/* HATA DURUMU (Kırmızı - Uyarı Tonları) */
.form-message-box.error {
  background-color: #fef2f2;    /* Çok açık kırmızı */
  color: #b91c1c;               /* Koyu kırmızı metin */
  border: 1px solid #fecaca;
}

/* İKON AYARLARI */
.form-message-box i {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
}

/* GİRİŞ ANİMASYONU */
@keyframes messageFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* MOBİL UYUM */
@media (max-width: 576px) {
  .form-message-box {
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
  }
}

/* ========================================= */
/* DİL DEĞİŞTİRME BUTONU (SADE & ÇERÇEVESİZ) */
/* ========================================= */
.lang-btn {
    background: transparent;       /* Arka plan yok */
    border: none;                  /* Çerçeve YOK */
    color: #fff;                   /* Yazı rengi Beyaz */
    font-family: 'Poppins', sans-serif;
    font-weight: 700;              /* Kalın Font (Bold) */
    font-size: 1rem;               /* Diğer linklerle uyumlu boyut */
    padding: 0 10px;               /* Sağdan soldan hafif boşluk */
    cursor: pointer;
    transition: color 0.3s ease;   /* Sadece renk geçişi */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Hover (Üzerine Gelince) */
.lang-btn:hover {
    color: var(--title-color);     /* Diğer linklerin turuncu rengini alır */
    background: transparent;       /* Arka plan değişmesin */
}