/* ==========================================================================
   SAYFA 10 — NaturePass (EN)   ·   np- katmani

   Paylasilan desenler KOPYALANMAZ, YUKLENIR:
     hp-close / hp-close__box      -> anasayfa.css
     fb-close / fb-close__actions  -> for-businesses-en.css
     hp-ui / hp-ui--pass (soyut QR maketi) -> anasayfa.css
     hp-kpis / hp-kpi (metrik)     -> anasayfa.css
     hp-link / hp-link__t / hp-link__u -> anasayfa.css
   Burada yalniz bu sayfaya ait olanlar tanimli.

   HAREKET DILI KARDES SAYFADAN FARKLI OLSUN: natureos hero'su scroll'la
   YAKINLASIP BULANIKLASIYOR. Burada ayni numarayi tekrar etmemek icin
   parallax KAYMA + satir satir MASKE ile acilan baslik kullanildi. Iki
   sayfa yan yana gezildiginde ayni efektin kopyasi gibi durmasin.

   ACIK/KOYU RITMI ("acik agirlik, pes pese koyu yok"):
     np-hero KOYU -> np-giris acik -> np-akis acik -> kaldirilan koyu bolum KOYU
     -> np-marka acik -> np-sss + hp-close acik (kutusu koyu)
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · ACILIS — parallax kayma + satir maskesi
   R11 NOTU: --np-h varsayilani 0 (reveal degil SCRUB). Betik baglanmazsa
   hero en okunur halinde durur.
   -------------------------------------------------------------------------- */
/* ORTAK URUN HERO SABLONU (NatureOS / NaturePass / NI) — kurucu: "hero section
   NI ile ayni olacak". Acik zemin, ortali: ikon+urun adi -> baslik -> alt metin
   -> butonlar, altinda tek buyuk gorsel.
   FARK: NI'de gorsel scroll ile buyuyup arkaplana donusuyor; kurucu burada o
   zoom'u ISTEMEDI. Onun yerine gorselin yerini TELEFON CERCEVESI aliyor ve
   hareket, mevcut --np-h scroll degiskeniyle hafif bir yukselme olarak veriliyor
   (yeni betik yazilmadi, sayfadaki parallax betigi yeniden kullanildi).
   Arkaplan resetesi ortak sablondan birebir. */
.np-hero {
  position: relative;
  isolation: isolate;
  /* Telefon alt kenardan TASIYOR ve fazlasi burada kirpiliyor (kurucu: "apple
     ornegindeki gibi yarim koy, bottoma yapistir"). Ayrica reveal/parallax
     donusumleri de kaydirilabilir tasmaya katkida bulunmuyor. */
  overflow: hidden;
  background: var(--eco-surface-page);
  /* FIT HEIGHT (kurucu): hero ekran yuksekligini asmayacak. Telefonun gorunen
     payi kirpma oraniyla ayarlandi, olcerek dogrulandi. */
  min-height: 100svh;
  /* Kurucu: header ile urun etiketi arasi acilsin, tepeye yapismasin.
     Olculdu: 112px dolgu sabit header'in altinda 48px birakiyordu. */
  padding-block: calc(var(--eco-space-32) + var(--eco-space-4)) 0;
  text-align: center;
}
.np-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 32rem at 18% 6%, rgba(136, 196, 38, .18), transparent 70%),
    radial-gradient(54rem 30rem at 88% 94%, rgba(55, 122, 54, .13), transparent 72%);
}
.np-hero .container { position: relative; z-index: 2; width: 100%; }
.np-hero__alt { display: grid; justify-items: center; gap: var(--eco-space-4); }

/* URUN ADI = ikon + gradient yazi. Ikon YANDA DEGIL USTTE (ortak sablondaki
   kurucu notu: yanda durunca goz yazinin ortasini arayip kaymis goruyor).
   Ikon UYDURULMADI: header'daki Technology > NaturePass ikonunun ta kendisi. */
.np-hero__ad {
  margin: 0;
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-h3);
  line-height: var(--eco-lineheight-h3);
  letter-spacing: var(--eco-letterspacing-h3);
}
/* PILL — kurucu: "iconlu naturepass'i pill label yap, texte uyguladigin
   gradienti arkaplana uygula". Ayni gradient artik ZEMINDE, metin ve ikon
   uzerinde beyaz. Ikon ve yazi YAN YANA: onceki ust uste dizilim hero'yu
   ekran yuksekliginin otesine tasiyordu. */
/* PILL — tasarim sistemindeki .eco-badge bileseninin MEDIUM olcusu (kurucu).
   Olculer ecording-components.css'ten BIREBIR alindi: 4/10 dolgu, label-md 12px,
   Montserrat semibold, BUYUK HARF, min-height 26px, gap 4, tam yuvarlak.
   O dosya YUKLENMEDI: hicbir sayfada yuklu degil ve baska bilesenleri de
   tasiyor; yalniz bu pill'in olculeri buraya kapsandi.
   GRADIENT FILL: bilesende boyle bir varyant YOK (--brand duz dolgu, --glass
   cam). Kurucu istegiyle yeni varyant olarak gradient zemin verildi; kenarlik
   --brand'deki gibi seffaf, metin ve ikon beyaz. */
.np-hero__pill {
  display: inline-flex; align-items: center; gap: var(--eco-space-1);
  width: auto; min-height: 26px;
  /* DOLGU kontrol olceginin ustunde: olcekteki bir ust basamak (lg 5/12)
     26 -> 28px yapiyor, gozle fark edilmiyordu (bes kademe gercek pill'de
     basilip bakildi). 8/16 hem nefes aliyor hem etiket olarak okunuyor;
     10/20 butona benzeyip basligla yarisiyordu. Ikisi de mevcut token:
     --eco-space-2 / --eco-space-4. */
  padding: var(--eco-space-2) var(--eco-space-4);
  border-radius: var(--eco-radius-full);
  border: var(--eco-borderwidth-hairline) solid transparent;
  font-family: var(--eco-fontfamily-label);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-label-md);
  line-height: var(--eco-lineheight-label-md);
  letter-spacing: var(--eco-letterspacing-label-md);
  text-transform: uppercase;
  background-image: linear-gradient(100deg, #2E7D32 0%, #1F7A6B 34%, #377A36 68%, #2E7D32 100%);
  color: var(--eco-text-on-brand-strong);
}
.np-hero__ikon {
  display: block; flex: none;
  width: var(--eco-space-4); height: var(--eco-space-4);
  /* DOLU ikon (Tabler filled/ticket, paketten birebir). `eco-icon` sinifi
     BILEREK verilmedi: o sozlesme fill:none + stroke veriyor, dolu ikon
     gorunmez olurdu. */
  fill: currentColor; stroke: none;
}
/* Acik zemin icin KOYU rampa — ortak sablonla ayni aile. */
.np-hero__ad-yazi { color: inherit; }

