@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700;800&family=Noto+Sans+Symbols+2&family=Space+Grotesk:wght@300;400;500;600;700&display=swap");

:root {
  --nnf-void: #021021;
  --nnf-ink: #041022;
  --nnf-ocean: #05365a;
  --nnf-teal: #0e8e9d;
  --nnf-glow: #11c7d7;
  --nnf-leaf: #63c768;
  --nnf-gold: #f0d548;
  --nnf-ember: #e85b37;
  --nnf-spectrum-blue: #0066ff;
  --nnf-spectrum-orange: #ff6600;
  --nnf-spectrum-mint: #20e0a0;
  --nnf-spectrum-rose: #e02050;
  --nnf-bronze: #8a6d39;
  --nnf-wine: #4c2230;
  --nnf-mist: #eaf7f2;
  --nnf-paper: #f4faf7;
  --nnf-font-global: "Noto Sans", "Noto Sans Symbols 2", "Noto Sans Arabic",
    "Noto Sans Devanagari", "Noto Sans Thai", "Noto Sans CJK SC",
    "Noto Sans CJK JP", "Noto Sans CJK KR", "Segoe UI", Arial, sans-serif;
  --nnf-font-display: "Space Grotesk", var(--nnf-font-global);
}

/* Enter sonrasi sahne, orijinal Noname paketindeki WebGL timeline'a ait kalir. */
body.nnf-video-exit #nnf-timeline-video-scene,
body.nnf-video-exit #nnf-timeline-video-sky,
body.nnf-video-exit #nnf-timeline-video-floor {
  display: none !important;
}

body.nnf-video-exit #WebGLXp canvas {
  background: transparent !important;
  filter: none !important;
}

body.nnf-video-exit #Home-webgl-start-screen {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* r19: ara yil ETIKETI gizli ama kutusu/pseudolari yasar (elmas tik icin) - visibility:hidden pseudoyu da oldururdu */
body.nnf-video-exit .YearsNavigation li:nth-child(odd) .YearsNavigation-item-label {
  color: transparent !important;
  text-shadow: none !important;
  -webkit-user-select: none;
  user-select: none;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--nnf-font-global);
  letter-spacing: 0;
}

body {
  background: var(--nnf-void);
  color: var(--nnf-mist);
}

h1,
h2,
h3,
h4,
h5,
h6,
#Home-webgl-start-screen-title,
#Home-webgl-start-screen-introduction,
.About-title,
.About-intro,
.AnimatedMainTitle-label,
.ItemListItem-infos-title,
.SectionBlock-title {
  font-family: var(--nnf-font-display) !important;
  letter-spacing: 0 !important;
}

#Home-webgl-start-screen-title {
  font-size: 5.5rem !important;
  line-height: 0.98 !important;
  max-width: 12ch;
}

#Home-webgl-start-screen-introduction {
  max-width: 32rem;
}

.FooterMenu,
.HeaderSearchInput,
.ItemListItem-infos-boat-type,
.MainCTA,
.MenuLink,
.SectionBlock-content-media-caption {
  letter-spacing: 0 !important;
}

#Page-content {
  background: var(--nnf-paper) !important;
  color: var(--nnf-ink) !important;
}

.SectionBlock.is-dark {
  background: var(--nnf-ink) !important;
  color: var(--nnf-mist) !important;
}

.ItemListItem-infos,
.ItemListItem-button,
.MainCTA.is-dark {
  color: var(--nnf-ink) !important;
}

.MainCTA.is-light,
.FooterMenu.is-default,
#Home {
  color: var(--nnf-mist);
}

.MainCTA.is-light .MainCTA-duplicate {
  background: var(--nnf-mist) !important;
  color: var(--nnf-ink) !important;
}

.MainCTA.is-dark .MainCTA-duplicate {
  background: var(--nnf-ocean) !important;
  color: var(--nnf-mist) !important;
}

.CloseCTA-el,
.MainCTA {
  border-color: currentColor !important;
}

.LanguageSwitcher,
[class*="LanguageSwitcher"],
[id^="LanguageSwitcher"] {
  display: none !important;
}

#nnf-quantum-backdrop {
  background-color: var(--nnf-void);
  background-image: url("/nnf/quantum-cubit-poster.jpg");
  background-position: center;
  background-size: cover;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  transition: opacity 800ms ease;
  z-index: 0;
}

#nnf-quantum-backdrop::after {
  background: rgba(2, 16, 33, 0.42);
  content: "";
  inset: 0;
  position: absolute;
}

#nnf-quantum-backdrop video {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
}

body.nnf-intro-video #WebGLXp {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

body.nnf-video-exit #nnf-quantum-backdrop {
  opacity: 0;
}

body.nnf-timeline-video #Home-webgl-start-screen {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

body.nnf-intro-video #Home-webgl-start-screen-button,
body.nnf-intro-video #Home-webgl-start-screen-button.is-hidden {
  display: inline-block !important;
  min-height: 3.3rem;
  min-width: 7.2rem;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

body.nnf-intro-video #Home-webgl-start-screen-button .MainCTA-inner,
body.nnf-intro-video #Home-webgl-start-screen-button .MainCTA-original {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#WebGLXp {
  background: #02070f;
  isolation: isolate;
  overflow: hidden;
}

#WebGLXp canvas {
  position: relative;
  z-index: 2;
}

body.nnf-timeline-video #WebGLXp canvas {
  background: transparent !important;
  filter: saturate(1.08) contrast(1.04) brightness(1.08);
}

body.nnf-timeline-video #WebGLXp::before {
  display: none;
}

body.nnf-timeline-video #WebGLXp::after {
  display: none;
}

#WebGLXp-categories-filter {
  z-index: 8;
}

#XPHeader-left {
  opacity: 0;
  pointer-events: none;
}

#nnf-foundation-logo {
  display: block;
  /* patron: koyu drop-shadow rgba(2,16,33,0.92) + cyan glow, BEYAZ menu zemininde koyu smudge yapiyordu (logonun sag-alti) -> kaldirildi. */
  /* Logo zaten parlak/renkli (dark bg'de gorunur), sadece hafif beyaz glow yeter. Imperceptible. */
  filter:
    brightness(1.42)
    contrast(1.34)
    saturate(1.16)
    drop-shadow(0 0 0.1rem rgba(234, 247, 242, 0.5));
  height: clamp(8rem, 13.5vw, 12rem);
  left: clamp(1.25rem, 3.35vw, 4rem);
  object-fit: contain;
  object-position: left top;
  pointer-events: none;
  position: fixed;
  top: clamp(1rem, 3.15vw, 3.25rem);
  width: clamp(9.4rem, 15.75vw, 14rem);
  z-index: 4;
}

#nnf-timeline-video-scene {
  --nnf-floor-start: 48vh;
  background: #02070f;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  transition: opacity 900ms ease;
  z-index: 0;
}

body.nnf-timeline-video #nnf-timeline-video-scene {
  opacity: 1;
}

#nnf-timeline-video-scene::before {
  background: radial-gradient(ellipse at 50% 50%, transparent 0 54%, rgba(2, 8, 15, 0.08) 78%, rgba(2, 8, 15, 0.34) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}

#nnf-timeline-video-scene::after {
  background:
    linear-gradient(90deg, rgba(2, 16, 33, 0.22) 0, transparent 16%, transparent 80%, rgba(2, 16, 33, 0.18) 100%),
    linear-gradient(180deg, rgba(2, 16, 33, 0.04) 0, transparent 48%, rgba(2, 16, 33, 0.04) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 5;
}

#nnf-timeline-video-sky,
#nnf-timeline-video-floor {
  left: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

#nnf-timeline-video-sky {
  height: calc(var(--nnf-floor-start) + 9vh);
  isolation: isolate;
  top: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0 82%, rgba(0, 0, 0, 0.86) 93%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 82%, rgba(0, 0, 0, 0.86) 93%, transparent 100%);
  z-index: 2;
}

#nnf-timeline-video-sky::before,
#nnf-timeline-video-sky::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

#nnf-timeline-video-sky::before {
  background:
    radial-gradient(circle at 9% 24%, rgba(240, 213, 72, 0.72) 0 0.08rem, transparent 0.16rem),
    radial-gradient(circle at 18% 42%, rgba(232, 91, 55, 0.58) 0 0.11rem, transparent 0.22rem),
    radial-gradient(circle at 27% 17%, rgba(17, 199, 215, 0.5) 0 0.075rem, transparent 0.18rem),
    radial-gradient(circle at 41% 34%, rgba(240, 213, 72, 0.55) 0 0.09rem, transparent 0.21rem),
    radial-gradient(circle at 58% 19%, rgba(232, 91, 55, 0.6) 0 0.1rem, transparent 0.24rem),
    radial-gradient(circle at 68% 44%, rgba(17, 199, 215, 0.52) 0 0.08rem, transparent 0.2rem),
    radial-gradient(circle at 82% 29%, rgba(240, 213, 72, 0.68) 0 0.12rem, transparent 0.25rem),
    radial-gradient(circle at 92% 48%, rgba(232, 91, 55, 0.54) 0 0.1rem, transparent 0.23rem);
  opacity: 0.58;
  transform: translate3d(calc(var(--nnf-depth-drift-x, 0) * -0.35), calc(var(--nnf-depth-drift-y, 0) * 0.22), 0);
  z-index: 2;
}

