/* ==========================================================================
   VV TABLO — MANEVİYAT  (2026-08-17)
   --------------------------------------------------------------------------
   Serinin dili: her koleksiyonun kendi karakteri var; ortak başlık,
   altbilgi, eser ızgarası ve eser modalı DEĞİŞMİYOR.

     Eğlenceli      koyu mürekkep + neon + çıkartma      → şen
     Kids by Hi Mom gün ışığı + pastel + kemer           → masalsı
     Doğa & Yaşam   gece siyahı + altın saat             → dingin
     Kültür & Miras sinema perdesi + yer künyesi         → görkemli
     İmza Serisi    gece laciverti + altın imza          → törensel
     İkonlar        grafit galeri duvarı + müze künyesi  → müzesel
     Modern Sanat   mürekkep zemin + varak altın         → atölye
     Maneviyat      GECE MAVİSİ + NUR                    → sükûnet

   TASARIMIN DAYANDIĞI VERİ
   77 eser. Alt koleksiyon adları ve tanıtımları koleksiyonun kendi
   sözcüğünü söylüyor: "Nur & Sessizlik — ışığın karanlığa dokunduğu,
   kalbin yavaşladığı anlar", "Dua & Teslimiyet". Eserlerin kendisi de
   öyle: gece mavisi üstünde tek bir altın ışık — hilal, kubbe kandili,
   mermerden süzülen huzme, avludan geçen ışık.

   Bu yüzden sayfa serinin EN SESSİZİ. Işıma çok yumuşak, hareket yok,
   vurgu tek: nur. Öğe sayısı bilerek az; burada gürültü yanlış olurdu.
   ========================================================================== */

.mn{
  --mn-gece:#0B1526;
  --mn-derin:#060D19;
  --mn-nur:#D8B26A;
  --mn-altin:#C9A227;
  --mn-tebesir:#F2EFE8;
}

/* ---------- HERO ---------- */
.mn-hero{
  position:relative;
  padding:74px 0 0;
  background:var(--mn-gece);
  overflow:hidden;
  isolation:isolate;
}
/* Tek bir ışık kaynağı — eserin arkasından, yumuşak. Animasyon YOK:
   bu koleksiyonda hareket, konunun kendisine ters düşer. */
.mn-hero::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(46% 54% at 72% 40%, rgba(216,178,106,.20), transparent 68%),
    radial-gradient(80% 70% at 50% 118%, rgba(6,13,25,.94), transparent 62%);
}

.mn-hero-shell{
  position:relative; z-index:1;
  max-width:1400px; margin:0 auto;
  padding:44px 24px 48px;
  display:grid; gap:34px;
  align-items:center;
}
@media(min-width:1024px){
  .mn-hero-shell{
    grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr);
    gap:56px;
    padding:44px 40px 50px;
  }
}

.mn-kicker{
  display:inline-flex; align-items:center; gap:13px;
  color:var(--mn-nur);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
}
.mn-kicker::before{ content:""; width:30px; height:1px; background:var(--mn-altin); }

.mn-baslik{
  margin:18px 0 0;
  color:var(--mn-tebesir);
  font-size:clamp(2.6rem,6.6vw,4.6rem);
  line-height:1.04;
  letter-spacing:-.012em;
}
.mn-giris{
  margin:20px 0 0; max-width:42ch;
  color:rgba(242,239,232,.74);
  font-size:15px; line-height:1.85;
}
@media(min-width:768px){ .mn-giris{ font-size:16px; } }

/* Tek satırlık dingin vurgu — süs değil, koleksiyonun sözü. */
.mn-soz{
  margin:26px 0 0; padding-top:18px;
  border-top:1px solid rgba(216,178,106,.28);
  color:rgba(242,239,232,.6);
  font-size:12.5px; line-height:1.7; letter-spacing:.02em;
  max-width:40ch;
}

/* --- ÜÇ KEMERLİ NİŞ ---------------------------------------------------
   Tek büyük görsel yerine üç niş. Kemer bu koleksiyonun kendi geometrisi
   (mihrap, kubbe, revak); eserlerin içindeki formu çerçeveye taşıyor.
   Ortadaki biraz yüksek — mihrap dizilimi hiç eşit değildir.
   Hareket YOK: bu koleksiyonda animasyon konuya ters düşer. */
.mn-sahne{
  display:flex; align-items:flex-end; justify-content:center;
  gap:14px;
}
@media(min-width:1024px){ .mn-sahne{ gap:18px; justify-content:flex-end; } }

