/* ==========================================================================
   SAYFA 11 — Nature Intelligence (EN)   ·   ni- katmani

   Paylasilan: eco-icon (anasayfa.css). for-businesses-en.css YUKLENMEZ.
   Brief'te BUTON ve KAPANIS CTA'SI YOK — uydurulmadi.

   KURUCUNUN SINIRI (ic not): "Yapay canli sayi, analiz dogrulugu veya yeni
   AI kabiliyeti ekleme." Sayfada rakam/oran/dogruluk iddiasi YOK.

   IKINCI REVIZYON (kurucu: "04 iyi olmus, digerlerini daha da iyilestir").
   Okunan yon: GORSEL-ONCELIKLI bolumler seviliyor, duz metin bloklari ve
   sade kartlar sevilmiyor. Ayni yonu destekleyen gecmis: technical
   restoration'daki tam genislik kart, NatureOS'taki sisli orman uzerindeki
   cam kartlar ve "blur text box begenildi" notu.
     01  tanim cumlesi artik gorsel uzerinde CAM PANELDE
     02  cizgiyle ayrilmis iki sutun KALDIRILDI -> fotografin alt yarisinda
         IKI CAM KART
     03  tam genislik + kilit KALDIRILDI -> YARIM EKRAN BOLUNME (gorsel sol
         kenardan tasar, metin sagda). 02'deki "gorsel ustunde kart" desenini
         tekrar etmesin diye bilincli olarak farkli.
     04  KORUNDU (kurucu begendi); destek cumlesi gorselin kosesinde cam
         kutuya alindi (kurucu istegi).
     05  duz beyaz kartlar -> KOYU DOSEMELER.

   ACIK/KOYU RITMI: hero KOYU -> 02 acik -> 03 KOYU -> 04 acik -> 05 acik
   (icindeki dosemeler koyu). Iki koyu bolum hic yan yana gelmez.
   ========================================================================== */

/* ------------------------------ 01 · ACILIS ------------------------------
   Kurucu: "heroyu iyilestir; ikonlar/vektorel animasyonlarla sov yap."
   Ayrica: cam kart YALNIZ 04'teki o cumle icindi — hero'daki cam panel
   KALDIRILDI, tanim cumlesi duz beyaz metne dondu.

   VEKTOR KATMANI: fotografin uzerinde soyut bir "inceleme" grafigi —
   disa acilan tespit halkalari, cizilerek gecen tarama cizgisi, sirayla
   beliren nokta isaretleri ve onlari baglayan cizgiler. Sahte arayuz ya da
   sahte veri DEGIL: ne rakam, ne eksen, ne etiket var; saf geometri.
   Cizim teknigi depodaki idiom: pathLength="1" + stroke-dashoffset 1->0
   (bkz. consumer-projects .cp-tree). Hat uclari YUVARLAK — kurucu
   (2026-09-22): "bu tarz animasyonlarin hatlari hep rounded olmali".
   .eco-icon bu nitelikleri dusurdugu icin burada ACIKCA veriliyor.
   -------------------------------------------------------------------------- */
/* ==========================================================================
   HERO — urun sayfalari icin ORTAK SABLON (NatureOS / NaturePass / NI)
   Acik zemin, ortali: ikon+urun adi -> baslik -> alt metin -> buton,
   altinda tek buyuk gorsel; gorsel scroll ile buyuyup bolumun arkaplanina
   donusuyor.
   Arkaplan resetesi ecodrone'un .ed-faqs::before'undan alindi (ayni iki
   radyal marka yikamasi); yesil burada YUZEY tonu, metin/ikon rengi degil.
   ========================================================================== */
.ni-hero {
  position: relative;
  isolation: isolate;
  background: var(--eco-surface-page);
  padding-block: calc(var(--eco-space-40) + var(--eco-space-8)) 0;
  text-align: center;
}
.ni-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%);
}
.ni-hero__alt { display: grid; justify-items: center; gap: var(--eco-space-4); }

/* URUN ADI = ikon + gradient yazi, logo gibi okunur. */
.ni-hero__ad {
  /* IKON YANDA DEGIL USTTE. Yanda durunca blok geometrik olarak ortali
     kalsa bile goz YAZININ ortasini aradigi icin kaymis gorunuyordu
     (kurucu: "goz yaniliyor"). Apple da isareti metnin yanina iliştirmiyor.
     Simdi ikon kendi satirinda, tam ortada. */
  display: grid; justify-items: center; gap: var(--eco-space-3);
  margin: 0;
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-medium);
  /* OLCULEN APPLE ORANI: urun adi 34px, baslik 96px -> ~0.35.
     Ikisini esitlemek (72/72) begenilmedi. 72px basliga karsi hedef ~25px;
     token olcegindeki en yakin degeri kullaniyoruz. */
  font-size: var(--eco-fontsize-h3);
  line-height: var(--eco-lineheight-h3);
  letter-spacing: var(--eco-letterspacing-h3);
}
.ni-hero__ikon {
  display: block;
  width: var(--eco-space-12); height: var(--eco-space-12);
  /* Header'daki Technology > Nature Intelligence ikonu OUTLINE; fill ile
     boyanirsa gorunmez olur. */
  fill: none; stroke: #1F7A6B;
}
/* ACIK ZEMIN icin KOYU rampa. Koyu kanopideki acik rampa burada okunmazdi;
   renkler ayni yolu (yesil -> turkuaz -> mavi -> mor) koyu tonda izliyor. */
.ni-hero__ad-yazi {
  background-image: linear-gradient(100deg, #2E7D32 0%, #1F7A6B 34%, #377A36 68%, #2E7D32 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.ni-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;
}
.ni-hero__lede {
  margin: 0; max-width: 46ch;
  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);
}
/* Kapsayicinin gap'i 16; butona 8px ust marj eklenince alt metin ile buton
   arasi 24 oluyor, digerleri 16'da kaliyor (kurucu olcusu). */
.ni-hero__eylem { margin: var(--eco-space-2) 0 0; }

/* SAHNE: pist yuksekligi kaydirma mesafesini verir, yapiskan kilit gorseli
   ekranda tutar, gorsel --ni-b ile buyur. Varsayilan 1 = son hal. */
