body {
  margin: 0; /* Sayfanın dış kenar boşluklarını sıfırlar */
  padding: 0; /* Sayfanın iç kenar boşluklarını sıfırlar */
  font-family: 'Courier'; /* Yazı tipini Courier olarak ayarlar */
  height: 100vh; /* Yüksekliği tam ekran yapar */
  background: linear-gradient(
    180deg,
    #fff
  ); /* Dikine degrade arka plan rengi */
  display: flex; /* Flexbox düzenini etkinleştirir */
  justify-content: flex-start; /* İçerikleri yatayda başlangıca hizalar */
  align-items: center; /* İçerikleri dikeyde ortalar */
  flex-direction: column; /* İçerikleri dikeyde hizalar */
  overflow-x: hidden; /* Yatayda taşmayı gizler */
  overflow-y: auto; /* Dikeyde taşma olursa kaydırma çubuğu ekler */
}

.center-icon {
  display: flex; /* Flexbox düzenini etkinleştirir */
  justify-content: center; /* İçeriği yatayda ortalar */
  align-items: center; /* İçeriği dikeyde ortalar */
  margin-top: 80px; /* Üstten 80px boşluk bırakır */
}

.center-icon img {
  width: 300px; /* Görselin genişliğini 300px yapar */
  height: auto; /* Görselin yüksekliğini orantılı olarak ayarlar */
}

.navbar-container {
  display: flex; /* Flexbox düzenini etkinleştirir */
  justify-content: center; /* İçeriği yatayda ortalar */
  width: 100%; /* Genişliği %100 yapar */
  margin-top: 20px; /* Üstten 20px boşluk bırakır */
}

.navbar {
  display: flex; /* Flexbox düzenini etkinleştirir */
  justify-content: center; /* İçeriği yatayda ortalar */
  background-color: #ffffff; /* Arka plan rengini beyaz yapar */
  padding: 10px; /* İçerik etrafına 10px boşluk ekler */
  position: sticky; /* Konumu yapışkan yapar (scroll yapıldığında sabit kalır) */
  align-items: center; /* İçeriği dikeyde ortalar */
  z-index: 10; /* Z-indeksini 10 yapar, diğer elementlerin üstünde kalır */
}

.nav-item {
  position: relative; /* Göreceli konumlandırma ayarlar */
}

.nav-link {
  padding: 15px 30px; /* İçerik etrafına 15px üst-alt, 30px sağ-sol boşluk ekler */
  text-decoration: none; /* Alt çizgiyi kaldırır */
  font-size: 22px; /* Yazı boyutunu 22px yapar */
  font-style: bold; /* Yazı stilini kalın yapar (hatalı, 'font-weight' kullanılmalı) */
  color: #002147; /* Yazı rengini koyu mavi yapar */
  position: relative; /* Göreceli konumlandırma ayarlar */
}

.nav-link:hover::after {
  content: ''; /* İçerik eklemeden bir sonrakini eklemeye izin verir */
  position: absolute; /* Mutlak konumlandırma ayarlar */
  left: 0; /* Sol tarafa hizalar */
  bottom: 0; /* Alt tarafa hizalar */
  height: 3px; /* Yüksekliği 3px yapar */
  width: 100%; /* Genişliği %100 yapar */
  background-color: #002147; /* Arka plan rengini koyu mavi yapar */
}

#shopNavItem {
  border-radius: 50%; /* Köşeleri yuvarlak yapar */
  overflow: visible; /* Taşmayı görünür yapar */
  transition: border-radius 0.3s; /* Köşe yuvarlama geçişi ekler */
}

#shopNavItem .dropdown {
  display: none; /* Görünmez yapar */
  position: absolute; /* Mutlak konumlandırma ayarlar */
  top: 50px; /* Üstten 50px boşluk bırakır */
  left: 10px; /* Soldan 10px boşluk bırakır */
  background-color: #ffffff; /* Arka plan rengini beyaz yapar */
  border: 1px solid #002147; /* 1px kalınlığında koyu mavi kenarlık ekler */
  z-index: 1000; /* Z-indeksini 1000 yapar, diğer elementlerin üstünde kalır */
  width: auto; /* Genişliği içeriğe göre ayarlar */
}

.dropdown a {
  display: block; /* Blok seviyesinde görünür yapar */
  padding: 10px; /* İçerik etrafına 10px boşluk ekler */
  color: #002147; /* Yazı rengini koyu mavi yapar */
  text-decoration: none; /* Alt çizgiyi kaldırır */
}