.mn-nis{
  position:relative; margin:0;
  flex:0 0 auto; width:31%; max-width:210px;
  /* Üstü kemerli, altı düz — mihrap silueti. */
  border-radius:118px 118px 4px 4px;
  overflow:hidden;
  padding:5px;
  background:linear-gradient(170deg, rgba(216,178,106,.34), rgba(216,178,106,.05));
  box-shadow:0 26px 58px rgba(0,0,0,.55);
}
.mn-nis img{ width:100%; height:auto; display:block; border-radius:114px 114px 2px 2px; }
/* Ortadaki niş yüksek durur. */
.mn-nis:nth-child(2){ width:34%; max-width:232px; }
.mn-nis:nth-child(1), .mn-nis:nth-child(3){ margin-bottom:16px; }
/* TELEFON: üç niş çok daralıyor; üçüncüsü gizlenip ikisi büyütülür. */
@media(max-width:639.98px){
  .mn-nis:nth-child(3){ display:none; }
  .mn-nis{ width:47%; max-width:none; }
  .mn-nis:nth-child(2){ width:51%; max-width:none; }
  .mn-sahne{ gap:10px; }
}

/* Nişin içine düşen ışık. */
.mn-nis::after{
  content:""; position:absolute; inset:5px;
  border-radius:114px 114px 2px 2px;
  background:linear-gradient(180deg, rgba(216,178,106,.16) 0%, transparent 38%, transparent 74%, rgba(0,0,0,.3) 100%);
  pointer-events:none;
}

.mn-cizgi{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, rgba(216,178,106,.5), transparent);
}

/* ---------- BÖLÜM GİRİŞLERİ ---------- */
.mn-bolumler{ max-width:1400px; margin:0 auto; padding:32px 24px 0; }
@media(min-width:768px){ .mn-bolumler{ padding:36px 40px 0; } }
.mn-bolumler[hidden]{ display:none; }

.mn-bolum-liste{
  display:grid; gap:0;
  padding:0; margin:0; list-style:none;
  border-top:1px solid rgba(17,17,16,.12);
}
@media(min-width:760px){ .mn-bolum-liste{ grid-template-columns:1fr 1fr; } }

.mn-bolum{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:22px 4px;
  color:var(--near-black);
  border-bottom:1px solid rgba(17,17,16,.12);
  transition:padding-left .3s var(--ease), border-color .3s var(--ease);
}
@media(min-width:760px){
  .mn-bolum-liste li:nth-child(odd) .mn-bolum{ padding-right:28px; }
  .mn-bolum-liste li:nth-child(even) .mn-bolum{ padding-left:28px; border-left:1px solid rgba(17,17,16,.12); }
}
.mn-bolum:hover{ padding-left:12px; border-bottom-color:var(--mn-altin); }
@media(min-width:760px){ .mn-bolum-liste li:nth-child(even) .mn-bolum:hover{ padding-left:40px; } }

.mn-bolum-ad{ font-family:'Fraunces',serif; font-weight:300; font-size:21px; line-height:1.2; }
@media(min-width:768px){ .mn-bolum-ad{ font-size:24px; } }
.mn-bolum-sayi{
  color:var(--muted-ink);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
}

/* ---------- IZGARA ---------- */
.mn .person{ scroll-margin-top:84px; }
.mn .person-head h2::after{ background:var(--mn-altin); width:56px; height:2px; border-radius:2px; }
.mn .artwork-card{ transition:transform .3s var(--ease); }
.mn .artwork-card:hover{ transform:translateY(-4px); }

/* ---------- GÜVENCE ---------- */
.mn-guvence{
  display:grid; gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:1400px; margin:0 auto; padding:44px 24px 8px;
  list-style:none;
}
@media(min-width:768px){
  .mn-guvence{ grid-template-columns:repeat(4,minmax(0,1fr)); padding:56px 40px 8px; gap:12px; }
}
.mn-guvence li{
  padding:16px 18px;
  background:#fff; border:1px solid rgba(17,17,16,.08);
  border-top:2px solid var(--mn-altin);
}
.mn-guvence h3{ font-size:14px; font-weight:500; }
.mn-guvence p{ margin-top:4px; color:var(--muted-ink); font-size:12.5px; line-height:1.6; }

@media (prefers-reduced-motion: reduce){
  .mn-bolum:hover, .mn .artwork-card:hover{ transform:none; padding-left:4px; }
}