.np-hero__title {
  margin: 0; max-width: 20ch;
  font-family: var(--eco-fontfamily-sans);
  font-size: var(--eco-fontsize-display-2xl);
  line-height: var(--eco-lineheight-display-2xl);
  letter-spacing: var(--eco-letterspacing-display-2xl);
  font-weight: var(--eco-fontweight-medium);
  color: var(--eco-text-primary);
  text-wrap: balance;
}
/* Satir maskesi: dis eleman tasirani keser, ic eleman asagidan yukari gelir. */
.np-hero__satir { display: block; overflow: hidden; }
.np-hero__satir > span {
  display: block;
  transform: translateY(105%);
  animation: np-satir .9s var(--ease-out, cubic-bezier(.22,.61,.36,1)) both;
}
.np-hero__satir:nth-of-type(1) > span { animation-delay: .12s; }
@keyframes np-satir { to { transform: translateY(0); } }

.np-hero__lede {
  /* RENK DUZELTILDI: --eco-text-on-dark (#EEEEEE) KOYU hero icindi; hero acik
     zemine (#F7F7F7) gecince metin neredeyse gorunmez kalmisti (kare ile
     goruldu). Ortak sablondaki degere alindi.
     Ust marj da kaldirildi: .np-hero__alt zaten gap veriyor, ikisi ust uste
     binince alt metin gereksiz asagi kayiyordu. */
  /* IKI SATIR (kurucu, "65ch olmali sanirim"): tarandi — 62ch ilk iki satir
     veren deger, 65ch de iki satir ve payi var. 1440 ve 1280'de ayni. */
  margin: 0; max-width: 65ch;
  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-secondary);
}
/* Butonlar ORTALI: hero ortali bir sablon ama bu kural koyu/sola yasli
   surumden kalmisti, mobilde butonlar tek basina sola kaciyordu (kare ile
   goruldu). Ust marj ortak sablonla ayni: kapsayicinin 16px gap'i + 8px = 24. */
.np-hero__actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--eco-space-4);
  margin-top: var(--eco-space-2);
}

/* --------------------------------------------------------------------------
   ORTAK
   -------------------------------------------------------------------------- */
.np-bolum { padding-block: var(--eco-space-24); }
.np-bolum--acik  { background: var(--eco-surface-base); }
.np-bolum--sayfa { background: var(--eco-surface-page); }

.np-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;
}
.np-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);
}
/* --------------------------------------------------------------------------
   01b · TELEFON — hero'daki gorselin yerine.
   SAHTE UYGULAMA EKRANI YOK: ekranda sayfanin zaten kullandigi SOYUT QR maketi
   (hp-ui--pass, anasayfa.css) duruyor. Uydurma arayuz/veri cizilmedi; bu
   sayfanin kendi kurali.
   Cerceve CSS ile kuruluyor cunku EDS'te DIKEY telefon render'i yok (kutuphanede
   tek maket var, o da yatay ve bu sayfanin marka bolumunde zaten kullaniliyor).
   Dis/stok gorsel kullanilmadi.
   -------------------------------------------------------------------------- */
.np-telefon {
  /* Genislik ve yukseklik TEK degiskenden turuyor. Kirpma payi yuksekligin
     yuzdesi; yuzdeli margin kapsayicinin GENISLIGINE gore cozulecegi icin
     yukseklik aspect-ratio ile birakilmayip acikca hesaplaniyor. */
  --np-tel-g: min(24rem, 82vw);
  --np-tel-y: calc(var(--np-tel-g) * 1973 / 960);
  /* Kirpma orani TEK yerde: hem negatif marj hem de icerideki maketin
     hizalamasi bunu okuyor. Ayri ayri yazilsaydi biri degisince oteki
     sessizce kayardi. */
  /* TARANDI: 1440x900'de hero'yu ekrana sigdiran ILK deger .60 — ustundekiler
     de sigiyor ama telefondan gereksiz yere goturuyor. */
  --np-tel-kirp: .58;
  --np-tel-kesim: calc(var(--np-tel-y) * var(--np-tel-kirp));
  /* Ust marj duruyor, ALT marj negatif: telefonun ~%44'u hero'nun alt
     kenarinin altinda kaliyor ve .np-hero'daki overflow:hidden onu kesiyor. */
  margin: var(--eco-space-16) auto calc(var(--np-tel-kesim) * -1);
  width: var(--np-tel-g);
  height: var(--np-tel-y);
  position: relative;
  /* Cerceve artik GORSEL; CSS dolgu/kenarlik/zemin yok. */
  /* Scroll ile hafif yukselir — hero'nun mevcut --np-h degiskeni. */
  transform: translate3d(0, calc(var(--np-h, 0) * -2.5rem), 0);
  will-change: transform;
}
/* EKRAN, mockup gorselinin ICINDEKI gercek ekran alanina oturuyor. Paylar
   GORSELDEN OLCULDU (960x1973 PNG, piksel taramasi; iki bagimsiz sutun ayni
   sonucu verdi): sol/sag %4.17, ust %2.84, alt %2.89.
   Yukseklik de artik gorselin KENDI orani (1973/960); 9/19 birakilsaydi
   mockup ezilir ve bu paylar kayardi.
   Hoparlor cizgisi KALKTI: mockup'in kendi Dynamic Island'i var. */
