/* ===== ÖZEL FONT TANIMLAMA ===== */
@font-face {
  font-family: "Basique";
  src: url("../fonts/Basique.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Font yüklenene kadar sistem fontu görünür, sayfa boş kalmaz */
}

/* Başlıkların daha prestijli durması için harf arasını hafif açalım */
.section-title,
.hero-title {
  letter-spacing: 0.03em; /* Eğer font çok aralıklıysa */
  line-height: 1.1;
}

/* Logo ve Navigasyon için harf arası genişlik lüksü artırır */
.logo-main {
  letter-spacing: 0.4em;
  font-weight: 700;
}

.nav-link {
  letter-spacing: 0.15em;
  font-size: 0.75rem;
}

/* ===== DEĞİŞKENLER ===== */
:root {
  --gold: #b59156;
  --dark-text: #1a1a1a;
  --gold-light: #d4af37;
  --gold-dark: #8b6f3c;
  --cream: #faf7f2;
  --white: #ffffff;
  --dark-text: #1e1e1e;
  --soft-gray: #6b6b6b;
  --font-main: "Basique", sans-serif;
  --font-serif: "Basique", serif;
  --font-sans: "Basique", sans-serif;
  --transition: 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
body {
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  overflow-x: hidden; /* KRİTİK KOD BURASI */
  width: 100%;
}

html,
body {
  overflow-x: hidden; /* Sayfanın sağa sola kaymasını KESİNLİKLE engeller */
  width: 100%;
  position: relative;
}

/* ===== ARKA PLAN CANVAS ===== */
#bgCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* ===== GENEL ===== */
.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}
.section-padding {
  padding: 7rem 0;
}
.section-padding-light {
  padding: 4rem 0;
}

/* ===== TİPOGRAFİ ===== */
.section-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.75rem;
  padding-left: 2.5rem;
  position: relative;
}
.section-tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.8rem;
  height: 1px;
  background: var(--gold);
  transform: translateY(-50%);
}
.section-title {
  font-family: var(--font-main);
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: var(--dark-text);
}
.light-title {
  color: var(--white);
}
.section-desc {
  color: var(--soft-gray);
  max-width: 600px;
}
.light-desc {
  color: rgba(255, 255, 255, 0.7);
}
.text-center {
  text-align: center;
}
.gold-text {
  color: var(--gold);
}

/* ===== BAŞLIK ARKA PLANINA KREM DOKUSU EKLENMESİ ===== */
.section-header {
  position: relative;
  padding: 2.5rem 0; /* Sağdan soldan boşlukları kaldırdık, metin serbest kalsın */
  border-radius: 1rem;
  margin-bottom: 2rem;
  overflow: hidden;
}

/* Sola dayalı başlıklar için (Koleksiyon vb.) */
.section-header::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -2%; /* Lekeyi yazının hemen arkasından başlatır */
  transform: translateY(-50%);
  width: 100%;
  height: 180%; /* Lekeyi yazı tipine uyacak şekilde genişletir */
  background-image: url("../images/cream.jpg"); /* .png yerine .jpg kullandık */
  background-size: contain; /* Oranı bozmadan sığdırır */
  background-position: left center;
  background-repeat: no-repeat;

  /* SİHİRLİ DOKUNUŞ: Siyah arkaplanı şeffaf yapıp, beyaz kremi zarif bir gölgeye çevirir */
  filter: invert(1) sepia(1) hue-rotate(5deg) saturate(3) opacity(0.06);
  mix-blend-mode: multiply;

  z-index: 0;
  pointer-events: none;
}

/* Ortalanmış başlıklar için (Çözüm Ortakları vb.) */
.section-header.text-center::before {
  background-position: center;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%; /* Ortalanmış alanda biraz daha geniş bir leke */
}

.section-header .section-tag,
.section-header .section-title,
.section-header .section-desc {
  position: relative;
  z-index: 2;
  text-shadow: 0 0 15px rgba(250, 247, 242, 0.9); /* Yazının krem üstünde okunabilirliğini artırır */
}