.dropdown a:hover {
  background-color: #cccccc; /* Üzerine gelindiğinde arka plan rengini gri yapar */
}

.indicator {
  height: 12px; /* Yüksekliği 12px yapar */
  width: 12px; /* Genişliği 12px yapar */
  background-color: #999; /* Arka plan rengini gri yapar */
  border-radius: 50%; /* Köşeleri yuvarlak yapar */
  margin: 0 5px; /* Sağ ve sol tarafa 5px boşluk bırakır */
  cursor: pointer; /* Fare imlecini işaretçi yapar */
}

.indicator.active {
  background-color: #333; /* Aktif olduğunda arka plan rengini koyu gri yapar */
}

.about-section {
  display: flex; /* Flexbox düzenini etkinleştirir */
  flex-direction: row; /* İçerikleri yatayda hizalar */
  justify-content: space-between; /* İçerikleri eşit boşlukla hizalar */
  align-items: flex-start; /* İçerikleri yukarıda hizalar */
  width: 100%; /* Genişliği %100 yapar */
  margin-top: 0; /* Üstten boşluk bırakmaz */
  padding: 20px; /* İçerik etrafına 20px boşluk ekler */
  background-color: #002147; /* Arka plan rengini koyu mavi yapar */
}

.about-left-column {
  width: 50%; /* Genişliği %50 yapar */
  height: auto; /* Yüksekliği içeriğe göre ayarlar */
  padding: 20px; /* İçerik etrafına 20px boşluk ekler */
  background-color: #455f7c; /* Arka plan rengini gri mavi yapar */
}

.about-right-column {
  width: 50%; /* Genişliği %50 yapar */
  padding: 20px; /* İçerik etrafına 20px boşluk ekler */
  height: auto; /* Yüksekliği içeriğe göre ayarlar */
  color: #ffffff; /* Yazı rengini beyaz yapar */
}

.about-right-column h1 {
  font-size: 36px; /* Yazı boyutunu 36px yapar */
  color: #ffffff; /* Yazı rengini beyaz yapar */
  margin-top: 10px; /* Üstten 10px boşluk bırakır */
}

.about-right-column p {
  font-size: 18px; /* Yazı boyutunu 18px yapar */
  color: #ffffff; /* Yazı rengini beyaz yapar */
  margin-bottom: 15px; /* Alttan 15px boşluk bırakır */
}
.pic-section {
  display: none;
}
.content-section {
  display: flex; /* Flexbox düzenini etkinleştirir */
  flex-direction: row; /* İçerikleri yatayda hizalar */
  justify-content: space-between; /* İçerikleri eşit boşlukla hizalar */
  align-items: flex-start; /* İçerikleri yukarıda hizalar */
  width: 100%; /* Genişliği %100 yapar */
  margin-top: 50px; /* Üstten 50px boşluk bırakır */
  padding: 20px; /* İçerik etrafına 20px boşluk ekler */
  background-color: #455f7c; /* Arka plan rengini gri mavi yapar */
}

.left-column {
  width: 50%; /* Genişliği %50 yapar */
  height: auto; /* Yüksekliği içeriğe göre ayarlar */
  padding: 14px; /* İçerik etrafına 14px boşluk ekler */
  color: #ffffff; /* Yazı rengini beyaz yapar */
  margin-left: 10px; /* Soldan 10px boşluk bırakır */
}

.left-column p {
  font-size: 15px; /* Yazı boyutunu 15px yapar */
  color: #ffffff; /* Yazı rengini beyaz yapar */
  background-color: #455f7c; /* Arka plan rengini gri mavi yapar */
  border-radius: [ln38]; /* Köşeleri yuvarlak yapar (hatalı, değer eksik) */
  font-style: bold; /* Yazı stilini kalın yapar (hatalı, 'font-weight' kullanılmalı) */
}

.right-column {
  width: 50%; /* Genişliği %50 yapar */
  padding: 14px; /* İçerik etrafına 14px boşluk ekler */
  height: 600px; /* Yüksekliği 600px yapar */
  color: #ffffff; /* Yazı rengini beyaz yapar */
  background-color: #455f7c; /* Arka plan rengini gri mavi yapar */
}