.np-telefon__gorsel, .np-vitrin__gorsel, .np-kart__gorsel {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.np-telefon__ekran, .np-vitrin__ekran, .np-kart__ekran {
  position: absolute;
  top: 2.84%; bottom: 2.89%; left: 4.17%; right: 4.17%;
  border-radius: 7% / 3.4%;
  overflow: hidden;
}
/* Hoparlor cizgisi — dekoratif, tek hairline. */
/* MAKET GORUNEN BANDA GORE ORTALANIR.
   hp-ui--pass (anasayfa.css) bir flex sutun ve icerigini EKRANIN TAMAMINA gore
   ortaliyor. Telefonun %44'u kirpilinca QR ust tarafta koca bir bosluk birakip
   alt sirasindan kesiliyordu (olculdu: kod izgarasinin %25'i kesim cizgisinin
   altinda kaliyordu). Paylasilan dosya DEGISTIRILMEDI; burada .np-telefon'a
   kapsanmis bir alt dolgu ile icerik yukari aliniyor — justify-content:center
   oldugu icin icerik dolgunun YARISI kadar, yani tam kesimin yarisi kadar
   yukari kayiyor ve gorunen bandin ortasina oturuyor. */
.np-telefon .hp-ui--pass { padding-bottom: var(--np-tel-kesim); }
/* Cip mutlak konumlu; dolgu onu tasimaz, kesimin altinda kalirdi. */
.np-telefon .hp-ui__chip { bottom: calc(var(--eco-space-4) + var(--np-tel-kesim)); }

/* --------------------------------------------------------------------------
   ARKA PLAN GORSELLI BOLUM — scroll efektleri (kurucu istegi).
   kaldirilan koyu bolum sayfadaki TEK arka plan gorselli bolum olarak kaldi (hero'nunki
   kaldirildi). Gorsel scroll ile yavasca kayiyor, basligi da kademeli giriyor.
   Ilerleme [data-np-scrub] betiginden --np-s olarak geliyor (0..1); betik
   baglanmazsa deger 0 kalir ve bolum en sade, en okunur halinde durur.
   -------------------------------------------------------------------------- */

/* Kopru TEK SUTUN varyanti: filiz fotografi bento'ya tasininca uc sutunlu
   izgara (QR | bosluk | gorsel) sarkik kaliyordu. Burada QR ortada, cizgi
   altinda dikey olarak ciziliyor. */
@media (prefers-reduced-motion: reduce) {
  .np-telefon { transform: none; }
  /* Pano kartlari reveal'e bagli; hareket azaltilmisken tamamlanmis halde
     durmalilar, yoksa betik calissa bile gecis olmadan gorunmez kalirlar. */
  .np-pano__k { opacity: 1; transform: none; transition: none; }
  /* Hareket eden her sey gercek eleman oldugu icin tek kural yetiyor — ama
     `!important` SART: bu secici (0,1,0), oysa animasyonu veren kurallar
     `.np-mini--bul i` gibi (0,2,0) ve media query ozgullugu yukseltmez.
     OLCULDU: important'siz haliyle azaltilmis harekette animation-name hala
     np-mini-kadraj/akis/yayil donuyordu. anasayfa.css de `.hp-ui *` icin
     ayni nedenle important kullaniyor. */
  .np-mini * { animation: none !important; }
  .np-sss__item, .np-sss__dugme, .np-sss__ikon, .np-sss__kutu { transition: none; }
  .np-topluluk, .np-topluluk * { animation: none !important; }
  .np-pano__bg img { transform: none; transition: none; }
  .np-pano__bg { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   02 · VITRIN — "gundelik bir eylem" ile "ormandaki bir yer" arasindaki bag.
   Eski QR kutusunun kurallari kaldirildi: maket artik telefonlarin EKRANINDA
   duruyor, ayri bir kutuda degil.
   -------------------------------------------------------------------------- */
/* Ortalama ve kolon genisligi BURADA: ornekte baslik da govde de ortali ve dar
   bir kolonda duruyor (olculdu: baslik 788, govde 840 / 1260'lik blok icinde). */
.np-vitrin-bas { max-width: 56rem; margin-inline: auto; text-align: center; }
/* (0,2,0): mobil blogundaki `.np-h2` bu satirdan SONRA geliyor; esit
   ozgullukte yazilsaydi dar ekranda puntoyu geri alirdi. */
.np-vitrin-bas .np-vitrin-baslik {
  max-width: none;
  font-size: var(--eco-fontsize-display-xl);
  line-height: var(--eco-lineheight-display-xl);
  letter-spacing: var(--eco-letterspacing-display-xl);
}
/* Discover. Follow. Share. bolumu BU BOLUMUN DEVAMI gibi okunsun (kurucu:
   "ayni bolum icinde olsun, arkaplan renkleri ayni olsun"): ayni zemin +
   ust dolgu sifir, yani aradaki dikis kapaniyor.
   IKINCI KURAL SART — MARGIN COLLAPSE: ust dolgu sifirlaninca panonun kendi
   64px'lik ust marji bolumden DISARI tasip sayfa zeminini (#F7F7F7) aradan
   gosteriyordu; iki bolumun da zemini beyaz oldugu halde arada GRI BIR SERIT
   olusuyordu (kare ile goruldu, hesaplanmis zemin renkleri bunu gostermez).
   Aradaki nefesi artik yalnizca ust bolumun alt dolgusu veriyor. */
.np-bolum--bitisik { padding-top: 0; }
.np-bolum--bitisik .np-pano { margin-top: 0; }

/* Telefonlar: ortadaki ONDE ve BUYUK, yandakiler hafif donuk ve egik —
   ornekteki ust uste binen diziliş. Cerceve tarifi hero'daki .np-telefon ile
   ayni ailede; olculer burada bagimsiz cunku kirpma yok. */
.np-vitrin {
  margin-top: var(--eco-space-16);
  display: flex; align-items: center; justify-content: center;
}
.np-vitrin__tel {
  --vit-g: 13rem;
  position: relative; flex: none;
  width: var(--vit-g);
  height: calc(var(--vit-g) * 1973 / 960);
}
.np-vitrin__tel--on  { --vit-g: 16rem; z-index: 2; }
.np-vitrin__tel--yan { z-index: 1; opacity: .9; }
/* BINDIRME TELEFON GENISLIGINE ORANLI. Sabit 40px iken yan telefonlarin QR
   izgarasi ortadaki telefon tarafindan ORTASINDAN kesiliyordu (kare ile
   goruldu) — istifleme degil carpisma gibi okunuyordu. Izgara ekranin %68'i
   ve ortali, yani her yanda ~%16 bos pay var; bindirme bunun altinda kalmali. */
.np-vitrin__tel--yan { --vit-bindirme: calc(var(--vit-g) * .13); }
.np-vitrin__tel--yan:first-child { margin-right: calc(var(--vit-bindirme) * -1); transform: rotate(-4deg); }
.np-vitrin__tel--yan:last-child  { margin-left:  calc(var(--vit-bindirme) * -1); transform: rotate(4deg); }

/* Govde metni telefonlarin ALTINDA, ortali ve dar kolonda (kurucu: "baslik
   altta telefon mockuplari altinda body text seklinde"). */
.np-vitrin-govde { margin-top: var(--eco-space-16); text-align: center; }
/* Punto ORNEKTEKINE yaklastirildi: orada govde 21px, bizdeki body-lg 18px ile
   kucuk kaliyordu (kurucu). Olcekteki bir ust basamak body-xl = 20px. */
.np-desc--orta {
  margin-inline: auto;
  font-size: var(--eco-fontsize-body-xl);
  line-height: var(--eco-lineheight-body-xl);
  letter-spacing: var(--eco-letterspacing-body-xl);
  /* 3 SATIR: genislik tarandi, 1440de tam 3 satir veren deger secildi. */
  max-width: 58ch;
}
/* Tek bir metin IKI satir olacak (kurucu). Ortak kural 58ch'te KALIYOR: ayni
   sinifi diger iki metin de kullaniyor ve onlar 3 satir kalmali. Tarandi:
   58ch'te 3, 62ch'te 2 satir. */
.np-desc--iki { max-width: 62ch; }

/* --------------------------------------------------------------------------
   03 · PANO — kurucunun verdigi ornek (nomia-app.framer.website, "Stop
   planning. Start going."): fotografli, yuvarlatilmis TEK pano; ustte baslik,
   altta yan yana UC buzlu cam kart. Kart zemini rgba(255,255,255,.06) ve
   arkasi bulaniklasiyor, fotograf kartin icinden seciliyor — ornekteki gibi.
   PANO koyu ama BOLUM acik kaliyor. "Acik agirlik, pes pese koyu yok" kurali
   bolum zeminleri icin; panonun altinda yardim cumlesi + bolum dolgusu
   kadar acik bir bant var, ondan sonra kaldirilan koyu bolum'in tam genislikte koyusu geliyor.
   -------------------------------------------------------------------------- */
.np-pano {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* TAM GENISLIGE YAKIN — kurucu: "kartin genisligi tam olarak ornekteki gibi
     olacak". Olculdu: ornekte 1440 ekranda pano 1424 (iki yanda 8px) ve ucluk
     izgara kartlari 437px'e getiriyor. 1120'lik .container icinde kart en fazla
     336 olabiliyordu; bu yuzden pano BILEREK container'in disinda duruyor.
     Sayfadaki tek istisna bu pano — yardim cumlesi hala container icinde.
     100vw KULLANILMADI: kaydirma cubugu olan sistemlerde yatay tasma uretir. */
  margin: var(--eco-space-16) var(--container-px) 0;
  padding-block: var(--eco-space-10);
  padding-inline: 0;
  border-radius: var(--eco-radius-lg);
  /* Icerik ALTA yasli. Olculdu: 720px panoda icerik blogu 368px, ustte 312px
     fotograf nefes aliyor; baslik kartlarin hemen ustunde duruyor. */
  display: flex;
  align-items: flex-end;
  min-height: 45rem;
}
/* BASLIK VE KARTLAR SAYFANIN KENDI GENISLIGINDE (kurucu: "sayfada neyse o
   olacak"). Kutu kenarlardan --container-px kadar iceride; icerik ise sayfanin
   kendi .container'ini kullaniyor, yani hizayi elle hesaplamiyoruz. Kutu da
   icerik de ekranda ortali oldugu icin merkezleri cakisiyor ve metin, sayfanin
   geri kalaniyla AYNI dikey cizgide basliyor. */
.np-pano > .container { width: 100%; }
.np-pano__bg {
  position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden;
  /* GIRISTE OTURMA — ornekte sarmalayici 1.1'den 1.0'a geliyor (olculdu).
     Olcek hep >= 1 kaldigi icin hicbir anda kenar acilmiyor. */
  transform: scale(1.06);
  transition: transform 1.1s var(--ease-out, ease);
}
.reveal-up.revealed .np-pano__bg { transform: none; }
.np-pano__bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* PARALLAX — ornekte fotograf scroll boyunca ~432px yol aliyor (olculdu);
     burada toplam yol %30 (-%15 .. +%15).
     SIRA ONEMLI: `scale() translate()` yazilirsa yuzdeli oteleme ONCE yerel
     koordinatta uygulanip SONRA olcekle CARPILIR. Olculdu: %12 oteleme 1.26
     olcekle 108.9px'e cikti, tasma payi 93.5px'ti ve uclarda 15px'lik BOSLUK
     acildi. Olcek SONA alininca oteleme ham yuzde kadar kaliyor.
     Ortme payi: 1.36 olcek ust/alta %18 tasma birakir, oteleme en fazla %15 —
     her --np-s degerinde kenar kapali kalir. Ilerleme [data-np-scrub]
     betiginden --np-s olarak geliyor; betik baglanmazsa .5 ile ortada durur. */
  transform: translate3d(0, calc((var(--np-s, .5) - .5) * 16%), 0) scale(1.20);
  /* YUMUSATMA (kurucu: "smooth bir hareketi var, kart icinde hafif oynuyor").
     Betik her karede --np-s yaziyor; buradaki kisa gecis o degerleri alcak
     geciren bir suzgecten gecirip kaymayi sunumlestiriyor, scroll'a birebir
     yapismiyor. Genlik de dusuruldu: %30 -> %16 (hafif oynasin). */
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
/* Iki uca da agirlik veren perde: ustte baslik, altta kartlar okunacak. */
.np-pano__perde {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 44%, rgba(0,0,0,.55) 100%);
}
.np-pano__ic {
  position: relative; z-index: 2;
  width: 100%;
  display: flex; flex-direction: column;
  /* Olculdu: ornekte baslik ile kart siri arasi ~42px. */
  gap: var(--eco-space-10);
}
/* (0,2,0): mobil blogundaki `.np-h2` kurali bu satirdan SONRA geliyor; esit
   ozgullukte yazilsaydi dar ekranda puntoyu geri alirdi. */
.np-pano .np-pano__baslik {
  margin: 0;
  color: var(--eco-text-on-brand-strong);
  font-size: var(--eco-fontsize-display-lg);
  line-height: var(--eco-lineheight-display-lg);
  letter-spacing: var(--eco-letterspacing-display-lg);
}

.np-pano__kartlar { display: grid; gap: var(--eco-space-4); }
@media (min-width: 900px) {
  .np-pano__kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.np-pano__k {
  display: flex; flex-direction: column;
  padding: var(--eco-space-6);
  border-radius: var(--eco-radius-md);
  background: rgba(255, 255, 255, .06);
  /* Olculdu: ornekte blur(8px). */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* Baslangic hali reveal icin; .revealed gelince yerine oturuyor. */
  opacity: 0; transform: translateY(14px);
}
/* MINI HAREKETLER — kurucu: "iconlar boyle dumduz durdu, kart iceriklerine
   uygun mini animasyonlar kurgula, icon yerine oraya".
   UYDURMA IKON CIZILMEDI: bunlar SVG degil; sitenin zaten kullandigi dille
   (gercek elemanlar + CSS) kurulmus soyut maketler — hp-ui ailesiyle ayni
   yaklasim, bu sayfaya kapsanmis. Hareket eden her sey GERCEK eleman cunku
   azaltilmis harekette `*` ile toptan durduruluyor.
   DINLENME HALI TAMAMLANMIS: animasyon kapaliyken de kompozisyon ayakta.
   Marka yesili yalniz YUZEY olarak (metin degil) — koyu zeminde serbest. */
.np-mini {
  position: relative; display: block; flex: none;
  width: var(--eco-space-8); height: var(--eco-space-8);
  color: var(--eco-text-on-brand-strong);
}
.np-mini i, .np-mini b { position: absolute; display: block; }

/* 1 · BUL — dort kose kadraji merkeze kilitlenir, nokta nabiz atar. */
.np-mini--bul i {
  width: 11px; height: 11px;
  border: var(--eco-borderwidth-thick) solid currentColor;
  animation: np-mini-kadraj 2.6s ease-in-out infinite;
}
.np-mini--bul i:nth-child(1) { top: 0; left: 0;  border-right: 0; border-bottom: 0; border-top-left-radius: var(--eco-radius-sm);     --kx:  3px; --ky:  3px; }
.np-mini--bul i:nth-child(2) { top: 0; right: 0; border-left: 0;  border-bottom: 0; border-top-right-radius: var(--eco-radius-sm);    --kx: -3px; --ky:  3px; animation-delay: .06s; }
.np-mini--bul i:nth-child(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0; border-bottom-left-radius: var(--eco-radius-sm);  --kx:  3px; --ky: -3px; animation-delay: .12s; }
.np-mini--bul i:nth-child(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0; border-bottom-right-radius: var(--eco-radius-sm); --kx: -3px; --ky: -3px; animation-delay: .18s; }
.np-mini--bul b {
  top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: var(--eco-radius-full); background: var(--eco-surface-brand);
  animation: np-mini-nabiz 2.6s ease-in-out infinite;
}
/* Kose ogesini KUTU MERKEZINE dogru goturmek icin olcek degil oteleme
   kullanildi: scale kendi merkezine buzusturur, kadraj kapanmis gorunmez. */
@keyframes np-mini-kadraj { 0%, 100% { transform: none; } 45% { transform: translate(var(--kx), var(--ky)); } }
@keyframes np-mini-nabiz  { 0%, 100% { transform: scale(.75); opacity: .75; } 45% { transform: scale(1.15); opacity: 1; } }

/* 2 · BAG — yesil cubuk SABIT (kayitli katki), ustteki iki cizgi sirayla
   akar (gelmeye devam eden guncellemeler). */
.np-mini--bag i {
  left: 0; height: var(--eco-space-1);
  border-radius: var(--eco-radius-full);
  background: currentColor; opacity: .4;
}
.np-mini--bag i:nth-child(1) { top: 5px;  width: 100%; background: var(--eco-surface-brand); opacity: 1; }
.np-mini--bag i:nth-child(2) { top: 15px; width: 68%; animation: np-mini-akis 2.8s ease-in-out infinite; }
.np-mini--bag i:nth-child(3) { top: 24px; width: 86%; animation: np-mini-akis 2.8s ease-in-out .45s infinite; }
@keyframes np-mini-akis { 0%, 100% { opacity: .4; transform: translateX(0); } 45% { opacity: 1; transform: translateX(3px); } }

/* 3 · PAY — merkezden disa, sirayla.
   ILK HALI UC SERBEST NOKTAYDI ve 32px'te "paylasim" degil "yukleniyor" gibi
   okunuyordu (kare ile goruldu); merkeze baglayan iki cizgi eklendi.
   CIZGILER BILEREK HAREKETSIZ: animasyonlu uc noktayla birlikte otelenselerdi
   merkezden kopuk gorunurlerdi. Hepsi GERCEK eleman — psodo-eleman kullanilsaydi
   azaltilmis haredeki `.np-mini *` kurali onlari yakalayamazdi. */
.np-mini--pay b {
  top: 50%; left: 1px; width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: var(--eco-radius-full); background: var(--eco-surface-brand);
}
/* 1-2 baglanti cizgileri (sabit) — merkez (5.5, 16) ile uclar arasi. */
.np-mini--pay i:nth-of-type(1),
.np-mini--pay i:nth-of-type(2) {
  left: 6px; width: 23px; height: var(--eco-borderwidth-thick);
  border-radius: var(--eco-radius-full);
  background: currentColor; opacity: .45;
  transform-origin: left center;
}
.np-mini--pay i:nth-of-type(1) { top: 15px; transform: rotate(-25deg); }
.np-mini--pay i:nth-of-type(2) { top: 15px; transform: rotate(25deg); }
/* 3-4 uc noktalar (sirayla beliriyor). */
.np-mini--pay i:nth-of-type(3),
.np-mini--pay i:nth-of-type(4) {
  width: 7px; height: 7px; right: 1px;
  border-radius: var(--eco-radius-full); background: currentColor;
  animation: np-mini-yayil 2.4s ease-out infinite;
}
.np-mini--pay i:nth-of-type(3) { top: 2px; }
.np-mini--pay i:nth-of-type(4) { bottom: 2px; animation-delay: .5s; }
@keyframes np-mini-yayil {
  0%        { opacity: 0; transform: translate(-10px, 0) scale(.5); }
  45%, 100% { opacity: 1; transform: none; }
}
.np-pano__ifade {
  margin: var(--eco-space-6) 0 0;
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-h3);
  line-height: var(--eco-lineheight-h3);
  letter-spacing: var(--eco-letterspacing-h3);
  color: var(--eco-text-on-brand-strong);
}
.np-pano__ozet {
  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);
}
/* Kartlar SIRAYLA giriyor (kurucu: "hep statik tasarimlar oluyor"). */
.reveal-up.revealed .np-pano__k {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out, ease), transform .5s var(--ease-out, ease),
              background-color .3s var(--ease-out, ease);
}
.reveal-up.revealed .np-pano__k:nth-child(2) { transition-delay: .1s; }
.reveal-up.revealed .np-pano__k:nth-child(3) { transition-delay: .2s; }
/* HOVER AYNI KAPSAMDA yaziliyor: yalniz .np-pano__k:hover (0,2,0) yazilsaydi
   yukaridaki reveal kurali (0,3,0) transform'u geri alir, kart kipirdamazdi. */