/* ===== BUTONLAR ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  color: white;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  box-shadow: 0 4px 15px rgba(181, 145, 86, 0.3);
  z-index: 1;
  text-decoration: none;
}
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.7s;
}
.btn:hover::after {
  left: 100%;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(181, 145, 86, 0.5);
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: #fff;
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  box-shadow: none;
}
.btn-outline:hover {
  background: var(--gold);
  color: white;
}
.btn-full {
  width: 100%;
}

/* ===== HEADER ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  padding: 1.5rem 0;
  transition: var(--transition);
  background: transparent;
}
.header.scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  padding: 0.8rem 0;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.logo-main {
  font-family: var(--font-main);
  font-size: 1.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--dark-text);
}
.logo-tagline {
  font-size: 0.55rem;
  letter-spacing: 0.5em;
  color: var(--gold);
}
.nav-list {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}
.nav-link {
  font-family: var(--font-main);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark-text);
  text-decoration: none;
  position: relative;
  padding-bottom: 0.2rem;
}
.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s;
}
.nav-link:hover,
.nav-link.active {
  color: var(--gold-dark);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--dark-text);
  transition: var(--transition);
}

/* ===== HERO SLIDER KUSURSUZ VE DİNAMİK YAPI ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

.hero-slider {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1s cubic-bezier(0.23, 1, 0.32, 1),
    transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  transform: scale(1.05);
}

.slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.slide-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  width: 100%;
}

/* --- DİNAMİK YÖNLENDİRME SINIFLARI (JS TARAFINDAN EKLENECEK) --- */
.slide-inner.layout-left {
  flex-direction: row; /* Yazı Solda, Görsel Sağda */
}
.slide-inner.layout-left .slide-text {
  align-items: flex-start;
  text-align: left;
}

.slide-inner.layout-right {
  flex-direction: row-reverse; /* Yazı Sağda, Görsel Solda */
}
.slide-inner.layout-right .slide-text {
  align-items: flex-end;
  text-align: right;
}

/* Yazı Alanı Flex Ayarları */
.slide-text {
  flex: 1;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.5s ease;
}

/* Görsel Alanı */
/* Görsel Kapsayıcısı (Havada Süzülme Animasyonu Buraya Taşındı) */
.slide-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px; /* SİHİR BURADA: İçindeki görsele 3D derinlik algısı kazandırır */
  animation: floatImage 6s ease-in-out infinite; /* Süzülme efekti artık dış kutuda */
}

/* Ürün Görseli (JS Tarafından 3D Döndürülecek) */
.slide-image img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(181, 145, 86, 0.2));
  border-radius: 20px;
  /* animation KODUNU BURADAN SİLDİK ki JS ile çakışmasın */
  transform-style: preserve-3d;
  will-change: transform; /* Tarayıcıyı performansa hazırlar */
}

@keyframes floatImage {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Tipografi */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid rgba(181, 145, 86, 0.4);
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(250, 247, 242, 0.7);
  backdrop-filter: blur(10px);
  margin-bottom: 2rem;
}

/* Sağ tasarıma geçince rozet içindeki noktanın yerini düzeltir */
.slide-inner.layout-right .hero-badge {
  flex-direction: row-reverse;
}

.hero-title {
  font-family: var(--font-main);
  font-size: clamp(3rem, 5vw, 5.5rem);
  font-weight: 700;
  color: var(--dark-text);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  text-shadow: 0 5px 25px rgba(255, 255, 255, 0.9);
}

.hero-subtitle {
  font-family: var(--font-main);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--soft-gray);
  margin-bottom: 2.5rem;
  max-width: 500px;
}

/* ===== KONTROLLER VE AŞAĞI KAYDIR ===== */
.slider-controls {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  z-index: 5;
}

.scroll-hint {
  position: absolute;
  bottom: 1.5rem; /* En alta sabitledik */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--soft-gray);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  z-index: 10; /* Her şeyin üstünde durmasını sağlar */
}

/* ===== AŞAĞI KAYDIR ANİMASYONU ===== */
.scroll-line {
  width: 1.5px; /* Çizgiyi çok hafif belirginleştirdik */
  height: 50px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  /* Cubic-bezier ile çok daha akıcı, lüks bir akış hızı sağladık */
  animation: scrollAnim 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scrollAnim {
  0% {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
  }
}

/* Mobil Uyum */
@media (max-width: 992px) {
  .slide-inner.layout-left,
  .slide-inner.layout-right {
    flex-direction: column-reverse;
    text-align: center;
    justify-content: center;
    gap: 2rem;
    padding-top: 5rem;
  }
  .slide-inner.layout-left .slide-text,
  .slide-inner.layout-right .slide-text {
    align-items: center;
    text-align: center;
  }
  .slide-inner.layout-right .hero-badge {
    flex-direction: row;
  }
  .slide-image img {
    max-height: 35vh;
  }
}

/* ===== KOLEKSİYON KARTLARI ===== */
/* ===== KATEGORİ FİLTRELEME MENÜSÜ ===== */
.collection-filter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 4rem;
}

.filter-btn {
  background: transparent;
  border: none;
  color: var(--soft-gray);
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.3s ease;
}

/* Altın rengi altı çizili efekt */
.filter-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.filter-btn:hover {
  color: var(--gold-dark);
}

.filter-btn.active {
  color: var(--gold-dark);
  font-weight: 600;
}

.filter-btn.active::after {
  width: 100%;
}

