/* ==========================================================================
   VV TABLO — DOĞA & YAŞAM  (2026-08-17)
   --------------------------------------------------------------------------
   Serideki üçüncü özel sayfa. Diğer ikisiyle KASITLI OLARAK aynı dili
   kullanmıyor; üçü yan yana konduğunda tek bir markanın üç farklı odası
   gibi durmalı, üç kopya gibi değil:

     Eğlenceli      koyu mürekkep + neon + bantlı çıkartma   → şen, gürültülü
     Kids by Hi Mom gün ışığı + pastel gökyüzü + kemer       → sıcak, masalsı
     Doğa & Yaşam   gece siyahı + altın saat + geniş boşluk  → dingin, sinematik

   TASARIMIN DAYANDIĞI VERİ
   Koleksiyondaki 59 eserin 58'i HEM DİKEY HEM YATAY üretilmiş. Bu, bu
   koleksiyonun diğerlerinde olmayan somut vaadi — ama sayfada ızgaranın
   üstündeki küçük bir süzgeç çipinde saklı kalıyordu. Hero artık bunu
   doğrudan gösteriyor: aynı eser, iki yön, tek dokunuşla değişiyor.
   Müşteri "duvarım dikey/yatay, bu bana olur mu?" sorusunu sayfanın ilk
   ekranında yanıtlıyor.

   Görseller koyu ve sinematik olduğu için sahne de koyu; açık zeminde
   eserin kendi siyahı "kesik" görünüyordu.
   ========================================================================== */

.doga{
  --d-gece:#0B0D0C;
  --d-koyu:#121614;
  --d-altin:#C9A227;
  --d-amber:#E8B860;
  --d-sis:#9FB3AC;
  --d-tebesir:#F4F1EA;
}

/* ---------- HERO ---------- */
.doga-hero{
  position:relative;
  padding:74px 0 0;
  background:var(--d-gece);
  overflow:hidden;
  isolation:isolate;
}
/* Üstten süzülen ışık huzmesi — eserlerdeki altın saat ışığının
   sayfaya taşması. Görsel değil, tek bir konik geçiş. */
.doga-hero::before{
  content:"";
  position:absolute; inset:-30% -20% auto -20%; height:150%;
  z-index:0;
  background:
    radial-gradient(58% 50% at 62% 0%, rgba(232,184,96,.22), transparent 62%),
    radial-gradient(46% 44% at 18% 12%, rgba(201,162,39,.12), transparent 66%),
    radial-gradient(60% 40% at 50% 100%, rgba(11,13,12,.9), transparent 60%);
  animation:doga-isik 30s ease-in-out infinite alternate;
}
@keyframes doga-isik{
  from{ transform:translate3d(-1.5%,0,0) scale(1); opacity:.9; }
  to  { transform:translate3d(1.5%,1%,0) scale(1.06); opacity:1; }
}

.doga-hero-shell{
  position:relative; z-index:1;
  max-width:1440px; margin:0 auto;
  padding:48px 24px 54px;
  display:grid; gap:34px;
}
@media(min-width:1024px){
  .doga-hero-shell{
    grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
    align-items:center;
    padding:60px 40px 66px;
    gap:44px;
  }
}

.doga-kicker{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--d-amber);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
}
.doga-kicker::before{
  content:""; width:26px; height:1px; background:var(--d-altin);
}
.doga-baslik{
  margin:18px 0 0;
  color:var(--d-tebesir);
  font-size:clamp(2.5rem, 7.6vw, 4.6rem);
  line-height:1.04;
  letter-spacing:-.01em;
}
.doga-giris{
  margin:20px 0 0;
  max-width:42ch;
  color:rgba(244,241,234,.72);
  font-size:15px; line-height:1.8;
}
@media(min-width:768px){ .doga-giris{ font-size:16px; } }