.reveal-up.revealed .np-pano__k:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .12);
}

/* KALDIRILDI: .np-yardim — "Already taking part?..." cumlesi kurucu istegiyle
   sayfadan cikti, kurallari karsiliksiz kaldi. */

/* --------------------------------------------------------------------------
   04 · BAG VE DEVAMLILIK — koyu bant + metrik
   Metrik yapisi paylasilan hp-kpi bileseni; o bilesen ACIK zemin icin
   renklendirilmis, burada yalnizca RENKLERI koyu zemine cevriliyor.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   04 · UC KART — Apple "Worth the upgrade?" deseni, TEK SATIR.
   -------------------------------------------------------------------------- */
.np-kart3 { margin-top: var(--eco-space-16); display: grid; gap: var(--eco-space-5); }
@media (min-width: 900px) {
  .np-kart3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.np-kart {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  min-height: 21rem;
  padding: var(--eco-space-8) var(--eco-space-6) 0;
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-page);
  text-align: center;
}
.np-kart--sayi { justify-content: center; padding-bottom: var(--eco-space-8); }
/* ORNEKTEN OLCULDU: buyuk ifade 48px/600, ust ve alt satirlar 19px/600 ve GRI.
   Bizdeki 72px + normal agirlik + siyah metin yan yana konunca ornektekinden
   daha dagiik duruyordu (kurucu). Olcekteki karsiliklar: 48px = display-lg,
   19px'e en yakin basamak body-lg (18px), agirlik medium. */