/* Grid için yükseklik animasyonu altyapısı */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  /* Taşmaları animasyon sırasında JS ile yöneteceğiz */
}

/* Kartların silikleşip küçülme animasyonu için geçiş eklendi */
.product-card {
  /* Diğer stillerin duracak, sadece bu transition özelliğini güncelle veya ekle */
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    box-shadow 0.3s,
    background 0.3s,
    border-color 0.3s;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.product-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(181, 145, 86, 0.15);
  border-radius: 2rem;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: var(--transition);
  position: relative;
  overflow: visible;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  z-index: 1;
}
.product-card:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--gold-light);
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(181, 145, 86, 0.2);
  z-index: 5;
}
.product-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(212, 175, 55, 0.2) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
}
.product-card:hover .product-glow {
  opacity: 1;
}
.product-spray-effect {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 80px;
  background: radial-gradient(
    ellipse at center,
    rgba(212, 175, 55, 0.4) 0%,
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  filter: blur(8px);
}
.product-card:hover .product-spray-effect {
  opacity: 1;
  animation: sprayPulse 0.6s ease-out;
}
@keyframes sprayPulse {
  0% {
    transform: translateX(-50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(2);
    opacity: 0;
  }
}
.product-image-container {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 1.2rem;
}
.product-img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.floating {
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
.product-placeholder {
  width: 70px;
  height: 110px;
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.4),
    rgba(255, 255, 255, 0.8)
  );
  border-radius: 30px 30px 15px 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.serum-shape {
  height: 130px;
  width: 55px;
}
.spray-shape {
  height: 100px;
  width: 45px;
  border-radius: 25px 25px 5px 5px;
}
.cream-shape {
  height: 70px;
  width: 85px;
  border-radius: 40px 40px 20px 20px;
}
.eye-shape {
  height: 45px;
  width: 70px;
  border-radius: 30px 30px 15px 15px;
}
.product-category {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--gold-dark);
  text-transform: uppercase;
}
.product-card h3 {
  font-family: var(--font-main);
  font-size: 1.3rem;
  color: var(--dark-text);
  margin-top: 0.3rem;
}

/* ===== MOLEKÜL EFEKTİ ===== */
.molecule {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--gold-light);
  border-radius: 50%;
  pointer-events: none;
  animation: moleculeBurst 0.8s ease-out forwards;
}
@keyframes moleculeBurst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--mx), var(--my)) scale(0);
    opacity: 0;
  }
}

/* ===== BAYİLİK ===== */
/* ===== BAYİLİK (3D KİTAP) ===== */
.partnership {
  background: transparent;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* 3D Sahne Ayarları */
.book-scene {
  perspective: 2000px; /* 3D derinlik algısı */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
  padding: 2rem 0;
  padding-bottom: 5rem;
  position: relative;
}

.book-controls {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.btn-book-toggle {
  background: rgba(250, 247, 242, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--gold);
  color: var(--gold-dark);
  padding: 0.8rem 2.5rem;
  border-radius: 30px;
  font-family: var(--font-main);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.btn-book-toggle:hover {
  background: var(--gold);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(181, 145, 86, 0.3);
  transform: translateY(-3px);
}

/* Kitap Boyutu (Büyütüldü) */
.book {
  position: relative;
  width: 480px; /* Eski 420px'di, genişletildi */
  height: 650px; /* Eski 550px'di, uzatıldı */
  transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.25, 1);
  box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.05);
  border-radius: 5px 20px 20px 5px;
}

/* Kitap açıldığında ortalanmak için sağa doğru kayar */
.book.is-open {
  transform: translateX(240px); /* Genişliğin yarısı kadar kaymalı */
}

/* Sayfaların Genel Yapısı */
.book-page,
.book-cover-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px 20px 20px 5px;
}

/* Sağ Sayfa (Form) */
.right-page {
  background: #faf7f2;
  border: 1px solid rgba(181, 145, 86, 0.2);
  z-index: 1;
  box-shadow: inset 20px 0 30px rgba(0, 0, 0, 0.03); /* Cilt (sırt) gölgesi */
}

/* Kapağın Dönüşüm (Menteşe) Ayarı */
.book-cover-container {
  transform-origin: left center; /* Sol kenardan (cilt payı) döner */
  transform-style: preserve-3d;
  transition: transform 1.4s cubic-bezier(0.25, 1, 0.25, 1);
  z-index: 2;
}

/* Kitap açıldığında kapağın rotasyonu */
.book.is-open .book-cover-container {
  transform: rotateY(-180deg);
  box-shadow: -20px 20px 40px rgba(0, 0, 0, 0.1);
}

/* Kapak Ön ve Arka Yüzleri */
.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Arkasını dönünce görünmez olur */
  border-radius: 5px 20px 20px 5px;
  overflow: hidden;
}

