/* ==========================================================================
   SAYFA 09 — NatureOS (EN)   ·   nos- katmani

   Paylasilan desenler KOPYALANMAZ, YUKLENIR:
     hp-close / hp-close__box / hp-close__note  -> anasayfa.css
     fb-close / fb-close__actions               -> for-businesses-en.css
     hp-ui / hp-ui--os (soyut maket)            -> anasayfa.css
   Burada yalniz bu sayfaya ait olanlar tanimli.

   SAHTE ARAYUZ YOK. Brief: "uygulama ekranlarini yeniden tasarlamamak";
   anti-slop listesi de sahte dashboard/terminal yasakliyor. Platform,
   ekran goruntusu ile degil; gercek saha fotograflari + SOYUT maketler
   (hp-ui: nokta, cubuk, satir — sahte metin/sayi yok) ile anlatiliyor.
   Ustune bindirmeli (graphic-overlay) arsiv kareleri de KULLANILMADI:
   ucunun de avoid listesinde "Graphic overlays are not verified
   measurement data" yaziyor ve platform metninin yaninda tam o iddiaya
   donusurlerdi.

   ACIK/KOYU RITMI ("acik agirlik, pes pese koyu yok"):
     nos-hero KOYU -> nos-know acik -> nos-field acik -> nos-share KOYU
     -> nos-past acik -> hp-close acik (kutusu koyu)
   Iki koyu yuzey arasinda her zaman en az bir acik bolum var.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · ACILIS — scroll'a kilitli zoom + blur + scrim, kelime kelime baslik
   (tasarim zevki R2c/R2d; "statement" bolumlerinin TERCIH EDILEN varyanti)

   R11 NOTU — burada varsayilan 1 DEGIL 0: bu bir reveal degil, bir
   SCRUB. --nos-h = 0 demek "zoom yok, blur yok, scrim en acik" demek,
   yani betik hic baglanmazsa hero en OKUNUR halinde durur. Reveal'larda
   varsayilan 1'dir cunku orada 0 = gorunmez; burada tersi.
   -------------------------------------------------------------------------- */
.nos-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--eco-space-40) + var(--eco-space-8)) var(--eco-space-20);
  background: var(--eco-surface-dark-deep);
}
.nos-hero__bg { position: absolute; inset: 0; z-index: 0; margin: 0; }
.nos-hero__bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(calc(1 + .14 * var(--nos-h, 0)));
  filter: blur(calc(7px * var(--nos-h, 0)));
  transform-origin: center center;
  will-change: transform, filter;
}
/* Scrim iki katman: sabit taban (metin her zaman okunur) + scroll'la
   koyulasan ikinci katman. Renk SIYAH — bolum zemini yesil oldugu icin
   yesil bir scrim goruntuyu arka plana karistirirdi. */
.nos-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .20)  0%,
    rgba(0, 0, 0, .40) 52%,
    rgba(0, 0, 0, .62) 100%);
}
.nos-hero__scrim::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .34);
  opacity: var(--nos-h, 0);
  will-change: opacity;
}
/* width:100% SART: .nos-hero bir flex kapsayici, .container da onun flex
   COCUGU. Flex cocugu varsayilan olarak icerigine gore buzusur — OLCULDU:
   icerik genisligi 1120 yerine 736px cikiyordu ve hero basligi bolum
   basliklarindan 192px iceride basliyordu. */
.nos-hero .container { position: relative; z-index: 2; width: 100%; }

.nos-hero__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--eco-fontfamily-sans);
  font-size: var(--eco-fontsize-display-3xl);
  line-height: var(--eco-lineheight-display-3xl);
  letter-spacing: var(--eco-letterspacing-display-3xl);
  font-weight: var(--eco-fontweight-medium);
  color: var(--eco-text-on-brand-strong);
}
/* Kelime kelime blur-in. Kelimeler <span> olarak sarili; animasyon BIR KEZ
   calisir (both) ve son halinde kalir. */
.nos-hero__kelime {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(.18em);
  animation: nos-kelime .82s var(--ease-out, cubic-bezier(.22,.61,.36,1)) both;
}
.nos-hero__kelime:nth-child(1) { animation-delay: .10s; }
.nos-hero__kelime:nth-child(2) { animation-delay: .20s; }
.nos-hero__kelime:nth-child(3) { animation-delay: .30s; }
@keyframes nos-kelime {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
.nos-hero__lede {
  margin: var(--eco-space-5) 0 0;
  max-width: 46rem;
  font-size: var(--eco-fontsize-body-xl);
  line-height: var(--eco-lineheight-body-xl);
  letter-spacing: var(--eco-letterspacing-body-xl);
  color: var(--eco-text-on-dark);
}
.nos-hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--eco-space-4);
  margin-top: var(--eco-space-8);
}

/* --------------------------------------------------------------------------
   ORTAK — bolum basligi, cip seridi
   -------------------------------------------------------------------------- */
.nos-bolum { padding-block: var(--eco-space-24); }
.nos-bolum--acik { background: var(--eco-surface-base); }
.nos-bolum--sayfa { background: var(--eco-surface-page); }