.np-kart__sayi {
  margin: 0; max-width: 16ch;
  font-family: var(--eco-fontfamily-sans);
  font-size: var(--eco-fontsize-display-lg);
  line-height: var(--eco-lineheight-display-lg);
  letter-spacing: var(--eco-letterspacing-display-lg);
  font-weight: var(--eco-fontweight-medium);
  color: var(--eco-text-primary);
}
.np-kart__alt {
  margin: var(--eco-space-4) 0 0; max-width: 28ch;
  font-size: var(--eco-fontsize-body-lg);
  line-height: var(--eco-lineheight-body-lg);
  letter-spacing: var(--eco-letterspacing-body-lg);
  font-weight: var(--eco-fontweight-medium);
  color: var(--eco-text-secondary);
}
/* YARIM TELEFON — kartin ALT KENARI kirpiyor (kart overflow:hidden).
   margin-top:auto TELEFONU KARTIN DIBINE RAPTEDER. Olculdu: raptedilmeden
   gorunen band metin yuksekligine kaliyordu (1 satirlik kartta 251px, 4
   satirlikta 165px) — iki telefon farkli derinlikte kesildigi icin TEK bir
   telafi degeri ikisini birden ortalayamiyordu. Raptedilince
   band = yukseklik - kesim, yani her kartta ayni. Kesim orani kisa bandi
   (165px) korur; buyutulse satirin tamami uzardi. */
