html,
body {
  background: #ffffff;
  color: #1b1215;
}

body {
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: 'Playfair Display', Georgia, serif;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 600;
  color: #8c2745;
}

/* Dots */
.sdot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .25);
  border: 1.25px solid rgba(255, 255, 255, .6);
  transition: all .45s cubic-bezier(.2, .8, .2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.sdot:hover {
  background: rgba(255, 255, 255, .55);
}

.sdot.active {
  background: rgba(255, 255, 255, .3);
  border-color: #fff;
  width: 34px;
  border-radius: 999px;
}

/* Auto-advance progress fill inside active dot */
.sdot.active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #fff;
  transform-origin: left;
  transform: scaleX(0);
  animation: sdotFill 6.5s linear forwards;
}

@keyframes sdotFill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* Buttons — sade, yuvarlak, açık tema */
.btn-sage {
  background: #1b1215;
  color: #fff;
  padding: 13px 28px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .02em;
  font-weight: 500;
  transition: background .25s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-sage:hover { background: #8c2745; }

.btn-dark {
  background: #1b1215;
  color: #fff;
  padding: 13px 22px;
  font-size: 13px;
  font-weight: 500;
  width: 100%;
  border-radius: 999px;
  transition: background .25s;
}
.btn-dark:hover { background: #8c2745; }

.btn-outline {
  border: 1px solid #ebe3e0;
  color: #1b1215;
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 500;
  width: 100%;
  background: #fff;
  border-radius: 999px;
  transition: border-color .25s;
}
.btn-outline:hover { border-color: #1b1215; }

.btn-ghost-light {
  border: 1px solid rgba(255, 255, 255, .8);
  color: #fff;
  padding: 12px 26px;
  font-size: 12px;
  letter-spacing: .12em;
  border-radius: 999px;
  transition: all .25s;
}
.btn-ghost-light:hover { background: #fff; color: #1b1215; }

.btn-ghost-sage {
  border: 1px solid #ebe3e0;
  color: #1b1215;
  padding: 12px 26px;
  font-size: 12px;
  letter-spacing: .12em;
  border-radius: 999px;
  transition: all .25s;
}
.btn-ghost-sage:hover { background: #1b1215; border-color: #1b1215; color: #fff; }

.btn-cream {
  background: #faf5f2;
  color: #1b1215;
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 500;
  transition: background .25s;
  border-radius: 999px;
  width: 100%;
}
.btn-cream:hover { background: #f1e8e4; }

/* Link underline */
.link-u {
  position: relative;
}

.link-u::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

.link-u:hover::after {
  transform: scaleX(1);
}

/* Slider */
.slide {
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Ken Burns — slow cinematic zoom on the active slide image */
.slide picture img {
  transform: scale(1.06);
  transition: transform .8s ease;
  will-change: transform;
  transform: translateZ(0);
}

.slide.active picture img {
  animation: kenburns 8s ease-out forwards;
}

@keyframes kenburns {
  from {
    transform: scale(1.06) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.16) translate3d(-1.5%, -1%, 0);
  }
}

/* Refined overlay — softer, more layered for a premium feel */
.slide .hero-veil {
  background:
    linear-gradient(to top, rgba(20, 16, 14, .62) 0%, rgba(20, 16, 14, .18) 38%, transparent 70%),
    radial-gradient(120% 90% at 18% 80%, rgba(20, 16, 14, .35), transparent 60%);
}

@media (min-width:768px) {
  .slide .hero-veil {
    background:
      linear-gradient(to right, rgba(20, 16, 14, .58) 0%, rgba(20, 16, 14, .22) 32%, transparent 62%),
      radial-gradient(90% 120% at 0% 50%, rgba(20, 16, 14, .3), transparent 60%);
  }
}

/* Staggered content reveal — replays each time a slide becomes active */
.slide .reveal {
  opacity: 0;
  transform: translateY(18px);
}

.slide.active .reveal {
  animation: heroReveal .9s cubic-bezier(.2, .8, .2, 1) forwards;
}

.slide.active .reveal.d1 {
  animation-delay: .15s;
}

.slide.active .reveal.d2 {
  animation-delay: .30s;
}

.slide.active .reveal.d3 {
  animation-delay: .45s;
}

.slide.active .reveal.d4 {
  animation-delay: .60s;
}

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide.active picture img {
    animation: none;
    transform: scale(1.04);
  }

  .slide.active .reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .sdot.active::after {
    animation: none;
  }
}

/* Product card — çerçevesiz, yumuşak */
.p-card { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.p-card:hover { transform: translateY(-4px); }
.p-card img.main { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.p-card:hover img.main { transform: scale(1.05); }
.p-card img.alt { opacity: 0; transition: opacity .6s ease; }
.p-card:hover img.alt { opacity: 1; }
.p-card .card-veil { background: linear-gradient(to top, rgba(27, 18, 21, .14), transparent 40%); opacity: 0; transition: opacity .4s ease; }
.p-card:hover .card-veil { opacity: 1; }
.p-card .wish { opacity: 0; transform: translateY(-4px); transition: all .3s cubic-bezier(.2, .8, .2, 1); }
.p-card:hover .wish { opacity: 1; transform: none; }
.p-card .quick { opacity: 0; transform: translateY(8px); transition: all .35s cubic-bezier(.2, .8, .2, 1); }
.p-card:hover .quick { opacity: 1; transform: none; }

/* Dokunmatik cihazlarda hover yok — eylemler görünür kalsın */
@media (hover: none) {
  .p-card .wish, .p-card .quick { opacity: 1; transform: none; }
  .p-card .card-veil { opacity: 0; }
}

/* Kategori kartı — Keşfet etiketi */
.cat-kesfet {
  transform: translateY(-150%);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease;
}

.cat-card:hover .cat-kesfet {
  transform: translateY(0);
  opacity: 1;
}

/* Story görselleri */
.story-img img {
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}

.story-img:hover img {
  transform: scale(1.07);
}

/* Marble texture */
.marble-card .inner {
  background:
    radial-gradient(600px 280px at 20% 20%, rgba(239, 226, 201, .6), transparent 60%),
    radial-gradient(500px 300px at 80% 80%, rgba(232, 218, 196, .6), transparent 60%),
    repeating-linear-gradient(115deg, rgba(31, 31, 31, .04) 0 1px, transparent 1px 120px),
    #fbf7f1;
}

/* Drawer */
.drawer {
  transform: translateX(-100%);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.drawer.right {
  transform: translateX(100%);
}

.drawer.open {
  transform: translateX(0);
}

.scrim {
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}

.scrim.open {
  opacity: 1;
  pointer-events: auto;
}

/* Search modal */
.search-pane {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s cubic-bezier(.2, .8, .2, 1);
}

.search-pane.open {
  opacity: 1;
  pointer-events: auto;
}

.search-pane .search-modal {
  transform: translateY(-42px) scale(.97);
  transition: transform .32s cubic-bezier(.32, 0, .2, 1), opacity .28s ease;
}

.search-pane.open .search-modal {
  transform: translateY(0) scale(1);
}

/* Fade up */
.fade-up {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp .9s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Badges */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 60px);
  background: #1b1215;
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: 0 12px 32px -12px rgba(27, 18, 21, .35);
  opacity: 0;
  pointer-events: none;
  transition: all .4s cubic-bezier(.2, .8, .2, 1);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* No scrollbar */
.no-sb::-webkit-scrollbar {
  display: none;
}

.no-sb {
  scrollbar-width: none;
}

/* Scrollbar hide utility */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Mobile nav icon spacing */
@media (max-width: 767px) {
  .icon-btn {
    width: 38px;
    height: 38px;
  }
}
/* Hero slayt geçişi (görünüm Tailwind ile, burada yalnız geçiş) */
.slide { opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.slide.active { opacity: 1; pointer-events: auto; }
.sdot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .55); border: 0; cursor: pointer; transition: all .35s ease; }
.sdot:hover { background: #fff; }
.sdot.active { width: 26px; background: #fff; }
.sdot.active::after { display: none; }