/* =========================================================================
   SCOPO — Premium header
   Deep night navy glass capsule, brushed-brass accents (Scopo machines brass
   fittings), a liquid hover pill as the signature detail.
   template-parts/header-premium.php · assets/js/header-premium.js
   ========================================================================= */

:root{
  --sx-ink: #0a1424;
  --sx-navy: #1f3a5f;
  --sx-glass: rgba(9, 18, 33, .9);
  --sx-glass-strong: rgba(9, 18, 33, .96);
  --sx-brass: #c9a46b;
  --sx-brass-light: #e8d2a6;
  --sx-brass-deep: #9c7a43;
  --sx-text: rgba(240, 243, 248, .74);
  --sx-text-strong: #f6f8fb;
  --sx-line: rgba(232, 210, 166, .18);
  --sx-ease: cubic-bezier(.22, .8, .2, 1);
  --sx-ease-out: cubic-bezier(.16, 1, .3, 1);
  --sx-sans: "Geist", system-ui, sans-serif;
  --sx-display: "Geist", system-ui, sans-serif;
  --sx-mono: "Geist Mono", ui-monospace, monospace;
  --sx-bar-h: 72px;
  --sx-top: 18px;
}

/* İçerik header'ın altında başlasın (eski header ~100px yer kaplıyordu) */
#smooth-content::before{ content: ""; display: block; height: calc(var(--sx-bar-h) + var(--sx-top) + 14px); background: #fff; }
/* Premium slider olan sayfada boşluk bloğu yok: slider header'ın altından kendisi başlar */
body:has(.sx-hero) #smooth-content::before{ display: none; }

/* ---------------------------------------------------------------- Bar */
.sx-header{
  position: fixed; inset: var(--sx-top) 0 auto; z-index: 999;
  display: flex; justify-content: center; padding: 0 24px;
  pointer-events: none;
  transition: transform .6s var(--sx-ease);
}
.sx-header.is-hidden{ transform: translateY(calc(-100% - var(--sx-top) - 8px)); }

.sx-bar{
  position: relative; pointer-events: auto;
  display: flex; align-items: center; gap: 28px;
  width: min(1320px, 100%); height: var(--sx-bar-h); padding: 0 12px 0 26px;
  border-radius: 999px;
  background: var(--sx-glass);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    0 18px 50px -18px rgba(5, 12, 24, .55),
    0 2px 6px rgba(5, 12, 24, .18);
  font-family: var(--sx-sans);
  transition: height .45s var(--sx-ease), background .45s var(--sx-ease), width .6s var(--sx-ease);
  animation: sxDrop 1.1s var(--sx-ease-out) .15s both;
}
/* İnce pirinç kenar: üstte parlak, altta sönük */
.sx-bar::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(115deg, rgba(232, 210, 166, .55), rgba(201, 164, 107, .12) 35%, rgba(255, 255, 255, .04) 60%, rgba(201, 164, 107, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.sx-header.is-scrolled .sx-bar{ height: 60px; background: var(--sx-glass-strong); width: min(1320px, 100%); }

@keyframes sxDrop{
  from{ opacity: 0; transform: translateY(-28px) scale(.97); filter: blur(6px); }
  to{ opacity: 1; transform: none; filter: none; }
}

/* Okuma ilerlemesi: kapsülün altında pirinç ince çizgi */
.sx-progress{
  position: absolute; left: 34px; right: 34px; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--sx-brass-light), var(--sx-brass) 60%, transparent);
  transform: scaleX(var(--sx-p, 0)); transform-origin: left center; opacity: .9;
}