/* Kapağın Dış Tasarımı (Koyu Premium) */
.front {
  background: #0f1a24;
  border-left: 8px solid #0a1118; /* Kitap sırtı dokusu */
  transform: rotateY(0deg) translateZ(1px); /* Z-index buglarını önler */
}

/* Kapağın İç Tasarımı (Görsel Sayfa) */
.back {
  background: #fff;
  transform: rotateY(180deg) translateZ(1px);
  border-radius: 20px 5px 5px 20px; /* Ters döndüğü için kavisler yer değiştirdi */
  border-right: 8px solid #eee; /* İç sırt dokusu */
}

/* --- KİTAP İÇİ TASARIMLARI --- */

/* Kapak Dış Süslemeleri */
.cover-design {
  padding: 1.5rem;
  height: 100%;
}
.cover-border {
  border: 1px solid rgba(181, 145, 86, 0.4);
  height: 100%;
  border-radius: 3px 15px 15px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
.cover-border .logo-main {
  color: var(--gold);
  font-size: 1.5rem;
  margin-bottom: 2rem;
}
.cover-border h2 {
  font-family: var(--font-main);
  font-size: 2.5rem;
  color: #fff;
  line-height: 1.2;
}
.cover-seal {
  margin-top: 2rem;
  width: 50px;
  height: 50px;
  border: 1px solid var(--gold-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}
.limited-text {
  position: absolute;
  bottom: 2rem;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--soft-gray);
  text-transform: uppercase;
}

/* Kapak İç Süslemeleri (Sol Sayfa) */
.visual-page {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.visual-page .cover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.visual-overlay h3 {
  font-family: var(--font-main);
  font-size: 2.2rem;
  color: #fff;
  margin-bottom: 1rem;
}
.visual-overlay p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  font-size: 0.95rem;
}

.book-cover.back .visual-overlay h3 {
    letter-spacing: 2px; /* Harfler arası boşluk (isteğe göre 1px ile 4px arasında değiştirebilirsiniz) */
    line-height: 1.3;    /* Satırlar arası boşluk */
}

/* Form (Sağ Sayfa) */
/* ===== FORM ALANI VE İÇERİK (Sağ Sayfa) ===== */
.form-content {
  padding: 4rem 3.5rem; /* Formun etrafındaki nefes alma boşluğu artırıldı */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-content h3 {
  font-family: var(--font-main);
  font-size: 2.2rem;
  color: var(--dark-text);
  margin-bottom: 0.5rem;
}

.form-content p {
  font-size: 0.95rem;
  color: var(--soft-gray);
  margin-bottom: 3rem; /* Form ile yazı arası açıldı */
}

/* --- ULTRA PREMIUM FORM ELEMANLARI --- */
.premium-form {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* İnputlar arası geniş boşluk */
}

.premium-form .form-group {
  position: relative;
  width: 100%;
}

/* Standart Kutu Görünümünü Sıfırlama */
.premium-form input,
.premium-form select {
  width: 100%;
  padding: 0.5rem 0;
  border: none !important;
  border-bottom: 1px solid rgba(181, 145, 86, 0.3) !important; /* Hafif altın rengi taban */
  background: transparent !important;
  outline: none !important;
  font-family: var(--font-main);
  color: var(--dark-text);
  font-size: 1.1rem;
  border-radius: 0 !important;
  box-shadow: none !important;
  appearance: none; /* Tarayıcının varsayılan select okunu gizler */
}

/* Select (Açılır Menü) İçin Özel Altın Ok */
.premium-form select {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b59156' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 1.2em !important;
}

/* Yüzen Etiketler (Floating Labels) */
.premium-form label {
  position: absolute;
  top: 0.5rem;
  left: 0;
  font-size: 1.05rem;
  color: var(--soft-gray);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* İnputa tıklanınca veya içi doluyken etiket yukarı kayar ve küçülür */
.premium-form input:focus ~ label,
.premium-form input:valid ~ label,
.premium-form select:focus ~ label,
.premium-form select:valid ~ label {
  top: -1.3rem;
  font-size: 0.75rem;
  color: var(--gold-dark);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Tıklanınca Alttan Çıkan Altın Çizgi Efekti */
.focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.premium-form input:focus ~ .focus-border,
.premium-form select:focus ~ .focus-border {
  width: 100%;
}

/* Gönder Butonu (Daha büyük ve gösterişli) */
.premium-form .btn-full {
  margin-top: 1rem;
  padding: 1.2rem;
  font-size: 1rem;
  letter-spacing: 0.25em;
  border-radius: 5px;
  box-shadow: 0 10px 25px rgba(181, 145, 86, 0.25);
}
/* Mobil Uyum (Responsive 3D) */
@media (max-width: 992px) {
  .book-scene {
    transform: scale(0.8); /* Tabletlere sığması için küçültüldü */
  }
}
@media (max-width: 768px) {
  .book-scene {
    transform: scale(0.65); /* Mobilde dışarı taşmaması için ölçeklendi */
  }
  .book.is-open {
    transform: translateX(110px); /* Mobilde ekran dışına çıkmasını engeller */
  }
}

/* ===== MÜHÜRLER ===== */
/* ===== ÇÖZÜM ORTAKLARI (SİNEMATİK MÜHÜR EFEKTİ) ===== */
.trust {
  background: transparent;
  position: relative;
  z-index: 1;
}

.stamp-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4rem;
  margin-top: 4rem;
}

/* Mühür Ana Yapısı */
.stamp-item {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Başlangıçta görünmez, çok büyük ve hafif eğik durur */
  opacity: 0;
  transform: scale(4) rotate(-20deg);
}

/* Mührün Etrafındaki Kesik Çizgili Premium Çerçeve */
.stamp-ring {
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(181, 145, 86, 0.7);
  border-radius: 50%;
  box-shadow:
    inset 0 0 15px rgba(181, 145, 86, 0.15),
    0 0 20px rgba(181, 145, 86, 0.05);
}

.stamp-ring::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(181, 145, 86, 0.4);
  border-radius: 50%;
}

.stamp-name {
  font-family: var(--font-main);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gold-dark);
  text-align: center;
  text-transform: uppercase;
  z-index: 2;
}

/* 1. ANİMASYON: Ekrana Sert Çarpma (JS tarafından tetiklenecek) */
.stamp-item.is-stamped {
  /* cubic-bezier ile sona doğru hafif bir geri sekme (bounce) hissi verilir */
  animation: stampImpact 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation-delay: var(--delay);
}

@keyframes stampImpact {
  0% {
    opacity: 0;
    transform: scale(4) rotate(-20deg);
    filter: blur(10px);
  }
  60% {
    opacity: 1;
    transform: scale(0.9) rotate(5deg); /* Ekrana vurup içine göçer */
    filter: blur(0);
  }
  80% {
    transform: scale(1.05) rotate(-2deg); /* Geri seker */
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg); /* Tam yerine oturur */
  }
}

