/* =====================================================================
   CABIR LUXURY JEWELRY — Ana Stil Dosyası
   Palet: Onyx siyahı + sıcak fildişi + altın gradyan + garnet vurgu
   Tipografi: Cormorant Garamond (başlık) / Jost (gövde ve etiketler)
   ===================================================================== */

:root{
  --onyx: #0b0b0d;
  --onyx-2: #121215;
  --onyx-3: #1a1a1f;
  --ivory: #f3ecdd;
  --ivory-dim: #cfc6b4;
  --gold-light: #eecf8e;
  --gold: #c9a227;
  --gold-deep: #8b6914;
  --garnet: #5c1a1b;
  --garnet-light: #8a2b2d;
  --hairline: rgba(201,162,39,0.25);

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;

  --gold-gradient: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold) 25%, var(--gold-light) 50%, var(--gold) 75%, var(--gold-deep) 100%);
  --ease-lux: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  background: var(--onyx);
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection{ background: var(--gold); color: var(--onyx); }

::-webkit-scrollbar{ width: 8px; }
::-webkit-scrollbar-track{ background: var(--onyx); }
::-webkit-scrollbar-thumb{ background: var(--gold-deep); border-radius: 4px; }

a{ color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------------
   Tipografi yardımcıları
   --------------------------------------------------------------------- */
.font-display{ font-family: var(--font-display); }
.font-body{ font-family: var(--font-body); }

.gold-text{
  background: var(--gold-gradient);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

@keyframes shimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

.eyebrow{
  font-family: var(--font-body);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--gold);
}

.hairline{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
  border: none;
}

.hairline-solid{
  height: 1px;
  background: var(--gold-deep);
  opacity: .5;
  border: none;
}

/* Halka rozet - bölüm ayırıcı imza öğesi (logo motifinden ilham) */
.ring-divider{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  position: relative;
  flex-shrink: 0;
}
.ring-divider::before{
  content:'';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  opacity: .6;
}

/* ---------------------------------------------------------------------
   YÜKLEME EKRANI (Loading Screen)
   --------------------------------------------------------------------- */
#cabir-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--onyx);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.9s var(--ease-lux), visibility 0.9s var(--ease-lux);
}
#cabir-loader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#cabir-loader::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 40%, rgba(201,162,39,0.10), transparent 60%);
  pointer-events:none;
}

.loader-emblem{
  position: relative;
  width: 132px;
  height: 132px;
  display:flex; align-items:center; justify-content:center;
}

.loader-ring{
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--gold-deep);
  opacity: 0;
  animation: ringConverge 2.2s var(--ease-lux) infinite;
}
.loader-ring.r1{ width: 132px; height: 132px; animation-delay: 0s; border-color: var(--gold); }
.loader-ring.r2{ width: 132px; height: 132px; animation-delay: .25s; border-color: var(--gold-light); }
.loader-ring.r3{ width: 132px; height: 132px; animation-delay: .5s; border-color: var(--gold-deep); }

@keyframes ringConverge{
  0%{ transform: scale(1.8) rotate(0deg); opacity: 0; }
  35%{ opacity: .9; }
  70%{ transform: scale(1) rotate(180deg); opacity: .5; }
  100%{ transform: scale(0.94) rotate(360deg); opacity: 0; }
}

.loader-emblem img{
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(201,162,39,0.35));
  animation: emblemBreathe 2.2s var(--ease-lux) infinite;
}
@keyframes emblemBreathe{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.05); }
}

.loader-caption{
  margin-top: 28px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--ivory-dim);
}