.np-kart__tel {
  --kt-g: 9.5rem;
  --kt-y: calc(var(--kt-g) * 1973 / 960);
  --kt-kesim: calc(var(--kt-y) * 0.47);
  /* EKRANIN kesimi telefonunkinden farkli: alt cerceve (%2.89) ekranin
     disinda kalir, yani ekrandan daha azi kesilir. Maketin icindeki her
     sey bu paya gore tasinir. */
  --kt-ekran-kesim: calc(var(--kt-kesim) - var(--kt-y) * 0.0289);
  width: var(--kt-g); height: var(--kt-y);
  margin: auto auto calc(var(--kt-kesim) * -1);
  flex: none;
  position: relative;
}
/* Maket EKRANIN tamamina gore ortalanir (justify-content:center), bu yuzden
   kesilen kadar yukari alinmali. Ama yalniz ekran kesimi kadar tasinirsa
   QR ile cip gorunen ekranda ASAGIDA kaliyor (olculdu: ustte 50px, altta
   14px). Ikisi tek bir GRUP ve ortalanmasi gereken o grup. Ek pay ikisini
   de yukari aliyor: justify-content:center oldugu icin dolgunun YARISI
   kadar kayan QR'a 40px, mutlak konumlu cipe 16px — ikisi de ~30px
   bosluga oturuyor. */
.np-kart__tel .hp-ui--pass {
  padding-bottom: calc(var(--kt-ekran-kesim) + var(--eco-space-10));
}
/* Cip mutlak konumlu; dolgu onu tasimaz, kesimin altinda kalirdi — hero
   telefonundaki ayni duzeltme (orada yazilmis, burada atlanmisti).
   space-8 = bilesenin kendi space-4'u + grubu ortalayan 16px. */
.np-kart__tel .hp-ui__chip {
  bottom: calc(var(--kt-ekran-kesim) + var(--eco-space-8));
}
/* TOPLULUK HALKASI — ortadaki kartta ikon yerine (kurucu: "donen bir circle
   ustunde insan profilleri, bubble gibi belirirler, topluluk varligini
   gosterelim"). Hareket eden her sey GERCEK eleman; azaltilmis harekette `*`
   ile toptan duruyor ve dinlenme hali TAMAMLANMIS kaliyor. */
/* Kurucu: "tek eksende dumduz donduruyorsun, hareket kat biraz" ve maket
   "3.2 yazisina yapismis". Iki degisiklik:
   1) YORUNGE EGIK. Halka scaleY ile yatiriliyor, yani daire degil ELIPS.
      Yatirma hem duran halde hem keyframe'de yaziliyor; azaltilmis harekette
      animasyon durdugunda da elips kalsin diye.
   2) DERINLIK YORUNGEYE BAGLI. One gelen baloncuk buyuyup netlesiyor, arkaya
      gecen kuculup soluyor. Faz her baloncugun KENDI acisindan geliyor:
      gecikme = -26s * aci/360, yani konumla birebir senkron.
   MATEMATIK: halka scaleY(k) rotate(0) uyguluyor; baloncugun kutusu bundan
   yamuluyor. Tersi tam olarak rotate(-0) scaleY(1/k) ve SIRA onemli (once
   donusu geri al, sonra yatirmayi). Derinlik ayni transform'a yazilamazdi,
   cunku donus keyframe'i onu ezerdi; bu yuzden BAGIMSIZ `scale`/`opacity`
   ozelliklerinde duruyor — duzgun olcek donmeyle yer degistirebilir, guvenli.
   CARPISMA KISITI: baloncuklar cekirdege degmemeli. Dar nokta 60 derecedeki
   baloncuk DEGIL — halka dondugu icin her baloncuk elipsin KUCUK YARICAPINDAN
   (90 derece) geciyor ve derinlik animasyonu tam orada onu en buyuk haline
   getiriyor; cekirdek de nabizla %8 buyuyor. Yani kisit:
     yaricap*yatirma - baloncuk_r*1.15 - cekirdek_r*1.08 >= pay
     64*.56 - 13.8 - 13.0 = ~9px.
   Ilk denemede bu yanlis modellenmisti (60 derece baz alinmisti) ve pay
   0px cikmisti; karede sikismis bir kume gibi duruyordu.
   Kutu elipse gore: 2*(4rem+13.8px) x 2*(4rem*.56+13.8px). */
.np-topluluk {
  position: relative; flex: none;
  width: 9.75rem; height: 6.25rem;
  margin-bottom: var(--eco-space-6);
}
.np-topluluk__halka {
  position: absolute; top: 50%; left: 50%;
  width: 8rem; height: 8rem; margin: -4rem 0 0 -4rem;
  border-radius: var(--eco-radius-full);
  border: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  transform: scaleY(.56);
  animation: np-top-don 26s linear infinite;
}
/* Baloncuk halkaya oturur: aciya don, disa cik, sonra ACIYI GERI AL ki dik dursun. */
.np-topluluk__kisi {
  position: absolute; top: 50%; left: 50%;
  width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem;
  transform: rotate(var(--a)) translate(4rem) rotate(calc(-1 * var(--a)));
}
/* Halkanin donusunu VE yatirmasini iceride geri al — yoksa baloncuklar hem
   bas asagi hem ezik olurdu. Ikinci animasyon derinligi tasiyor. */
.np-topluluk__kisi > b {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: var(--eco-radius-full);
  background: var(--eco-surface-base);
  border: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  transform: scaleY(1.7857);
  animation: np-top-ters 26s linear infinite,
             np-top-derinlik 26s linear infinite;
}
.np-topluluk__kisi svg {
  width: .875rem; height: .875rem;
  fill: var(--eco-text-link); stroke: none;
}
/* Gecikme YALNIZ derinlik animasyonuna (ikinci deger): donus senkron kalmali,
   yoksa baloncuk sabit bir aciyla yan yatardi. -26s * aci/360. */
.np-topluluk__kisi:nth-child(2) > b { animation-delay: 0s, -4.333s; }
.np-topluluk__kisi:nth-child(3) > b { animation-delay: 0s, -8.667s; }
.np-topluluk__kisi:nth-child(4) > b { animation-delay: 0s, -13s; }
.np-topluluk__kisi:nth-child(5) > b { animation-delay: 0s, -17.333s; }
.np-topluluk__kisi:nth-child(6) > b { animation-delay: 0s, -21.667s; }
/* Marka yesili YUZEY olarak (metin degil): toplulugun bulustugu merkez. */
.np-topluluk__cekirdek {
  position: absolute; top: 50%; left: 50%;
  width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem;
  border-radius: var(--eco-radius-full);
  background: var(--eco-surface-brand);
  animation: np-top-nabiz 6s ease-in-out infinite;
}
@keyframes np-top-don  { from { transform: scaleY(.56) rotate(0deg); }
                         to   { transform: scaleY(.56) rotate(360deg); } }