#nnf-timeline-video-sky::after {
  background-image:
    radial-gradient(circle, rgba(248, 225, 148, 0.7) 0 0.045rem, transparent 0.12rem),
    radial-gradient(circle, rgba(17, 199, 215, 0.55) 0 0.04rem, transparent 0.11rem);
  background-position:
    0 0,
    3.7rem 2.9rem;
  background-size:
    7.2rem 5.6rem,
    8.4rem 6.1rem;
  mix-blend-mode: screen;
  opacity: 0.26;
  transform: translate3d(calc(var(--nnf-depth-drift-x, 0) * -0.8), calc(var(--nnf-depth-drift-y, 0) * 0.35), 0);
  z-index: 1;
}

#nnf-timeline-video-floor {
  bottom: 0;
  perspective: 72rem;
  top: var(--nnf-floor-start);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 100%);
  transform-style: preserve-3d;
  z-index: 1;
}

.nnf-seamless-video-deck {
  bottom: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

#nnf-timeline-video-floor .nnf-seamless-video-deck {
  left: -10vw;
  right: -10vw;
  transform:
    translate3d(var(--nnf-depth-drift-x, 0), var(--nnf-depth-drift-y, 0), 0)
    scale(var(--nnf-depth-scale, 1.035));
  transform-origin: 50% 0;
  will-change: transform;
}

#nnf-timeline-video-sky .nnf-seamless-video-deck {
  inset: 0;
}

.nnf-seamless-video {
  opacity: 0;
  transition: opacity 1800ms linear;
  will-change: opacity;
}

.nnf-seamless-video.is-active,
.nnf-seamless-video.is-fading-in {
  opacity: 1;
}

.nnf-seamless-video.is-fading-out {
  opacity: 0;
}

#nnf-timeline-video-scene video {
  display: block;
  inset: auto;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

#nnf-timeline-video-sky video {
  filter:
    hue-rotate(-8deg)
    saturate(1.16)
    contrast(1.07)
    brightness(0.9);
  height: 760%;
  left: 0;
  object-position: center top;
  top: 0;
}

#nnf-timeline-video-floor video {
  filter:
    hue-rotate(-8deg)
    saturate(1.12)
    contrast(1.05)
    brightness(0.96);
  height: 100vh;
  left: 0;
  object-position: center top;
  top: calc(-1 * var(--nnf-floor-start) + 12vh);
  width: 120%;
}

@media (max-aspect-ratio: 3 / 2) {
  #Home-webgl-start-screen-title {
    font-size: 4.5rem !important;
  }
}

@media (orientation: portrait) {
  #Home-webgl-start-screen-title {
    font-size: 3.1rem !important;
    max-width: 9ch;
  }

  #nnf-foundation-logo {
    height: clamp(6.2rem, 24vw, 8.4rem);
    left: 1rem;
    top: 1rem;
    width: clamp(7.5rem, 31vw, 10.2rem);
  }

  body.nnf-timeline-video #nnf-foundation-logo {
    height: clamp(4.4rem, 16vw, 5.8rem);
    width: clamp(5.4rem, 21vw, 7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  #nnf-quantum-backdrop video {
    display: none;
  }

  #nnf-timeline-video-scene video {
    display: none;
  }

  #nnf-timeline-video-scene {
    background:
      linear-gradient(180deg, rgba(2, 16, 33, 0.2), rgba(2, 16, 33, 0.86)),
      #02070f;
  }
}

/* === patron onayli - ANINDA uygulanir (JS nnf-menu-fix timeline-gated kaliyordu, intro/yuklenme aninda eski gorunuyordu) === */
.HeaderSiteTitle{visibility:hidden !important;}
@media (max-width:768px){
  #Home-webgl-start-screen-introduction p{font-size:20px !important;line-height:1.45 !important;}
  #Home-webgl-start-screen .MainCTA{transform:translateY(-44px) !important;}
}

/* === patron: tarih scrubber (YearsNavigation) etiketleri BELIRGIN - eski kural odd opacity:0 + even 0.25 birakiyordu (gorunmuyordu, masaustu sag + mobil alt) === */
.YearsNavigation-item-label,
body.nnf-video-exit .YearsNavigation li:nth-child(odd) .YearsNavigation-item-label,
body.nnf-video-exit .YearsNavigation li:nth-child(even) .YearsNavigation-item-label {
  opacity: 0.92 !important;
  visibility: visible !important;
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 3px rgba(0,0,0,0.85) !important;
  font-weight: 600 !important;
}

/* === patron S285: yil scrubber (.YearsNavigation) WebGL canvas'in (z-index:2) ALTINDA kaliyordu -> hic
   GORUNMUYORDU + tiklanamiyordu (bizim #WebGLXp canvas{z-index:2} degisikligimizin yan etkisi). Canvas effective
   stacking level=2, scrubber z-auto -> altta kaliyordu. COZUM: scrubber'i canvas ustune al (z6) + pointer-events ac.
   Cookie banner (#RGPD z3->40) scrubber'in da USTUNDE kalsin: consent butonlari calissin, kapatilinca yillar tam
   gorunur. Masaustu: yillar sagda dikey (aninda gorunur+tiklanir, cookie sol-altta cakismaz). Mobil: altta yatay,
   cookie kapatilinca gorunur. Dogrulandi (Chrome eval): masaustu yil tiklanir, mobil cookie butonlari tiklanir. === */
.YearsNavigation {
  z-index: 6 !important;
  pointer-events: auto !important;
}
.YearsNavigation li,
.YearsNavigation-item,
.YearsNavigation-item-label {
  pointer-events: auto !important;
}
#RGPD {
  z-index: 40 !important;
}

/* Peek/list thumb: foto VARSA renkli daire zemini gosterme - direkt foto (S285 patron: renk flasi YASAK).
   :has() destegi olmayan eski tarayicida zarar yok (preload zaten flasi onler). */
.ItemMarker-thumb-image:has(img),
.ItemListItem-thumb-image:has(img) {
  background: transparent !important;
}

/* === S285 patron: detay sayfasi X + scroll halkasi KATEGORI renginde (detail-theme.js --nnf-cat set eder) === */
body.nnf-detail-themed .CloseCTA,
body.nnf-detail-themed .ScrollSVGCircle,
body.nnf-detail-themed [class*="ScrollCircle"],
body.nnf-detail-themed [class*="PageWrapper-close"] {
  color: var(--nnf-cat) !important;
}
body.nnf-detail-themed .CloseCTA svg *,
body.nnf-detail-themed [class*="ScrollCircle"] svg * {
  stroke: currentColor;
}
body.nnf-detail-themed .ScrollSVGCircle-path,
body.nnf-detail-themed .ScrollSVGCircle path,
body.nnf-detail-themed .ScrollSVGCircle circle {
  stroke: var(--nnf-cat) !important;
}

/* === S285 r3 patron: detay ekraninda LOGO gizli (panel metnine biniyordu) - kapatinca geri gelir === */
body.nnf-detail-themed #nnf-foundation-logo,
body.nnf-detail-themed [id^="nnf-logo-"] {
  display: none !important;
}

/* foto altyazisi bizim font (template Inter kullaniyordu) */
.SectionBlock-content-media-caption {
  font-family: var(--nnf-font-global) !important;
}

/* === S285 r4 patron: MOBILDE kategori filtreleri gorunmuyordu (koyu metin + bulut zemin + kirpilma) === */
.CategoriesFilters-button-splitted-label,
.CategoriesFilters-button-splitted-label-word,
.CategoriesFilters-button-splitted-label-char {
  color: #ffffff !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.85) !important;
  overflow: visible !important;
}
.CategoriesFilters-button,
.CategoriesFilters li {
  overflow: visible !important;
}
@media (orientation: portrait) {
  .CategoriesFilters-button-splitted-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.3 !important;
  }
}

/* === S285 r4: menu sayfalarinda NextItem ("Discover also" timeline karti) anlamsiz -> gizle === */
body.nnf-menu-page [class*="NextItem"] {
  display: none !important;
}

/* ============================================================
   S285 r5 - MEGA MENU (patron: masaustu header menusu igrencti)
   Mobbin sentezi (Nike/Fiverr kolon gruplari + Hers grup basligi)
   NNF koyu-cam estetigi. Motorun duz MainMenu listesi TAMAMEN
   gizlenir (header inline + paneldeki kopya); panel icerigini
   nnf/menu-nav.js insa eder (.nnf-mega).
   ============================================================ */
.MainMenu {
  display: none !important;
}

/* burger HER boyutta gorunur (bundle patch: MobileMenu her oryantasyonda render).
   r6 patron fix: (1) SARGI tiklama YUTMASIN (Enter calismiyordu) -> wrapper pointer-events:none,
   sadece buton + panel auto. (2) Burger SAG USTTE, logoya ASLA binmez (cam daire icinde). */