.nos-etiket {
  display: inline-flex; align-items: center;
  margin: 0 0 var(--eco-space-5);
  padding: var(--eco-space-2) var(--eco-space-4);
  border-radius: var(--eco-radius-full);
  border: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  background: var(--eco-surface-page);
  font-family: var(--eco-fontfamily-label);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-label-sm);
  line-height: var(--eco-lineheight-label-sm);
  letter-spacing: var(--eco-letterspacing-label-sm);
  text-transform: uppercase;
  color: var(--eco-text-link);
}
.nos-bolum--sayfa .nos-etiket { background: var(--eco-surface-base); }

.nos-h2 {
  margin: 0;
  max-width: 20ch;
  font-family: var(--eco-fontfamily-sans);
  font-size: var(--eco-fontsize-display-md);
  line-height: var(--eco-lineheight-display-md);
  letter-spacing: var(--eco-letterspacing-display-md);
  font-weight: var(--eco-fontweight-medium);
  color: var(--eco-text-primary);
  text-wrap: balance;
}
.nos-desc {
  margin: var(--eco-space-5) 0 0;
  max-width: 54ch;
  font-size: var(--eco-fontsize-body-lg);
  line-height: var(--eco-lineheight-body-lg);
  letter-spacing: var(--eco-letterspacing-body-lg);
  color: var(--eco-text-secondary);
}

/* Cipler: brief'teki "feature labels" satiri. Kademeli acilir. */
.nos-cipler {
  list-style: none; margin: var(--eco-space-8) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--eco-space-3);
}
.nos-cip {
  padding: var(--eco-space-3) var(--eco-space-5);
  border-radius: var(--eco-radius-full);
  border: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  background: var(--eco-surface-base);
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-primary);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease-out, ease), transform .6s var(--ease-out, ease);
}
.reveal-up.revealed .nos-cip { opacity: 1; transform: none; }
.reveal-up.revealed .nos-cip:nth-child(2) { transition-delay: .08s; }
.reveal-up.revealed .nos-cip:nth-child(3) { transition-delay: .16s; }
.reveal-up.revealed .nos-cip:nth-child(4) { transition-delay: .24s; }

/* Iki kolon: metin + gorsel. Gorsel kolonu daha genis (editoryel asimetri). */
.nos-ikili { display: grid; gap: var(--eco-space-10); align-items: center; }
@media (min-width: 900px) {
  .nos-ikili { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: var(--eco-space-16); }
  .nos-ikili--ters { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }
  .nos-ikili--ters .nos-ikili__metin { order: 2; }
}
.nos-gorsel {
  margin: 0;
  border-radius: var(--eco-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--eco-surface-subtle);
}
.nos-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   03 · BAGLANTI CIZGISI — iki dugum, arasinda cizilerek gelen bir cizgi.
   Brief'teki "connection line" iki ayri cumle; ikisini iki dugum yapip
   aralarindaki iliskiyi gorsel olarak kurmak, tek paragrafa sikistirmaktan
   daha dogru okunuyor. Sahte arayuz degil, diyagram.
   -------------------------------------------------------------------------- */
.nos-zincir {
  margin-top: var(--eco-space-16);
  display: grid; gap: var(--eco-space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .nos-zincir { grid-template-columns: minmax(0, 1fr) var(--eco-space-20) minmax(0, 1fr); }
}
.nos-dugum {
  margin: 0;
  padding: var(--eco-space-8);
  border-radius: var(--eco-radius-lg);
  border: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  background: var(--eco-surface-base);
  font-size: var(--eco-fontsize-body-lg);
  line-height: var(--eco-lineheight-body-lg);
  letter-spacing: var(--eco-letterspacing-body-lg);
  color: var(--eco-text-primary);
}
.nos-zincir__ok {
  position: relative; height: var(--eco-borderwidth-thick);
  border-radius: var(--eco-radius-full);
  background: var(--eco-text-link);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--ease-out, ease) .2s;
}
.reveal-up.revealed .nos-zincir__ok { transform: scaleX(1); }
@media (max-width: 900px) {
  .nos-zincir__ok { width: var(--eco-borderwidth-thick); height: var(--eco-space-10);
    margin-inline: auto; transform: scaleY(0); transform-origin: top center; }
  .reveal-up.revealed .nos-zincir__ok { transform: scaleY(1); }
}

/* --------------------------------------------------------------------------
   04 · ICERIK VE PAYLASIM — koyu bant, fotograf uzerine CAM kartlar
   (glassmorphism: sitenin imzasi; degerleri token setinden)
   -------------------------------------------------------------------------- */
.nos-share {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--eco-space-24);
  background: var(--eco-surface-dark-deep);
}
.nos-share__bg { position: absolute; inset: 0; z-index: 0; margin: 0; }
.nos-share__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nos-share__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .46) 45%, rgba(0, 0, 0, .66) 100%);
}
.nos-share .container { position: relative; z-index: 2; }
.nos-share .nos-h2 { color: var(--eco-text-on-brand-strong); }
.nos-share .nos-desc { color: var(--eco-text-on-dark); }
.nos-share .nos-etiket {
  background: var(--eco-glass-bg);
  border-color: var(--eco-glass-border);
  color: var(--eco-text-on-brand-strong);
}

