/* ==========================================================================
   Novatek · Gece Hero v8  (hero.css)
   ortak.css'ten SONRA yüklenir. Hero her temada koyudur ("sahne"),
   sayfanın geri kalanı açık/koyu temayı izler.
   ========================================================================== */

#nh {
  --nh-gece: #0b1014;
  --nh-cizgi: rgba(214, 232, 238, .10);
  --nh-cizgi-2: rgba(214, 232, 238, .18);
  --nh-yazi: #eef3f4;
  --nh-yazi-2: #a7b7be;
  --nh-yazi-3: #6f8189;
  --nh-kirmizi: #e8384f;
  --nh-pembe: #ff8a8f;
  --nh-yesil: #43c586;
  --nh-amber: #f0b43c;
  --nh-vurgu: #ef4458;     /* dönen kelime: tek renk */
  --nh-mono: var(--mono, 'Geist Mono', ui-monospace, monospace);
  --nh-nav: 69px;          /* sabit nav yüksekliği */
  --nh-sure: 4400ms;       /* bir ürünün ekranda kalma süresi */
  --nh-yumusak: cubic-bezier(.2, .8, .2, 1);
  --nh-yay: cubic-bezier(.2, 1.12, .3, 1);

  position: relative;
  z-index: 2;              /* arama sonuçları alttaki bölümün üstünde açılsın */
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--nh-nav));
  padding-top: var(--nh-nav);
  color: var(--nh-yazi);
  color-scheme: dark;
  background: var(--nh-gece);   /* v5.1: düz zemin; ışık lekesi, hüzme ve parıltı yok */
}

/* yatayda kırp, dikeyde serbest bırak: anında sonuçlar hero'nun altına taşabilsin */
@supports (overflow: clip) {
  #nh { overflow: visible; overflow-x: clip; }
}
/* nav her zaman hero'nun üstünde (anasayfadaki satır içi "nav.nav{z-index:2}" kuralını geçer) */
nav.nav#siteNav,
.page > nav.nav { z-index: 3; }

/* --- yerleşim ------------------------------------------------------------ */
#nh .nh-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
  padding-block: clamp(36px, 6.5vh, 84px) clamp(48px, 7.5vh, 88px);
}
#nh .nh-sol { position: relative; z-index: 2; min-width: 0; }
#nh .nh-sag { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* --- giriş koreografisi (tek sefer, sayfa açılışında) -------------------- */
@keyframes nhBelir { from { opacity: 0; } }
@keyframes nhGir { from { opacity: 0; transform: translateY(16px); } }
#nh .nh-eyebrow    { animation: nhGir .7s .05s both var(--nh-yumusak); }
#nh .nh-b1         { animation: nhGir .8s .12s both var(--nh-yumusak); }
#nh .nh-b3         { animation: nhGir .8s .42s both var(--nh-yumusak); }
#nh .nh-lede       { animation: nhGir .8s .52s both var(--nh-yumusak); }
#nh .mentese-wrap  { animation: nhGir .8s .62s both var(--nh-yumusak); }
#nh .hero-cta      { animation: nhGir .8s .78s both var(--nh-yumusak); }
#nh .nh-vitrin     { animation: nhGir .9s .40s both var(--nh-yumusak); }
#nh .nh-olcek      { animation: nhGir .9s .60s both var(--nh-yumusak); }

/* --- başlık -------------------------------------------------------------- */
#nh .nh-eyebrow { color: var(--nh-yazi-3); margin: 0 0 22px; font-size: 11px; letter-spacing: .14em; }
#nh .nh-baslik {
  margin: 0;
  color: var(--nh-yazi);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.04;
}
#nh .nh-b1,
#nh .nh-b3 {
  display: block;
  font-size: clamp(26px, 3vw, 42px);
  text-wrap: balance;
}
#nh .nh-b3 b { font-weight: 700; }

#nh .nh-don {
  position: relative;
  display: block;
  height: 1.16em;
  margin: .06em 0 .1em;
  font-size: clamp(40px, 6.2vw, 88px);   /* JS, en uzun kelimeye göre küçültür */
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.12;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: .14em;
}
#nh .nh-kelime {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  white-space: pre;
}
/* JS öncesi / JS'siz görünüm */
#nh .nh-kelime { color: var(--nh-vurgu); }
#nh .nh-kelime:not(.is-aktif):not(.is-harfli) { opacity: 0; }