#MobileMenu,
#MobileMenu-top {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;   /* gorunmez sargi Enter'i bloklamasin */
  position: fixed;
  inset: auto;
  z-index: 56;
}
#MobileMenu .ToggleMobileMenuCTA {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: auto !important;
  right: clamp(14px, 2.4vw, 30px) !important;
  top: clamp(12px, 2vw, 24px) !important;
  z-index: 60 !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(4, 16, 34, 0.38) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(234, 247, 242, 0.28) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
}
.ToggleMobileMenuCTA:not(#MobileMenu .ToggleMobileMenuCTA) {
  display: none !important;
}
/* r8 patron: detay sayfasinda X (CloseCTA) + etrafindaki scroll HALKASI ile burger HICBIR SEYE
   degmeyecek -> burger halkanin tamamen ALTINA iner (halka ~90px cap; +116px guvenli) */
body.nnf-detail-themed #MobileMenu .ToggleMobileMenuCTA {
  top: calc(clamp(12px, 2vw, 24px) + 116px) !important;
}
#MobileMenu-content {
  pointer-events: auto !important;
}
#MobileMenu-top .HeaderSiteTitle {
  display: none !important;
}

/* panel: koyu cam tam ekran. r7: USTE hizali (devasa bosluk vardi - motor ortaliyordu) +
   tekerle kayar (manuel scroll menu-nav.js'te) */
#MobileMenu-content {
  background: rgba(4, 16, 34, 0.96) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--nnf-mist) !important;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: fixed;
  z-index: 55;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  padding-top: 0.9rem !important;
}
#MobileMenu-content > * {
  flex: 0 0 auto;
}
/* r8: TIMELINE/LIST satiri EN USTTE (motor 50px ust + 100px alt padding veriyordu) */
#MobileMenu-content-toggle-view {
  margin: 0 auto 0 !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
/* r8 patron: menu listesi LOGONUN ORTASINDAN baslasin (1366'da logo merkezi ~133px) */
#MobileMenu-content .nnf-mega {
  margin-top: 15px;        /* patron: TIMELINE yazisinin tam 15px alti */
  padding-top: 0;
  padding-bottom: 4rem;
}
#MobileMenu-content * {
  color: var(--nnf-mist);
}
#MobileMenu-content .ToggleListItemViewCTA-button,
#MobileMenu-content .SearchIcon,
#MobileMenu-content svg {
  color: var(--nnf-mist) !important;
  stroke: currentColor;
}

/* mega: TUM platformlarda AKORDEON - tek editoryal sutun (Contra hairline+arti, HBO Max tipografi).
   Baslik = detay sayfasi, satir/arti = alt menu ac/kapa, ilk alt oge = Overview. */
