/* ============================================================
   8a — Wet-on-wet watercolor washes (body + section atmospheres)
   ============================================================ */

/* Body: sayfa zemini, sabit kalan yumuşak watercolor washes.
   Dört katman (mavi · altın · terracotta · ikinci mavi) farklı köşelerden
   girip merkezde birbirine karışıyor. */
body{
  background:
    radial-gradient(ellipse 55% 40% at 8% 6%,   rgba(74,107,124,.22), transparent 60%),
    radial-gradient(ellipse 50% 40% at 96% 14%, rgba(181,135,77,.26), transparent 60%),
    radial-gradient(ellipse 60% 45% at 78% 92%, rgba(184,86,56,.22),  transparent 62%),
    radial-gradient(ellipse 50% 40% at 4% 78%,  rgba(74,107,124,.18), transparent 60%),
    var(--color-bg);
  background-attachment: fixed;
  background-size: 100% 100%;
}

/* Cağdaş kağıt dokusu (subtle grain) — body üstünde non-blocking layer */
body::before{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(rgba(110,94,72,.05) 1px, transparent 1px),
    radial-gradient(rgba(110,94,72,.04) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  opacity: .55;
}
/* Make sure header/main/footer sit above the grain layer.
   .site-header keeps its base `position: sticky` so it stays pinned;
   sticky already creates a stacking context, so z-index alone is enough. */
.site-header{ z-index: 50; }
main, .site-footer{ position: relative; z-index: 1; }

/* Hero (scene-hero) — daha yoğun renkli wash, sahne arkasında nefes alır.
   overflow: hidden YOK — wash katmanlarının hero'dan aşağı taşıp bir sonraki
   section'a yumuşakça karışmasına izin veriyoruz. */
.scene-hero{
  position: relative;
  isolation: isolate;            /* containing block for z-index, overflow değil */
  padding-bottom: clamp(80px, 12vw, 160px);  /* taşma için iç boşluk artır */
}
.scene-hero::before{
  content:"";
  position: absolute;
  inset: -6% -6% -10% -6%;
  z-index: 0;
  background:
    radial-gradient(ellipse 45% 55% at 18% 28%, rgba(74,107,124,.32),  transparent 65%),
    radial-gradient(ellipse 50% 60% at 82% 22%, rgba(181,135,77,.34),  transparent 65%),
    radial-gradient(ellipse 55% 60% at 62% 88%, rgba(184,86,56,.30),   transparent 65%),
    radial-gradient(ellipse 45% 50% at 8% 88%,  rgba(74,107,124,.22),  transparent 60%);
  filter: blur(38px) saturate(110%);
  pointer-events: none;
}
/* Bottom "watercolor tail" — hero'dan ~280px AŞAĞI TAŞAR ki sonraki section'a
   sert kesim olmadan boya akar. overflow:visible olduğu için görünür. */
.scene-hero::after{
  content:"";
  position: absolute;
  left: -8%; right: -8%;
  bottom: -240px;
  height: 480px;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 0%,   rgba(74,107,124,.22),  transparent 70%),
    radial-gradient(ellipse 65% 55% at 75% 0%,   rgba(181,135,77,.24),  transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 30%,  rgba(184,86,56,.18),   transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 70%,  rgba(252,247,233,0)   0%, rgba(252,247,233,.65) 80%);
  filter: blur(34px);
  pointer-events: none;
  /* alt kenara doğru ekstra yumuşak fade — boya kuyruğu kâğıda emilir */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.scene-hero > *{ position: relative; z-index: 1; }

/* İlk section — hero'nun alt taşan washes'inden devralır,
   üst kenarda yarısaydam wash + biraz negatif margin ile geçişi yumuşatır. */
.scene-hero + .section{
  margin-top: clamp(-120px, -10vw, -60px);
  padding-top: clamp(120px, 14vw, 200px);
  position: relative;
}
.scene-hero + .section::before{
  /* Üst kenarda hero'nun rengini hatırlatan yumuşak girişi destekle */
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%,  rgba(181,135,77,.14), transparent 70%),
    radial-gradient(ellipse 60% 50% at 12% 10%, rgba(74,107,124,.12), transparent 70%) !important;
  opacity: .9 !important;
}