/* ---------------------------------------------------------------- Logo */
.sx-logo{
  flex: 0 0 auto; display: flex; align-items: center; height: 46px; padding: 0 18px; margin-left: -16px; border-radius: 999px;
  background: linear-gradient(180deg, #fdfdfe, #e7ebf1);
  box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(10, 20, 36, .08) inset, 0 8px 20px -10px rgba(0, 0, 0, .6);
  transition: transform .5s var(--sx-ease), box-shadow .4s var(--sx-ease);
}
.sx-logo img{ height: 24px; width: auto; display: block; }
.sx-logo:hover{ transform: translateY(-1px); box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(201, 164, 107, .5), 0 12px 26px -10px rgba(201, 164, 107, .6); }

/* ---------------------------------------------------------------- Nav + kayan kapsül */
.sx-nav{ position: relative; flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.sx-menu{ position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sx-menu > li{ position: relative; list-style: none; opacity: 0; animation: sxItem .8s var(--sx-ease-out) both; animation-delay: calc(.45s + var(--i, 0) * 70ms); }
@keyframes sxItem{ from{ opacity: 0; transform: translateY(-8px); } to{ opacity: 1; transform: none; } }

.sx-menu > li > a{
  position: relative; display: flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 clamp(11px, 1vw, 16px); border-radius: 999px;
  color: var(--sx-text) !important; font-size: 14.5px; font-weight: 500; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  transition: color .35s var(--sx-ease);
}
.sx-menu > li > a:hover,
.sx-menu > li.is-pill > a,
.sx-menu > li.current-menu-item > a,
.sx-menu > li.current-menu-ancestor > a{ color: var(--sx-text-strong) !important; }

/* Alt menüsü olan öğede küçük ok */
.sx-menu > li.menu-item-has-children > a::after{
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .6; transition: transform .35s var(--sx-ease);
}
.sx-menu > li.menu-item-has-children:hover > a::after{ transform: rotate(225deg) translate(-2px, -2px); }

/* İmleci izleyen ışıklı kapsül (imza detay) */
.sx-pill{
  position: absolute; top: 50%; left: 0; z-index: 0; height: 42px; width: 0;
  border-radius: 999px; pointer-events: none; opacity: 0;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(232, 210, 166, .22), rgba(232, 210, 166, 0) 60%),
    rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 1px rgba(232, 210, 166, .22) inset, 0 8px 24px -10px rgba(201, 164, 107, .55);
  transform: translate3d(var(--x, 0), -50%, 0);
  transition: transform .55s var(--sx-ease), width .55s var(--sx-ease), opacity .35s ease;
}
.sx-pill.is-on{ opacity: 1; }
/* Aktif sayfanın altında küçük pirinç nokta */
.sx-menu > li.current-menu-item > a::before,
.sx-menu > li.current-menu-ancestor > a::before{
  content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--sx-brass); box-shadow: 0 0 10px var(--sx-brass);
}

/* Alt menü: cam kart */
.sx-menu .sub-menu{
  position: absolute; top: calc(100% + 14px); left: 50%; min-width: 240px; margin: 0; padding: 10px;
  list-style: none; border-radius: 20px;
  background: var(--sx-glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 0 0 1px var(--sx-line) inset, 0 30px 60px -20px rgba(5, 12, 24, .6);
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px) scale(.98); transform-origin: top center;
  transition: opacity .35s var(--sx-ease), transform .45s var(--sx-ease), visibility .35s;
}
.sx-menu .sub-menu::before{ content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* hover köprüsü */
.sx-menu > li:hover > .sub-menu,
.sx-menu > li:focus-within > .sub-menu{ opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.sx-menu .sub-menu a{
  display: block; padding: 11px 14px; border-radius: 12px;
  color: var(--sx-text) !important; font-size: 14px; text-decoration: none;
  transition: background .25s, color .25s, padding .35s var(--sx-ease);
}
.sx-menu .sub-menu a:hover{ background: rgba(255, 255, 255, .06); color: var(--sx-text-strong) !important; padding-left: 20px; }

/* ---------------------------------------------------------------- Sağ: sepet + CTA */
.sx-actions{ flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }

.sx-basket{
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  color: var(--sx-text-strong) !important; background: rgba(255, 255, 255, .05);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset;
  transition: background .3s, transform .4s var(--sx-ease), box-shadow .3s;
}
.sx-basket:hover{ background: rgba(255, 255, 255, .1); transform: translateY(-1px); box-shadow: 0 0 0 1px var(--sx-line) inset; }
.sx-badge{
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px;
  background: linear-gradient(135deg, var(--sx-brass-light), var(--sx-brass) 55%, var(--sx-brass-deep));
  color: var(--sx-ink); font: 700 10.5px/1 var(--sx-sans);
  box-shadow: 0 0 0 2px var(--sx-ink);
  transition: transform .4s var(--sx-ease);
}
.sx-badge.is-bump{ animation: sxBump .6s var(--sx-ease); }
@keyframes sxBump{ 30%{ transform: scale(1.35); } 100%{ transform: scale(1); } }

.sx-cta{
  flex: 0 0 auto; white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 8px 0 24px; border-radius: 999px;
  background: linear-gradient(135deg, var(--sx-brass-light) 0%, var(--sx-brass) 48%, var(--sx-brass-deep) 100%);
  color: var(--sx-ink) !important; font: 600 14.5px/1 var(--sx-sans); letter-spacing: .01em; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 10px 26px -10px rgba(201, 164, 107, .75);
  transition: box-shadow .4s var(--sx-ease), transform .35s var(--sx-ease);
  will-change: transform;
}
/* Yüzeyden geçen ışık yansıması */
.sx-cta::after{
  content: ""; position: absolute; inset: -40% auto -40% -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg) translateX(0); transition: transform .9s var(--sx-ease);
}
.sx-cta:hover::after{ transform: skewX(-18deg) translateX(420%); }
.sx-cta:hover{ box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 16px 34px -12px rgba(201, 164, 107, .9); }
.sx-cta-icon{
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--sx-ink); color: var(--sx-brass-light);
  transition: transform .5s var(--sx-ease);
}
.sx-cta:hover .sx-cta-icon{ transform: rotate(45deg); }

/* ---------------------------------------------------------------- Burger */
.sx-burger{
  display: none; position: relative; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset;
}
.sx-burger span{
  position: absolute; left: 14px; right: 14px; height: 1.5px; border-radius: 2px; background: var(--sx-text-strong);
  transition: transform .5s var(--sx-ease), top .5s var(--sx-ease), width .5s var(--sx-ease);
}
.sx-burger span:nth-child(1){ top: 19px; }
.sx-burger span:nth-child(2){ top: 26px; right: 20px; }
.sx-burger[aria-expanded="true"] span:nth-child(1){ top: 22.5px; transform: rotate(45deg); }
.sx-burger[aria-expanded="true"] span:nth-child(2){ top: 22.5px; right: 14px; transform: rotate(-45deg); }

/* ---------------------------------------------------------------- Tam ekran menü */
.sx-overlay{
  position: fixed; inset: 0; z-index: 998; display: flex; align-items: stretch;
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(201, 164, 107, .16), transparent 60%),
    radial-gradient(70% 50% at 0% 100%, rgba(31, 58, 95, .55), transparent 60%),
    var(--sx-ink);
  clip-path: circle(0 at var(--ox, 90%) var(--oy, 40px));
  visibility: hidden;
  transition: clip-path .9s var(--sx-ease), visibility 0s linear .9s;
}
.sx-overlay.is-open{ clip-path: circle(150% at var(--ox, 90%) var(--oy, 40px)); visibility: visible; transition: clip-path .9s var(--sx-ease), visibility 0s; }
.sx-overlay-inner{
  width: 100%; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--sx-bar-h) + var(--sx-top) + 40px) 28px 40px; overflow-y: auto;
}
.sx-overlay-nav ul{ list-style: none; margin: 0; padding: 0; }
.sx-overlay-nav > ul > li{ border-bottom: 1px solid var(--sx-line); overflow: hidden; }
.sx-overlay-nav > ul > li > a{
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0;
  color: var(--sx-text-strong) !important; font: 700 clamp(30px, 8vw, 48px)/1.05 var(--sx-display); text-transform: none; letter-spacing: -.045em; text-decoration: none;
  transform: translateY(110%); transition: transform .9s var(--sx-ease-out), color .3s;
  transition-delay: calc(.12s + var(--i, 0) * 60ms);
}
.sx-overlay-nav > ul > li > a::after{ content: counter(sxitem, decimal-leading-zero); counter-increment: sxitem; font: 500 12px var(--sx-mono); font-style: normal; color: var(--sx-brass); }
.sx-overlay-nav > ul{ counter-reset: sxitem; }
.sx-overlay.is-open .sx-overlay-nav > ul > li > a{ transform: none; }
.sx-overlay-nav > ul > li > a:hover{ color: var(--sx-brass-light) !important; }
.sx-overlay-nav .sub-menu{ padding: 0 0 14px; }
.sx-overlay-nav .sub-menu a{ display: block; padding: 6px 0; color: var(--sx-text) !important; font: 500 15px var(--sx-sans); text-decoration: none; }
.sx-overlay-foot{
  display: flex; flex-direction: column; gap: 18px; margin-top: 36px;
  opacity: 0; transform: translateY(16px); transition: opacity .6s ease .45s, transform .8s var(--sx-ease-out) .45s;
}
.sx-overlay.is-open .sx-overlay-foot{ opacity: 1; transform: none; }
.sx-cta--wide{ justify-content: space-between; height: 58px; padding-left: 28px; }
.sx-overlay-mail{ color: var(--sx-text) !important; font: 500 14px var(--sx-sans); text-decoration: none; }
html.sx-lock, html.sx-lock body{ overflow: hidden !important; }