/* 2. ANİMASYON: Mühür Vurulduğunda Çıkan Toz/Işık Haresi (Şok Dalgası) */
.stamp-item::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0;
  z-index: -1;
}

.stamp-item.is-stamped::after {
  animation: stampShockwave 0.8s ease-out forwards;
  animation-delay: calc(
    var(--delay) + 0.25s
  ); /* Çarpma anından hemen sonra başlar */
}

@keyframes stampShockwave {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
    border-width: 4px;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
    border-width: 0px;
  }
}

/* Üzerine gelindiğinde hafif tepki */
.stamp-item:hover .stamp-ring {
  transform: scale(1.05);
  transition: transform 0.3s;
  border-color: var(--gold-light);
}
/* ===== AKADEMİ (GERÇEK KREM DOKUSU) ===== */
/* ===== AKADEMİ (CANVAS ARKA PLANLI & GLASSMORPHISM) ===== */
.academy {
  position: relative;
  background: transparent; /* Koyu tema iptal, Canvas (çiçekler/ışıklar) arkadan akar */
  z-index: 1;
}

.academy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 1rem;
}

/* Premium Buzlu Cam Kart Tasarımı */
.academy-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(181, 145, 86, 0.2);
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  cursor: pointer;
}

/* Kart Hover (Etkileşim) Efekti */
.academy-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: var(--gold-light);
  box-shadow: 0 25px 50px rgba(181, 145, 86, 0.15);
}

/* Video Kapak Alanı */
.academy-visual {
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-overlay {
  position: absolute;
  inset: 0;
  /* Hafif karanlık filtre, üzerine gelince sinematik olarak kararır */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.5)
  );
  transition: opacity 0.5s;
}

.academy-card:hover .video-overlay {
  background: linear-gradient(
    to bottom,
    rgba(181, 145, 86, 0.2),
    rgba(0, 0, 0, 0.8)
  );
}

/* ===== CANLI PLAY BUTONU ===== */
.play-btn {
  position: relative;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.play-icon {
  position: relative;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(5px);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 2;
}

/* Play Üçgeni */
.play-icon::after {
  content: "";
  margin-left: 4px;
  border-left: 14px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  transition: all 0.4s;
}

/* Durmadan Yayılan Sinyal (Pulse) Efekti */
.play-pulse {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--gold-light);
  opacity: 0;
  animation: pulseRing 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: 1;
}