.nos-kartlar { display: grid; gap: var(--eco-space-4); margin-top: var(--eco-space-12); }
@media (min-width: 900px) { .nos-kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nos-kart {
  padding: var(--eco-space-8);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-glass-bg);
  backdrop-filter: blur(var(--eco-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--eco-glass-blur)) saturate(140%);
  border: var(--eco-borderwidth-thick) solid var(--eco-glass-border);
}
.nos-kart__ikon { color: var(--eco-surface-brand); }
.nos-kart__baslik {
  margin: var(--eco-space-5) 0 0;
  font-family: var(--eco-fontfamily-sans);
  font-size: var(--eco-fontsize-h4);
  line-height: var(--eco-lineheight-h4);
  letter-spacing: var(--eco-letterspacing-h4);
  font-weight: var(--eco-fontweight-medium);
  color: var(--eco-text-on-brand-strong);
}
.nos-kart__metin {
  margin: var(--eco-space-3) 0 0;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-on-dark);
}
@media (prefers-reduced-transparency: reduce) {
  .nos-kart { background: var(--eco-glass-fallback); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* --------------------------------------------------------------------------
   05 · GECMIS PROJELER — not, entegrasyon ve NaturePass baglantisi
   -------------------------------------------------------------------------- */
/* Bolum 05 metin agirlikli (fotografsiz): olcu kolonun tamamini kaplamasin,
   okuma genisliginde kalsin. */
.nos-past { max-width: 46rem; }
.nos-h2--genis { max-width: 24ch; }
.nos-not {
  margin: var(--eco-space-5) 0 0;
  max-width: 60ch;
  font-size: var(--eco-fontsize-caption);
  line-height: var(--eco-lineheight-caption);
  letter-spacing: var(--eco-letterspacing-caption);
  color: var(--eco-text-muted);
}
/* align-items:start — kutular satir yuksekligine ESNEMEZ, icerigine gore
   boylanir. Tasarim dilinin bento notu birebir bunu soyluyor: "ritim tam
   da esit olmayan yuksekliklerden gelir". Esit yukseklikte zorlandiginda
   kisa olan (Integrations) kutunun ici bos kaliyordu (karede goruldu). */
.nos-serit { display: grid; gap: var(--eco-space-4); margin-top: var(--eco-space-12); align-items: start; }
@media (min-width: 900px) { .nos-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nos-serit__kutu {
  padding: var(--eco-space-8);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-page);
}
.nos-serit__baslik {
  margin: var(--eco-space-4) 0 0;
  font-family: var(--eco-fontfamily-sans);
  font-size: var(--eco-fontsize-h5);
  line-height: var(--eco-lineheight-h5);
  letter-spacing: var(--eco-letterspacing-h5);
  font-weight: var(--eco-fontweight-medium);
  color: var(--eco-text-primary);
}
.nos-serit__metin {
  margin: var(--eco-space-3) 0 0;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-secondary);
}
.nos-serit__kutu .nos-kart__ikon { color: var(--eco-icon-muted); }
.nos-serit__link { margin-top: var(--eco-space-5); }

/* --------------------------------------------------------------------------
   DAR EKRAN
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nos-hero {
    min-height: 88svh;
    padding-block: calc(var(--eco-space-32) + var(--eco-space-6)) var(--eco-space-16);
  }
  /* Yalniz punto degisir: "lineheightmobile-*" tokeni YOK, taban satir
     yuksekligi yuzde oldugu icin kendiliginden olceklenir. */
  .nos-hero__title { font-size: var(--eco-fontsizemobile-display-3xl); }
  .nos-hero__lede { font-size: var(--eco-fontsize-body-lg); line-height: var(--eco-lineheight-body-lg); letter-spacing: var(--eco-letterspacing-body-lg); }
  .nos-bolum, .nos-share { padding-block: var(--eco-space-16); }
  .nos-h2 { font-size: var(--eco-fontsizemobile-display-md); max-width: none; }
  .nos-gorsel { aspect-ratio: 3 / 2; }
  .nos-zincir { margin-top: var(--eco-space-12); }
}

/* --------------------------------------------------------------------------
   AZALTILMIS HAREKET — ezecegi kurallardan SONRA gelmeli.
   Her sahne TAMAMLANMIS halinde durur: kelimeler net, cipler yerinde,
   baglanti cizgisi cizilmis. Hero scrub'i zaten --nos-h = 0'da kalir
   (betik bu tercihte hic baglanmaz), yani zoom/blur uygulanmaz.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nos-hero__kelime { animation: none; opacity: 1; filter: none; transform: none; }
  .nos-cip { opacity: 1; transform: none; transition: none; }
  .nos-zincir__ok { transform: scaleX(1); transition: none; }
  .nos-hero__bg img { transform: none; filter: none; }
}