/* Duyuru Barı */
.duyuru-kapali #duyuruBari {
  display: none !important;
}

@keyframes altinPiriltisi {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* Pırıltı: transform ile kaydırılır.
   Önceden background-position animasyonuydu; o her karede yeniden boyama
   gerektirdiği için sayfa boyunca (bar ekran dışındayken bile) CPU yakıyor ve
   scroll'u tırmalıyordu. transform GPU'da taşınır, boyama yapılmaz. */
.altin-piriltisi {
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.altin-piriltisi::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.4) 50%, transparent 75%);
  will-change: transform;
  animation: altinPiriltisi 3s linear infinite;
}

/* Bar ekran dışına çıkınca animasyonu tamamen durdur (JS ile isaretlenir). */
.piriltisiz .altin-piriltisi::before {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .altin-piriltisi::before,
  .kayan-hat {
    animation: none;
  }
}

@keyframes duyuruAcil {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes duyuruKapan {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.duyuru-mesaji {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  padding: 0 40px;
  color: #fff4d9;
}

.duyuru-mesaji.aktif {
  opacity: 1;
  pointer-events: auto;
  animation: duyuruAcil .5s ease forwards;
}

.duyuru-mesaji.gidiyor {
  animation: duyuruKapan .35s ease forwards;
  pointer-events: none;
}

/* Kayan Yazı */
.duyuru-mesaji.kayan-mod {
  overflow: hidden;
  padding: 0;
}

@keyframes kayanHat {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.kayan-hat {
  display: inline-flex;
  flex-shrink: 0;
  /* kritik: flex container'ın sıkıştırmasını engeller */
  white-space: nowrap;
  will-change: transform;
  transform: translateZ(0);
  animation: kayanHat 14s linear infinite;
}

.kayan-hat span {
  padding: 0 40px;
}

/* Duyuru barı görüş alanından çıkınca animasyonları durdur.
   Eskiden bunun yerine her scroll olayında <html>'e .scroll-paused ekleniyordu;
   bu tüm belgede stil yeniden hesabı tetiklediği için scroll'u kendisi
   yavaşlatıyordu. Artık IntersectionObserver ile yalnızca bir kez değişiyor. */
.piriltisiz #duyuruBari .kayan-hat {
  animation-play-state: paused;
}
/* ── Boş sepet ekranı (sepet çekmecesi) ─────────────────────────── */
.sepet-bos {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 28px;
}
.sepet-bos__ikon {
  position: relative;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: #6b1b34;
}
.sepet-bos__ikon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(140,39,69,.18), rgba(140,39,69,.05));
}
/* Dönen ince altın halka — sayfa boşken sakin bir hareket */
.sepet-bos__halka {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(140,39,69,.45);
  animation: sepetHalka 22s linear infinite;
}
@keyframes sepetHalka { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sepet-bos__halka { animation: none; }
}

.sepet-bos__baslik {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  color: #1a1714;
  margin-bottom: 8px;
}
.sepet-bos__metin {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(26,23,20,.5);
  max-width: 290px;
  margin-bottom: 22px;
}

.sepet-bos__kisayol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}
.sepet-bos__cip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(26,23,20,.1);
  background: #fff;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(26,23,20,.6);
  transition: border-color .25s ease, color .25s ease, transform .25s ease, background-color .25s ease;
}
.sepet-bos__cip:hover {
  border-color: rgba(140,39,69,.55);
  background: rgba(140,39,69,.08);
  color: #1a1714;
  transform: translateY(-1px);
}

.sepet-bos__buton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #8c2745, #6b1b34);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px -12px rgba(166,133,78,.9);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.sepet-bos__buton:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 14px 30px -12px rgba(166,133,78,.95);
}

.sepet-bos__guven {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(26,23,20,.07);
  width: 100%;
  max-width: 300px;
}
.sepet-bos__guven span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(26,23,20,.42);
}
.sepet-bos__guven svg { color: #6b1b34; }

/* ── Erişilebilirlik: metin/buton kontrastı ────────────────────────────────
   Lighthouse, Tailwind'in .text-sage (#8c2745, ~2.4:1), .text-mute (#8c8c8c,
   ~3.4:1) ve beyaz yazılı .bg-sage butonlarını (aynı ~2.4:1) WCAG AA'nın
   gerektirdiği 4.5:1'in altında buldu. Bu dosya en son yüklendiği için
   (main.php'de tailwind.css'ten sonra) aynı özgüllükteki bu kuralları ezip
   koyulaştırıyor. .border-sage gibi salt dekoratif kullanımlara dokunulmadı. */
.text-sage { color: #8c2745; }
.text-mute { color: #757575; }
.bg-sage   { background-color: #8c2745; }

/* Çerez bildirimi koyu (bg-ink/95) zeminde — orijinal parlak altın tonu
   orada zaten ~7.4:1 ile fazlasıyla yeterliydi; yukarıdaki genel koyulaştırma
   burada gereksiz yere daha az okunaklı yapıyordu, bu yüzden bu alanda eski
   renge geri dönülüyor. */
#cookieBanner .text-sage { color: #8c2745; }

/* ── SSS akordeonu (ana sayfa #sss) ────────────────────────────────────────
   <details>/<summary> varsayılan üçgen işaretini gizler; açma/kapama göstergesi
   sağdaki artı ikonudur (group-open ile 45° dönerek çarpıya dönüşür). JS yok:
   içerik kapalıyken de DOM'da olduğu için arama motorları ve yapay zekâ
   tarayıcıları tüm cevapları okuyabilir. */
#sss summary { list-style: none; }
#sss summary::-webkit-details-marker { display: none; }
#sss summary::marker { content: ""; }