@keyframes pulseRing {
  0% {
    transform: scale(0.8);
    opacity: 1;
    border-width: 3px;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
    border-width: 0px;
  }
}

/* Play Butonu Hover Efekti */
.academy-card:hover .play-icon {
  transform: scale(1.15);
  background: var(--gold);
  border-color: var(--gold);
}

/* ===== İÇERİK METİNLERİ ===== */
.academy-content {
  padding: 2rem 1.8rem;
  text-align: left;
  background: transparent;
}

.academy-badge {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.8rem;
  font-weight: 700;
}

.academy-content h3 {
  font-family: var(--font-main);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dark-text);
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.academy-content p {
  font-size: 0.95rem;
  color: var(--soft-gray);
  line-height: 1.6;
}

/* Mobil Uyum */
@media (max-width: 992px) {
  .academy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .academy-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== FOOTER (ARKA PLAN CANVAS İLE AYNI) ===== */
/* ===== FOOTER (PREMIUM GLASSMORPHISM) ===== */
.footer {
  position: relative;
  /* Arka plan animasyonu alttan aksın diye yarı şeffaf bej/krem bir zemin */
  background: rgba(250, 247, 242, 0.45);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  padding: 6rem 0 1.5rem;
  z-index: 2;
  overflow: hidden;
}

.footer-bg-rose {
  position: absolute;
  right: 5%; /* Hafif sağdan kesilmesi daha estetik ve modern durur */
  top: 60%;
  transform: translateY(-50%);
  height: 120%; /* Footer yüksekliğinin %90'ı kadar olsun (Tam sığar ama boğmaz) */
  width: auto; /* Oranı korur */
  opacity: 2; /* Çok silik, asil bir watermark görüntüsü */
  pointer-events: none; /* Üzerine gelince linkleri tıklamaya engel olmaz */
  z-index: 1; /* Yazıların (z-index: 2) altında kalsın */

  /* Altın rengi tonlarıyla uyum sağlaması için hafif bir filtre */
  filter: sepia(0.5) brightness(1.2);

  /* Sinematik nefes alma ve hafif süzülme animasyonu */
  animation: footerRoseFloat 12s ease-in-out infinite alternate;
}

/* Gül için özel süzülme hareketi */
@keyframes footerRoseFloat {
  0% {
    transform: translateY(-50%) rotate(25deg) scale(1);
    opacity: 0.15;
  }
  100% {
    transform: translateY(-48%) rotate(5deg) scale(1.05);
    opacity: 0.08; /* Nefes alırken hafifçe belirginleşir */
  }
}

/* Mobil cihazlarda gülün çok yer kaplamaması için ayar */
@media (max-width: 768px) {
  .footer-bg-rose {
    height: 50%; /* Mobilde daha küçük kalsın */
    right: -15%;
    opacity: 0.04;
  }
}

/* Footer'ın üst kısmına zarif, ince bir altın ışıltısı (Border yerine) */
/* ===== FOOTER ÜSTÜ - LÜKS SIVI ALTIN (LIQUID GOLD) EFEKTİ ===== */

/* 1. Uçlara Doğru Eriyen Zarif Taban Çizgisi */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  /* Kenarlarda tamamen şeffaf, sadece ortada hafif altın rengi bir iz bırakır */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(181, 145, 86, 0.05) 20%,
    rgba(181, 145, 86, 0.4) 50%,
    rgba(181, 145, 86, 0.05) 80%,
    transparent 100%
  );
  z-index: 1;
}

/* 2. Çizgi Üzerinde Süzülen Pırlanta Işıltısı (Aesthetic Sweep) */
.footer::after {
  content: "";
  position: absolute;
  top: -1px; /* Çizginin 1px üzerine taşarak 3D ve hacimli bir his verir */
  left: -30%;
  width: 35%; /* Işık huzmesinin yumuşak yayılım alanı */
  height: 3px;

  /* Lazer çizgisi yerine ortası parlak elmas, kenarları yumuşak altın radial geçiş */
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 1) 0%,
    /* Tam merkezde göz alan parlaklık */ rgba(212, 175, 55, 0.8) 20%,
    /* Etrafında lüks altın sarısı hare */ transparent 60%
      /* Kenarlara doğru tamamen sıvı gibi erir */
  );

  /* Işığın etrafındaki yumuşak parlamalar (Glow) */
  box-shadow:
    0 0 15px rgba(212, 175, 55, 0.4),
    0 0 5px rgba(255, 255, 255, 0.6);
  mix-blend-mode: screen; /* Altındaki krem/bej zeminle çok daha parlak karışır */

  /* Çok daha yavaş, ağır ve asil bir akış hızı (8 saniye) */
  animation: aestheticSweep 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: 2;
}