/* harf harf: alttan kısa bir gecikmeyle girer, yukarı çıkar */
#nh .nh-harf {
  display: inline-block;
  white-space: pre;
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform .7s var(--nh-yumusak) calc(var(--i, 0) * 22ms),
    opacity .35s ease calc(var(--i, 0) * 22ms);
}
#nh .nh-kelime.is-aktif .nh-harf { transform: none; opacity: 1; }
#nh .nh-kelime.is-cikan .nh-harf {
  transform: translateY(-100%);
  opacity: 0;
  transition-duration: .45s, .3s;
  transition-delay: calc(var(--i, 0) * 12ms);
}

#nh .nh-lede {
  max-width: 46ch;
  margin: 22px 0 26px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--nh-yazi-2);
}

/* --- arama (mevcut "menteşe" formu korunur) ------------------------------ */
#nh .mentese-wrap { position: relative; z-index: 5; max-width: 600px; }
#nh .mentese {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 6px;
  background: #131c22;                 /* düz, opak: arkasındaki hiçbir şey içinden görünmez */
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .8);
  transition: border-color .2s, box-shadow .2s;
}
#nh .mentese:focus-within {
  border-color: rgba(232, 56, 79, .7);
  box-shadow: 0 0 0 3px rgba(217, 47, 67, .18), 0 18px 50px -24px rgba(0, 0, 0, .8);
}
#nh .mentese input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--nh-yazi);
  font: inherit;
  font-size: 16px;
  outline: none;
  box-shadow: none;
}
#nh .mentese input::placeholder { color: #7d8f96; opacity: 1; }
#nh .mentese input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
#nh .mentese button {
  flex: none;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 9px;
  background: var(--eylem, #d92f43);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
#nh .mentese button:hover { background: var(--nh-kirmizi); }
#nh .mentese button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#nh .nh-kbd {                             /* "/" kısayol ipucu */
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-inline-end: 6px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-bottom-width: 2px;
  border-radius: 6px;
  font-family: var(--nh-mono);
  font-size: 11px;
  color: var(--nh-yazi-3);
  transition: opacity .2s;
}
#nh .mentese:focus-within .nh-kbd { opacity: 0; }

#nh .mq-nova {
  max-width: 600px;
  background: rgba(217, 47, 67, .10);
  border-color: rgba(217, 47, 67, .35);
  color: var(--nh-yazi);
}
#nh.is-arama-acik .mq-nova { display: none !important; }

/* anında sonuçlar */
#nh .nh-sonuc {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  max-height: min(440px, 62vh);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: #0d1418;
  box-shadow: 0 34px 80px -24px rgba(0, 0, 0, .85);
  animation: nhAcil .18s var(--nh-yumusak);
}
@keyframes nhAcil { from { opacity: 0; transform: translateY(-4px); } }
#nh .nh-s-satir {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--nh-yazi);
  text-decoration: none;
}
#nh .nh-s-satir:hover,
#nh .nh-s-satir.is-secili { background: rgba(255, 255, 255, .07); }
#nh .nh-s-satir.is-secili { box-shadow: inset 2px 0 0 var(--nh-kirmizi); }
#nh .nh-s-img {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}
#nh .nh-s-img img { width: 100%; height: 100%; object-fit: contain; }
#nh .nh-s-ad {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#nh .nh-s-ad small {
  margin-inline-start: 8px;
  font-family: var(--nh-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nh-yazi-3);
}
#nh .nh-s-alt {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--nh-yazi-3);
  white-space: nowrap;
  text-overflow: ellipsis;
}
#nh .nh-s-fiyat {
  font-family: var(--nh-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}
