@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');

* {
    font-family: 'Oswald', sans-serif;
}   

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

#slide1{
    background-image: url(imgs/slide/slide1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#slide2{
    background-image: url(imgs/slide/slide2.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#slide3{
    background-image: url(imgs/slide/slide3.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.glide__arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 10;
}

.glide__arrow {
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: white;
    text-shadow: 0 0.25em 0.25em rgba(0,0,0,0.1);
    opacity: 1;
    cursor: pointer;
    transition: opacity 150ms ease, border 300ms ease-in-out;
}

@media (max-width: 768px) {
    .glide__arrow {
        display: none !important;
    }
}

.glide__arrow--left {
    left: 2em;
}

.glide__arrow--right {
    right: 2em;
}

.glide__arrow--disabled {
    opacity: 0.33;
}

.glide__arrow i {
    font-size: 3rem;
    color: white;
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
}

.glide__bullets {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.glide__bullet {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.3s;
}

.glide__bullet--active {
    background-color: white;
}

/* Menü animasyonları */
.category-btn i {
    transition: transform 0.3s ease;
}

.menu-item {
    background: white;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.item-content {
    transition: all 0.3s ease;
}

.menu-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Nav height kadar scroll margin ekleyelim */
section[id],
header[id],
footer[id] {
    scroll-margin-top: 96px; /* Nav yüksekliği */
}

.anim1{
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.anim1.animasyon1{
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s ease;
}

.anim2 {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s ease;
}

.anim2.animasyon2{
    opacity: 1;
    transform: scale(1);
    transition: all 0.5s ease;
}
/* --- SLIDER GÖRSEL DÜZENİ (masaüstü) --- */
.glide img {
  width: 100%;              /* Enini koru */
  height: 70vh;             /* Ekran yüksekliğinin %70'i kadar olsun */
  object-fit: cover;        /* Görselin taşmasını engellemeden güzel şekilde kırpar */
  object-position: center;  /* Görsel ortalansın */
  display: block;
  margin: 0 auto;
  border-radius: 10px;      /* Kenarlarda çok hafif yumuşatma istersen */
}

/* --- SLIDER ALANI (isteğe bağlı) --- */
.glide {
  max-height: 70vh;         /* Slider alanı çok uzamasın */
  overflow: hidden;
}

/* --- TELEFON EKRANLARI (responsive düzen) --- */
@media (max-width: 768px) {
  .glide img {
    height: 45vh;           /* Mobilde daha az yüksek olsun */
    object-fit: cover;      /* Görseli taşmadan kırpar */
  }
}

<style>
.carousel-item img {
  width: 100%;
  height: 100vh;
  object-fit: contain;
  object-position: center 60%;
}

@media (max-width: 768px) {
  .carousel-item img {
    height: auto;
    object-fit: contain;
    object-position: center center;
    padding-top: 50px;
  }
}
</style>

/* Slider Görselini Aşağı Al ve Orantılı Hale Getir */
.glide__slide img {
  width: 100%;
  height: 100vh;
  object-fit: contain; /* Resmi kırpmadan orantılar */
  object-position: center 65%; /* Görseli biraz aşağı kaydırır */
}

/* Mobil Görünüm */
@media (max-width: 768px) {
  .glide__slide img {
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    object-position: center center;
    margin-top: 70px; /* Logonun altına yer açar */
  }
}