/* Section'lar — sırayla mavi → altın → terracotta yumuşak vurgular.
   Wet-on-wet'in yıl içindeki Goethe çark sırasını çağrıştırıyor. */
main > .section{ position: relative; }
main > .section::before{
  content:"";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
}
main > .section:nth-of-type(odd)::before{
  background: radial-gradient(ellipse 60% 50% at 12% 10%,  rgba(74,107,124,.14), transparent 65%);
}
main > .section:nth-of-type(even)::before{
  background: radial-gradient(ellipse 55% 50% at 88% 90%,  rgba(181,135,77,.16), transparent 65%);
}
main > .section:nth-of-type(3n)::before{
  background: radial-gradient(ellipse 60% 55% at 50% 50%,  rgba(184,86,56,.10),  transparent 70%);
}
main > .section > *{ position: relative; z-index: 1; }

/* Section-bg-alt — açık-pigment "wash kağıt" görünümü */
.section.section-bg-alt{
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255,255,255,.55), transparent 70%),
    var(--color-bg-alt);
}

/* Glass-morphism: kartlar saydam ama okunaklı kalır,
   wash'lerin üzerinde "ıslak kağıt" hissi */
.card,
.atolye-card,
.brand-card,
.session{
  background: rgba(252,247,233,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(216,201,168,.7);
}
.card:hover,
.atolye-card:hover,
.brand-card:hover{
  background: rgba(252,247,233,.95);
}

/* Footer — yumuşak watercolor "sayfa kapanışı" */
.site-footer{
  position: relative;
  background:
    linear-gradient(180deg, transparent 0%, rgba(74,107,124,.08) 60%, rgba(184,86,56,.10) 100%);
}

/* Reduced motion: blur + grain'i sabit tut, agresif animasyonu kapat */
@media (prefers-reduced-motion: reduce){
  body{ background-attachment: scroll; }
  body::before{ opacity: .35; }
  .scene-hero::before{ filter: blur(18px); }
}

/* Mobile: blur miktarını azalt, performans için */
@media (max-width: 720px){
  .scene-hero::before{ filter: blur(22px); }
  .card, .atolye-card, .brand-card, .session{
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

/* ============================================================
   8a — Footer iletişim formu: sade çizgi (taktakfikirsanat ref)
   Kalın kutu yok; sadece alt çizgi, üstte etiket.
   ============================================================ */
.site-footer .footer-form-col h4{
  font-size: 28px;
  letter-spacing: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-ink);
  margin: 0 0 22px;
  text-transform: none;
}

.footer-form{ gap: 22px; }
.footer-form .row-2{ gap: 28px; }

.footer-form-field{
  display: block;
  position: relative;
}
.footer-form-field > span{
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: 6px;
  letter-spacing: 0;
}
.footer-form-field > span em{
  font-style: normal;
  color: var(--color-ink);
  margin-left: 1px;
}

.footer-form input,
.footer-form textarea{
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-ink);
  border-radius: 0;
  padding: 8px 0;
  font-size: 16px;
  color: var(--color-ink);
  box-shadow: none;
}
.footer-form input:focus,
.footer-form textarea:focus{
  outline: none;
  border-color: var(--color-ink);
  border-bottom-width: 2px;
  box-shadow: none;
  padding-bottom: 7px;
}
.footer-form textarea{
  min-height: 120px;
  resize: vertical;
}

.footer-form button.btn-primary{
  margin-top: 8px;
  border-radius: 0;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  background: var(--color-ink);
  color: var(--color-button-fg);
  border: 0;
  box-shadow: none;
}
.footer-form button.btn-primary:hover{
  background: var(--color-ink);
  opacity: .9;
}