#nh .nh-s-fiyat small { display: block; font-size: 10px; color: var(--nh-yazi-3); }
#nh .nh-s-fiyat .nh-s-stok { color: var(--nh-yesil); }
#nh .nh-sonuc mark { background: none; color: var(--nh-pembe); }
#nh .nh-s-nova .nh-s-img {
  background: radial-gradient(circle at 30% 30%, #ff7a6b, #d92f43);
  color: #fff;
  font-weight: 700;
}
#nh .nh-s-bilgi { padding: 14px 12px; font-size: 13px; color: var(--nh-yazi-2); }
#nh .nh-s-bilgi.is-yukleniyor::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: 10px;
  border-radius: 50%;
  background: var(--nh-amber);
  animation: nhNabizA 1s ease-in-out infinite;
}
@keyframes nhNabizA { 50% { opacity: .25; } }
#nh .nh-s-alt-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 10px 10px 6px;
  border-top: 1px solid var(--nh-cizgi);
  font-family: var(--nh-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#nh .nh-s-alt-bar a { color: var(--nh-yazi-2); text-decoration: none; }
#nh .nh-s-alt-bar a:hover { color: var(--nh-yazi); }
#nh .nh-s-alt-bar a:last-child { color: var(--nh-pembe); }

#nh .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
#nh .hero-cta .btn { font-size: 15px; letter-spacing: 0; padding: 14px 22px; }
#nh .btn-primary { box-shadow: 0 14px 40px -14px rgba(217, 47, 67, .7); }
#nh .btn-ghost {
  background: rgba(255, 255, 255, .03);
  color: var(--nh-yazi);
  border: 1px solid rgba(255, 255, 255, .18);
}
#nh .btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }

/* --- sağ: vitrin ---------------------------------------------------------
   Ürün açık bir panelde durur (katalog kartlarındaki görsel kutusunun büyüğü);
   altında marka · alan, ad, tek satır özellik ve "İncele". Çerçeve, canlı okuma,
   tarama, süzülme ve eğilme yok. */
#nh .nh-vitrin {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 20px;
  color: var(--nh-yazi);
  text-decoration: none;
}
#nh .nh-vitrin:focus-visible { outline: 2px solid var(--nh-kirmizi); outline-offset: 4px; }
#nh .nh-sahne {
  position: relative;
  display: block;
  height: clamp(280px, 30vw, 420px);
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  background: linear-gradient(180deg, #f4f7f8, #e7edef);
}
#nh .nh-urunler-ic { position: absolute; inset: 9% 11% 8%; }
#nh .nh-urun {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 16px 18px rgba(11, 16, 20, .16));
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .6s ease, transform .8s var(--nh-yumusak);
}
#nh .nh-urun.is-aktif.is-hazir { opacity: 1; transform: none; }
#nh .nh-vitrin:hover .nh-urun.is-aktif.is-hazir { transform: scale(1.025); }
#nh .nh-urun.is-kesilmedi { filter: none; mix-blend-mode: multiply; }   /* zemin temizlenemediyse beyazı panele kat */

#nh .nh-kunye {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 20px;
  align-items: end;
  padding-inline: 2px;
}
#nh .nh-kunye > * { transition: opacity .25s ease; }
#nh .nh-kunye.is-degisiyor > * { opacity: 0; }
#nh .nh-k-marka { grid-column: 1; font-size: 13px; color: var(--nh-yazi-3); }
#nh .nh-k-ad { grid-column: 1; font-size: 22px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
#nh .nh-k-spec { grid-column: 1; font-size: 14px; line-height: 1.45; color: var(--nh-yazi-2); }
#nh .nh-k-git {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: end;
  display: inline-flex;
  gap: 6px;
  padding-bottom: 2px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--nh-yazi);
}
#nh .nh-k-git i { font-style: normal; transition: transform .2s ease; }
#nh .nh-vitrin:hover .nh-k-git { color: #fff; }
#nh .nh-vitrin:hover .nh-k-git i { transform: translateX(3px); }

/* --- ürün sekmeleri: ince çizgiler, etkin olan süre boyunca dolar -------- */
#nh .nh-olcek { display: flex; align-items: center; gap: 16px; }
#nh .nh-sekmeler { display: flex; flex: 1; gap: 8px; }
#nh .nh-sekme {
  position: relative;
  flex: 1;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