/* --- yön anahtarı --- */
.doga-yon{
  margin:28px 0 0;
  padding:16px 18px;
  border:1px solid rgba(244,241,234,.14);
  border-radius:16px;
  background:rgba(244,241,234,.04);
  max-width:400px;
  backdrop-filter:blur(4px);
}
.doga-yon-baslik{
  color:var(--d-tebesir);
  font-size:13.5px; line-height:1.5;
}
.doga-yon-baslik b{ color:var(--d-amber); font-weight:500; }
.doga-yon-dugmeler{ display:flex; gap:8px; margin-top:12px; }
.doga-yon-dugme{
  flex:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px;
  border:1px solid rgba(244,241,234,.2);
  border-radius:10px;
  background:transparent;
  color:rgba(244,241,234,.8);
  font-size:13px;
  cursor:pointer;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.doga-yon-dugme i{
  display:block; border:1.5px solid currentColor; border-radius:2px;
  transition:width .25s var(--ease), height .25s var(--ease);
}
.doga-yon-dugme[data-yon="yatay"] i{ width:17px; height:12px; }
.doga-yon-dugme[data-yon="dikey"] i{ width:12px; height:17px; }
.doga-yon-dugme:hover{ border-color:rgba(232,184,96,.6); color:var(--d-tebesir); }
.doga-yon-dugme[aria-pressed="true"]{
  background:var(--d-amber); border-color:var(--d-amber); color:#1A1405;
}

/* --- sahne --- */
.doga-sahne{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:300px;
}
@media(min-width:768px){ .doga-sahne{ min-height:420px; } }
.doga-cerceve{
  position:relative;
  padding:10px;
  border-radius:6px;
  background:linear-gradient(160deg, rgba(244,241,234,.16), rgba(244,241,234,.05));
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  transition:max-width .55s var(--ease);
  max-width:min(100%, 760px);
}
/* Dikeydeyken çerçeve daralır — geçiş "aynı eser, başka yön" hissi verir. */
.doga[data-yon="dikey"] .doga-cerceve{ max-width:min(100%, 380px); }
.doga-cerceve img{
  display:block; width:100%; height:auto;
  border-radius:3px;
}
/* İki görsel üst üste duruyor; seçili olan görünür. Geçiş yeniden
   indirme yapmadan opaklıkla oluyor.

   HANGİSİ AKIŞTA: her zaman ETKİN olan. Çerçevenin yüksekliğini akıştaki
   görsel belirler; ikisi birden mutlak konumlansaydı çerçeve çökerdi.
   (İlk sürümde dikey kipte çerçeve 380×260 oluyordu: dikey görsel mutlak
   olduğu için yükseklik hep YATAY görselden geliyordu.) */
.doga-cerceve img{ transition:opacity .45s var(--ease); }
.doga[data-yon="yatay"] .doga-gorsel-yatay,
.doga[data-yon="dikey"] .doga-gorsel-dikey{
  position:relative; opacity:1;
}
.doga[data-yon="yatay"] .doga-gorsel-dikey,
.doga[data-yon="dikey"] .doga-gorsel-yatay{
  position:absolute; inset:10px;
  width:calc(100% - 20px); height:auto;
  opacity:0; pointer-events:none;
}

.doga-etiket{
  position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  padding:7px 15px; border-radius:999px;
  background:rgba(11,13,12,.86);
  border:1px solid rgba(244,241,234,.16);
  color:rgba(244,241,234,.86);
  font-size:11.5px; letter-spacing:.06em; white-space:nowrap;
  backdrop-filter:blur(6px);
}

/* --- eser seçici --- */
.doga-secici{
  display:flex; justify-content:center; gap:10px;
  margin:30px 0 0; padding:0; list-style:none;
}
.doga-secici button{
  width:56px; height:56px; padding:0;
  border:1px solid rgba(244,241,234,.18);
  border-radius:8px; overflow:hidden;
  background:none; cursor:pointer;
  opacity:.5;
  transition:opacity .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.doga-secici button img{ width:100%; height:100%; object-fit:cover; display:block; }
.doga-secici button:hover{ opacity:.85; transform:translateY(-2px); }
.doga-secici button[aria-pressed="true"]{ opacity:1; border-color:var(--d-amber); }

/* Hero'yu sayfaya bağlayan ince ışık çizgisi. */
.doga-cizgi{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, rgba(201,162,39,.55), transparent);
}

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

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

/* ---------- HAREKETİ AZALT ---------- */
@media (prefers-reduced-motion: reduce){
  .doga-hero::before{ animation:none; }
  .doga-cerceve, .doga-cerceve img{ transition:none; }
  .doga-secici button:hover, .doga .artwork-card:hover{ transform:none; }
}