/* 3. Kusursuz ve Yumuşak Akış Animasyonu */
@keyframes aestheticSweep {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  15% {
    opacity: 1; /* Ekrana süzülerek (parlayarak) girer */
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(400%); /* Çok yavaşça sağdan çıkar */
    opacity: 0; /* Çıkarken usulca söner */
  }
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* 3 Kolona düşürüldü */
  gap: 4rem;
  margin-bottom: 4rem;
}

/* ===== LOGO ANİMASYONU (Canlı Aura Efekti) ===== */
.logo-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.footer-logo-img {
  width: 250px;
  max-width: 100%;
  position: relative;
  z-index: 2;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.logo-wrapper:hover .footer-logo-img {
  transform: scale(1.05);
}

/* Arkadaki Canlı Işık */
.logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  background: radial-gradient(
    circle,
    rgba(181, 145, 86, 0.25) 0%,
    rgba(181, 145, 86, 0) 70%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(15px);
  z-index: 1;
  animation: logoAuraPulse 4s alternate infinite ease-in-out;
  pointer-events: none; /* Mouse etkileşimini engellemesin */
}

@keyframes logoAuraPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1) rotate(15deg);
    opacity: 1;
  }
}

/* ===== SOSYAL MEDYA İKONLARI ===== */
.social-links {
  display: flex;
  gap: 1.2rem;
  margin-top: 2rem;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(181, 145, 86, 0.05);
  border: 1px solid rgba(181, 145, 86, 0.2);
  color: var(--gold);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.social-links a svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s;
}

.social-links a:hover {
  background: var(--gold);
  color: #fff;
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(181, 145, 86, 0.2);
}

.social-links a:hover svg {
  transform: scale(1.1);
}

/* ===== İLETİŞİM LİNKLERİ (Tıklanabilir) ===== */
.contact-col ul li a {
  color: var(--soft-gray);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
}

.contact-col ul li a:hover {
  color: var(--gold-dark);
  transform: translateX(5px);
}

/* Kolon Başlıkları */
.footer-col h4 {
  font-family: var(--font-main);
  font-size: 1.3rem;
  color: var(--dark-text);
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
}

/* Başlık altı minik animasyonlu gold çizgi */
.footer-col h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 1.5px;
  background: var(--gold);
  transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.footer-col:hover h4::after {
  width: 50px;
}

/* Metinler ve Açıklamalar */
.footer-desc,
.newsletter-desc {
  color: var(--soft-gray);
  line-height: 1.7;
  font-size: 0.95rem;
  margin-top: 1.5rem;
}

.newsletter-desc {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
}

/* Linkler ve Etkileşimler */
.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--soft-gray);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-icon {
  margin-right: 8px; /* İkonla yazı arası minik boşluk */
  color: var(--gold);
}

.links-col a {
  color: var(--soft-gray);
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

/* Link Hover: Altın renkli top belirir ve yazı hafif sağa kayar */
.links-col a::before {
  content: "•";
  color: var(--gold);
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  font-size: 1.5rem;
  line-height: 0;
  width: 0;
}

.links-col a:hover {
  color: var(--gold-dark);
  transform: translateX(5px);
}

.links-col a:hover::before {
  opacity: 1;
  width: 12px;
  transform: translateX(0);
}

/* ===== BÜLTEN: KAPSÜL TASARIM ===== */
.input-capsule {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(181, 145, 86, 0.3);
  border-radius: 50px;
  padding: 0.3rem;
  transition: all 0.4s ease;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.02);
}

.input-capsule:focus-within {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--gold);
  box-shadow: 0 10px 20px rgba(181, 145, 86, 0.1);
}

.input-capsule input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0.8rem 1.2rem;
  font-family: var(--font-main);
  color: var(--dark-text);
  outline: none;
}

.input-capsule input::placeholder {
  color: rgba(107, 107, 107, 0.6);
}

.submit-arrow {
  background: var(--gold);
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.submit-arrow svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s;
}

.submit-arrow:hover {
  background: var(--dark-text);
  transform: scale(1.05);
}

.submit-arrow:hover svg {
  transform: translateX(3px); /* Ok işareti ileriye atılır */
}

/* ===== FOOTER BOTTOM ===== */
.footer-bottom {
  position: relative;
  border-top: 1px solid rgba(181, 145, 86, 0.2);
  padding-top: 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--soft-gray);
  letter-spacing: 0.1em;
}