.ni-sahne { --ni-b: 1; position: relative; height: 220svh; margin-top: var(--eco-space-3); }
.ni-sahne__kilit {
  position: sticky; top: 0; height: 100svh;
  overflow: hidden;
}
/* ORAN BAGIMSIZ KAPLAMA. Onceki surum sabit 16/10 bir kutuyu OLCEKLIYORDU:
   masaustunde ekrani dolduruyordu ama 390x844'te 1.62 olcek ~630x394 veriyor,
   yani gorsel ustunde ve altinda genis bosluk kalan bir SERIT olarak kaliyordu.
   Olcek sayisini buyutmek cozmez; oran sabit kaldikca her viewport ayri bir
   sayi ister.
   Simdi gorsel yapiskan cerceveyi zaten dolduruyor; hareket KENAR BOSLUGUNUN
   kapanmasiyla oluyor. --ni-b 1'e giderken inset ve kose yaricapi 0'a iner,
   boylece son hal her ekranda TAM KAPLAMA. */
.ni-sahne__kare {
  position: absolute;
  /* Ust/alt inset 7svh -> 3svh: kurucu "gorsel biraz daha yukari" dedi.
     Butonla gorsel arasindaki 75px'in 63'u BU insetten geliyordu, yalnizca
     12'si marjdan; onceki turda marji kisaltmak gorunen bosluga 12px dokundu.
     Sifirlanmiyor: bu, scroll animasyonunun BASLANGIC degeri — --ni-b 1'e
     giderken 0'a inip gorseli bolum arkaplanina cevirir (bitis hali olculdu,
     tam kaplama bozulmuyor). */
  inset: calc((1 - var(--ni-b)) * 3svh) calc((1 - var(--ni-b)) * (50vw - min(34rem, 50vw - var(--container-px))));
  margin: 0;
  border-radius: calc(var(--eco-radius-lg) * (1 - var(--ni-b)));
  overflow: hidden;
  will-change: inset, border-radius;
}
.ni-sahne__kare img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .ni-hero { padding-block: calc(var(--eco-space-32) + var(--eco-space-6)) 0; }
  /* Mobilde baslik 40px'e indigi icin ayni token (24px) orani 0.60'a
     cikarirdi; 20px ile 0.50'de kaliyor — ad hala belirgin sekilde ikincil. */
  .ni-hero__ad { font-size: var(--eco-fontsize-body-xl); }
  .ni-hero__ikon { width: var(--eco-space-10); height: var(--eco-space-10); }
  .ni-hero__title { font-size: var(--eco-fontsizemobile-display-2xl); }
  .ni-hero__lede { font-size: var(--eco-fontsize-body-lg); line-height: var(--eco-lineheight-body-lg); }
  .ni-sahne { height: 180svh; }
}
@media (prefers-reduced-motion: reduce) {
  .ni-sahne__kare { position: relative; inset: auto; border-radius: var(--eco-radius-lg); aspect-ratio: 16 / 10; }
  .ni-sahne { height: auto; }
  .ni-sahne__kilit { position: static; height: auto; }
}

/* ------------------------------- ORTAK ---------------------------------- */
/* Fotograf uzerindeki cam yuzey — sayfadaki TEK cam filmi, degerleri token. */

/* --------------------- 02 · SAHAYI GOZLEMLEME --------------------------- */
/* Kartlarin oturdugu bant koyulasir; cam kutular her fotografta okunsun. */
/* Kartlar CAM DEGIL koyu doseme — cam kart yalniz 04'teki cumle icindi
   (kurucu). Mobildeki hal ve bolum 05'in dosemeleriyle ayni dil. */
/* Ikonlar da CIZILEREK gelir (kurucu: ikonlarla sov yap). Ayni idiom. */

/* ------------------------------ DAR EKRAN ------------------------------- */
@media (max-width: 900px) {
  /* Dar ekranda daha kucuk: 40px. Kapsam yine tek degiskenden. */
  /* Dar ekranda yan koridor YOK: olculen yan bosluk her mobil genislikte
     yalnizca 20px (320'de sagda 13px). 40px'lik isaret oraya sigmaz, dolayisiyla
     "cevresi" mobilde ust bant demek. Bes genislikte birden guvenli bulunan
     yuvalardan secildi (ust %8-32, sol %14-86). */
  /* Dar ekranda gorsel DIKEYLESIR. 3/2'lik kisa bir karede cam kutu
     yuksekligin ~%35'ini kapliyor ve ozneleri ortadan orterek 'kose'
     olmaktan cikiyordu (karede goruldu). 4/5 ile kutu alt UCTE BIR'e
     iner ve iscilerin ustu acilir. Masaustu DEGISMEZ: orada kutu zaten
     buyuk gorselin sol alt kosesinde duruyor. */
}

/* --------------------------- AZALTILMIS HAREKET ------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Vektor katmani ve ikonlar TAMAMLANMIS halde durur. */
  /* Hareket yoksa band hic gorunmez, isaretler yerinde ve sabit durur. */
}

/* --------------------------------------------------------------------------
   AZALTILMIS HAREKET — yeni tespit parcalari (yanki + nokta) icin ek.
   Dosyanin sonunda, cunku ezecegi kurallardan sonra gelmeli.
   Hareket kapatilinca isaretler KAYBOLMAMALI: animasyon opacity:0'dan
   basladigi icin "animation:none" onlari gorunmez birakirdi. Bu yuzden
   dinlenme hali acikca yaziliyor.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Parlama susar; tonal dolgu bir ANIMASYON degil, durur. */
}

/* ==========================================================================
   BENTO — Apple Card sayfasindaki kart izgarasi bize uyarlandi.
   OLCULEN: iki kolon (565+565), gap 10px, radius 40px, genis kartlar iki
   kolonu birden kapliyor; genis kartta buyuk ifade + alt baslik + govde.
   BIZDEKI FARK: radius 40px merdivende YOK (tavan lg=20px), o yuzden lg.
   Icerik uydurulmadi: sayfadaki dort bolumun metinleri kartlara dagitildi.
   ========================================================================== */