.left-column h1 {
  font-size: 36px; /* Yazı boyutunu 36px yapar */
  color: #ffffff; /* Yazı rengini beyaz yapar */
  font-family: 'Courier'; /* Yazı tipini Courier yapar */
}

.right-column p {
  font-size: 14px; /* Yazı boyutunu 14px yapar */
  color: #ffffff; /* Yazı rengini beyaz yapar */
  margin-bottom: 15px; /* Alttan 15px boşluk bırakır */
}

#learnMoreBtn {
  background-color: #002147; /* Arka plan rengini koyu mavi yapar */
  color: #ffffff; /* Yazı rengini beyaz yapar */
  padding: 10px 20px; /* İçerik etrafına 10px üst-alt, 20px sağ-sol boşluk ekler */
  border: none; /* Kenarlığı kaldırır */
  cursor: pointer; /* Fare imlecini işaretçi yapar */
  margin-top: 10px; /* Üstten 10px boşluk bırakır */
  font-size: 16px; /* Yazı boyutunu 16px yapar */
  border-radius: 5px; /* Köşeleri 5px yuvarlak yapar */
}

#learnMoreBtn:hover {
  background-color: #004080; /* Üzerine gelindiğinde arka plan rengini koyu mavi yapar */
}

.image-grid {
  display: grid; /* Grid düzenini etkinleştirir */
  grid-template-columns: repeat(2, 1fr); /* İki sütunlu grid yapar */
  gap: 5px; /* Grid öğeleri arasında 20px boşluk bırakır */
  margin-top: 0; /* Üstten boşluk bırakmaz */
  margin-bottom: 10px;
  margin-left: 10px; /* Soldan 100px boşluk bırakır */
}

.image-grid img {
  width: 100%; /* Genişliği %100 yapar */
  height: auto; /* Yüksekliği orantılı olarak ayarlar */
  transition: transform 0.3s ease; /* Transform geçişini 0.3 saniye yapar */
}

.image-grid img:hover {
  transform: scale(1.1); /* Üzerine gelindiğinde %10 büyütür */
}

.image2 {
  grid-column: 1; /* Grid sütununu 1 yapar */
  grid-row: 1; /* Grid satırını 1 yapar */
  margin-top: 0; /* Üstten boşluk bırakmaz */
  position: hidden; /* Konumunu gizler (hatalı, 'display: none' kullanılmalı) */
  margin-left: 0%; /* Soldan %50 boşluk bırakır */
  border-radius: 15px; /* Köşeleri 15px yuvarlak yapar */
  border: 5px solid #ffffff; /* 5px kalınlığında beyaz kenarlık ekler */
}

.image3 {
  grid-column: 1; /* Grid sütununu 1 yapar */
  grid-row: 1; /* Grid satırını 1 yapar */
  margin-top: 300px; /* Üstten boşluk bırakmaz */
  position: hidden; /* Konumu belirtir (hatalı, 'position: relative' veya 'absolute' olmalı) */
  margin-left: 0%; /* Soldan %50 boşluk bırakır */
  border-radius: 15px; /* Köşeleri 15px yuvarlak yapar */
  border: 5px solid #ffffff; /* 5px kalınlığında beyaz kenarlık ekler */
  overflow: hidden; /* Taşmayı gizler */
}

.image4 {
  grid-column: 2; /* Grid sütununu 2 yapar */
  grid-row: 1; /* Grid satırını 1 yapar */
  border-radius: 15px; /* Köşeleri 15px yuvarlak yapar */
  border: 5px solid #ffffff; /* 5px kalınlığında beyaz kenarlık ekler */
  margin-top: 50px; /* Üstten boşluk bırakmaz */
  align-items: center; /* Dikeyde ortalar */
  height: 100vh; /* Kapsayıcının yüksekliğini tam ekran yapar */
}

.marquee {
  display: flex; /* Flexbox düzenini etkinleştirir */
  overflow: hidden; /* Taşmayı gizler */
  background: linear-gradient(
    180deg,
    #002147,
    #feffff
  ); /* Dikine degrade arka plan rengi */
  color: #ed2726; /* Yazı rengini kırmızı yapar */
  font-size: 24px; /* Yazı boyutunu 24px yapar */
  line-height: 50px; /* Satır yüksekliğini 50px yapar */
  white-space: nowrap; /* Yazıyı tek satırda tutar */
  height: 50px; /* Yüksekliği 50px yapar */
  align-items: center; /* İçerikleri dikeyde ortalar */
  position: absolute; /* Sabit konumlandırma ayarlar */
  top: 0; /* Üstte hizalar */
  width: 100%; /* Genişliği %100 yapar */
}