@keyframes np-top-ters { from { transform: rotate(0deg) scaleY(1.7857); }
                         to   { transform: rotate(-360deg) scaleY(1.7857); } }
/* %25 = yorungenin ON noktasi (ekranda alt), %75 = ARKA (ekranda ust). */
@keyframes np-top-derinlik {
  0%, 100% { scale: 1;    opacity: .9; }
  25%      { scale: 1.15; opacity: 1; }
  75%      { scale: .74;  opacity: .45; }
}
@keyframes np-top-nabiz { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }

.np-kart__metin {
  margin: var(--eco-space-5) 0 0; max-width: 28ch;
  font-size: var(--eco-fontsize-body-lg);
  line-height: var(--eco-lineheight-body-lg);
  letter-spacing: var(--eco-letterspacing-body-lg);
  font-weight: var(--eco-fontweight-medium);
  color: var(--eco-text-secondary);
}
/* Ikonlu kartlarda icerik dikeyde ortali; telefonlu kartta metin USTTE kalmali
   cunku gorsel alttan kirpiliyor. */
.np-kart:not(.np-kart--tel) { justify-content: center; padding-bottom: var(--eco-space-8); }
/* Telefonun ust marji `auto` oldugu icin (dibe raptetme) metinle arasindaki
   24px oradan gelemiyor; TABAN BOSLUK metnin alt marjinda duruyor. Bos alan
   sifira inse bile metin telefona yapismaz. */
.np-kart--tel .np-kart__metin { margin-top: 0; margin-bottom: var(--eco-space-6); }
/* VAKA KARTI — taban .hp-chain__card anasayfa.css'ten geliyor (bu sayfa onu
   zaten yukluyor). Oradaki kurallar KARUSEL icin yazilmis: govde mutlak
   konumlu, kart sabit olculu. Asagidakiler, consumer-projects sayfasinin ayni
   amacla yazdigi devre disi birakmalarin bu sayfaya KAPSANMIS karsiligi —
   o dosyayi yuklemek 20 ayri cp-* bilesen ailesini de getirirdi. */
.np-ornek { margin-top: var(--eco-space-16); }
.np-ornek__kart {
  max-width: none; height: auto;
  text-decoration: none; color: inherit;
  transition: translate .5s var(--ease-out, ease),
              background-color .3s var(--ease-out, ease);
}
/* Bolum zemini BEYAZ; kart ondan ayrissin diye sayfa yuzeyi (#F7F7F7).
   (0,2,0): paylasilan .hp-chain__card ile esit ozgullukte kalmasin. */
.np-ornek .np-ornek__kart { background: var(--eco-surface-page); }
/* Hoverda zemin bir basamak koyulasir (kurucu: "hafif degissin").
   (0,3,0): yukaridaki .np-ornek .np-ornek__kart (0,2,0) zeminini yenmeli. */
.np-ornek .np-ornek__kart:hover { background: var(--eco-surface-subtle); }
.np-ornek__kart:hover { translate: 0 -3px; }
.np-ornek__kart:hover .hp-link { color: var(--eco-text-link-hover); }
.np-ornek__kart:focus-visible {
  outline: var(--eco-borderwidth-thick) solid var(--eco-border-focus);
  outline-offset: 3px;
}
/* Govde akisa doner (karuselde mutlak konumlu); oran metin %60 / gorsel %40. */
.np-ornek__kart .hp-chain__body {
  position: static; width: auto; min-width: 0;
  flex: 0 0 60%;
  padding: var(--eco-space-6);
  opacity: 1;
}
.np-ornek__kart .hp-chain__media {
  position: relative; inset: auto; margin: 0;
  flex: 0 0 40%; width: auto; min-width: 0;
}
.np-ornek__kart .hp-chain__media::after,
.np-ornek__kart .hp-chain__logo { opacity: 1; }
.np-ornek__kart .hp-chain__body > * { animation: none; }
/* NATUREOS SERIDI — cumle vaka kartinin ICINDEN cikti, kartin ALTINA ayri ve
   ince bir kart oldu (kurucu). Ust kartla AYNI aile: --eco-radius-lg ve sayfa
   yuzeyi; aradaki bosluk ikisini CIFT olarak okutacak kadar dar (space-4).
   Ikon UYDURULMADI: header menusundeki Technology > NatureOS ikonunun ta
   kendisi, cizgi ikon oldugu icin .eco-icon sozlesmesine uyuyor ve
   stroke-width markup'a YAZILMIYOR (--eco-borderwidth-icon'dan gelir). */
.np-natureos {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--eco-space-4);
  margin-top: var(--eco-space-4);
  padding: var(--eco-space-5) var(--eco-space-6);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-page);
}
/* Yuvarlak cip: sayfanin kendi dili (SSS dugmesi, topluluk baloncuklari).
   Yesil METIN degil ikon rengi: --eco-text-link (#377A36), marka yesili degil. */
.np-natureos__ikon {
  display: grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--eco-radius-full);
  background: var(--eco-surface-base);
  border: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  color: var(--eco-text-link);
}
.np-natureos__ikon svg { width: 1.25rem; height: 1.25rem; }
/* Dar ekranda once metin tam satira gecsin, buton altina sarksin. */
.np-natureos__metin {
  flex: 1 1 18rem; min-width: 0; margin: 0;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-secondary);
}
.np-natureos__btn { flex: none; }
.np-vitrin-aksiyon { margin: var(--eco-space-8) 0 0; }
/* --------------------------------------------------------------------------
   DAR EKRAN
   -------------------------------------------------------------------------- */
/* SSS AKORDIYONU — kalip ecoDrone'dan tasindi, kurallar burada KAPSANDI. */
/* BOLUM ZEMINI — ecoDrone'daki .ed-faqs ile AYNI: sayfa yuzeyi + ayni iki
   radial yikama (bu sayfadaki .np-hero::before ile de ayni recete).
   Kurucu karari: farkli sayfalardaki FAQ bolumleri ecoDrone'dakiyle ayni olur. */
