/* greenworld.com.tr — yapım aşamasında sayfası
   Bağımlılık yok, tek CSS dosyası.

   AMAÇ: tasarımdaki TEK PARÇA görünüm. Önceki sürümde sayfa saf beyazdı
   ve ürün fotoğrafı yuvarlak köşeli ayrı bir kutu gibi duruyordu —
   yapıştırılmış görünüyordu. Ölçüm sebebi gösterdi: tasarımın zemini saf
   beyaz DEĞİL, #F4F4F4 civarı çok açık bir gri. Zemin ona eşitlendi,
   köşe yuvarlaması kaldırıldı, fotoğrafın sol kenarı maskeyle zemine
   karıştırıldı. Böylece iki taraf tek bir sahne gibi duruyor.

   RENKLER TASARIMDAN ÖLÇÜLDÜ, tahmin edilmedi:
     koyu yeşil #1E4624 — zeminde 10,3:1 (AA fazlasıyla geçer)
     açık yeşil #4A861C — zeminde  4,3:1, bu yüzden YALNIZ büyük başlıkta
     zemin      #F4F4F2 — fotoğrafın kendi arka planı */

:root {
  --yesil-koyu: #1E4624;
  --yesil-acik: #4A861C;
  --metin: #333A34;
  --sonuk: #6B766D;
  --zemin: #F4F4F2;
  --cizgi: #DFE3DE;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--zemin);
  color: var(--metin);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ──────────────────────────── Düzen ────────────────────────────
   Geniş ekranda iki sütun. Sağ sütun sayfanın SAĞ KENARINA kadar
   taşıyor (tasarımdaki gibi), o yüzden `.sayfa` ortalanmış bir kutu
   değil tam genişlikte bir ızgara.
   `minmax(0,1fr)` bilerek: sade `1fr` sütunun içerikten dar olmasına
   izin vermez ve görsel yatay taşma yapar. */
.sayfa {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

@media (min-width: 900px) {
  .sayfa {
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    align-items: center;
  }
}

/* ─────────────── Sol üstteki yapraklar (tasarımdan) ───────────────
   Tasarımda logonun üstünde/solunda duran bulanık yaprak. Kesilirken
   temizlenmişti, geri kondu.

   PNG GERÇEKTEN SAYDAM. Önce `mix-blend-mode: multiply` denendi ama
   z-index'li kapsayıcılar ayrı yığın bağlamı yarattığı için karışım
   uygulanmadı ve görsellerin etrafında beyaz dikdörtgen kaldı.
   Saydamlık dosyaya gömülünce sonuç tarayıcı davranışına bağlı olmaktan
   çıktı. Sert eşik yerine PARLAKLIK kullanıldı: piksel ne kadar beyazsa
   o kadar saydam — bulanık yaprak kenarları tırtıklanmadı. */
.yapraklar {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(96px, 12vw, 168px);
  height: auto;
  pointer-events: none;
  z-index: 0;
  /* Kırpmanın sağ ve alt kenarı zemine ERİTİLİYOR. Zemin rengi
     eşitlendiği hâlde JPEG sıkıştırması kenarda birkaç tonluk fark
     bırakıyor ve dikkatli bakınca ince bir dikdörtgen çizgisi
     görünüyordu. Maske o çizgiyi tamamen yok ediyor. */
  -webkit-mask-image:
    linear-gradient(to right,  #000 62%, transparent 100%),
    linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image:
    linear-gradient(to right,  #000 62%, transparent 100%),
    linear-gradient(to bottom, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* ──────────────────────────── Metin ──────────────────────────── */
.metin {
  position: relative;
  z-index: 1;
  padding: clamp(96px, 15vw, 150px) 24px 40px;
  max-width: 640px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .metin {
    padding: 92px clamp(24px, 4vw, 56px) 56px clamp(56px, 8vw, 128px);
    margin: 0;
    max-width: none;
  }
}

.logo {
  width: clamp(132px, 18vw, 176px);
  height: auto;
  display: block;
}

.baslik {
  margin-top: 28px;
  font-size: clamp(34px, 5.6vw, 60px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--yesil-koyu);
}

.baslik-alt {
  display: block;
  margin-top: 2px;
  color: var(--yesil-acik);
  font-weight: 600;
}

.giris {
  margin-top: 20px;
  max-width: 33rem;
  font-size: clamp(15px, 1.75vw, 17px);
}
.giris strong { color: var(--yesil-koyu); font-weight: 600; }

.vurgu {
  margin-top: 22px;
  max-width: 33rem;
  font-size: clamp(15px, 1.75vw, 17px);
  font-weight: 700;
  color: var(--yesil-koyu);
}

.eposta {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--cizgi);
  font-size: 16px;
  font-weight: 600;
}
.eposta a { color: var(--yesil-koyu); text-decoration: none; }
.eposta a:hover { color: var(--yesil-acik); text-decoration: underline; }

/* Telefon geldiğinde kullanılacak — şimdilik HTML'de yok. */
.telefon { margin-top: 8px; font-size: 19px; font-weight: 700; }
.telefon a { color: var(--yesil-koyu); text-decoration: none; }

/* ─────────────────────────── Ürün görseli ───────────────────────────
   Köşe yuvarlaması ve çerçeve YOK: tasarımda tek parça bir sahne var,
   ayrı bir kutu değil. Sol kenar maskeyle zemine karışıyor ki metin
   sütunuyla arasında kesik bir çizgi oluşmasın. */
.gorsel { position: relative; z-index: 1; }

.gorsel img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  .gorsel img {
    /* Soldan sağa yumuşak geçiş: fotoğrafın sol kenarı görünmez olsun.
       `mask` desteklenmeyen çok eski tarayıcıda görsel olduğu gibi
       çıkar — bozulmaz, yalnız geçiş olmaz. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 100%);
  }
}

/* Dar ekranda görsel metnin ALTINDA: önce ne olduğu okunsun. */
@media (max-width: 899px) {
  .gorsel img {
    max-width: 440px;
    margin: 0 auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 100%);
  }
}

/* ─────────────────────────── Alt bilgi ─────────────────────────── */
.alt {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--cizgi);
  padding: 18px 24px;
  text-align: center;
  color: var(--sonuk);
  font-size: 12.5px;
}

a:focus-visible {
  outline: 2px solid var(--yesil-acik);
  outline-offset: 3px;
  border-radius: 4px;
}