.loader-bar{
  margin-top: 16px;
  width: 160px;
  height: 1px;
  background: rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.loader-bar::after{
  content:'';
  position:absolute; left:-40%; top:0; bottom:0; width: 40%;
  background: var(--gold-gradient);
  animation: barSweep 1.4s ease-in-out infinite;
}
@keyframes barSweep{
  0%{ left: -40%; }
  100%{ left: 100%; }
}

/* ---------------------------------------------------------------------
   HEADER
   --------------------------------------------------------------------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 22px 0;
  transition: background .5s var(--ease-lux), padding .4s var(--ease-lux), border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(11,11,13,0.92);
  backdrop-filter: blur(10px);
  padding: 12px 0;
  border-color: var(--hairline);
}
.site-logo img{ height: 42px; transition: height .4s var(--ease-lux); }
.site-header.is-scrolled .site-logo img{ height: 34px; }
.site-logo-word{ font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .12em; }

.nav-link{
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  position: relative;
  padding-bottom: 4px;
}
.nav-link::after{
  content:'';
  position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--gold);
  transition: width .35s var(--ease-lux);
}
.nav-link:hover, .nav-link.is-active{ color: var(--gold-light); }
.nav-link:hover::after, .nav-link.is-active::after{ width: 100%; }

.lang-switch{
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--ivory-dim);
}
.lang-switch a{ padding: 2px 4px; }
.lang-switch a.active{ color: var(--gold); }

/* ---------------------------------------------------------------------
   BUTTON
   --------------------------------------------------------------------- */
.btn-gold{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 34px;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: color .4s var(--ease-lux);
}
.btn-gold::before{
  content:'';
  position:absolute; inset:0;
  background: var(--gold-gradient);
  transform: translateX(-101%);
  transition: transform .5s var(--ease-lux);
  z-index: -1;
}
.btn-gold:hover{ color: var(--onyx); }
.btn-gold:hover::before{ transform: translateX(0); }

.btn-outline{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border: 1px solid rgba(243,236,221,0.3);
  color: var(--ivory);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: border-color .3s, color .3s;
}
.btn-outline:hover{ border-color: var(--gold); color: var(--gold-light); }

/* ---------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------- */
.hero{
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 90px;
  background:
    radial-gradient(circle at 50% 20%, rgba(201,162,39,0.12), transparent 55%),
    var(--onyx);
  overflow: hidden;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(201,162,39,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,39,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
  opacity: .5;
}
.hero-emblem{
  width: 108px; height: 108px;
  margin: 0 auto 32px;
  opacity: 0;
  animation: heroFadeUp 1.1s var(--ease-lux) forwards;
  animation-delay: .15s;
}
.hero-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 1.05;
  opacity: 0;
  animation: heroFadeUp 1.1s var(--ease-lux) forwards;
  animation-delay: .35s;
}
.hero-tagline{
  margin-top: 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  color: var(--ivory-dim);
  opacity: 0;
  animation: heroFadeUp 1.1s var(--ease-lux) forwards;
  animation-delay: .55s;
}
.hero-cta{
  margin-top: 44px;
  opacity: 0;
  animation: heroFadeUp 1.1s var(--ease-lux) forwards;
  animation-delay: .75s;
}
@keyframes heroFadeUp{
  from{ opacity: 0; transform: translateY(22px); }
  to{ opacity: 1; transform: translateY(0); }
}

.scroll-cue{
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.scroll-cue .line{ width:1px; height: 34px; background: linear-gradient(var(--gold), transparent); animation: scrollPulse 1.8s ease-in-out infinite; }
@keyframes scrollPulse{ 0%,100%{ opacity:.3;} 50%{ opacity:1;} }

/* ---------------------------------------------------------------------
   SECTION LABELS
   --------------------------------------------------------------------- */
.section-head{ text-align:center; margin-bottom: 64px; }
.section-head .eyebrow{ display:flex; align-items:center; justify-content:center; gap:14px; }
.section-head .eyebrow::before, .section-head .eyebrow::after{
  content:''; width: 34px; height:1px; background: var(--gold-deep);
}
.section-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: 14px;
}
.section-subtitle{
  margin-top: 12px;
  color: var(--ivory-dim);
  font-size: .95rem;
}

/* ---------------------------------------------------------------------
   PRODUCT CARD (Vitrin kartı)
   --------------------------------------------------------------------- */
.product-card{
  position: relative;
  background: var(--onyx-2);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color .4s var(--ease-lux), transform .4s var(--ease-lux);
}
.product-card:hover{ border-color: var(--hairline); transform: translateY(-6px); }
.product-card .img-wrap{
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--onyx-3);
}
.product-card .img-wrap img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-lux), filter .8s var(--ease-lux);
  filter: saturate(0.94);
}
.product-card:hover .img-wrap img{ transform: scale(1.08); filter: saturate(1.05); }
.product-card .img-wrap::after{
  content:'';
  position:absolute; inset:0;
  box-shadow: inset 0 0 0 1px rgba(201,162,39,0);
  transition: box-shadow .4s;
}
.product-card:hover .img-wrap::after{ box-shadow: inset 0 0 0 1px rgba(201,162,39,0.35); }