.np-sss-bolum { position: relative; isolation: isolate; overflow: hidden; }
.np-sss-bolum::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 32rem at 18% 6%, rgba(136, 196, 38, .18), transparent 70%),
    radial-gradient(54rem 30rem at 88% 94%, rgba(55, 122, 54, .13), transparent 72%);
}
.np-sss { display: grid; gap: var(--eco-space-3); max-width: 46rem; margin: var(--eco-space-12) auto 0; }
.np-sss__item {
  border-radius: var(--eco-radius-lg);
  /* ecoDrone ile ayni cam yuzey: yikama kartin ardindan gorunur. */
  background: rgba(255, 255, 255, .66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: background-color .24s var(--ease-out, ease), transform .24s var(--ease-out, ease);
}
.np-sss__item:hover { background: rgba(255, 255, 255, .88); transform: translateY(-1px); }
.np-sss__item:has(.np-sss__soru:focus-visible) { background: rgba(255, 255, 255, .88); }
.np-sss__item.is-acik { background: rgba(255, 255, 255, .92); transform: none; }
.np-sss__soru {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--eco-space-4);
  width: 100%; margin: 0;
  padding: var(--eco-space-5) var(--eco-space-6);
  border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-h5);
  line-height: var(--eco-lineheight-h5);
  letter-spacing: var(--eco-letterspacing-h5);
  color: var(--eco-text-primary);
}
.np-sss__metin { min-width: 0; }
/* Yuvarlak dugme: acilinca marka yesili YUZEY, ikon koyu kaliyor. */
.np-sss__dugme {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--eco-radius-full);
  background: var(--eco-surface-page);
  color: var(--eco-text-primary);
  transition: background-color .24s var(--ease-out, ease);
}
.np-sss__item.is-acik .np-sss__dugme { background: var(--eco-surface-brand); }
.np-sss__ikon {
  grid-area: 1 / 1; width: 18px; height: 18px;
  transition: opacity .28s var(--ease-out, ease), transform .28s var(--ease-out, ease);
}
.np-sss__ikon--eksi { opacity: 0; transform: rotate(-90deg); }
.np-sss__item.is-acik .np-sss__ikon--arti { opacity: 0; transform: rotate(90deg); }
.np-sss__item.is-acik .np-sss__ikon--eksi { opacity: 1; transform: rotate(0deg); }
.np-sss__soru:focus-visible {
  outline: var(--eco-borderwidth-thick) solid var(--eco-border-focus);
  outline-offset: -2px;
}
/* Yukseklik gecisi 0fr -> 1fr; ic sarmalayici tasani keser. */
.np-sss__kutu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease-out, ease); }
.np-sss__item.is-acik .np-sss__kutu { grid-template-rows: 1fr; }
.np-sss__sar { overflow: hidden; }
.np-sss__cevap {
  margin: 0;
  padding: 0 var(--eco-space-6) var(--eco-space-5);
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-secondary);
}

@media (max-width: 900px) {
  /* TARANDI: 390x844'te sigan ILK deger .72. Mobilde basliklar/lede daha fazla
     satira indigi icin telefona kalan pay azaliyor. */
  .np-telefon { --np-tel-kirp: .68; }
  /* Telefon kartin dibine raptedildigi icin bos alan METNIN ALTINDA
     toplanir. Masaustunde dogrusu bu: izgara satiri zaten en uzun karta
     geriliyor, bosluk bir yere gidecek ve gorseller hizali kalmali.
     Mobilde kartlar alt alta; hizalanacak bir sey yokken min-height tek
     basina bos bir bant uretiyordu (olculdu: icerik 249px, kart 336px).
     Dar ekranda yukseklik icerikten gelsin. */
  .np-kart--tel { min-height: auto; }
  /* Dar bantta vaka karti alt alta: gorsel ustte, metin altta; gorsel tavanli. */
  .np-ornek__kart { flex-direction: column-reverse; }
  .np-ornek__kart .hp-chain__media { flex: 0 0 auto; aspect-ratio: 4 / 3; max-height: 15rem; }
  /* Alt dolgu 0: telefon dar ekranda da hero'nun ALT KENARINA yapisik durmali,
     aksi halde kirpilan telefonun altinda bir seritlik bosluk kaliyor. */
  .np-hero { min-height: 100svh; padding-block: calc(var(--eco-space-32) + var(--eco-space-6)) 0; }
  /* Yalniz punto: "lineheightmobile-*" tokeni YOK, taban yuzde oldugu icin
     kendiliginden olceklenir. */
  .np-hero__title { font-size: var(--eco-fontsizemobile-display-3xl); }
  .np-hero__lede { font-size: var(--eco-fontsize-body-lg); line-height: var(--eco-lineheight-body-lg); letter-spacing: var(--eco-letterspacing-body-lg); }
  /* Mobilde hero kirpimi degisiyor ve ALT METIN goruntunun daha acik bir
     bandina denk geliyor — OLCULDU: masaustu 6.48:1 ama mobil 3.97:1, esik
     4.5. Scrim'in orta ve alt duraklari bu bantta koyulastirilir. Taban
     kural (masaustu) DEGISMEZ: orada zaten fazlasiyla pay var. */
  .np-bolum { padding-block: var(--eco-space-16); }
  /* Bitisik bolumun ust dolgusu dar ekranda da 0 kalmali: yukaridaki kural
     padding-block KISAYOLU oldugu icin ust dolguyu geri getiriyordu ve dikis
     mobilde yeniden aciliyordu (olculdu: 0 yerine 64px). */
  .np-bolum--bitisik { padding-top: 0; }
  .np-h2 { font-size: var(--eco-fontsizemobile-display-md); max-width: none; }  /* Dar ekranda yukseklik icerikten gelir (kartlar zaten alt alta yigiliyor).
     Kenar bosluklari her olcude ayni: kutu --container-px kadar iceride,
     icerik de .container'in kendi dolgusunu kullaniyor. */
  .np-pano { padding-block: var(--eco-space-6); min-height: 0; }
  .np-vitrin-bas .np-vitrin-baslik { font-size: var(--eco-fontsizemobile-display-xl); }
  /* Dar ekranda ucu birden tasmadan sigsin diye telefonlar kucultuldu;
     bindirme oranli oldugu icin izgara yine acikta kaliyor. */
  .np-vitrin__tel { --vit-g: 6.5rem; }
  .np-vitrin__tel--on { --vit-g: 8.5rem; }
  .np-pano .np-pano__baslik { font-size: var(--eco-fontsizemobile-display-lg); }
  .np-pano__ifade { font-size: var(--eco-fontsizemobile-h3); }
}

/* --------------------------------------------------------------------------
   AZALTILMIS HAREKET — ezecegi kurallardan SONRA.
   Her sahne TAMAMLANMIS halinde durur: satirlar yerinde, cizgi cizilmis,
   hover donusumleri kapali. Hero scrub'i zaten --np-h = 0'da kalir.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .np-hero__satir > span { animation: none; transform: none; }  /* Scrub betigi hareket azaltilmisken HIC baglanmiyor, yani --np-s yazilmiyor.
     Yedek degerle birakilsaydi kaldirilan koyu bolum gorseli kalici bir kaymada donardi;
     burada acikca notr hale getiriliyor. */
}

/* Long translated actions keep the same gutters as the copy above them. */
@media (max-width: 900px) {
  .np-vitrin-bas { min-width: 0; }
  .np-vitrin-aksiyon .btn { max-width: 100%; white-space: normal; text-align: center; }
  .np-vitrin { overflow: clip; }
}