.ni-bento { background: var(--eco-surface-base); padding-block: var(--eco-space-24); }
/* APPLE KALIBI GRADIENT YAZI — olculen ornek: yatay 90deg, iki-uc durak,
   iri ve kalin satir (ornegin "Daily Cash": #68A3D0 -> #85C964).
   Bize uyarlarken iki sey degisti: renkler YESIL ailesinde (mavi/mor
   kullanilmiyor) ve duraklar KOYU tutuldu — Apple'in acik yesil duragi beyazda
   ~2.3:1'de kaliyor, buyuk metin icin gereken 3:1'in altinda. Olculen degerler
   asagida. @supports: desteklenmezse duz koyu metin kalir. */
/* Gradient artik BIRINCI KARTIN basliginda. width:fit-content sart: kutu
   metinden genis olursa ramp'in yalnizca bir dilimi harflere dusuyor. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ni-kart__baslik--ana {
    width: fit-content; max-width: 100%; background-size: 100% 100%;
    /* METALIK: siyahtan griye. Duraklarin hepsi notr rampadan token, yani ham
       hex azaliyor. En acik durak neutral-600 (#828282): #F7F7F7 kart zemininde
       3.59:1, buyuk metin esigini (3:1) geciyor. neutral-500 2.53 ile KALIRDI. */
    background-image: linear-gradient(100deg,
      var(--eco-color-neutral-950) 0%, var(--eco-color-neutral-600) 34%,
      var(--eco-color-neutral-900) 62%, var(--eco-color-neutral-700) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}
.ni-bento__izgara {
  display: grid; gap: var(--eco-space-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .ni-bento__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ni-kart--genis { grid-column: 1 / -1; }
}
.ni-kart {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--eco-space-4);
  padding: var(--eco-space-10);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-page);
}
.ni-kart__bas { display: inline-flex; align-items: center; gap: var(--eco-space-3); }
.ni-kart__ikon {
  width: var(--eco-space-6); height: var(--eco-space-6);
  fill: var(--eco-text-link); stroke: none;
  transform: scale(.6); opacity: 0;
  transition: transform .5s var(--ease-out, ease), opacity .5s var(--ease-out, ease);
}
.reveal-up.revealed .ni-kart__ikon,
.ni-kart.revealed .ni-kart__ikon { transform: none; opacity: 1; }
.ni-kart__etiket {
  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-color-neutral-700);
}
.ni-kart__baslik {
  margin: 0; max-width: 20ch;
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-display-sm);
  line-height: var(--eco-lineheight-display-sm);
  letter-spacing: var(--eco-letterspacing-display-sm);
  color: var(--eco-text-primary);
  text-wrap: balance;
}
.ni-kart--genis .ni-kart__baslik { max-width: 24ch; font-size: var(--eco-fontsize-display-md); line-height: var(--eco-lineheight-display-md); }
/* Medya kartlarinin SOL SUTUNU: ogeler burada yiginlanir, aralari kartin
   kendi araligi kadardir ve izgara satirlariyla hic etkilesmez. */
.ni-kart__sol { display: flex; flex-direction: column; gap: var(--eco-space-4); min-width: 0; }
.ni-kart__sol .ni-kart__linkler { margin-top: 0; }

.ni-kart__metin {
  margin: 0; max-width: 46ch;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-secondary);
}
/* PILL ETIKET (kurucu: kart 2 ve 3 "pill label"). Ikon pill'in ICINDE, o yuzden
   kartin buyuk ikon olcusu burada geri aliniyor. */
.ni-kart__pill {
  display: inline-flex; align-items: center; gap: var(--eco-space-2);
  /* Padding artik SIMETRIK. Oncesi 8/16/8/8 idi: sol 8 sag 16, ikon 24px iken
     etiket metni ~14px — ikon metinden yuksekti, pill tuhaf duruyordu. */
  /* Kurucu olcusu: 11px metin, 3px 9px padding. 4px'lik bosluk olceginde
     3 ve 9 karsiligi yok; token uydurmak yerine verilen deger birebir yazildi.
     Font zaten --eco-fontsize-label-sm = 11px. */
  padding: 3px 9px;
  border-radius: var(--eco-radius-full);
  background: var(--eco-label-pill-fill);
  border: var(--eco-borderwidth-hairline) solid var(--eco-label-pill-border);
  font-size: var(--eco-fontsize-label-sm);
  line-height: var(--eco-lineheight-label-sm);
  /* EDS `boyut-ve-tracking-birlikte`: size alindiysa tracking de alinir. */
  letter-spacing: var(--eco-letterspacing-label-sm);
}
.ni-kart__pill .ni-kart__etiket { color: var(--eco-label-pill-text); }

/* VURGU: govde metni olmayan kartlarda tek cumle "heading gibi buyuk" yazilir.
   Baslik DEGIL cunku altinda bolum yok; boyutu .ni-kart__baslik ile ayni. */
.ni-kart__vurgu {
  margin: 0; max-width: 24ch;
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-display-md);
  line-height: var(--eco-lineheight-display-md);
  letter-spacing: var(--eco-letterspacing-display-md);
  color: var(--eco-text-primary);
  text-wrap: balance;
}

/* ETIKET SATIRI (kart 4: Vegetation Cover · Seedling Density · Changes Over Time) */
.ni-kart__etiketler {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--eco-space-2);
}
.ni-kart__etiketler li {
  padding: 3px 9px;
  border-radius: var(--eco-radius-full);
  background: var(--eco-label-pill-fill);
  border: var(--eco-borderwidth-hairline) solid var(--eco-label-pill-border);
  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-label-pill-text);
}

/* IKI LINK YAN YANA (kart 7) */
/* Linkler artik sitenin UCUNCUL link butonu: .hp-link (anasayfa.css'te tanimli,
   bu sayfa onu yukluyor). Kendi .ni-kart__link'imi yazmak yanlisti. */