.product-card .badge{
  position: absolute; top: 14px; left: 14px;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  padding: 6px 10px;
  background: rgba(11,11,13,0.75);
  border: 1px solid var(--gold-deep);
  color: var(--gold-light);
}
.product-card .badge.private{ border-color: var(--garnet-light); color: #e8a3a4; }

.product-card .body{ padding: 22px 20px 26px; }
.product-card .cat{ font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.product-card .name{ font-family: var(--font-display); font-size: 1.35rem; margin-top: 8px; }
.product-card .price{ margin-top: 10px; font-size: .9rem; color: var(--ivory-dim); }

/* ---------------------------------------------------------------------
   CATEGORY TILE
   --------------------------------------------------------------------- */
.cat-tile{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--onyx-2);
  border: 1px solid rgba(255,255,255,0.06);
}
.cat-tile img{ width:100%; height:100%; object-fit:cover; transition: transform .9s var(--ease-lux); opacity:.75; }
.cat-tile:hover img{ transform: scale(1.1); }
.cat-tile .overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,11,13,0.1) 30%, rgba(11,11,13,0.92) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding: 26px;
}
.cat-tile .name{ font-family: var(--font-display); font-size: 1.6rem; }
.cat-tile .link{ margin-top: 6px; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

/* ---------------------------------------------------------------------
   PRIVATE COLLECTION BANNER
   --------------------------------------------------------------------- */
.private-banner{
  position: relative;
  padding: 90px 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(92,26,27,0.35), transparent 60%),
    var(--onyx-2);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

/* ---------------------------------------------------------------------
   SEAL (mühür) — Özel koleksiyon erişim animasyonu
   --------------------------------------------------------------------- */
.seal-wrap{
  width: 150px; height: 150px;
  margin: 0 auto 30px;
  position: relative;
  cursor: default;
}
.seal-ring{
  position:absolute; inset:0;
  border-radius:50%;
  border: 1px solid var(--gold);
}
.seal-ring.inner{ inset: 14px; border-color: var(--gold-deep); }
.seal-wrap img{
  position:absolute; inset:0; margin:auto;
  width: 92px; height:92px; object-fit:contain;
}
.seal-wrap.is-unlocking .seal-ring{ animation: sealBreak 1s var(--ease-lux) forwards; }
.seal-wrap.is-unlocking .seal-ring.inner{ animation-delay: .08s; }
@keyframes sealBreak{
  0%{ transform: scale(1) rotate(0); opacity:1; }
  100%{ transform: scale(1.4) rotate(25deg); opacity:0; }
}
.seal-wrap.is-unlocking img{ animation: sealGlow .9s var(--ease-lux) forwards; }
@keyframes sealGlow{
  0%{ filter: drop-shadow(0 0 0 rgba(201,162,39,0)); }
  50%{ filter: drop-shadow(0 0 24px rgba(201,162,39,0.7)); }
  100%{ filter: drop-shadow(0 0 6px rgba(201,162,39,0.3)); }
}

/* ---------------------------------------------------------------------
   FORMS
   --------------------------------------------------------------------- */
.lux-input{
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(243,236,221,0.25);
  padding: 12px 4px;
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: .95rem;
  transition: border-color .3s;
}
.lux-input:focus{ outline: none; border-color: var(--gold); }
.lux-input::placeholder{ color: rgba(243,236,221,0.35); }
.lux-label{ font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ivory-dim); margin-bottom: 6px; display:block; }

.code-input{
  text-align:center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------- */
.site-footer{
  background: var(--onyx-2);
  border-top: 1px solid var(--hairline);
  padding: 72px 0 30px;
}
.footer-heading{ font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.footer-link{ display:block; padding: 6px 0; color: var(--ivory-dim); font-size: .88rem; transition: color .3s, padding-left .3s; }
.footer-link:hover{ color: var(--gold-light); padding-left: 6px; }
.social-icon{
  width: 40px; height: 40px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(243,236,221,0.2);
  border-radius: 50%;
  transition: border-color .3s, color .3s, transform .3s;
}
.social-icon:hover{ border-color: var(--gold); color: var(--gold-light); transform: translateY(-3px); }

/* ---------------------------------------------------------------------
   MISC UTILS
   --------------------------------------------------------------------- */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-lux), transform .8s var(--ease-lux); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

.page-hero{
  padding: 170px 0 90px;
  text-align:center;
  background: radial-gradient(circle at 50% 0%, rgba(201,162,39,0.12), transparent 60%);
}
.page-hero h1{ font-family: var(--font-display); font-size: clamp(2.2rem,5vw,3.6rem); }
.breadcrumb{ font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ivory-dim); margin-top: 14px; }
.breadcrumb a:hover{ color: var(--gold); }

.chip{
  display:inline-flex; align-items:center;
  padding: 9px 20px;
  border: 1px solid rgba(243,236,221,0.2);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ivory-dim);
  transition: all .3s;
}
.chip:hover, .chip.active{ border-color: var(--gold); color: var(--gold-light); background: rgba(201,162,39,0.08); }

@media (max-width: 768px){
  .site-header .nav-link{ font-size: .72rem; }
}