.nnf-mega {
  display: block;
  margin: 0 auto;
  max-width: 880px;
  padding: 1.2rem clamp(1.2rem, 4vw, 2rem) 4rem;
}
.nnf-mega-group {
  border-bottom: 1px solid rgba(234, 247, 242, 0.14);
}
.nnf-mega-head {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 1.1rem;
  padding: 1.05rem 0.2rem;
  transition: padding-left 180ms ease;
}
.nnf-mega-head:hover {
  padding-left: 0.55rem;
}
.nnf-mega-num {
  color: var(--nnf-glow);
  font-family: var(--nnf-font-global);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  min-width: 1.6rem;
  opacity: 0.85;
}
.nnf-mega-main {
  color: var(--nnf-mist) !important;
  flex: 1;
  font-family: var(--nnf-font-display) !important;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-decoration: none;
  transition: color 160ms ease;
}
.nnf-mega-main:hover {
  color: var(--nnf-glow) !important;
}
.nnf-mega-toggle {
  align-items: center;
  color: rgba(234, 247, 242, 0.6);
  display: inline-flex;
  justify-content: center;
  padding: 0.5rem;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), color 160ms ease;
}
.nnf-mega-head:hover .nnf-mega-toggle {
  color: var(--nnf-glow);
}
.nnf-mega-group.is-open .nnf-mega-toggle {
  transform: rotate(45deg);
}
.nnf-mega-subs {
  list-style: none;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0 0 0 2.7rem;
  transition: max-height 420ms cubic-bezier(0.4, 0, 0.2, 1), padding 300ms ease;
}
.nnf-mega-group.is-open .nnf-mega-subs {
  max-height: 36rem;
  padding-bottom: 1.1rem;
}
.nnf-mega-subs li {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.nnf-mega-group.is-open .nnf-mega-subs li {
  opacity: 1;
  transform: translateY(0);
}
.nnf-mega-subs a {
  border-left: 1px solid rgba(17, 199, 215, 0.35);
  color: rgba(234, 247, 242, 0.78) !important;
  display: block;
  font-family: var(--nnf-font-global) !important;
  font-size: clamp(0.92rem, 1.6vw, 1.02rem);
  line-height: 1.4;
  padding: 0.42rem 0 0.42rem 0.95rem;
  text-decoration: none;
  transition: color 140ms ease, padding-left 140ms ease, border-color 140ms ease;
}
.nnf-mega-subs a:hover {
  border-left-color: var(--nnf-glow);
  color: var(--nnf-glow) !important;
  padding-left: 1.25rem;
}
.nnf-mega-subs a.is-overview {
  color: var(--nnf-glow) !important;
  font-weight: 600;
}

/* 3. SEVIYE (Contribution programlari) - Fibery girintili ic-akordeon */
.nnf-mega-subs li.has-children {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}
.nnf-mega-subs li.has-children > a {
  flex: 1;
}
.nnf-mega-toggle-sm {
  color: rgba(234, 247, 242, 0.45);
  cursor: pointer;
  padding: 0.35rem 0.45rem;
}
.nnf-mega-subs li.has-children.is-open > .nnf-mega-toggle-sm {
  color: var(--nnf-glow);
  transform: rotate(45deg);
}
.nnf-mega-children {
  flex-basis: 100%;
  list-style: none;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0 0 0 1.2rem;
  transition: max-height 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nnf-mega-subs li.has-children.is-open > .nnf-mega-children {
  max-height: 24rem;
  padding-bottom: 0.5rem;
}
.nnf-mega-children a {
  border-left: 1px solid rgba(234, 247, 242, 0.18);
  color: rgba(234, 247, 242, 0.62) !important;
  display: block;
  font-family: var(--nnf-font-global) !important;
  font-size: 0.86rem;
  line-height: 1.4;
  padding: 0.32rem 0 0.32rem 0.85rem;
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease, padding-left 140ms ease;
}
.nnf-mega-children a:hover {
  border-left-color: var(--nnf-glow);
  color: var(--nnf-glow) !important;
  padding-left: 1.1rem;
}

/* ============================================================
   S285 r5 - MEMBERSHIP modal (Mobbin: Kraken koyu-cam + Care.com form)
   + icerik CTA butonu (.nnf-join) ve sayfa ici premium dokunuslar
   ============================================================ */
.nnf-join {
  background: var(--nnf-ink);
  border: 1px solid var(--nnf-ink);
  border-radius: 999px;
  color: var(--nnf-mist) !important;
  cursor: pointer;
  display: inline-block;
  font-family: var(--nnf-font-display) !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-top: 0.4rem;
  padding: 0.78rem 1.6rem;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.nnf-join:hover {
  background: var(--nnf-glow);
  border-color: var(--nnf-glow);
  color: var(--nnf-ink) !important;
  transform: translateY(-1px);
}
.SectionBlock.is-dark .nnf-join {
  background: var(--nnf-mist);
  border-color: var(--nnf-mist);
  color: var(--nnf-ink) !important;
}
.SectionBlock.is-dark .nnf-join:hover {
  background: var(--nnf-glow);
  border-color: var(--nnf-glow);
}

.nnf-join-overlay {
  align-items: center;
  background: rgba(2, 16, 33, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1.2rem;
  position: fixed;
  z-index: 200;
}
.nnf-join-overlay,
.nnf-join-overlay * {
  box-sizing: border-box;   /* r7: tema border-box vermiyor -> input %100+padding YATAY TASIYORDU */
}
.nnf-join-card {
  background: rgba(4, 16, 34, 0.97);
  border: 1px solid rgba(17, 199, 215, 0.25);
  border-radius: 1rem;
  box-shadow: 0 30px 80px rgba(2, 8, 15, 0.6);
  color: var(--nnf-mist);
  max-height: 92vh;
  max-width: min(33rem, calc(100vw - 1.6rem));
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2rem clamp(1.2rem, 4vw, 2.1rem) 1.8rem;
  position: relative;
  width: 100%;
}
.nnf-join-close {
  background: none;
  border: 0;
  color: rgba(234, 247, 242, 0.6);
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  right: 0.9rem;
  top: 0.7rem;
}
.nnf-join-kicker {
  color: var(--nnf-glow);
  font-family: var(--nnf-font-global);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.nnf-join-title {
  font-family: var(--nnf-font-display) !important;
  font-size: 1.5rem;
  margin: 0.45rem 0 0.3rem;
}
.nnf-join-sub {
  color: rgba(234, 247, 242, 0.75);
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0 0 1.1rem;
}
.nnf-join-tiers {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 1.1rem;
}
.nnf-join-tier {
  background: rgba(234, 247, 242, 0.05);
  border: 1px solid rgba(234, 247, 242, 0.2);
  border-radius: 0.55rem;
  color: var(--nnf-mist);
  cursor: pointer;
  font-family: var(--nnf-font-global);
  font-size: 0.72rem;
  padding: 0.55rem 0.2rem;
  transition: all 140ms ease;
}
.nnf-join-tier.is-active {
  background: rgba(17, 199, 215, 0.16);
  border-color: var(--nnf-glow);
  color: var(--nnf-glow);
}
.nnf-join-form label {
  color: rgba(234, 247, 242, 0.7);
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
}
.nnf-join-form input,
.nnf-join-form textarea {
  background: rgba(234, 247, 242, 0.06);
  border: 1px solid rgba(234, 247, 242, 0.22);
  border-radius: 0.5rem;
  color: var(--nnf-mist);
  display: block;
  font-family: var(--nnf-font-global);
  font-size: 0.95rem;
  margin-top: 0.3rem;
  padding: 0.65rem 0.75rem;
  width: 100%;
}
.nnf-join-form input:focus,
.nnf-join-form textarea:focus {
  border-color: var(--nnf-glow);
  outline: none;
}
.nnf-join-hp {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  left: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: 0 !important;
  width: 1px !important;
}
.nnf-join-submit {
  background: var(--nnf-glow);
  border: 0;
  border-radius: 999px;
  color: var(--nnf-ink);
  cursor: pointer;
  font-family: var(--nnf-font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 0.3rem;
  padding: 0.85rem 1.4rem;
  text-transform: uppercase;
  transition: transform 140ms ease, box-shadow 140ms ease;
  width: 100%;
}
.nnf-join-submit:hover {
  box-shadow: 0 8px 26px rgba(17, 199, 215, 0.35);
  transform: translateY(-1px);
}
.nnf-join-submit:disabled {
  opacity: 0.6;
}
.nnf-join-note.is-error {
  color: var(--nnf-ember);
  font-size: 0.8rem;
  margin-top: 0.6rem;
}
.nnf-join-done {
  text-align: center;
  padding: 1rem 0 0.4rem;
}
@media (max-width: 560px) {
  .nnf-join-tiers {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* mobil ince ayar (akordeon davranisi her platformda AYNI - yukaridaki tek model) */
@media (max-width: 700px) {
  .nnf-mega {
    padding-top: 0.4rem;
  }
  .nnf-mega-subs {
    padding-left: 1.6rem;
  }
}

/* === S285 patron: detay tipografisi bizim font sistemimizle TAM uyumlu (Schnyder/Inter kalintisi yok) === */
.ItemFull-header-sub-title,
.SectionBlock-content,
.NextItem {
  font-family: var(--nnf-font-global) !important;
}
.NextItem-title,
.ItemFull-header-main-title,
.ItemFull-intro,
[class*="ItemFull-header-intro"] {
  font-family: var(--nnf-font-display) !important;
  letter-spacing: 0 !important;
}

/* === S285 r7: kategori sayfasindaki PROGRAMS link listesi (premium satirlar) === */
.nnf-program-links {
  display: grid;
  gap: 0.55rem;
  margin: 0.4rem 0 0.6rem;
}
.nnf-program-links a.nnf-sub-link {
  border: 1px solid currentColor;
  border-radius: 999px;
  display: inline-block;
  font-family: var(--nnf-font-display) !important;
  font-size: 0.86rem;
  font-weight: 600;
  justify-self: start;
  letter-spacing: 0.04em;
  padding: 0.55rem 1.25rem;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.nnf-program-links a.nnf-sub-link:hover {
  background: var(--nnf-glow);
  border-color: var(--nnf-glow);
  color: var(--nnf-ink) !important;
  transform: translateY(-1px);
}

/* === S285 r10: detay paneli TEPE ARMASI (.nnf-crest) - bos bant sessiz bilim imzasina donusur.
   OLCULER DEGISMEZ: absolute katman, pointer-events yok. Renk = sayfanin kategori rengi (--nnf-cat).
   Mobbin: Notion kapak-bandi konumu + Gamma yumusak doku. === */
#Page-content {
  position: relative;
}
.nnf-crest {
  background: linear-gradient(180deg, #010103 0%, #030b18 78%, #06182b 100%);  /* singularity zemini */
  color: var(--nnf-cat, #0e8e9d);
  height: 138px;          /* olculen bos bant ~150px; basliga ASLA degmez */
  inset: 0 0 auto 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.nnf-crest::after {       /* sinemaskop vinyet - yazi okunurlugu icin sol koyu */
  background:
    linear-gradient(90deg, rgba(1, 1, 3, 0.66) 0%, transparent 38%),
    radial-gradient(120% 200% at 50% 50%, transparent 55%, rgba(1, 1, 3, 0.55) 100%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 2;
}
.nnf-crest canvas,
.nnf-crest svg,
.nnf-crest-cv {
  display: block;
  height: 100% !important;
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 1;
}
.nnf-crest-wave {
  fill: none;
  stroke-width: 1.6;
  stroke-dasharray: 1480;
  stroke-dashoffset: 1480;
  animation: nnfCrestDraw 12s ease-in-out infinite;
}
@keyframes nnfCrestDraw {
  0% { stroke-dashoffset: 1480; opacity: 0; }
  12% { opacity: 1; }
  55% { stroke-dashoffset: 0; opacity: 1; }
  82% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.nnf-crest-dot {
  fill: currentColor;
  opacity: 0.16;
  animation-name: nnfCrestFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes nnfCrestFloat {
  from { transform: translateY(0); }
  to { transform: translateY(14px); }
}
.nnf-crest-mark {
  color: rgba(234, 247, 242, 0.94);   /* koyu sinemaskop uzerinde acik wordmark */
  font-family: var(--nnf-font-display) !important;
  font-size: 0.72rem;
  font-weight: 700;
  left: clamp(1.6rem, 5vw, 4.2rem);
  letter-spacing: 0.24em;
  position: absolute;
  text-shadow: 0 1px 8px rgba(1, 1, 3, 0.9);
  text-transform: uppercase;
  top: clamp(2rem, 4.5vw, 3.4rem);
  z-index: 3;
}
.nnf-crest-mark span {
  color: currentColor;
  display: block;
  font-family: var(--nnf-font-global) !important;
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  margin-top: 0.45rem;
  opacity: 0.78;
}
@media (prefers-reduced-motion: reduce) {
  .nnf-crest-wave, .nnf-crest-dot { animation: none; }
  .nnf-crest-wave { stroke-dashoffset: 0; }
}
@media (orientation: portrait) {
  .nnf-crest { height: 96px; }
  .nnf-crest-mark { font-size: 0.6rem; top: 1.2rem; }
}

/* === S285 r9: bilimsel animasyon paneli (.nnf-viz) - medyasiz sayfalarin canli gorseli
   (Mobbin: GitBook gradyan alan + Adaline buyuk-sayi kartlari; nnf/charts.js calistirir) === */
/* r14 patron: CERCEVE/TABLO YOK - sahne koyu bolume cerceveiz gomulur (alpha canvas) */
.nnf-viz {
  background: none;
  border: 0;
  border-radius: 0;
  margin: 2.4rem 0;
  overflow: visible;
  padding: 0;
}
.nnf-viz canvas {
  display: block;
  width: 100%;
}
.nnf-viz-stats {
  border-top: 1px solid rgba(234, 247, 242, 0.12);
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  text-align: center;
}
.nnf-viz-num {
  color: var(--nnf-glow);
  display: block;
  font-family: var(--nnf-font-display) !important;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.05;
}
.nnf-viz-label {
  color: rgba(234, 247, 242, 0.65);
  display: block;
  font-family: var(--nnf-font-global) !important;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  margin-top: 0.3rem;
  text-transform: uppercase;
}
@media (max-width: 560px) {
  .nnf-viz-stats {
    grid-template-columns: 1fr;
  }
}

/* === S285: detay icine gomulen video (wysiwyg blogu) === */
.nnf-detail-video {
  margin: 2rem 0;
}
.nnf-detail-video video {
  border-radius: 0.4rem;
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

/* === r17: LOADING - gyroscope spinner (kaynak: codepen.io/martinvd/pen/xbQJom, patron sectigi) === */
.LoadingPlaceholder {
  align-items: center;
  display: flex !important;
  flex-direction: column;
  gap: 26px;
  justify-content: center;
}
.nnf-gyro {
  display: block;
  height: 64px;
  perspective: 800px;
  position: relative;
  width: 64px;
}
.nnf-gyro-r {
  border-radius: 50%;
  box-sizing: border-box;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.nnf-gyro-r.one {
  animation: nnf-gyro-one 1.15s linear infinite;
  border-bottom: 3px solid rgba(234, 247, 242, 0.95);
}
.nnf-gyro-r.two {
  animation: nnf-gyro-two 1.15s linear infinite;
  border-right: 3px solid var(--nnf-glow);
}
.nnf-gyro-r.three {
  animation: nnf-gyro-three 1.15s linear infinite;
  border-top: 3px solid rgba(234, 247, 242, 0.55);
}
@keyframes nnf-gyro-one {
  0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
  100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
}
@keyframes nnf-gyro-two {
  0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
  100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
}
@keyframes nnf-gyro-three {
  0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
  100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
}
.LoadingPlaceholder-label,
.LoadingPlaceholder-splitted-label {
  font-family: var(--nnf-font-display) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.42em !important;
  text-transform: uppercase;
}

/* === r19: TARIH RAYI v2 - "KRONO OMURGA" (patron: cok daha iyi, muhtesem gecisli).
   Konsept: yasayan veri omurgasi. Dikey isik hatti boyunca AKAN puls (veri akiyor hissi),
   buyuk yillar cift halkali retikul dugumler, ara yillar donuk elmas tikler, hover'da dugum
   buyur + etiket sola suzulur + isik izi. Kaynak sentezi: CodePen qBbomVj retikul dili +
   PyXEbp HUD ritmi + Origin/Arcade/Linear hassas cetvel (Mobbin). === */
.YearsNavigation {
  align-items: flex-end;
  padding-right: 30px;
}
.YearsNavigation::before {
  background: linear-gradient(180deg,
    rgba(120, 200, 230, 0) 0%,
    rgba(140, 210, 235, 0.34) 14%,
    rgba(140, 210, 235, 0.34) 86%,
    rgba(120, 200, 230, 0) 100%);
  content: "";
  height: calc(100% + 56px);
  pointer-events: none;
  position: absolute;
  right: 24px;
  top: -28px;
  width: 1px;
}
/* omurgada AKAN isik pulsu: veri yukaridan asagi suzulur */
.YearsNavigation::after {
  animation: nnf-spine-flow 6.5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  background: linear-gradient(180deg,
    rgba(17, 199, 215, 0) 0%, rgba(17, 199, 215, 0.85) 45%,
    rgba(234, 247, 242, 0.9) 55%, rgba(17, 199, 215, 0) 100%);
  box-shadow: 0 0 8px rgba(17, 199, 215, 0.4);
  content: "";
  height: 64px;
  pointer-events: none;
  position: absolute;
  right: 24px;
  top: -28px;
  width: 1px;
}
@keyframes nnf-spine-flow {
  0% { opacity: 0; top: -92px; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; top: calc(100% + 28px); }
}
.YearsNavigation li {
  position: relative;
}
.YearsNavigation-item {
  position: relative;
}
.YearsNavigation-item-label {
  color: rgba(205, 232, 252, 0.82) !important;
  font-family: var(--nnf-font-display) !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
  font-weight: 500 !important;
  letter-spacing: 0.34em !important;
  opacity: 1 !important;
  transition: color 0.4s ease, text-shadow 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* tik cizgisi: buyuk yil = uzun gradient, ara yil = kisa hairline */
.YearsNavigation-item-label::after {
  background: linear-gradient(90deg, rgba(140, 215, 240, 0.1), rgba(170, 225, 245, 0.85)) !important;
  height: 1px !important;
  transition: background 0.35s ease, width 0.35s ease, box-shadow 0.35s ease;
  width: 18px !important;
}
.YearsNavigation li > span.YearsNavigation-item > .YearsNavigation-item-label::after {
  background: linear-gradient(90deg, rgba(140, 215, 240, 0.04), rgba(160, 215, 240, 0.34)) !important;
  width: 8px !important;
}
/* BUYUK yil dugumu: cift halkali retikul (cekirdek + koyu bosluk + ince halka + glow) */
.YearsNavigation-item-button .YearsNavigation-item-label::before {
  background: rgba(214, 242, 252, 0.95);
  border-radius: 50%;
  box-shadow:
    0 0 0 2.5px rgba(4, 16, 30, 0.85),
    0 0 0 3.5px rgba(150, 220, 240, 0.55),
    0 0 10px rgba(17, 199, 215, 0.45);
  content: "";
  height: 3px;
  position: absolute;
  right: -31.5px;
  top: 50%;
  transform: translateY(-50%);
  transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: 3px;
}
/* ARA yil tiki: donuk mikro elmas (45 derece kare) */
.YearsNavigation li > span.YearsNavigation-item > .YearsNavigation-item-label::before {
  background: rgba(150, 215, 240, 0.45);
  content: "";
  height: 3.4px;
  position: absolute;
  right: -31.2px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 3.4px;
}
.YearsNavigation-item-button {
  cursor: pointer;
}
.YearsNavigation-item-button:hover .YearsNavigation-item-label,
.YearsNavigation-item-button:focus-visible .YearsNavigation-item-label {
  color: #f2fbff !important;
  text-shadow: 0 0 16px rgba(17, 199, 215, 0.7);
  transform: translateX(-4px);
}
.YearsNavigation-item-button:hover .YearsNavigation-item-label::after,
.YearsNavigation-item-button:focus-visible .YearsNavigation-item-label::after {
  background: linear-gradient(90deg, rgba(17, 199, 215, 0.15), var(--nnf-glow)) !important;
  box-shadow: 0 0 9px rgba(17, 199, 215, 0.65);
  width: 27px !important;
}
.YearsNavigation-item-button:hover .YearsNavigation-item-label::before,
.YearsNavigation-item-button:focus-visible .YearsNavigation-item-label::before {
  background: var(--nnf-glow);
  box-shadow:
    0 0 0 3px rgba(4, 16, 30, 0.85),
    0 0 0 4.5px rgba(17, 199, 215, 0.85),
    0 0 16px rgba(17, 199, 215, 0.95);
  transform: translateY(-50%) scale(1.45);
}
@media (prefers-reduced-motion: reduce) {
  .YearsNavigation::after { animation: none; opacity: 0; }
}
/* mobil/portrait: motor rayi -90 derece dondurup ALTA yatirir (matrix(0,-1,1,0,...)).
   Masaustu susleri (dikey ray cizgisi + dugum noktasi) donmus uzayda yanlis yere duser
   (r18 dersi: patronun circledigi serseri nokta/cizgi). Burada temiz eksen: border-left
   donince ekranda ALT cizgi olur; padding-left (+X = ekranda YUKARI) etiketi cizgiden kaldirir. */
@media (orientation: portrait), (max-width: 760px) {
  .YearsNavigation {
    border-left: 1px solid rgba(150, 215, 240, 0.32);
    padding-left: 14px;
    padding-right: 0;
  }
  .YearsNavigation li {
    display: list-item !important;
  }
  /* r19: dikey omurga cizgisi yerine eksen boyunca AKAN puls (donmus uzayda ekranda yatay suzulur) */
  .YearsNavigation::before {
    animation: nnf-spine-flow-m 6.5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    background: linear-gradient(180deg,
      rgba(17, 199, 215, 0) 0%, rgba(17, 199, 215, 0.8) 45%,
      rgba(234, 247, 242, 0.85) 55%, rgba(17, 199, 215, 0) 100%);
    box-shadow: 0 0 7px rgba(17, 199, 215, 0.4);
    content: "";
    display: block;
    height: 46px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: auto;
    top: -46px;
    width: 1px;
  }
  .YearsNavigation::after {
    display: none;                      /* masaustu pulsu portrait geometride yanlis yere duser */
  }
  @keyframes nnf-spine-flow-m {
    0% { opacity: 0; top: -46px; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; top: 100%; }
  }
  /* mobilde YUVARLAK dugum (patron: kare degil yuvarlak olsun) */
  .YearsNavigation-item-button .YearsNavigation-item-label::before {
    background: rgba(214, 242, 252, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 7px rgba(17, 199, 215, 0.55);
    content: "";
    height: 4.5px;
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 4.5px;
  }
  .YearsNavigation li > span.YearsNavigation-item > .YearsNavigation-item-label::before {
    border-radius: 50%;
    height: 3.4px;
    right: -9px;
    transform: translateY(-50%);
    width: 3.4px;
  }
  .YearsNavigation-item-label {
    font-size: 9px !important;
    letter-spacing: 0.26em !important;
  }
  /* r37 (patron iPhone): peek karti logonun altina degiyordu (logo 40sn'de bir animasyon donerken
     ustune binme). Mobilde karti asagi al - logo bandi (y6-176) tamamen serbest kalir. */
  .ItemMarker-card {
    margin-top: 44px !important;
  }
  /* r36 (patron): r35 cizgi-tasima tasarimi REDDEDILDI ("daha kotu yapmissin, oncekine geri al") -
     tik cizgileri ESKI yerinde (motor left:0, eski gorunum aynen). Tek duzeltme patronun tarifi:
     TARIHI yukari al -> padding-left (+X = ekranda YUKARI) metni 32px kaldirir; aktif tik cizgisi
     max 27px'e buyudugunde bile rakamlara ULASAMAZ (32 > 27). Cizgi/nokta/diger her sey onceki tasarim. */
  .YearsNavigation-item-label {
    padding-left: 32px !important;
  }
}

/* === r29: CONTINUUM / ARCHIVE - jh3y PEN'E SADIK (patron: "KODLARINI verdim, onayladigim oydu").
   Pen degerleri AYNEN: gunduz gokyuzu hsl(204 53% 47%), gece hsl(229 25% 16%), GUNES hsl(47 91% 58%) +
   3 halkali beyaz isin (radial 25% beyaz), gece AY hsl(212 13% 82%) + krater hsl(221 16% 68%) + yildiz
   twinkle + alt kenarda BULUTLAR (gunduz). Kayma LEFT + pen'in slide-ease cubic-bezier(.4,-.3,.6,1.3).
   (Onceki cyan "kuantum" yorumum pen'den uzaklasmisti - geri alindi.) === */
.ToggleListItemViewCTA {
  align-items: center;
  background: none;
  border: 0;
  gap: 0;
  padding: 6px 2px;
  position: relative;
}
.ToggleListItemViewCTA-button-label,
.ToggleListItemViewCTA-button-splitted-label {
  font-family: var(--nnf-font-display) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase;
}
.ToggleListItemViewCTA-button-label,
.ToggleListItemViewCTA-button-splitted-label-char {
  text-shadow: 0 1px 6px rgba(2, 12, 24, 0.85) !important;
}
.ToggleListItemViewCTA-button {
  opacity: 0.5;
  padding: 2px 6px;
  position: relative;
  transition: opacity 0.45s ease;
}
.ToggleListItemViewCTA-button:hover { opacity: 0.8; }
.ToggleListItemViewCTA-button.is-active { opacity: 1; }
.ToggleListItemViewCTA-button.is-active::after {
  background: linear-gradient(90deg, rgba(17, 199, 215, 0), var(--nnf-glow), rgba(17, 199, 215, 0));
  bottom: -5px;
  box-shadow: 0 0 7px rgba(17, 199, 215, 0.6);
  content: "";
  height: 1px;
  left: 12%;
  position: absolute;
  width: 76%;
}
/* === r32: jh3y LYgjpYZ BIREBIR PORT (patron: "herseyiyle ayni olsun"). Pen CSS'i aynen, scope =
   .nnf-jh3y (motor butonu), --dark surucusu = .active-layout-list (pen'de aria-pressed idi).
   --width 64px (pen clamp'inin compact hali), oranlar pen'in calc formulleriyle OLCEKLI.
   Tum animasyonlar translate/scale/opacity = compositor = 60 FPS tum platformlar. Ayicik haric. === */
/* r32d KRITIK: pen tum elemanlarda border-box varsayar (global *{box-sizing}). NNF sitesinde injekte
   elemanlar content-box mirasi aliyordu -> indicator height:100%+padding = pill'den 3px UZUN, gunes
   1.5px asagi kayip alttan kirpiliyordu (patron: "ortada degil, alti yok"). Border-box = pen'in kendisi. */
.ToggleListItemViewCTA-toggle[data-nnf-jh3y] .nnf-jh3y-content,
.ToggleListItemViewCTA-toggle[data-nnf-jh3y] .nnf-jh3y-content * {
  box-sizing: border-box !important;
}
.ToggleListItemViewCTA-toggle[data-nnf-jh3y] {
  --width: 64px;
  --dark: 0;
  --speed: 0.5s;
  --slide-ease: cubic-bezier(0.4, -0.3, 0.6, 1.3);
  --easing: var(--slide-ease);
  --ray: hsl(0, 0%, 100%, 0.5);
  --sun: hsl(47, 91%, 58%);
  --moon: hsl(212, 13%, 82%);
  --crater: hsl(221, 16%, 68%);
  aspect-ratio: 8 / 3;
  background: hsl(
    calc(204 + (var(--dark) * 25)),
    calc((53 - (var(--dark) * 28)) * 1%),
    calc((47 - (var(--dark) * 31)) * 1%)
  ) !important;
  border: 0 !important;
  border-radius: 100vh !important;
  box-shadow:
    0 calc(var(--width) * 0.02) calc(var(--width) * 0.01) calc(var(--width) * -0.0025) hsl(210, 10%, 100%, 0.95),
    0 calc(var(--width) * -0.02) calc(var(--width) * 0.01) calc(var(--width) * -0.0025) hsl(210, 10%, 10%, 0.2);
  height: auto !important;
  isolation: isolate;
  margin: 0 13px;
  overflow: hidden;
  position: relative;
  transition: background var(--speed) var(--easing);
  width: var(--width) !important;
}
.ToggleListItemViewCTA-toggle[data-nnf-jh3y].active-layout-list { --dark: 1; }
/* pen .toggle:after - ic golgelendirme */
.ToggleListItemViewCTA-toggle[data-nnf-jh3y]::before { content: none; }
.ToggleListItemViewCTA-toggle[data-nnf-jh3y]::after {
  border-radius: 100vh;
  box-shadow:
    0 calc(var(--width) * -0.025) calc(var(--width) * 0.025) 0 hsl(210, 10%, 10%, 0.15) inset,
    0 calc(var(--width) * 0.025) calc(var(--width) * 0.025) 0 hsl(210, 10%, 10%, 0.65) inset;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 5;
}
/* motorun kendi span'i (eski knob) gizli - pen katmanlari devraldi */
.ToggleListItemViewCTA-toggle[data-nnf-jh3y] > span:not(.nnf-jh3y-content) {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* pen .toggle__content */
.nnf-jh3y-content {
  border-radius: 100vh;
  clip-path: inset(0 0 0 0 round 100vh);
  container-type: inline-size;
  display: block;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
}
/* pen .toggle__backdrop - bulutlar (ray + beyaz) ve yildiz katmani; gunduz<->gece dikey suzulme */
.nnf-jh3y-content .toggle__backdrop {
  bottom: 0;
  left: 0;
  overflow: visible !important;
  position: absolute;
  transition: translate var(--speed) var(--easing);
  translate: 0 calc(var(--dark) * (100% - (3 / 8 * var(--width))));
  width: 100%;
}
.nnf-jh3y-content .toggle__backdrop:first-of-type .clouds path { fill: var(--ray); }
/* yildiz svg'si (son backdrop): gunduz ekran DISINDA yukarida, gece iner */
.nnf-jh3y-content .toggle__backdrop:last-of-type {
  translate: 0 calc((1 - var(--dark)) * -100%);
}
.nnf-jh3y-content .stars path {
  scale: calc(0.25 + (var(--dark) * 0.75));
  transform-box: fill-box;
  transform-origin: 25% 50%;
  transition: scale var(--speed) calc(var(--speed) * 0.5) var(--easing);
}
.nnf-jh3y-content .stars g { transform-box: fill-box; transform-origin: 50% 50%; }
.nnf-jh3y-content .stars g:nth-of-type(3) { animation: nnf-twinkle 4s -2s infinite; }
.nnf-jh3y-content .stars g:nth-of-type(11) { animation: nnf-twinkle 6s -2s infinite; }
.nnf-jh3y-content .stars g:nth-of-type(9) { animation: nnf-twinkle 4s -1s infinite; }
@keyframes nnf-twinkle {
  0%, 40%, 60%, 100% { transform: scale(1); }
  50% { transform: scale(0); }
}
/* pen .toggle__indicator - kayan tasiyici (cqi ile) */
.nnf-jh3y-content .toggle__indicator-wrapper { inset: 0; position: absolute; }
.nnf-jh3y-content .toggle__indicator {
  aspect-ratio: 1;
  display: grid;
  height: 100%;
  padding: 3%;
  place-items: center;
  transition: translate var(--speed) var(--slide-ease);
  translate: calc(var(--dark) * (100cqi - 100%)) 0;
}
/* pen .toggle__star - gunes/ay yuvasi + isin halkasi + golge */
.nnf-jh3y-content .toggle__star {
  aspect-ratio: 1;
  border-radius: 50%;
  height: 100%;
  position: relative;
  transition: translate var(--speed) var(--easing);
  translate: calc((var(--dark) * -10%) + 5%) 0;
}
.nnf-jh3y-content .toggle__star::before {
  aspect-ratio: 1;
  background:
    radial-gradient(hsl(0, 0%, 100%, 0.25) 40%, transparent 40.5%),
    radial-gradient(hsl(0, 0%, 100%, 0.25) 56%, transparent 56.5%) hsl(0, 0%, 100%, 0.25);
  border-radius: 50%;
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  transition: translate var(--speed) var(--easing);
  translate: calc((50 - (var(--dark) * 4)) * -1%) -50%;
  width: 356%;
  z-index: -1;
}
.nnf-jh3y-content .toggle__star::after {
  background: hsl(0, 0%, 0%, 0.5);
  border-radius: 50%;
  content: "";
  filter: blur(2px);
  inset: 0;
  position: absolute;
  translate: 2% 4%;
  z-index: -1;
}
/* pen .sun */
.nnf-jh3y-content .sun {
  background: var(--sun);
  border-radius: 50%;
  box-shadow:
    calc(var(--width) * 0.01) calc(var(--width) * 0.01) calc(var(--width) * 0.02) 0 hsl(210, 10%, 100%, 0.95) inset,
    calc(var(--width) * -0.01) calc(var(--width) * -0.01) calc(var(--width) * 0.02) 0 hsl(210, 10%, 20%, 0.5) inset;
  inset: 0;
  overflow: hidden;
  position: absolute;
}
/* pen .moon - gunesin uzerinden kayarak girer */
.nnf-jh3y-content .moon {
  background: var(--moon);
  border-radius: 50%;
  box-shadow:
    calc(var(--width) * 0.01) calc(var(--width) * 0.01) calc(var(--width) * 0.02) 0 hsl(210, 10%, 100%, 0.95) inset,
    calc(var(--width) * -0.01) calc(var(--width) * -0.01) calc(var(--width) * 0.02) 0 hsl(210, 10%, 10%, 0.95) inset;
  inset: -1%;
  position: absolute;
  transition: translate var(--speed) ease-in-out;
  translate: calc((100 - (var(--dark) * 100)) * 1%) 0%;
}
.nnf-jh3y-content .moon__crater {
  aspect-ratio: 1;
  background: var(--crater);
  border-radius: 50%;
  box-shadow:
    calc(var(--width) * 0.01) calc(var(--width) * 0.01) calc(var(--width) * 0.01) 0 hsl(210, 10%, 6%, 0.25) inset,
    0 calc(var(--width) * 0.005) calc(var(--width) * 0.01) 0 hsl(210, 10%, 100%, 0.25);
  left: calc(var(--x) * 1%);
  position: absolute;
  top: calc(var(--y) * 1%);
  width: calc(var(--size, 10) * 1%);
}
.nnf-jh3y-content .moon__crater:nth-of-type(1) { --size: 18; --x: 40; --y: 15; }
.nnf-jh3y-content .moon__crater:nth-of-type(2) { --size: 20; --x: 65; --y: 58; }
.nnf-jh3y-content .moon__crater:nth-of-type(3) { --size: 34; --x: 18; --y: 40; }
@media (prefers-reduced-motion: reduce) {
  .nnf-jh3y-content .stars g { animation: none !important; }
}

/* === r18: sayfa kagidinin ALT koseleri duz - radius arkadaki koyu zemini centik gibi gosteriyordu === */
#Page-content {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* === r19: SEARCH butonu - menu acikken sol alttan UST SAGA (patron: CONTINUUM hizasinin sagina).
   X kapatma butonu sag ustte durur; search onun SOLUNDA es boyutlu HUD halkasi olarak yasar. === */
#MobileMenu-content-bottom-search {
  align-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(6, 20, 38, 0.45) !important;
  border: 1px solid rgba(165, 215, 240, 0.3) !important;
  border-radius: 50% !important;
  display: flex !important;
  height: 46px !important;
  justify-content: center;
  position: fixed !important;
  right: 88px;
  top: 24px;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
  width: 46px !important;
  z-index: 64;
}
#MobileMenu-content-bottom-search:hover {
  border-color: rgba(17, 199, 215, 0.85) !important;
  box-shadow: 0 0 18px rgba(17, 199, 215, 0.35);
  transform: scale(1.06);
}
#MobileMenu-content-bottom-search svg {
  height: 17px;
  width: 17px;
}
@media (orientation: portrait), (max-width: 760px) {
  #MobileMenu-content-bottom-search {
    height: 42px !important;
    right: 86px;
    top: 24px;
    width: 42px !important;
  }
}

/* === r21: yasal 11. akordeon maddesi - diger gruplarla ayni stil; panel acilinca kimlik satiri === */
.nnf-mega-group-legal .nnf-mega-num {
  color: rgba(150, 215, 240, 0.55);
}
.nnf-mega-legal-meta {
  color: rgba(170, 200, 225, 0.4) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.06em;
  margin-top: 0.6rem;
  pointer-events: none;
}
.nnf-mega-legal-meta::before { display: none !important; }

/* === r22: MENU KAPAT - TEK buton, motorun KENDI kapat butonuna net X cizilir.
   (r21'de kendi X'imi eklemistim -> motorun bos-daire kapatiyla CIFT oldu; patron yakaladi.
   Kendi X kaldirildi; motor butonu zaten guvenilir kapatir, sadece gorunur X glifi + cam stil ekliyoruz.
   DONME ANIMASYONU YOK - patron "bas asagi donuyor" diye reddetti.) */
.ToggleMobileMenuCTA.is-mobile-menu-shown {
  position: relative;
}
.ToggleMobileMenuCTA.is-mobile-menu-shown::before,
.ToggleMobileMenuCTA.is-mobile-menu-shown::after {
  background: rgba(214, 236, 250, 0.92);
  border-radius: 2px;
  content: "";
  height: 1.6px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 17px;
  z-index: 2;
}
.ToggleMobileMenuCTA.is-mobile-menu-shown::before { transform: translate(-50%, -50%) rotate(45deg); }
.ToggleMobileMenuCTA.is-mobile-menu-shown::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ToggleMobileMenuCTA.is-mobile-menu-shown:hover::before,
.ToggleMobileMenuCTA.is-mobile-menu-shown:hover::after {
  background: var(--nnf-glow);
}
/* r22: menu acikken CONTACT (mail) butonu - search'un solunda, ayni HUD halka dili */
#nnf-menu-contact {
  align-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(6, 20, 38, 0.5);
  border: 1px solid rgba(165, 215, 240, 0.32);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  height: 46px;
  justify-content: center;
  position: fixed;
  right: 176px;
  top: 24px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  width: 46px;
  z-index: 64;
}
#nnf-menu-contact:hover {
  border-color: rgba(17, 199, 215, 0.85);
  box-shadow: 0 0 18px rgba(17, 199, 215, 0.35);
  transform: translateY(-2px);
}
#nnf-menu-contact svg { height: 18px; width: 18px; }
@media (orientation: portrait), (max-width: 760px) {
  #nnf-menu-contact { height: 42px; right: 150px; top: 24px; width: 42px; }
}

/* === r26: DETAYA GECISTE WebGL kamera-reset gizleme (patron: "detaya tiklayinca ilk sayfaya atiyor").
   Detayda #WebGLXp (timeline canvas) arka planda intro-kamerasina resetleniyor -> "ilk sayfa" hissi.
   Detay icerigi (#Page-content) zaten ustte; WebGL'i detayda yumusakca gizle -> kenar marjinleri sakin
   koyu void olur, intro-flash YOK. Timeline'a donunce nnf-detail-themed kalkar, WebGL geri gelir. === */
body.nnf-detail-themed #WebGLXp,
body.nnf-going-detail #WebGLXp {
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

/* === r28: MOBIL kose logosu ESKI (buyuk) boyutuna dondu (patron: "cok kuculttun, eski iyiydi; yerine
   yazilari asagi al"). Logo POS (96x170) korunur. Logo TIKLANABILIR -> timeline (quantum) sayfasi. */
#nnf-logo-canvas,
#nnf-foundation-logo {
  cursor: pointer;
  pointer-events: auto !important;
}

/* === r26: CEREZ RIZA BANNERI - vakif + fontumuz + koruyucu (cam HUD, sag-alt) === */
#nnf-cookie {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: linear-gradient(165deg, rgba(8, 26, 46, 0.92) 0%, rgba(4, 14, 28, 0.9) 100%);
  border: 1px solid rgba(165, 215, 240, 0.2);
  border-radius: 14px;
  bottom: 26px;
  box-shadow: 0 18px 50px rgba(1, 8, 18, 0.55), inset 0 1px 0 rgba(140, 220, 245, 0.18);
  color: rgba(226, 240, 250, 0.92);
  max-width: 380px;
  opacity: 0;
  padding: 20px 22px 18px;
  position: fixed;
  right: 26px;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  width: calc(100% - 52px);
  z-index: 70;
}
#nnf-cookie.is-in { opacity: 1; transform: translateY(0); }
/* r33: patron "ustteki cizgi cok sacma" -> stray ::before sekme cizgisi KALDIRILDI; premium cookie-ikon chip + temiz baslik */
.nnf-cookie-head { align-items: center; display: flex; gap: 10px; margin-bottom: 11px; }
.nnf-cookie-ico {
  align-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(17, 199, 215, 0.28), rgba(17, 199, 215, 0.08));
  border: 1px solid rgba(17, 199, 215, 0.34);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(160, 230, 245, 0.25), 0 0 12px rgba(17, 199, 215, 0.18);
  color: var(--nnf-glow);
  display: flex;
  flex: none;
  height: 28px;
  justify-content: center;
  width: 28px;
}
.nnf-cookie-title {
  color: #eef9ff;
  font-family: var(--nnf-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nnf-cookie-body {
  font-family: var(--nnf-font-global);
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 0 0 16px;
}
.nnf-cookie-link {
  color: var(--nnf-glow);
  text-decoration: none;
  white-space: nowrap;
}
.nnf-cookie-link:hover { text-decoration: underline; }
.nnf-cookie-actions { display: flex; gap: 10px; justify-content: flex-end; }
.nnf-cookie-btn {
  background: none;
  border: 1px solid rgba(165, 215, 240, 0.3);
  border-radius: 999px;
  color: rgba(226, 240, 250, 0.9);
  cursor: pointer;
  font-family: var(--nnf-font-display);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.55rem 1.2rem;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.nnf-cookie-btn:hover {
  border-color: rgba(17, 199, 215, 0.7);
  color: #eef9ff;
}
.nnf-cookie-accept {
  background: linear-gradient(135deg in oklch, #11c7d7, #0e8e9d);
  border-color: transparent;
  color: #03121d;
  font-weight: 600;
}
.nnf-cookie-accept:hover {
  box-shadow: 0 0 18px rgba(17, 199, 215, 0.45);
  color: #03121d;
}
@media (orientation: portrait), (max-width: 760px) {
  #nnf-cookie { bottom: 16px; left: 16px; right: 16px; max-width: none; width: auto; }
}

/* === r27: MOBIL CAKISMA FIX (patron: hicbir sey ust uste gelmesin, tum platformlar) === */
@media (orientation: portrait), (max-width: 760px) {
  /* MENU: CONTINUUM/ARCHIVE toggle 252px genis -> buton barina (mail/search/close) biniyordu.
     Kendi ORTALI satirina indir, buton barinin ALTINA. */
  #MobileMenu-content-toggle-view {
    display: flex !important;
    justify-content: center !important;
    margin: 76px auto 18px !important;
    padding: 0 !important;
    position: relative !important;
    width: 100% !important;
    z-index: 3;
  }
  /* r29: SIYAH BANT KALDIRILDI (patron: "o zemindeki siyah bant nedir, kaldir, hicbir zaman yoktu").
     Kategori bar seffaf; cakisma asagidaki konumlandirma ile cozuluyor (logo altina). */
}

/* === r29: MOBIL/TABLET header - toggle EN USTTE, logo ile menu butonunun TAM ORTASINDA (patron istegi).
   Motor #XPHeader-right'i mobilde gizler -> un-hide + sadece toggle-view goster. Kompakt olcu (dar gap'e
   sigsin: logo sag 110, burger sol ~313). Kategoriler LOGONUN ALTINA (yazilar logoya binmesin). === */
@media (orientation: portrait), (max-width: 900px) {
  #XPHeader-right {
    display: block !important;
    pointer-events: none;
  }
  #XPHeader-right > *:not(#XPHeader-toggle-view) { display: none !important; }
  #XPHeader-toggle-view {
    display: flex !important;
    justify-content: center;
    /* r38 (patron): logo 40sn animasyonu donerken toggle'a degiyordu -> biraz daha SAGA (118->150) */
    left: 150px;
    position: fixed;
    right: 80px;
    top: 14px;
    z-index: 62;
  }
  #XPHeader-toggle-view .ToggleListItemViewCTA {
    margin: 0 !important;          /* motor desktop'ta margin-left:auto ile saga yaslar - ortala */
    pointer-events: auto;
  }
  /* menu ACIKKEN header toggle gizli (menunun kendi toggle'i var; mail/search ile cakismasin) */
  body:has(.ToggleMobileMenuCTA.is-mobile-menu-shown) #XPHeader-toggle-view { display: none !important; }
  /* kompakt toggle: dar gap'e sigar */
  #XPHeader-toggle-view .ToggleListItemViewCTA-button-label,
  #XPHeader-toggle-view .ToggleListItemViewCTA-button-splitted-label {
    font-size: 8.5px !important;
    letter-spacing: 0.18em !important;
  }
  /* pen toggle mobil: --width ile olcek (pen oranlari korunur, 8/3 aspect) */
  #XPHeader-toggle-view .ToggleListItemViewCTA-toggle[data-nnf-jh3y] {
    --width: 52px;
    margin: 0 7px;
  }
  /* LISTE: kategoriler LOGONUN ALTINDA (y184), hero onun altinda - hicbir sey logoya binmez */
  #CollectionByDecades-filters .CategoriesFilters.is-row-layout { top: 184px !important; }
  #Collection-items { padding-top: 244px !important; }
  /* mobil mail/search butonlari: motor close (y12, 48px, cy36) ile AYNI hiza + esit aralik */
  #nnf-menu-contact { height: 42px; right: 134px; top: 15px; width: 42px; }
  #MobileMenu-content-bottom-search { height: 42px !important; right: 74px; top: 15px; width: 42px !important; }
}

/* === r43 (patron): liste + detay basliklari TEPEYE/LOGOYA COK YAKINDI -> asagi al, premium nefes === */
/* LISTE (ARCHIVE) gorunumu, masaustu: "Science for humanity" basligi (y153) sabit kose-logoya (y6-176)
   biniyordu. Liste icerigini asagi al -> baslik logo bandini gecer (mobil zaten ust blokta pt:244). */
@media (min-width: 769px) {
  #Collection-items { padding-top: 210px !important; }
}
/* DETAY sayfasi: #Page-header (baslik kapsayicisi, sticky, flex) dark-band/tepeye SIKISMISTI ("yukariya cok
   yakin"). Ust bosluk ver + iceriği dikey ortala (justify-content:center) = premium nefes. Tum platformlar. */
#Page-header {
  padding-top: 4rem !important;
  justify-content: center !important;
}

/* r44 (patron): toggle+arama scroll'da hamburger'dan gecikmeli/animasyonlu hareket ediyordu -> transition
   YOK = aligner'in translateY'i ANINDA otursun (hamburger ile senkron, snap). jh3y animasyonlari ic
   elemanlarda (.ToggleListItemViewCTA-toggle) - bu wrapper'lari etkilemez. */
#XPHeader-toggle-view, #HeaderSearch-button { transition: none !important; }

/* === r30: ARAMA OVERLAY - orijinal sitenin ust-panel aramasi, bilim-vakfi dilimizde === */
#nnf-search {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: linear-gradient(180deg, rgba(4, 14, 28, 0.97) 0%, rgba(6, 20, 38, 0.94) 100%);
  inset: 0 0 auto 0;
  min-height: 270px;
  opacity: 0;
  position: fixed;
  transform: translateY(-12px);
  transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 80;
}
#nnf-search.is-in { opacity: 1; transform: translateY(0); }
#nnf-search::after {
  background: linear-gradient(90deg, rgba(17, 199, 215, 0), var(--nnf-glow), rgba(17, 199, 215, 0));
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  width: 100%;
}
.nnf-search-inner {
  margin: 0 auto;
  max-width: 980px;
  padding: 64px 28px 40px;
}
.nnf-search-label {
  color: rgba(150, 215, 240, 0.65);
  font-family: var(--nnf-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4em;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.nnf-search-input {
  background: none;
  border: 0;
  border-bottom: 1px dotted rgba(165, 215, 240, 0.4);
  color: #eef9ff;
  font-family: var(--nnf-font-display);
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  font-weight: 500;
  outline: none;
  padding: 0 0 14px;
  width: 100%;
}
.nnf-search-input::placeholder { color: rgba(170, 205, 230, 0.32); }
.nnf-search-input:focus { border-bottom-color: rgba(17, 199, 215, 0.75); }
.nnf-search-close {
  align-items: center;
  background: rgba(6, 20, 38, 0.5);
  border: 1px solid rgba(165, 215, 240, 0.32);
  border-radius: 50%;
  color: rgba(214, 236, 250, 0.9);
  cursor: pointer;
  display: flex;
  height: 46px;
  justify-content: center;
  position: absolute;
  right: 30px;
  top: 24px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  width: 46px;
}
.nnf-search-close:hover { border-color: rgba(17, 199, 215, 0.85); box-shadow: 0 0 16px rgba(17, 199, 215, 0.3); }
.nnf-search-results { display: flex; flex-direction: column; gap: 2px; margin-top: 20px; }
.nnf-search-hit {
  align-items: baseline;
  border-radius: 8px;
  color: rgba(226, 240, 250, 0.9);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 10px 12px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.nnf-search-hit:hover { background: rgba(17, 199, 215, 0.08); color: #ffffff; }
.nnf-search-hit-t { font-family: var(--nnf-font-display); font-size: 1.02rem; }
.nnf-search-hit-k {
  color: rgba(150, 215, 240, 0.55);
  font-family: var(--nnf-font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nnf-search-empty { color: rgba(180, 205, 228, 0.55); font-size: 0.9rem; padding: 12px; }
@media (orientation: portrait), (max-width: 760px) {
  .nnf-search-inner { padding: 76px 18px 30px; }
  .nnf-search-close { height: 42px; right: 18px; top: 20px; width: 42px; }
}