.marquee p {
  display: inline-block; /* Satır içi blok seviyesi görünür yapar */
  animation: marquee 20s linear infinite; /* Marquee animasyonunu 20 saniye süresince lineer olarak sürekli tekrar eder */
  font-weight: bold; /* Yazı stilini kalın yapar */
  font-family: 'Courier'; /* Yazı tipini Courier yapar */
  background: linear-gradient(
    180deg,
    #644d4d,
    #ff0000
  ); /* Dikine degrade arka plan rengi */
  background-clip: text; /* Arka planı sadece metne uygular */
  color: transparent; /* Yazı rengini şeffaf yapar */
}

@keyframes marquee {
  0% {
    transform: translateX(100%); /* Başlangıçta sağdan %100 kaydırır */
  }
  100% {
    transform: translateX(-100%); /* Sonunda soldan %100 kaydırır */
  }
}

.color-section {
  width: 100%; /* Genişliği %100 yapar */
  padding: 20px; /* İçerik etrafına 20px boşluk ekler */
  text-align: center; /* Metni ortalar */
  margin-top: 20px; /* Üstten 20px boşluk bırakır */
  border: 2px solid #002147; /* 2px kalınlığında koyu mavi kenarlık ekler */
}

.center-colors {
  display: flex; /* Flexbox düzenini etkinleştirir */
  flex-wrap: wrap; /* İçerikleri sarar */
  justify-content: center; /* İçerikleri yatayda ortalar */
  width: 100%; /* Genişliği %100 yapar */
}

.hover-center {
  position: absolute; /* Mutlak konumlandırma ayarlar */
  top: 0; /* Üstte hizalar */
  left: 0; /* Solda hizalar */
  width: 100%; /* Genişliği %100 yapar */
  height: 100%; /* Yüksekliği %100 yapar */
  opacity: 0; /* Opaklığı sıfır yapar (görünmez) */
  transition: opacity 0.3s ease; /* Opaklık geçişini 0.3 saniye yapar */
}

.color-grid {
  display: flex; /* Flexbox düzenini etkinleştirir */
  flex-wrap: wrap; /* İçerikleri sarar */
  justify-content: center; /* İçerikleri yatayda ortalar */
  gap: 20px; /* Öğeler arasında 20px boşluk bırakır */
}

.color-item {
  position: relative; /* Göreceli konumlandırma ayarlar */
  width: 200px; /* Genişliği 200px yapar */
  height: 200px; /* Yüksekliği 200px yapar */
  overflow: hidden; /* Taşmayı gizler */
}

.color-item img {
  width: 100%; /* Genişliği %100 yapar */
  height: 100%; /* Yüksekliği %100 yapar */
  object-fit: cover; /* İçeriği kapsayacak şekilde kırpar */
  transition: opacity 0.3s ease; /* Opaklık geçişini 0.3 saniye yapar */
}

.color-item .hover-image {
  position: absolute; /* Mutlak konumlandırma ayarlar */
  top: 0; /* Üstte hizalar */
  left: 0; /* Solda hizalar */
  width: 100%; /* Genişliği %100 yapar */
  height: 100%; /* Yüksekliği %100 yapar */
  opacity: 0; /* Opaklığı sıfır yapar (görünmez) */
  transition: opacity 0.3s ease; /* Opaklık geçişini 0.3 saniye yapar */
}

.color-item:hover .hover-image {
  opacity: 1; /* Üzerine gelindiğinde opaklığı %100 yapar (görünür) */
}

