/* Rella Chair — Sancrea esinli arayüz (kırık beyaz) */

::selection { background: #BF2026; color: #fff; }
html { -webkit-font-smoothing: antialiased; }

/* Kaydırma çubuğu */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #F5F3EE; }
::-webkit-scrollbar-thumb { background: #D9D5CC; }
::-webkit-scrollbar-thumb:hover { background: #BF2026; }

/* =========================================================
   Navigasyon
   ========================================================= */
.nav-link { color: #57544E; transition: color .25s ease; }
.nav-link:hover, .nav-link.is-active { color: #BF2026; }
.nav-cta { background: #1A1A1A; color: #fff; border: 1px solid #1A1A1A; }
.nav-cta:hover { background: #BF2026; border-color: #BF2026; }

/* Logo: varsayılan (açık header) renkli, koyu hero üstünde beyaz */
.nav-logo-white { display: none; }
.nav-logo-light { display: block; }

/* Hero üstünde header: frosted koyu cam (görünür + blur) */
#site-nav.nav-hero {
  background: rgba(18,18,18,.32);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  transition: background .35s ease, border-color .35s ease;
}
#site-nav.nav-hero .nav-link { color: rgba(255,255,255,.85); }
#site-nav.nav-hero .nav-link:hover, #site-nav.nav-hero .nav-link.is-active { color: #fff; }
#site-nav.nav-hero:not(.scrolled) .nav-logo-light { display: none; }
#site-nav.nav-hero:not(.scrolled) .nav-logo-white { display: block; }
#site-nav.nav-hero .nav-cta { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
#site-nav.nav-hero .nav-cta:hover { background: #fff; color: #1A1A1A; border-color: #fff; }

/* Kaydırınca açık katı header */
#site-nav.nav-hero.scrolled {
  background: rgba(245,243,238,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid #E4E1D9;
}
#site-nav.nav-hero.scrolled .nav-link { color: #57544E; }
#site-nav.nav-hero.scrolled .nav-link:hover, #site-nav.nav-hero.scrolled .nav-link.is-active { color: #BF2026; }
#site-nav.nav-hero.scrolled .nav-cta { background: #1A1A1A; color: #fff; border-color: #1A1A1A; }
#site-nav.nav-hero.scrolled .nav-cta:hover { background: #BF2026; border-color: #BF2026; }

/* =========================================================
   Hero slider
   ========================================================= */
.hero-slide { opacity: 0; transition: opacity 1.1s cubic-bezier(.22,1,.36,1); }
.hero-slide.active { opacity: 1; }
.hero-thumb { opacity: .55; transition: opacity .3s ease; }
.hero-thumb.active { opacity: 1; outline: 2px solid #fff; outline-offset: -2px; }

/* =========================================================
   Yardımcılar
   ========================================================= */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .8s cubic-bezier(.22,1,.36,1); }
.img-zoom:hover img { transform: scale(1.05); }

@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; }
.reveal.in { animation: fade-up .9s cubic-bezier(.22,1,.36,1) forwards; }

/* Deneyim rozeti — sayma + yaylanan giriş (fade-up yerine pop) */
@keyframes badge-pop {
  0%   { opacity: 0; transform: scale(.6) translateY(12px); }
  60%  { opacity: 1; transform: scale(1.06) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}
.reveal.badge-pop.in { animation: badge-pop .8s cubic-bezier(.34,1.56,.64,1) forwards; }

/* Kart hover yükselme (kategori / koleksiyon kartları) */
.hover-lift { transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.35); }

/* Kategori kartı — belirgin hover: daha güçlü yakınlaşma + degrade koyulaşma + başlık yükselişi */
.cat-zoom img { transition: transform 1s cubic-bezier(.22,1,.36,1); }
.group:hover .cat-zoom img { transform: scale(1.12); }
.cat-grad { opacity: .82; transition: opacity .55s ease; }
.group:hover .cat-grad { opacity: 1; }
.cat-title { transition: transform .55s cubic-bezier(.22,1,.36,1); }
.group:hover .cat-title { transform: translateY(-4px); }

/* Hareketi azalt tercihinde animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in, .reveal.badge-pop.in, .hover-lift, .img-zoom img,
  .cat-zoom img, .cat-title, .hero-slide {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Script vurgu (Sancrea "Our future" gibi) */
.script { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; }

.eyebrow::before {
  content: ""; display: inline-block; width: 28px; height: 1px;
  background: #BF2026; margin-right: 12px; vertical-align: middle;
}

/* =========================================================
   Katalog sayfası — Mexil esinli akordeon paneller
   ========================================================= */
.cat-panels { display: flex; flex-direction: column; background: #FFFFFF; }

.cat-panel {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #F5F3EE;
  border-top: 1px solid #E4E1D9;
  text-decoration: none;
}
.cat-panel:first-child { border-top: 0; }

/* Kapak görseli */
.cat-panel__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  /* Kapalı durumda kapak silinmiyor: hafifçe görünür (silüet) */
  opacity: 1; transform: scale(1.05);
  filter: grayscale(.18) brightness(1.05) contrast(.96);
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform 1.1s cubic-bezier(.22,1,.36,1),
              filter .6s ease;
  z-index: 0;
}

/* Kapalı panellerde kapağın üstüne beyaz tül → silüet/hafif görünüm */
.cat-panel.has-cover::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(247,245,241,.62) 0%,
    rgba(247,245,241,.74) 55%,
    rgba(247,245,241,.84) 100%);
  transition: opacity .6s ease;
}
.cat-panel__overlay {
  position: absolute; inset: 0; z-index: 1; opacity: 0;
  background: linear-gradient(to top,
    rgba(12,11,10,.92) 0%, rgba(12,11,10,.60) 40%, rgba(12,11,10,.12) 72%, rgba(12,11,10,0) 100%);
  transition: opacity .6s ease;
}
.cat-panel__body { position: relative; z-index: 2; }
.cat-panel.has-cover .cat-panel__body { text-shadow: 0 1px 14px rgba(0,0,0,.55); }

.cat-panel__title { color: #6E6B65; transition: color .45s ease, text-shadow .45s ease; overflow-wrap: break-word; hyphens: auto; }
/* Kapalı kapaklı panel başlığı silüet üzerinde net dursun */
.cat-panel.has-cover:not(.is-open):not(:hover) .cat-panel__title { color: #4A4843; text-shadow: 0 1px 12px rgba(255,255,255,.7); }
.cat-panel__desc  { color: #6E6B65; opacity: 0; transition: opacity .45s ease, color .45s ease; }
.cat-panel__cta   { color: #1A1A1A; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease, color .45s ease; }

/* AÇIK panel (.is-open ya da hover) → görsel + degrade + beyaz metin */
.cat-panel.has-cover.is-open .cat-panel__img,
.cat-panel.has-cover:hover   .cat-panel__img { opacity: 1; transform: scale(1); filter: none; }
/* Açılınca beyaz tül kaybolur → net görsel */
.cat-panel.has-cover.is-open::before,
.cat-panel.has-cover:hover::before { opacity: 0; }
.cat-panel.has-cover.is-open .cat-panel__overlay,
.cat-panel.has-cover:hover   .cat-panel__overlay { opacity: 1; }
.cat-panel.has-cover.is-open .cat-panel__title,
.cat-panel.has-cover:hover   .cat-panel__title,
.cat-panel.has-cover.is-open .cat-panel__desc,
.cat-panel.has-cover:hover   .cat-panel__desc,
.cat-panel.has-cover.is-open .cat-panel__cta,
.cat-panel.has-cover:hover   .cat-panel__cta { color: #fff; }

.cat-panel:not(.has-cover).is-open .cat-panel__title,
.cat-panel:not(.has-cover):hover  .cat-panel__title { color: #1A1A1A; }

.cat-panel.is-open .cat-panel__desc,
.cat-panel:hover   .cat-panel__desc { opacity: 1; }
.cat-panel.is-open .cat-panel__cta,
.cat-panel:hover   .cat-panel__cta { opacity: 1; transform: translateY(0); }

/* Boş yer tutucu sütunlar (yeni katalog ekledikçe dolar) */
.cat-panel--empty { background: #F1EEE7; pointer-events: none; align-items: center; justify-content: center; gap: 16px; }
.cat-empty__mark { width: 56px; height: 56px; border-radius: 9999px; border: 1px solid #D9D5CC; display: flex; align-items: center; justify-content: center; color: #B9B4AA; }
.cat-empty__mark svg { width: 22px; height: 22px; }
.cat-empty__label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #B9B4AA; }

/* ============== GENİŞ EKRAN: AKORDEON ============== */
@media (min-width: 1024px) {
  .cat-panels { flex-direction: row; align-items: stretch; }
  .cat-panel {
    flex: 1 1 0;
    min-height: 78vh;
    border-top: 0;
    border-left: 1px solid #E4E1D9;
    transition: flex-grow .55s cubic-bezier(.4,0,.2,1);
  }
  .cat-panel:first-child { border-left: 0; }

  /* Açık panel genişler; kapak (özellikle şeffaf PNG) öne çıkıp panelden taşar */
  .cat-panel.has-cover.is-open,
  .cat-panel.has-cover:hover { flex-grow: 2.6; overflow: visible; z-index: 5; }
  .cat-panel.has-cover.is-open .cat-panel__img,
  .cat-panel.has-cover:hover   .cat-panel__img { transform: scale(1.06) translateY(-2%); }
}

/* Dokunmatik / küçük ekran: kapaklı paneller görseli ve metni hep gösterir */
@media (max-width: 1023px) {
  .cat-panel--empty { display: none; }
  .cat-panel.has-cover .cat-panel__img,
  .cat-panel.has-cover .cat-panel__overlay { opacity: 1; transform: none; filter: none; }
  .cat-panel.has-cover::before { opacity: 0; }
  .cat-panel.has-cover .cat-panel__title,
  .cat-panel.has-cover .cat-panel__desc,
  .cat-panel.has-cover .cat-panel__cta { color: #fff; }
  .cat-panel__desc { opacity: 1; }
  .cat-panel__cta  { opacity: 1; transform: none; }
}