/* ---------------------------------------------------------------- Uyum: eski tema öğeleri */
.sx-header ~ .offcanvas-overlay{ display: none; }

/* Sevkiyat sayfası butonu (Let's Talk'ın solunda) */
.sx-ship{
  display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 20px; border-radius: 999px;
  color: var(--sx-text-strong) !important; font: 500 14.5px/1 var(--sx-sans); text-decoration: none;
  box-shadow: 0 0 0 1px rgba(232, 210, 166, .3) inset;
  transition: box-shadow .4s var(--sx-ease), color .3s, background .3s;
}
.sx-ship svg{ color: var(--sx-brass); transition: transform .6s var(--sx-ease); }
.sx-ship:hover{ background: rgba(232, 210, 166, .08); box-shadow: 0 0 0 1px var(--sx-brass) inset; color: var(--sx-brass-light) !important; }
.sx-ship:hover svg{ transform: translateX(4px); }

/* Temanın "yukarı çık" butonu: ikon fontu (Font Awesome) yüklenmezse kare görünüyordu.
   Ok CSS ile çizilir; cam zemin + pirinç ilerleme halkası. */
.progress-wrap{ right: 24px; bottom: 24px; }
.progress-wrap.active-progress{
  mix-blend-mode: normal; background: rgba(10, 16, 28, .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(232, 210, 166, .22) inset, 0 12px 30px -12px rgba(0, 0, 0, .6);
}
.progress-wrap::after{
  content: "" !important; font: 0/0 a !important;
  left: 50%; top: 50%; width: 10px; height: 10px; margin: -3px 0 0 -5px; border-radius: 1px;
  border-left: 1.8px solid var(--sx-brass-light); border-top: 1.8px solid var(--sx-brass-light);
  transform: rotate(45deg); transition: transform .4s var(--sx-ease);
}
.progress-wrap:hover::after{ transform: translateY(-3px) rotate(45deg); }
.progress-wrap svg.progress-circle path{ fill: none !important; stroke: var(--sx-brass) !important; stroke-width: 3 !important; }

/* ---------------------------------------------------------------- Responsive */
/* Dar masaüstü: Shipping yalnız simge, araları sıkılaştır */
@media (max-width: 1439.98px){
  .sx-bar{ gap: 18px; }
  .sx-ship{ width: 50px; padding: 0; justify-content: center; }
  .sx-ship span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 1199.98px){
  .sx-ship{ width: 44px; height: 44px; padding: 0; justify-content: center; }
  .sx-ship span{ display: none; }
  :root{ --sx-bar-h: 64px; --sx-top: 12px; }
  .sx-header{ padding: 0 12px; }
  .sx-bar{ gap: 12px; padding: 0 9px 0 20px; }
  .sx-header.is-scrolled .sx-bar{ height: 58px; width: 100%; }
  .sx-nav{ display: none; }
  .sx-actions{ margin-left: auto; gap: 8px; }
  .sx-actions > .sx-cta{ display: none; }
  .sx-burger{ display: block; }
  .sx-logo{ height: 42px; padding: 0 14px; margin-left: -12px; }
  .sx-progress{ left: 26px; right: 26px; }
}
@media (min-width: 1200px){
  .sx-overlay{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .sx-bar, .sx-menu > li{ animation: none; opacity: 1; }
  .sx-header, .sx-pill, .sx-overlay, .sx-overlay-nav > ul > li > a, .sx-overlay-foot, .sx-cta, .sx-cta::after{ transition: none !important; }
}