.color-item p {
  margin-top: 10px; /* Üstten 10px boşluk bırakır */
  font-size: 18px; /* Yazı boyutunu 18px yapar */
  color: #002147; /* Yazı rengini koyu mavi yapar */
}
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }

  .navbar {
    flex-direction: column;
  }

  .content-section {
    flex-direction: column; /* Mobilde içerikleri dikey hizalar */
    align-items: center; /* İçeriği ortalar */
    padding: 20px;
    width: 100%;
  }

  .right-column {
    display: none;
  }
  .left-column {
    width: 100%; /* Tam genişlikte olacak */
    text-align: center; /* Metni ortalar */
  }

  .right-column img {
    width: 100%; /* Resimleri tam genişlik yapar */
    margin: 10px 0; /* Üst ve alt boşluk ekler */
  }

  .image-grid {
    display: flex;
    flex-direction: column; /* Mobilde resimleri alt alta hizalar */
    align-items: center; /* İçeriği ortalar */
  }

  .image-grid img {
    width: 100%; /* Resimleri tam genişlik yapar */
    margin: 10px 0; /* Üst ve alt boşluk ekler */
  }
  .pic-section {
    flex-direction: column;
    align-items: center;
    display: grid;
    grid-template-columns: 4fr 2fr;
    grid-template-rows: 2fr 2fr;
    gap: 10px; /* Aralığı ayarlayabilirsiniz */
    background-color: #455f7c;
    box-sizing: border-box;
    position: relative; /* veya absolute */
    top: 0;
    left: 0;
  }

  .pic-1 {
    grid-column: 2;
    display: flex;
    padding: 10px;
    margin-left: 10px;
    background-color: #455f7c;
    width: 100%;

    top: 0;
    left: 0;
  }
  .pic-2 {
    grid-column: 2;
    display: flex;
    margin-left: 16px;
    background-color: #455f7c;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .pic-3 {
    grid-row: 1 / span 2;
    display: flex;
    margin-left: 10%; /* Soldan %10 boşluk bırakır */
    background-color: #455f7c;
    box-sizing: border-box;
  }
  .about-section {
    flex-direction: column;
    align-items: center;
  }

  .about-left-column,
  .about-right-column {
    width: 100%;
    text-align: center;
  }
}
.image-only-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
  background-color: #455f7c;
  justify-items: center;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.image-only-section img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 15px;
  border: 5px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.shop-button-group {
  display: flex;
  flex-direction: column; /* mobile default */
  align-items: center;
  gap: 10px;
}

.shop-button {
  background-color: #022c43;
  color: white;
  text-decoration: none;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 1rem;
  transition: background-color 0.3s ease;
  text-align: center;
  min-width: 180px;
  max-width: 80%;
  display: block;
}

/* Default hover removed or kept for generic buttons */
.shop-button:hover {
  background-color: #03506f; /* For any generic buttons if still used */
}

/* Amazon hover */
.amazon-btn:hover {
  background-color: #131921; /* A darker Amazon brand tone */
}

/* Etsy hover */
.etsy-btn:hover {
  background-color: #c95000; /* Slightly darker Etsy orange */
}

@media (min-width: 768px) {
  .shop-button-group {
    flex-direction: row;
    justify-content: center;
  }

  .shop-button {
    margin: 0 10px;
  }
}

.shop-button i {
  width: auto;
  display: inline-block;
  margin-right: 8px;
  font-size: 1.1em;
  vertical-align: middle;
}

.amazon-btn {
  background-color: #232f3e; /* Amazon brand dark blue */
  color: white;
  margin-right: 8px;
  font-size: 1.2em;
}

.etsy-btn {
  background-color: #f56400; /* Etsy brand orange */
  color: white;
  margin-right: 8px;
  font-size: 1.2em;
}

.slogan {
  font-family: 'Courier New', Courier, monospace; /* Keep it consistent or use a modern serif */
  font-size: 2rem;
  color: #333333; /* Softer than black */
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0px;
  letter-spacing: 1px;
  font-weight: 500;
  padding: 0;
  line-height: 1;
}

.instagram-btn {
  background-color: #e1306c; /* Instagram brand pink */
  color: white;
  margin-right: 8px;
  font-size: 1.2em;
}

.instagram-btn:hover {
  background-color: #c13584; /* Slightly darker on hover */
}

.about-right-column a {
  color: #e1306c;
  font-weight: 500;
  text-decoration: none;
}

.about-right-column a:hover {
  text-decoration: underline;
}

.instagram-contact {
  font-size: 16px;
  color: #e1306c;
}

.instagram-contact i {
  color: #e1306c;
}

.glider-contain {
  width: 100%;
  max-width: 500px;
  margin: 30px auto;
  padding: 0 10px;
  box-sizing: border-box;
}

.glider img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.glider-prev,
.glider-next {
  background: #222;
  color: #fff;
  border: none;
  padding: 10px 14px;
  cursor: pointer;
  margin: 10px;
  border-radius: 5px;
}

@media (max-width: 768px) {
  .glider-prev,
  .glider-next {
    display: none;
  }
}