#nh .nh-sekme::after {                /* ray */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--nh-cizgi-2);
}
#nh .nh-sekme span {                  /* dolum */
  position: absolute;
  left: 0; top: 11px;
  height: 2px;
  width: 0;
  z-index: 1;
  border-radius: 2px;
  background: var(--nh-yazi);
}
#nh .nh-sekme.is-gecti span { width: 100%; opacity: .4; }
#nh .nh-sekme[aria-selected="true"] span { animation: nhDol var(--nh-sure) linear forwards; }
#nh.is-bekle .nh-sekme[aria-selected="true"] span,
#nh.is-durdu .nh-sekme[aria-selected="true"] span,
#nh.is-gizli .nh-sekme[aria-selected="true"] span { animation-play-state: paused; }
#nh.is-elle .nh-sekme[aria-selected="true"] span { animation: none; width: 100%; }
@keyframes nhDol { from { width: 0; } to { width: 100%; } }
#nh .nh-sekme:hover::after { background: rgba(214, 232, 238, .32); }
#nh .nh-sekme:focus-visible { outline: 2px solid var(--nh-kirmizi); outline-offset: 2px; border-radius: 4px; }

#nh .nh-dur {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--nh-cizgi-2);
  border-radius: 8px;
  background: transparent;
  color: var(--nh-yazi-2);
  cursor: pointer;
}
#nh .nh-dur:hover { color: var(--nh-yazi); border-color: rgba(255,255,255,.3); }
#nh .nh-dur:focus-visible { outline: 2px solid var(--nh-kirmizi); outline-offset: 2px; }
#nh .nh-dur svg { width: 12px; height: 12px; fill: currentColor; }
#nh .nh-dur .i-oynat { display: none; }
#nh.is-durdu .nh-dur .i-oynat { display: block; }
#nh.is-durdu .nh-dur .i-dur { display: none; }

/* --- nav: hero üzerindeyken gece kıyafeti -------------------------------- */
.nav.nav--gece {
  background: rgba(11, 16, 20, .66) !important;
  border-bottom-color: rgba(214, 232, 238, .08) !important;
  color: #e9eff1;
}
.nav.nav--gece a,
.nav.nav--gece b,
.nav.nav--gece span,
.nav.nav--gece .lang { color: #e9eff1; }
.nav.nav--gece .nav-links a { color: #b9c7cd; }
.nav.nav--gece .nav-links a:hover { color: #fff; }
.nav.nav--gece button {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  color: #e9eff1;
}
.nav.nav--gece button span,
.nav.nav--gece button i { background-color: #e9eff1; }
.nav.nav--gece .brand .dot { color: #ff4d5e; }
.nav { transition: background-color .35s ease, border-color .35s ease, color .35s ease; }

/* --- erişilebilirlik yardımcısı ------------------------------------------ */
#nh .nh-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- tablet / telefon ---------------------------------------------------- */
@media (max-width: 900px) {
  #nh .nh-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 28px 36px; }
  #nh .nh-sag { margin-top: 12px; }
  #nh .nh-sahne { height: clamp(220px, 58vw, 340px); }
  #nh .nh-lede { font-size: 16px; margin: 16px 0 20px; }
}
@media (max-width: 520px) {
  #nh .mentese button { padding: 0 16px; }
  #nh .nh-k-ad { font-size: 19px; }
  #nh .nh-vitrin { gap: 14px; }
  #nh .hero-cta .btn { flex: 1; text-align: center; justify-content: center; }
  #nh .nh-s-satir { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 8px; }
  #nh .nh-s-img { width: 40px; height: 40px; }
}

/* --- hareket azaltma ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #nh *, #nh *::before, #nh *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  #nh .nh-harf,
  #nh .nh-urun,
  #nh .nh-kunye > * { transition: opacity .2s linear !important; }
  #nh .nh-harf,
  #nh .nh-urun { transform: none !important; }
  #nh .nh-sekme[aria-selected="true"] span { animation: none !important; width: 100%; }
}

/* Boşken (ipucu görünürken) arama temizleme düğmesi yer kaplamasın: ipucu kutunun tam genişliğini kullanır, kesilmez. */
#nh .mentese input:placeholder-shown::-webkit-search-cancel-button { display: none; }