.ni-kart__linkler { display: flex; flex-wrap: wrap; gap: var(--eco-space-6); margin-top: auto; }
@media (max-width: 900px) {
  .ni-bento { padding-block: var(--eco-space-16); }
  .ni-kart { padding: var(--eco-space-6); }
  .ni-kart__baslik,
  .ni-kart--genis .ni-kart__baslik { font-size: var(--eco-fontsizemobile-display-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .ni-kart__ikon { transform: none; opacity: 1; transition: none; }
}

/* --- KART MEDYASI — Apple'in genis kart anatomisi: solda metin, sagda gorsel.
   Gorseller UYDURULMADI: bento'ya donusturulurken kaldirilan bolumlerde zaten
   bu sayfada kullanilan, onayli EDS kareleri. legacyUrl bicimi korundu ki
   build yerellestirsin (hotlink degil). --- */
/* gap:0 DEGIL. Once oyleydi ve satir araligini yalnizca >=900px bloguna
   koymustum; dar ekranda etiket/baslik/govde bitisik kaliyordu. */
/* Gorseller KENARDAN KENARA degil, analiz kartindaki gibi ICERIDE ve
   yuvarlak koseli (kurucu istegi). Kart kendi padding'ini geri aliyor. */
.ni-kart--medya { padding: var(--eco-space-10); gap: var(--eco-space-4); }
/* width:100% SART: .ni-kart display:flex + align-items:flex-start oldugu icin
   figur mobilde esnemiyordu (kart1 140px, kart4 0px olup kayboluyordu). */
.ni-kart__medya { margin: 0; overflow: hidden; width: 100%; }
.ni-kart__medya img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Gorsel kartin ALTINA YAPISIR: kartin alt padding'i sifirlanir, gorselin
   alt iki kosesi duz kalir, yalniz ust koseler yuvarlaktir (kurucu). */
.ni-kart:has(.ni-kart__medya--alt) { padding-bottom: 0; }
.ni-kart__medya--alt { margin-top: auto; aspect-ratio: 16 / 7;
  border-radius: var(--eco-radius-md) var(--eco-radius-md) 0 0; }
@media (min-width: 900px) {
  /* ADLANDIRILMIS SATIR YOK. Sablon her oge icin bir satir ayiriyordu ve o
     oge kartta yoksa satir bos kalip gap'ini koruyordu: once "bas" satiri
     basligin uzerinde 38px bosluk birakti, sonra kart 4'te bos "linkler"
     satiri 60px'lik bosu ALTTA tutup sol sutunu yukari yasladi.
     Simdi metin ogeleri sol sutuna sirayla yerlesiyor, gorsel sag sutunda
     butun satirlari kapsiyor. Iki medya kartinda da sol sutunda tam UC oge
     var (baslik + metin + etiketler/linkler), o yuzden satirlar repeat(3).
     Yeni bir oge eklenirse bu sayi da guncellenmeli. */
  /* TEK SATIR, IKI SUTUN. Onceki uc kurulum ayni sinif hatadan dolayi
     basarisiz oldu: metin ogeleri ayri satirlardaydi ve figur o satirlari
     KAPSIYORDU. Figurun en-boy oranindan gelen kesin yukseklik (512px sutunda
     3:2 -> 341px) kapsanan satirlara dagiliyor, satirlar iceriginden ~26px
     uzuyor, ogeler kendi satirlarinda yuzuyordu: aralar 16 yerine 42px.
     min-height'i sifirlamak da min-content satirlar da cozmedi (satirlar
     birebir ayni kaldi). Cozum: figuru satirlardan cikarmak. */
  .ni-kart--medya {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 20rem;
  }
  .ni-kart--medya > .ni-kart__medya {
    align-self: stretch;
    border-radius: var(--eco-radius-md); overflow: hidden;
  }
}
@media (max-width: 900px) {
  .ni-kart--medya { padding: var(--eco-space-6); }
  .ni-kart--medya > .ni-kart__medya {
    aspect-ratio: 16 / 9; margin-top: var(--eco-space-4);
    border-radius: var(--eco-radius-md); overflow: hidden;
  }
}

/* ==========================================================================
   KART RENKLERI VE VEKTOR SAHNELERI
   Kurucu: "farkli renkler, gradient kart arkaplanlari, one cikan ikonlar,
   vektorel animasyonlar — statik tasarimdan cikalim."
   Renkler hero rampasindan turetildi (yesil -> turkuaz -> mavi -> menekse),
   boylece sayfa TEK renk hikayesi anlatiyor. Zeminler cok acik: koyu metin
   her kartta 13:1 ustunde kaliyor (olculdu).
   Hareketler CSS geometrisi; sahte veri, eksen ya da grafik YOK.
   NOT: `tek-gradient` yeni gradient yasakliyor — bu kart zeminleri o kuralin
   disinda, kurucu istegi. Karar acik konu olarak duruyor.
   ========================================================================== */
/* Tonlar KOYULASTIRILDI: ilk surum neredeyse beyazdi ve kartlar
   birbirinden ayrismiyordu. Metin kontrasti 16:1'deydi, yani pay vardi;
   koyulastiktan sonra olculen deger asagida. */
/* KARMA: hepsi renkli degil, hepsi beyaz degil. Renkliler YESIL ailesinde.
   ACIK kartlar artik BEYAZ DEGIL: bolum zemini de --eco-surface-base (#FFFFFF)
   oldugu icin birebir ayni renkteydiler ve kart olduklari secilmiyordu. Simdi
   paletteki acik marka yesili tinti (#F2FBE8) — beyazdan 23 kanal uzakta,
   token uydurulmadi. */
/* Kurucu: "hepsini yesil tonlarinda yap dememistim, #F7F7F7 yapabilirsin". */
.ni-kart--acik    { background: var(--eco-surface-page); }
.ni-kart--yesil   { background: linear-gradient(140deg, #CFE8BC 0%, #E9F5DF 64%); }
.ni-kart--turkuaz { background: linear-gradient(140deg, #BFE4DA 0%, #E2F4EF 64%); }
.ni-kart--limon   { background: linear-gradient(140deg, #E2EEB4 0%, #F1F7DC 64%); }
.ni-kart--acik    .ni-kart__ikon { fill: var(--eco-icon-accent); }
.ni-kart--yesil   .ni-kart__ikon { fill: #2E7D32; }
.ni-kart--turkuaz .ni-kart__ikon { fill: #1F7A6B; }
.ni-kart--limon   .ni-kart__ikon { fill: #5C7A16; }

/* IKON ONE CIKAR: kucuk etiket ikonu degil, kartin isareti. */
.ni-kart__ikon { width: var(--eco-space-12); height: var(--eco-space-12); }
.ni-kart__bas { flex-direction: column; align-items: flex-start; gap: var(--eco-space-3); }
.reveal-up.revealed .ni-kart__ikon { animation: ni-ikon-gir .7s var(--ease-out, ease) both; }
@keyframes ni-ikon-gir {
  from { opacity: 0; transform: translateY(10px) scale(.7); }
  to   { opacity: 1; transform: none; }
}
/* BASLIKLAR BUYUR */
.ni-kart__baslik { font-size: var(--eco-fontsize-display-md); line-height: var(--eco-lineheight-display-md); letter-spacing: var(--eco-letterspacing-display-md); }
.ni-kart--genis .ni-kart__baslik { font-size: var(--eco-fontsize-display-lg); line-height: var(--eco-lineheight-display-lg); letter-spacing: var(--eco-letterspacing-display-lg); }

/* --- VEKTOR SAHNELERI: her kartin konusuna ait soyut hareket --- */
/* right/bottom SIFIR DEGIL: mutlak konumlu cocugun kapsayici blogu kartin
   PADDING kutusu, yani 0 demek sahneyi kartin kendi ic bosluguna tasirmak
   demekti; izgara desenin noktalari sag/alt kenarda ortadan kesiliyordu.
   Kartin padding'i kadar iceri alindi. */
.ni-vek { position: absolute; right: var(--eco-space-10); bottom: var(--eco-space-10);
  width: 15rem; height: 15rem; pointer-events: none; opacity: .9; }
.ni-vek i { position: absolute; display: block; }
/* GIRIS KARTI kisa ve genis (1120x201): 15rem'lik sahne kartin ic yuksekligini
   (201 - 80 padding = 121px) asiyor, ust kenari kartin -79px'ine dusuyor ve
   overflow:hidden onu TAMAMEN kirpiyordu — sahne hic gorunmuyordu. Karta sigan
   olcu veriliyor; boylece sagdaki bos alani da dolduruyor. */
.ni-kart--giris .ni-vek { width: 7rem; height: 7rem; }
/* Fotografli kartlarda sahneyi GIZLEMEK yanlisti: en buyuk iki kart
   tamamen statik kaliyordu. Sahne artik gorselin uzerinde, tarama olarak. */
/* Sahneyi kartin sagina/altina koymak yanlisti: kartin kendi padding'i
   yuzunden bant gorselin disina, yesil zemine tasiyordu (mobilde gorselin
   altinda gri bir serit olarak goruluyordu). Figur zaten position:relative
   ve overflow:hidden -> tarama onun ::before'u olunca tam gorsele oturuyor. */
/* Fotografi olan HICBIR kartta soyut sahne cizilmez; tarama hareketini zaten
   figurun kendi ::before'undan aliyor. Once yalnizca --medya kartlarini
   kapatmistim, ama kart 3'un figuru --medya sinifini tasimiyor: sahnenin bandi
   analiz fotografinin sag ust kosesine soluk bir dikdortgen olarak biniyordu. */
.ni-kart:has(.ni-kart__medya) .ni-vek { display: none; }
.ni-kart__medya::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 100%);
  animation: ni-medya-tara 5.5s cubic-bezier(.45,.05,.35,1) infinite;
}
/* CIZIM FOTOGRAF DEGILDIR. Izometrik diorama beyaz zeminde izole bir nesne;
   fotograf muamelesi (cover + panel zemini + yuvarlak kose) kartin icinde ayri
   bir BEYAZ PANEL uretiyordu. Blok BURAYA konuldu cunku ust taraftaki
   `.ni-kart--medya > .ni-kart__medya` (0,2,0) ve `.ni-kart__medya::before`
   kurallarini yenmesi gerekiyor; !important yerine ozgulluk ve sira kullanildi.

   BLEND FIGURDE, GORSELDE DEGIL — olculdu: gorsele verilince beyaz ERIMIYOR,
   cunku figur konumlu ve z-index'li oldugu icin KENDI yigin baglamini yaratir
   ve karisim kartla degil figurun seffaf kutusuyla yapilir (marj 255 vs kart
   247, fark 8). Figuru `position: static` yapmak beyazi eritiyor ama bu sefer
   figur z-index 2 katmanindan dusuyor ve GRAIN cizimin uzerine biniyor
   (diorama sapmasi 19.95 -> 55.96). Figur konumlu kalip blend'i kendisi
   tasiyinca ikisi de cozuluyor: fark 0, sapma 20.10. */
.ni-kart--medya > .ni-kart__medya--cizim {
  background: none;
  border-radius: 0;
  overflow: visible;
  min-height: 0;
  aspect-ratio: 3 / 2;
  align-self: center;
  /* multiply KALKTI: dosya artik gercekten saydam. multiply, yesil gradientli
     son kartta cizimin acik tonlarini yesile bulardi. */
}
.ni-kart__medya--cizim img { object-fit: contain; }
/* Cizimde ne grain ne tarama bandi: ikisi de fotograf icin. */
.ni-kart__medya--cizim::after,
.ni-kart__medya--cizim::before { content: none; }

@keyframes ni-medya-tara {
  0%   { transform: translateY(-120%); }
  62%  { transform: translateY(400%); }
  100% { transform: translateY(400%); }
}


/* 1 · saha: es merkezli olcum halkalari. Yon ICE: disa acilan dalga
   "yayilma" anlatir, kartin mesaji ise "daha yakindan bakmak" — odaklanma. */
.ni-vek--halka i {
  left: 50%; top: 55%; width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem;
  border: var(--eco-borderwidth-thick) solid #2E7D32; border-radius: var(--eco-radius-full);
  opacity: 0; animation: ni-halka 4.2s ease-out infinite;
}
.ni-vek--halka i:nth-child(2) { animation-delay: 1.4s; }
.ni-vek--halka i:nth-child(3) { animation-delay: 2.8s; }
@keyframes ni-halka { 0% { opacity: 0; transform: scale(2); } 22% { opacity: .7; } 100% { opacity: 0; transform: scale(.3); } }

/* 2 · havadan: noktali izgara uzerinde suzulen hat */
/* Izgaranin kutusu background-image ile TAMAMEN dolu; seyrek sahnelerin
   aksine kutusu neredeyse mürekkebinin kendisi. 15rem iken ust kenari govde
   metninin son satirina denk geliyor, tarama cizgisi paragrafin yanindan
   gecen basibos bir cetvel gibi duruyordu. Alcaltildi. */
.ni-vek--izgara { height: 10rem; }
/* IZOHIPS (kurucu: "monitoring sonucta, tepeden saha gorunusu, izohipsler
   falan olabilir, o alanlar taraniyormus gibi"). Referans uydurma degil:
   ecording'in kendi havadan karesinde (0285a20c8...) yanmis yamactaki teras
   hatlari tam olarak bu. Halkalar TEK temel bicimin olcekli kopyalari, bu
   yuzden birbirlerini KESEMEZLER — ilk denememde her halkaya ayri rastgelelik
   eklemistim ve hatlar dugumleniyordu. Bicim duzensiz ve uzamis: donel
   simetrik bir rozet degil, tepeden gorulen bir tepe. */
.ni-vek--izgara {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%20160%22%20width%3D%22240%22%20height%3D%22160%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%231F7A6B%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M137.4%2C69.0%20Q142.6%2C69.9%20140.0%2C74.4%20Q137.4%2C78.9%20136.5%2C82.9%20Q135.5%2C86.9%20131.3%2C91.3%20Q127.0%2C95.7%20121.5%2C94.2%20Q116.0%2C92.6%20111.0%2C93.1%20Q106.1%2C93.7%20101.9%2C91.8%20Q97.6%2C90.0%20101.1%2C85.5%20Q104.6%2C81.0%20103.4%2C76.5%20Q102.2%2C72.0%20108.4%2C70.0%20Q114.6%2C67.9%20120.0%2C65.7%20Q125.3%2C63.4%20128.7%2C65.8%20Q132.1%2C68.2%20137.4%2C69.0Z%22%20opacity%3D%220.82%22%2F%3E%3Cpath%20d%3D%22M146.0%2C63.5%20Q154.0%2C64.8%20150.1%2C71.6%20Q146.2%2C78.3%20144.7%2C84.4%20Q143.2%2C90.4%20136.9%2C97.0%20Q130.5%2C103.6%20122.2%2C101.2%20Q113.9%2C98.9%20106.5%2C99.7%20Q99.2%2C100.5%2092.8%2C97.7%20Q86.5%2C95.0%2091.6%2C88.2%20Q96.8%2C81.5%2095.1%2C74.8%20Q93.3%2C68.0%20102.6%2C65.0%20Q111.9%2C61.9%20120.0%2C58.5%20Q128.0%2C55.1%20133.0%2C58.7%20Q138.1%2C62.2%20146.0%2C63.5Z%22%20opacity%3D%220.76%22%2F%3E%3Cpath%20d%3D%22M154.7%2C58.0%20Q165.3%2C59.8%20160.1%2C68.8%20Q154.9%2C77.8%20152.9%2C85.8%20Q151.0%2C93.9%20142.5%2C102.6%20Q134.0%2C111.4%20123.0%2C108.3%20Q111.9%2C105.2%20102.1%2C106.3%20Q92.2%2C107.3%2083.7%2C103.6%20Q75.3%2C100.0%2082.2%2C91.0%20Q89.1%2C82.0%2086.7%2C73.0%20Q84.4%2C64.0%2096.8%2C60.0%20Q109.2%2C55.9%20119.9%2C51.3%20Q130.6%2C46.8%20137.4%2C51.6%20Q144.1%2C56.3%20154.7%2C58.0Z%22%20opacity%3D%220.70%22%2F%3E%3Cpath%20d%3D%22M163.4%2C52.6%20Q176.6%2C54.7%20170.1%2C66.0%20Q163.6%2C77.2%20161.2%2C87.3%20Q158.7%2C97.3%20148.1%2C108.3%20Q137.5%2C119.3%20123.7%2C115.4%20Q109.9%2C111.5%2097.6%2C112.8%20Q85.3%2C114.1%2074.7%2C109.5%20Q64.1%2C105.0%2072.7%2C93.7%20Q81.4%2C82.5%2078.4%2C71.3%20Q75.4%2C60.1%2091.0%2C55.0%20Q106.5%2C49.9%20119.9%2C44.2%20Q133.3%2C38.5%20141.7%2C44.4%20Q150.1%2C50.4%20163.4%2C52.6Z%22%20opacity%3D%220.63%22%2F%3E%3Cpath%20d%3D%22M172.1%2C47.1%20Q187.9%2C49.7%20180.1%2C63.2%20Q172.3%2C76.7%20169.4%2C88.7%20Q166.5%2C100.8%20153.8%2C114.0%20Q141.0%2C127.1%20124.5%2C122.5%20Q107.9%2C117.9%2093.1%2C119.4%20Q78.3%2C121.0%2065.6%2C115.5%20Q52.9%2C110.0%2063.3%2C96.5%20Q73.7%2C82.9%2070.1%2C69.5%20Q66.5%2C56.1%2085.2%2C50.0%20Q103.9%2C43.8%20119.9%2C37.0%20Q136.0%2C30.2%20146.1%2C37.3%20Q156.2%2C44.5%20172.1%2C47.1Z%22%20opacity%3D%220.57%22%2F%3E%3Cpath%20d%3D%22M180.7%2C41.6%20Q199.3%2C44.6%20190.1%2C60.4%20Q181.0%2C76.1%20177.6%2C90.2%20Q174.2%2C104.3%20159.4%2C119.6%20Q144.5%2C135.0%20125.2%2C129.6%20Q105.9%2C124.2%2088.6%2C126.0%20Q71.4%2C127.8%2056.5%2C121.4%20Q41.7%2C115.0%2053.8%2C99.2%20Q66.0%2C83.4%2061.8%2C67.8%20Q57.6%2C52.1%2079.4%2C45.0%20Q101.2%2C37.8%20119.9%2C29.9%20Q138.6%2C21.9%20150.4%2C30.2%20Q162.2%2C38.5%20180.7%2C41.6Z%22%20opacity%3D%220.51%22%2F%3E%3Cpath%20d%3D%22M189.4%2C36.1%20Q210.6%2C39.6%20200.2%2C57.6%20Q189.8%2C75.6%20185.9%2C91.6%20Q181.9%2C107.7%20165.0%2C125.3%20Q148.1%2C142.8%20125.9%2C136.6%20Q103.8%2C130.5%2084.1%2C132.5%20Q64.4%2C134.6%2047.5%2C127.3%20Q30.6%2C119.9%2044.4%2C101.9%20Q58.2%2C83.9%2053.5%2C66.0%20Q48.7%2C48.1%2073.6%2C39.9%20Q98.5%2C31.8%20119.9%2C22.7%20Q141.3%2C13.6%20154.7%2C23.1%20Q168.2%2C32.6%20189.4%2C36.1Z%22%20opacity%3D%220.45%22%2F%3E%3Cpath%20d%3D%22M198.1%2C30.6%20Q221.9%2C34.5%20210.2%2C54.8%20Q198.5%2C75.0%20194.1%2C93.1%20Q189.7%2C111.2%20170.6%2C130.9%20Q151.6%2C150.7%20126.7%2C143.7%20Q101.8%2C136.8%2079.6%2C139.1%20Q57.5%2C141.4%2038.4%2C133.2%20Q19.4%2C124.9%2034.9%2C104.7%20Q50.5%2C84.4%2045.2%2C64.3%20Q39.8%2C44.1%2067.8%2C34.9%20Q95.8%2C25.8%20119.9%2C15.5%20Q143.9%2C5.3%20159.1%2C16.0%20Q174.3%2C26.7%20198.1%2C30.6Z%22%20opacity%3D%220.38%22%2F%3E%3Cpath%20d%3D%22M206.8%2C25.1%20Q233.2%2C29.4%20220.2%2C51.9%20Q207.2%2C74.5%20202.3%2C94.6%20Q197.4%2C114.7%20176.3%2C136.6%20Q155.1%2C158.5%20127.4%2C150.8%20Q99.8%2C143.1%2075.2%2C145.7%20Q50.5%2C148.3%2029.4%2C139.1%20Q8.2%2C129.9%2025.5%2C107.4%20Q42.8%2C84.9%2036.8%2C62.5%20Q30.9%2C40.1%2062.0%2C29.9%20Q93.1%2C19.7%20119.8%2C8.4%20Q146.6%2C-3.0%20163.4%2C8.9%20Q180.3%2C20.8%20206.8%2C25.1Z%22%20opacity%3D%220.32%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: contain; background-position: center; background-repeat: no-repeat; opacity: .9;
  overflow: hidden;
}
/* Tarama bandi hatlarin UZERINDEN gecer ve iki ucta soluyarak biter; kutu
   kenarinda keskin dikey sinir birakinca gri bir cubuk gibi okunuyordu. */
.ni-vek--izgara i {
  left: 0; right: 0; top: 0; height: 30%;
  background: linear-gradient(180deg, rgba(31,122,107,0) 0%, rgba(31,122,107,.40) 50%, rgba(31,122,107,0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  animation: ni-suzul-hat 5.2s cubic-bezier(.45,.05,.35,1) infinite;
}
@keyframes ni-suzul-hat { 0% { top: 0; opacity: 0; } 15% { opacity: .9; } 85% { opacity: .9; } 100% { top: 100%; opacity: 0; } }

/* 4 · ogrenme: BIRIKIM CUBUKLARI. Oncesi ±16° salinan uc yarim daireydi ve
   kurucu hakli olarak "ne anlatiyor belli degil" dedi. Kartin cumlesi "her
   saha bize daha fazlasini ogretiyor" — yani BIRIKIM. Her cubuk bir saha;
   sirayla yukselip yerinde kaliyorlar. */
.ni-vek--birikim { display: flex; align-items: flex-end; gap: .55rem; }
.ni-vek--birikim i {
  position: relative; flex: 1 1 0; min-width: 0;
  background: #5C7A16; border-radius: var(--eco-radius-sm) var(--eco-radius-sm) 0 0;
  transform-origin: 50% 100%;
  animation: ni-birikim 5.4s cubic-bezier(.3,.7,.3,1) infinite;
}
.ni-vek--birikim i:nth-child(1) { height: 34%; animation-delay: 0s;   opacity: .34; }
.ni-vek--birikim i:nth-child(2) { height: 52%; animation-delay: .32s; opacity: .44; }
.ni-vek--birikim i:nth-child(3) { height: 68%; animation-delay: .64s; opacity: .56; }
.ni-vek--birikim i:nth-child(4) { height: 84%; animation-delay: .96s; opacity: .68; }
.ni-vek--birikim i:nth-child(5) { height: 100%; animation-delay: 1.28s; opacity: .8; }
@keyframes ni-birikim {
  0%      { transform: scaleY(0); }
  26%, 82%{ transform: scaleY(1); }
  100%    { transform: scaleY(0); }
}

/* 5 · proje: birbirine baglanan dugumler */
.ni-vek--dugum i {
  width: 1.1rem; height: 1.1rem; border-radius: var(--eco-radius-full);
  background: #5C7A16; opacity: .75;
  animation: ni-dugum 4.4s ease-in-out infinite;
}
.ni-vek--dugum i:nth-child(1) { left: 26%; top: 34%; }
.ni-vek--dugum i:nth-child(2) { left: 56%; top: 52%; animation-delay: .5s; }
.ni-vek--dugum i:nth-child(3) { left: 38%; top: 72%; animation-delay: 1s; }
/* "Birbirine baglanan dugumler" deniyordu ama BAGLAYAN CIZGI YOKTU; uc nokta
   oylece buyuyup kuculuyordu. Dugumleri gercekten birlestiren hat eklendi. */
.ni-vek--dugum::before {
  content: ''; position: absolute; left: 30%; top: 38%; width: 34%; height: 38%;
  border-left: var(--eco-borderwidth-hairline) solid #5C7A16;
  border-bottom: var(--eco-borderwidth-hairline) solid #5C7A16;
  opacity: .42; transform: skewX(-18deg);
}
@keyframes ni-dugum { 0%,100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.5); opacity: .9; } }

@media (max-width: 900px) {
  /* Dar ekranda kart icerik-yogun: sahnenin siginacagi bosluk yok, bu yuzden
     kacinilmaz olarak paragrafin altina dusup gurultu gibi okunuyordu. Sahneyi
     SILMEK yerine kartin altinda kendi seridini aciyoruz. */
  /* Sart "--medya degil" DEGIL, "sahnesi var": yeni yapida kart 2 ve 5 de
     --medya tasimiyor ama fotograflari oldugu icin sahneleri kapali; eski
     sartla bos yere 7rem alt bosluk aliyorlardi. */
  .ni-kart:not(:has(.ni-kart__medya)) { padding-bottom: calc(var(--eco-space-6) + 7rem); }
  .ni-vek { width: 6rem; height: 6rem; right: var(--eco-space-6); bottom: var(--eco-space-6); }
  /* Kutu KARE idi (96x96) ama cizim 3:2; olculen yassilma 0.67, yani
     esyukseltiler yatayda ezilyordu. Kutu cizimin oranina getirildi. */
  .ni-vek--izgara { width: 9rem; height: 6rem; }
  .ni-kart__baslik,
  .ni-kart--genis .ni-kart__baslik { font-size: var(--eco-fontsizemobile-display-md); }
}
@media (prefers-reduced-motion: reduce) {
  .ni-vek i { animation: none !important; }
  .ni-kart__medya::before { animation: none; opacity: .25; }
  .ni-vek--halka i { opacity: .45; transform: none; }
  .ni-vek--birikim i { transform: none; }
  .reveal-up.revealed .ni-kart__ikon { animation: none; }
}


/* Scroll kademesi CSS'te YOK: main.js zaten dataset.delay ile uyguluyor
   (js/main.js:175). Ikisini birden vermek gecikmeleri ust uste bindiriyordu. */

/* HOVER: EDS `golge-yok-tek-cizgi` — gölge yok, hover CIZGIYI degil DOLGUYU
   degistirir. Kartlarin kendi zeminleri (gradient/tint) farkli oldugu icin
   yikama ayri bir katmandan geliyor; ::after grain'de, bu yuzden ::before.
   Katman duzeni: yikama(0) < sahne(1) < icerik(2). */
.ni-kart::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; background: var(--eco-surface-wash);
  opacity: 0; transition: opacity .3s var(--ease-out, ease);
}
.ni-kart:hover::before, .ni-kart:focus-within::before { opacity: 1; }
.ni-kart { transition: transform .3s var(--ease-out, ease); }
.ni-kart:hover, .ni-kart:focus-within { transform: translateY(-3px); }
/* Fotograftaki tarama hover'da hizlanir; cizim ve sahneler oldugu gibi kalir. */
.ni-kart:hover .ni-kart__medya::before { animation-duration: 3.2s; }
/* Azaltilmis harekette KALDIRMA yok, yikama kalir (renk degisimi hareket degil).
   Bu blok hover kurallarinin HEMEN ARDINDA: medya sorgusu ozgulluk eklemez,
   asagida olmasaydi ayni ozgullukteki hover kurali onu ezerdi — nitekim
   ilk yazdigimda dosyanin ustunde kalmis ve kart yine kalkiyordu. */
@media (prefers-reduced-motion: reduce) {
  .ni-kart, .ni-kart:hover, .ni-kart:focus-within { transform: none; transition: none; }
  .ni-kart:hover .ni-kart__medya::before { animation-duration: initial; }
}


/* Renkli kartlarin zemini daha koyu, beyaza dogru yerleri fazla: ayni recete
   orada acik karttan cok daha guclu doku uretiyor. Olculerek esitlendi. */

.ni-kart__medya { position: relative; }
/* Icerik grainin USTUNDE kalsin */
/* .ni-vek BU KURALIN DISINDA. Onceden buradaki position:relative, dosyanin
   basindaki .ni-vek{position:absolute} kuralini (ayni ozgulluk, daha sonra
   geldigi icin) eziyordu: bes sahnenin hepsi overlay olmak yerine AKISA
   giriyor, kartlari sisirip altlarinda bosluk birakiyordu. z-index yeter. */
/* UC KATMAN: grain(0) < sahne(1) < icerik(2). Grain ::after DOM'da en son
   uretildigi icin sahneyle AYNI z-index'te (0) oldugunda onun ustune
   boyaniyordu: beyaz nokta deseni vektor noktalarinin icinden gecip onlari
   taranmis gibi gosteriyordu. */
.ni-kart > *:not(.ni-vek) { position: relative; z-index: 2; }
.ni-kart__bas, .ni-kart__baslik, .ni-kart__metin, .ni-kart__linkler { position: relative; z-index: 2; }
/* z-index 0: sahne DEKOR, metnin ARKASINDA kalir. 1 iken metinle ayni
   katmandaydi ve DOM'da sonra geldigi icin govde metninin USTUNE boyaniyordu
   (mobilde paragrafin 16380px2'si sahnenin altinda kaliyordu). */
.ni-vek { z-index: 1; }

/* On phones the hero image stays in the reading flow instead of pinning. */
@media (max-width: 900px) {
  .ni-sahne { height: auto; margin: var(--eco-space-8) var(--container-px) 0; }
  .ni-sahne__kilit { position: static; height: auto; }
  .ni-sahne__kare {
    position: relative; inset: auto; aspect-ratio: 4 / 3;
    border-radius: var(--eco-radius-lg); will-change: auto;
  }
}