/* Mobil Uyum */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }
  .footer-col h4::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .footer-col ul li {
    justify-content: center;
  }
  .links-col a:hover {
    transform: translateX(0);
    color: var(--gold-dark);
  }
  .social-links {
    justify-content: center;
  }
}
/* ===== REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .collection-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .academy-grid {
    grid-template-columns: 1fr 1fr;
  }
  .partnership-layout {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    flex-direction: column;
    padding: 1rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  .nav-list.active {
    display: flex;
  }
  .menu-toggle {
    display: flex;
  }
  .collection-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin: 0 auto;
  }
  .academy-grid {
    grid-template-columns: 1fr;
  }
  .seal-item {
    width: 100px;
    height: 100px;
    font-size: 0.7rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .newsletter-form {
    flex-direction: column;
  }
}

/* ===== PREMUM HEADER & DROPDOWN ===== */
.logo-img {
  height: 50px; /* Logo boyutunu markaya göre ayarlayabilirsin */
  width: auto;
  transition: transform 0.4s ease;
}

.logo:hover .logo-img {
  transform: scale(1.05);
}

.nav-list {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  align-items: center;
}

.nav-item-dropdown {
  position: relative;
}

.nav-link {
  font-family: var(--font-main);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dark-text);
  text-decoration: none;
  padding: 1rem 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.arrow {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
  margin-bottom: 4px;
  transition: transform 0.3s ease;
}

/* Dropdown Menü (Buzlu Cam Efekti) */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(15px);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(181, 145, 86, 0.1);
  min-width: 220px;
  padding: 1.5rem 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.nav-item-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-item-dropdown:hover .arrow {
  transform: rotate(-135deg);
  margin-bottom: -4px;
}

.dropdown-menu li a {
  display: block;
  padding: 0.7rem 2rem;
  font-family: var(--font-main);
  font-size: 0.75rem;
  color: var(--soft-gray);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}

.dropdown-menu li a:hover {
  color: var(--gold);
  background: rgba(181, 145, 86, 0.03);
  padding-left: 2.5rem; /* Hafif sağa kayma efekti */
}

/* Header Scrolled Durumu */
.header.scrolled .logo-img {
  height: 40px;
}

/* =======================================================
   PREMIUM REVEAL ANİMASYONLARI (Koreografi Motoru)
   ======================================================= */

/* ----- 1. SLIDER KOREOGRAFİSİ ----- */
/* Başlangıçta hepsi gizli ve farklı yönlere kaymış durumda */
.slide .hero-badge {
  transform: translateY(-30px);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.25, 1, 0.25, 1) 0.2s;
}
.slide .hero-title {
  transform: translateY(40px);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.25, 1, 0.25, 1) 0.4s;
}
.slide .hero-subtitle {
  transform: translateX(-40px);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.25, 1, 0.25, 1) 0.6s;
}
.slide .btn {
  transform: translateY(30px);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.25, 1, 0.25, 1) 0.8s;
}
.slide .slide-image {
  transform: translateX(60px) scale(0.9);
  opacity: 0;
  transition: all 1.2s cubic-bezier(0.25, 1, 0.25, 1) 0.5s;
}

/* Eğer layout-left ise (Görsel Solda), görsel soldan gelsin */
.slide-inner.layout-left .slide-image {
  transform: translateX(-60px) scale(0.9);
}
/* Eğer layout-left ise subtitle sağdan gelsin */
.slide-inner.layout-left .hero-subtitle {
  transform: translateX(40px);
}

/* Slayt Aktif Olduğunda Hepsini Mükemmel Şekilde Yerine Oturt */
.slide.active .hero-badge,
.slide.active .hero-title,
.slide.active .hero-subtitle,
.slide.active .btn,
.slide.active .slide-image {
  transform: translate(0, 0) scale(1);
  opacity: 1;
}

/* ----- 2. TÜM SAYFA (SCROLL) KOREOGRAFİSİ ----- */
/* Farklı yönlerden giriş sınıfları hazırlıyoruz */
.reveal-up {
  transform: translateY(60px);
  opacity: 0;
}
.reveal-down {
  transform: translateY(-60px);
  opacity: 0;
}
.reveal-left {
  transform: translateX(60px);
  opacity: 0;
} /* Sağdan Sola girer */
.reveal-right {
  transform: translateX(-60px);
  opacity: 0;
} /* Soldan Sağa girer */
.reveal-scale {
  transform: scale(0.85);
  opacity: 0;
}

/* Tüm reveal elementleri için akıcı geçiş ayarı ve özel gecikme (delay) desteği */
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-scale {
  transition:
    opacity 1s cubic-bezier(0.25, 1, 0.25, 1),
    transform 1s cubic-bezier(0.25, 1, 0.25, 1);
  transition-delay: var(--delay, 0s); /* HTML'den delay verebilmemizi sağlar */
  will-change: transform, opacity;
}

/* Gözlemci (JS) elementi gördüğünde bu sınıf eklenecek */
.is-visible {
  transform: translate(0, 0) scale(1) !important;
  opacity: 1 !important;
}

/* Ön kapağın konumlandırma ve taşma ayarları */
.book-cover.front {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}