/* ===========================================================================
   sapancafidan.com — Sapanca Fidan
   Arketip: RADYAL (katalog/029). Fotoğraf kıt olduğu için ekranı vektörel
   sahneler dolduruyor; fotoğraflar ölçüsünün yettiği yerde kullanılıyor.

   🔴 PALET UYDURULMADI: renkler firmanın kendi logosunun piksellerinden
   okundu — SAPANCA mavisi #036fd4, FİDAN yeşili #77b804, eski sayfa
   zemini #7fb71b. Kontrastlar ölçüldü (beyaz üzerinde):
       #036fd4 4,97 · #0a4fa0 7,96 · #3f6b04 6,33 · #77b804 2,43
   🔴 #77b804 DOLGU RENGİDİR, gövde yazısı rengi olmaz (2,43).
   =========================================================================== */

:root {
  --kagit:       #f7f9f3;
  --kagit-2:     #ffffff;
  --murekkep:    #1c2a16;
  --murekkep-2:  #46543c;
  --mavi:        #036fd4;
  --mavi-koyu:   #0a4fa0;
  --yesil:       #77b804;
  --yesil-koyu:  #3f6b04;
  --orman:       #2f6b34;
  --cizgi:       #dde5d3;
  --golge:       0 1px 2px rgba(28,42,22,.06), 0 8px 24px rgba(28,42,22,.07);
  --golge-2:     0 2px 6px rgba(28,42,22,.10), 0 18px 44px rgba(28,42,22,.12);
  --en:          1180px;
  --yuvarlak:    14px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font: 400 17px/1.7 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: Fraunces, Georgia, "Times New Roman", serif; font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 1em; }

a { color: var(--mavi-koyu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mavi); }

img, svg { max-width: 100%; }
img { height: auto; display: block; }

.gizli {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.atla {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--orman); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 8px 0;
}
.atla:focus { left: 0; }

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

.kap { max-width: var(--en); margin-inline: auto; padding-inline: 20px; }

/* --------------------------------------------------------------- başlık */
.ust {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.93);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic {
  max-width: var(--en); margin-inline: auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 20px;
}
.marka { flex: 0 0 auto; display: block; line-height: 0; }
.marka img { width: 190px; height: auto; }

.menu { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; margin-inline-start: auto; }
.menu a {
  display: block; padding: 9px 13px; border-radius: 9px;
  color: var(--murekkep); text-decoration: none; font-size: .95rem; font-weight: 500;
  transition: background .18s, color .18s;
}
.menu a:hover { background: #eef4e6; color: var(--yesil-koyu); }
.menu a[aria-current="page"] { background: var(--orman); color: #fff; }

.ust-tel {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 15px; border-radius: 999px;
  background: var(--orman); color: #fff; text-decoration: none;
  font-weight: 600; font-size: .95rem;
  transition: transform .18s, background .18s;
}
.ust-tel:hover { background: #26582a; color: #fff; transform: translateY(-1px); }

.menu-dugme { display: none; }

/* ---------------------------------------------------------------- kahraman */
/* 🔴 TAM EKRAN FOTOĞRAF KAHRAMAN YAPILAMADI (kaynak tavanı 784 px, 1,63 kat
   büyüme). Açılışı VEKTÖREL SAHNE dolduruyor: ekranın tamamı görsel,
   metin dar bir karta sıkışıyor — hedef ilk ekranda görsel ≥%50, metin ≤%15. */
.kahraman { position: relative; min-height: clamp(460px, 74vh, 680px); display: grid; isolation: isolate; }
.kahraman .sahne-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.kahraman-ic {
  position: relative; z-index: 1;
  max-width: var(--en); margin-inline: auto; padding: 48px 20px 64px;
  display: flex; align-items: flex-end;
}
.kahraman-kart {
  max-width: 520px;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--yuvarlak);
  padding: 26px 28px;
  box-shadow: var(--golge-2);
}
.kahraman-kart h1 { margin-bottom: .35em; }
.kahraman-kart p { color: var(--murekkep-2); margin-bottom: 1.2em; }
.kahraman-eylem { display: flex; flex-wrap: wrap; gap: 10px; }

.dugme {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .98rem; text-decoration: none;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.dugme-dolu { background: var(--orman); color: #fff; }
.dugme-dolu:hover { background: #26582a; color: #fff; transform: translateY(-2px); box-shadow: var(--golge); }
.dugme-cizgi { background: #fff; color: var(--murekkep); box-shadow: inset 0 0 0 2px var(--cizgi); }
.dugme-cizgi:hover { color: var(--yesil-koyu); box-shadow: inset 0 0 0 2px var(--yesil); transform: translateY(-2px); }

/* -------------------------------------------------------------- bölümler */
.bolum { padding: clamp(48px, 7vw, 86px) 0; }
.bolum-koyu { background: var(--orman); color: #eaf3e2; }
.bolum-koyu h2 { color: #fff; }
.bolum-koyu a { color: #d6ecc3; }
.bolum-kagit { background: var(--kagit-2); }

.bolum-bas { max-width: 680px; margin: 0 auto clamp(26px, 4vw, 44px); text-align: center; }
.ust-yazi {
  text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600;
  color: var(--yesil-koyu); margin: 0 0 .6em;
}
.bolum-koyu .ust-yazi { color: #b9db86; }
.bolum-metin { color: var(--murekkep-2); margin: 0; }
.bolum-koyu .bolum-metin { color: #cfe3c2; }

/* ------------------------------------------------------------ dikim halkası */
/* Radyal omurga: dolu dilimler dikim ayları, veri firmanın kendi metninden. */
.halka-duzen {
  display: grid; gap: clamp(26px, 5vw, 56px); align-items: center;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
}
.halka { width: 100%; height: auto; max-width: 320px; margin-inline: auto; }
.dilim { fill: #e7eedd; stroke: var(--kagit-2); stroke-width: 2; transition: fill .2s; }
.dilim-dikim { fill: var(--orman); }
.dilim-bugun { stroke: var(--mavi); stroke-width: 3.5; }
.halka-ay { font: 600 13px Inter, sans-serif; fill: var(--murekkep-2); }
.halka-ay-bugun { fill: var(--mavi-koyu); font-weight: 700; }

.halka-anahtar { list-style: none; margin: 1.2em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.halka-anahtar li { display: flex; align-items: center; gap: 9px; font-size: .93rem; color: var(--murekkep-2); }
.halka-anahtar i { width: 16px; height: 16px; border-radius: 5px; display: inline-block; }
.i-dikim { background: var(--orman); }
.i-bos   { background: #e7eedd; }
.i-bugun { background: #fff; box-shadow: inset 0 0 0 3px var(--mavi); }

/* -------------------------------------------------------------- tür kartları */
.tur-izgara {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
}
.tur-kart {
  display: flex; flex-direction: column;
  background: var(--kagit-2); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tur-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-2); border-color: #c6d6b4; color: inherit; }
.tur-kart-ust {
  background: linear-gradient(180deg, #eaf3e0 0%, #f6faf1 100%);
  display: grid; place-items: end center; padding-top: 14px;
  border-bottom: 1px solid var(--cizgi);
}
.tur-cizim { width: 100%; height: auto; max-width: 200px; }
.tur-kart:hover .tur-cizim { transform: scale(1.03); }
.tur-cizim { transition: transform .25s ease; }
.tur-kart-alt { padding: 16px 18px 20px; }
.tur-kart h3 { margin-bottom: .25em; }
.tur-latin { font-style: italic; color: var(--murekkep-2); font-size: .88rem; margin: 0 0 .6em; }
.tur-kart p { color: var(--murekkep-2); font-size: .95rem; margin: 0; }
.tur-git { margin-top: 12px; color: var(--mavi-koyu); font-weight: 600; font-size: .92rem; display: inline-flex; gap: 6px; align-items: center; }
.tur-kart:hover .tur-git span { transform: translateX(3px); }
.tur-git span { transition: transform .2s; display: inline-block; }

/* ------------------------------------------------------------- kayan şerit */
/* 🔴 LİSTE İKİ KEZ BASILIR: sonsuz kayma translateX(-50%) ile oluyor ve bu
   yalnız raydaki içerik TAM OLARAK iki özdeş kopyaysa dikişsiz kapanır.
   🔴 Şeritte loading="lazy" KULLANILMAZ — kareler ekran dışında başlar. */
.serit { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.serit-ray { display: flex; gap: 14px; width: max-content; animation: kay 46s linear infinite; }
.serit:hover .serit-ray, .serit:focus-within .serit-ray { animation-play-state: paused; }
.serit figure { margin: 0; flex: 0 0 auto; }
.serit img { height: 170px; width: auto; border-radius: 10px; box-shadow: var(--golge); }
@keyframes kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ mozaik galeri */
/* 🔴 EŞİT IZGARA DEĞİL: belirli kareler iki göz kaplar. Rastgele olsaydı
   her yüklemede düzen değişirdi. Yalnız ölçüsü yeten kare genişliyor. */
.mozaik { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: 180px; }
.mozaik figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--yuvarlak); background: #e7eedd; }
.mozaik .genis { grid-column: span 2; }
.mozaik img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mozaik figure:hover img { transform: scale(1.05); }
.mozaik figcaption {
  position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(16,26,12,.78));
  color: #fff; font-size: .84rem; line-height: 1.35;
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.mozaik figure:hover figcaption, .mozaik figure:focus-within figcaption { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ yazılar */
.yazi-izgara { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.yazi-kart {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--kagit-2); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  padding: 16px; text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .2s;
}
.yazi-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-2); color: inherit; }
.yazi-kart img { width: 104px; height: 78px; object-fit: cover; border-radius: 9px; flex: 0 0 auto; }
.yazi-kart h3 { font-size: 1.08rem; margin-bottom: .3em; }
.yazi-kart p { font-size: .92rem; color: var(--murekkep-2); margin: 0; }

.metin { max-width: 720px; }
.metin h2 { margin-top: 1.4em; }
.metin ol, .metin ul { padding-inline-start: 1.3em; }
.metin li { margin-bottom: .5em; }
.alinti {
  margin: 1.6em 0; padding: 18px 22px; border-inline-start: 4px solid var(--yesil);
  background: #f1f7e9; border-radius: 0 var(--yuvarlak) var(--yuvarlak) 0;
  font-family: Fraunces, Georgia, serif; font-size: 1.1rem; color: var(--yesil-koyu);
}

/* 🔴 auto-fit DEĞİL, SABİT 4 SÜTUN: dört aşama dörtlü okunur. auto-fit
   720 px'lik metin sütununda 3+1'e düşüyordu ve dördüncü aşama tek başına
   alt satırda kalıyordu (ölçüldü, ekranda görüldü). */
.adimlar { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin: 1.6em 0; }
@media (min-width: 680px) { .adimlar { grid-template-columns: repeat(4, 1fr); } }
.adim { background: var(--kagit-2); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); padding: 14px; }
.adim-cizim { width: 100%; height: auto; }
.adim b { display: block; margin-top: 10px; font-size: .9rem; color: var(--yesil-koyu); }
.adim p { font-size: .92rem; color: var(--murekkep-2); margin: .3em 0 0; }

/* ----------------------------------------------------------------- özellik */
.ozellik { list-style: none; margin: 1.2em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ozellik li {
  background: #eef4e6; color: var(--yesil-koyu); border-radius: 999px;
  padding: 6px 14px; font-size: .88rem; font-weight: 500;
}

/* ------------------------------------------------------------------- form */
.form-duzen { display: grid; gap: clamp(24px, 4vw, 44px); grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: start; }
.alan { display: block; margin-bottom: 14px; }
.alan > span { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.alan input, .alan textarea, .alan select {
  width: 100%; padding: 12px 14px; font: inherit;
  border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; color: var(--murekkep);
}
.alan textarea { min-height: 140px; resize: vertical; }
.alan input:focus, .alan textarea:focus, .alan select:focus { border-color: var(--yesil); }
.form-not { font-size: .88rem; color: var(--murekkep-2); }
.uyari { padding: 13px 16px; border-radius: 10px; margin-bottom: 18px; font-size: .95rem; }
.uyari-iyi  { background: #e8f5e2; color: #255c25; box-shadow: inset 0 0 0 1px #bcdcae; }
.uyari-kotu { background: #fdecea; color: #8a2017; box-shadow: inset 0 0 0 1px #f2c2bc; }

.kunye-kart { background: var(--kagit-2); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); padding: 20px 22px; }
.kunye-kart h3 { font-size: 1.1rem; }
.kunye-kart p { margin: 0 0 .9em; color: var(--murekkep-2); font-size: .96rem; }
.kunye-kart a { font-weight: 600; }

/* ---------------------------------------------------------------- kırıntı */
.kirinti { padding: 16px 0 0; }
.kirinti ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: .88rem; color: var(--murekkep-2); }
.kirinti li + li::before { content: "›"; margin-inline-end: 8px; color: #9fb18f; }
.kirinti a { color: var(--murekkep-2); }

/* --------------------------------------------------------------- altbilgi */
.alt { background: var(--murekkep); color: #cfdcc5; margin-top: 0; }
.alt-ic {
  max-width: var(--en); margin-inline: auto; padding: clamp(36px, 5vw, 56px) 20px;
  display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.alt h2 { font-size: 1.05rem; color: #fff; margin-bottom: .7em; }
.alt p { margin: 0 0 .5em; font-size: .95rem; }
.alt a { color: #d6ecc3; }
.alt a:hover { color: #fff; }
.alt-logo { width: 180px; background: #fff; border-radius: 8px; padding: 8px 10px; }
.alt-slogan { margin-top: 14px; color: #a8bb9c; font-size: .92rem; }
.alt-menu { list-style: none; margin: 0; padding: 0; }
/* 🔴 ALTBİLGİ MENÜSÜ DOKUNMA HEDEFİ — iki kez düştü: bağlantı blok ve ≥44 px. */
.alt-menu a { display: block; padding: 9px 0; min-height: 44px; line-height: 26px; }
.alt-telif {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 10px 18px;
  justify-content: center; align-items: center;
  font-size: .86rem; color: #93a687;
}

/* ------------------------------------------------------------ yüzen whatsapp */
/* 🔴 ÇİFT SINIFLA SEÇ: `.yuzen a` gibi genel bir kural `.wa-mobil`i yener ve
   ikon iki kez çıkar. Seçiciler `a.wa-mobil` / `a.wa-masaustu` olmalı. */
a.yuzen-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: transform .2s;
}
a.yuzen-wa:hover { transform: scale(1.07); color: #fff; }
a.yuzen-wa.wa-masaustu { display: none; }
@media (min-width: 900px) {
  a.yuzen-wa.wa-mobil { display: none; }
  a.yuzen-wa.wa-masaustu { display: grid; }
}

/* =========================================================== hareket katmanı
   🔴 GÖRÜNÜRLÜK BETİĞE BAĞLANMAZ: belirme tamamen CSS, `animation-timeline`
   destekleyen tarayıcıda çalışıyor; desteklemeyende içerik ZATEN GÖRÜNÜR.
   Desen kaynağı: yaylalarhafriyat.com (kit standardı).
   =========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bel {
      animation: belir linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 62%;
    }
    @keyframes belir {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* Sahnedeki hareket: güneş nefes alır, bulutlar sürüklenir, fidanlar sallanır. */
@media (prefers-reduced-motion: no-preference) {
  .gunes { animation: nefes 7s ease-in-out infinite; transform-origin: 790px 92px; }
  @keyframes nefes { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.07); opacity: 1; } }

  .bulut-1 { animation: suruk 64s linear infinite; }
  .bulut-2 { animation: suruk 92s linear infinite; }
  @keyframes suruk { from { transform: translateX(-220px); } to { transform: translateX(1420px); } }

  .fidan { animation: salin 5.4s ease-in-out infinite; animation-delay: var(--gecikme, 0s); transform-box: fill-box; transform-origin: bottom center; }
  @keyframes salin { 0%, 100% { rotate: -1.1deg; } 50% { rotate: 1.1deg; } }

  .dilim { animation: dilim-ac .5s ease-out both; animation-delay: calc(var(--sira, 0) * 55ms); transform-box: fill-box; transform-origin: center; }
  @keyframes dilim-ac { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .serit-ray { animation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------------------------- mobil */
@media (max-width: 900px) {
  .ust-ic { gap: 12px; }
  .marka img { width: 158px; }
  .ust-tel span { display: none; }
  .ust-tel { padding: 11px; }

  .menu-dugme {
    display: grid; place-content: center; gap: 5px;
    width: 46px; height: 46px; margin-inline-start: auto;
    background: #eef4e6; border: 0; border-radius: 11px; cursor: pointer;
  }
  .menu-dugme span { display: block; width: 20px; height: 2px; background: var(--murekkep); border-radius: 2px; }

  .menu {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; gap: 0; margin: 0; padding: 8px 14px 16px;
    background: #fff; border-bottom: 1px solid var(--cizgi);
    box-shadow: var(--golge);
  }
  .menu:not(.acik) { display: none; }
  .menu a { padding: 13px 10px; min-height: 44px; }

  .halka-duzen { grid-template-columns: 1fr; }
  .form-duzen  { grid-template-columns: 1fr; }
  .mozaik { grid-auto-rows: 150px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .kahraman { min-height: 0; }
  .kahraman .sahne-svg { position: relative; height: 320px; }
  .kahraman-ic { padding: 0 16px 36px; margin-top: -44px; }
  .kahraman-kart { padding: 20px; }
  .kap { padding-inline: 16px; }
  .mozaik { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 132px; }
  .mozaik .genis { grid-column: span 2; }
  .yazi-kart { flex-direction: column; }
  .yazi-kart img { width: 100%; height: 150px; }
}

/* ---------------------------------------------------------------- büyüteç */
.buyutec {
  position: fixed; inset: 0; z-index: 60; display: none;
  place-items: center; grid-template-columns: 64px 1fr 64px;
  background: rgba(12,20,9,.92); padding: 20px;
}
.buyutec.acik { display: grid; }
.buyutec figure { grid-column: 2; margin: 0; text-align: center; max-height: 86vh; }
.buyutec img { max-width: 100%; max-height: 76vh; width: auto; margin-inline: auto; border-radius: 10px; }
.buyutec figcaption { color: #d8e6cd; font-size: .92rem; margin-top: 12px; }
.buyutec-ok, .buyutec-kapat {
  background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer;
  border-radius: 50%; width: 48px; height: 48px; font-size: 1.6rem; line-height: 1;
}
.buyutec-ok:hover, .buyutec-kapat:hover { background: rgba(255,255,255,.26); }
.buyutec-geri { grid-column: 1; }
.buyutec-ileri { grid-column: 3; }
.buyutec-kapat { position: absolute; top: 16px; right: 16px; }
.buyutec-sayac { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #9fb48f; font-size: .86rem; margin: 0; }
[data-buyut] { cursor: zoom-in; }

@media (max-width: 560px) {
  .buyutec { grid-template-columns: 44px 1fr 44px; padding: 10px; }
  .buyutec-ok { width: 38px; height: 38px; font-size: 1.3rem; }
}

/* 🔴 KOYU BANTTA DOLU DÜĞME GÖRÜNMEZ: zemin de düğme de aynı yeşildi
   ("Sahanın tamamını görün" ekranda düz yazı gibi duruyordu, ölçüldü). */
.bolum-koyu .dugme-dolu { background: #fff; color: var(--orman); }
.bolum-koyu .dugme-dolu:hover { background: #eef7e4; color: var(--orman); }
.bolum-koyu .dugme-cizgi { background: transparent; color: #eaf3e2; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.bolum-koyu .dugme-cizgi:hover { color: #fff; box-shadow: inset 0 0 0 2px #fff; }

/* 🔴 wa_baglanti() İKİ BAĞLANTI BASAR (mobil + masaüstü); hangisinin
   görüneceğine CSS karar verir. Kural yazılmazsa İKİSİ BİRDEN çıkar —
   iletişim sayfasında "WhatsApp ile yazınWhatsApp ile yazın" oldu, ekranda
   görüldü. Seçici ÇİFT SINIF olmalı, yoksa genel kurallar onu yener. */
a.wa-metin { font-weight: 600; }
a.wa-metin.wa-masaustu { display: none; }
@media (min-width: 900px) {
  a.wa-metin.wa-mobil { display: none; }
  a.wa-metin.wa-masaustu { display: inline; }
}

/* =========================================================== hareket — II
   İkinci tur (kullanıcı: "vektörel animasyonu biraz daha arttır").
   🔴 HEPSİ transform/opacity: layout'u tetikleyen özellik (width, top,
   stroke-width) animasyonda kullanılmıyor — 60 fps bunun için tutuyor.
   🔴 Hepsi `prefers-reduced-motion: no-preference` içinde; dosyanın
   sonundaki `reduce` bloğu zaten hepsini kapatıyor.
   =========================================================================== */

.ayrac { display: block; width: 100%; height: 56px; margin-bottom: -1px; }
.ayrac + .bolum, .bolum + .ayrac { margin-top: 0; }

.buyume { width: 100%; height: auto; max-width: 260px; }
.buyume-yan { display: grid; gap: 22px; grid-template-columns: 260px minmax(0, 1fr); align-items: center; margin: 1.6em 0; }
@media (max-width: 620px) { .buyume-yan { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: no-preference) {

  /* ---------------------------------------------------------- gökyüzü */
  .gunes-isin { animation: don 90s linear infinite; transform-origin: 790px 92px; }
  @keyframes don { to { rotate: 360deg; } }

  .gunes-hale { animation: hale 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes hale { 0%, 100% { opacity: .55; scale: 1; } 50% { opacity: .9; scale: 1.08; } }

  .bulut-3 { animation: suruk 118s linear infinite; }

  /* Kuşlar: sürü sağa süzülür, kanatlar ayrı ritimde çırpar. */
  .kuslar-1 { animation: ucus-1 34s linear infinite; }
  .kuslar-2 { animation: ucus-2 52s linear infinite; }
  @keyframes ucus-1 {
    0%   { transform: translate(-120px, 150px); }
    100% { transform: translate(1320px, 58px); }
  }
  @keyframes ucus-2 {
    0%   { transform: translate(1320px, 88px); }
    100% { transform: translate(-120px, 132px); }
  }
  .kanat-cirp { animation: cirp 420ms ease-in-out infinite; animation-delay: var(--gecikme, 0s); transform-box: fill-box; transform-origin: center; }
  @keyframes cirp { 0%, 100% { scale: 1 1; } 50% { scale: 1 .45; } }

  /* ------------------------------------------------------------ sulama */
  /* Yay çizilir, uca varınca söner; sıradaki fıskiye gecikmeli başlar. */
  .su-yay {
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: su-ak 3.6s ease-out infinite;
    animation-delay: var(--gecikme, 0s);
  }
  .su-sol { animation-delay: calc(var(--gecikme, 0s) + .25s); }
  @keyframes su-ak {
    0%   { stroke-dashoffset: 150; opacity: 0; }
    18%  { opacity: .95; }
    70%  { stroke-dashoffset: 0; opacity: .8; }
    100% { stroke-dashoffset: -40; opacity: 0; }
  }

  /* -------------------------------------------------------------- otlar */
  .ot { animation: ot-salin 4.2s ease-in-out infinite; animation-delay: var(--gecikme, 0s); transform-box: fill-box; transform-origin: bottom center; }
  @keyframes ot-salin { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }

  /* --------------------------------------------------------------- arı */
  /* `offset-path` ile sahnede dolanıyor; desteklenmeyen tarayıcıda
     `@supports` dışında kaldığı için hiç görünmüyor — eksikliği fark
     edilmez, bozuk görünmesi fark edilirdi.
     🔴 GİZLEME TABANA TAŞINDI (aşağıda, bu bloğun dışında): burada
     dururken `prefers-reduced-motion: reduce` kullanıcısında kural hiç
     uygulanmıyordu ve arı, dönüşümsüz hâliyle sahnenin SOL ÜST KÖŞESİNDE
     asılı kalıyordu. */
  @supports (offset-path: path("M0 0")) {
    /* 🔴 SEÇİCİ İKİ PARÇALI: taban gizleme kuralı dosyanın SONUNDA duruyor,
       yani kaynak sırasında bundan sonra geliyor. Tek sınıfla yazılsaydı
       eşit özgüllükte sonraki kural kazanır ve arı HİÇ görünmezdi. */
    .sahne-svg .ari {
      opacity: 1;
      offset-path: path("M 140 470 C 320 380 480 500 660 420 C 820 350 960 470 1120 400");
      offset-rotate: 0deg;
      animation: ari-uc 26s ease-in-out infinite alternate;
    }
    @keyframes ari-uc { from { offset-distance: 0%; } to { offset-distance: 100%; } }
  }
  .ari .kanat { animation: cirp 180ms ease-in-out infinite; transform-box: fill-box; transform-origin: 90% 50%; }

  /* ------------------------------------------------------- paralaks katman */
  /* 🔴 `scroll()` DESTEKLENMİYORSA HİÇBİR ŞEY OLMAZ: katmanlar yerinde
     durur, sahne yine doğru görünür. Görünürlük buna bağlanmadı. */
  @supports (animation-timeline: scroll()) {
    .kat {
      animation: kay-y linear both;
      animation-timeline: scroll();
      animation-range: 0 90vh;
    }
    .kat-uzak { --kayma: 14px; }
    .kat-orta { --kayma: 34px; }
    .kat-on   { --kayma: 62px; }
    @keyframes kay-y { to { transform: translateY(calc(var(--kayma, 0px) * -1)); } }
  }

  /* --------------------------------------------------------- tür kartları */
  /* Üzerine gelince ağaç rüzgâra kapılıyor: kart "canlı" hissi veriyor. */
  .tur-kart:hover .tur-cizim, .tur-kart:focus-visible .tur-cizim {
    animation: kart-salin 2.4s ease-in-out infinite;
    transform-origin: bottom center;
  }
  @keyframes kart-salin { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }

  /* ------------------------------------------------------- halka ibresi */
  /* 🔴 İBRENİN PİVOTU HALKA MERKEZİ. Öznitelikte `rotate(... 160 160)`
     var; CSS tarafında origin verilmezse view-box'ın (0,0) köşesi
     kullanılır ve ibre ekranın köşesinden süzülerek gelir. */
  .halka-ibre { transform-box: view-box; transform-origin: 160px 160px;
                animation: ibre-gel .9s cubic-bezier(.2,.9,.25,1) both; animation-delay: .5s; }
  @keyframes ibre-gel { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }

  .halka-fidan { transform-box: fill-box; transform-origin: bottom center; animation: halka-buyu 9s ease-in-out infinite; }
  @keyframes halka-buyu { 0%, 100% { scale: .88; } 50% { scale: 1.04; } }

  /* --------------------------------------------------------- büyüme şeması */
  /* Tek döngü: kökler uzar, gövde çıkar, katlar sırayla açılır, su düşer. */
  .kok { stroke-dasharray: 90; stroke-dashoffset: 90; animation: ciz 9s ease-out infinite; }
  .k1 { animation-delay: .2s; } .k2 { animation-delay: .5s; } .k3 { animation-delay: .8s; }
  @keyframes ciz {
    0%   { stroke-dashoffset: 90; }
    22%  { stroke-dashoffset: 0; }
    88%  { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }
  .govde { stroke-dasharray: 60; stroke-dashoffset: 60; animation: ciz 9s ease-out infinite; animation-delay: 1.1s; }
  .kat-y { transform-box: fill-box; transform-origin: bottom center; scale: 0; animation: kat-ac 9s ease-out infinite; }
  .kat-1 { animation-delay: 1.8s; } .kat-2 { animation-delay: 2.4s; } .kat-3 { animation-delay: 3s; }
  @keyframes kat-ac {
    0%, 8%  { scale: 0; opacity: 0; }
    22%     { scale: 1.08; opacity: 1; }
    30%     { scale: 1; }
    88%     { scale: 1; opacity: 1; }
    100%    { scale: 1; opacity: 0; }
  }
  .damla { animation: damla-dus 9s ease-in infinite; transform-box: fill-box; }
  .d1 { animation-delay: 4.2s; } .d2 { animation-delay: 4.8s; }
  @keyframes damla-dus {
    0%, 42%  { transform: translateY(0); opacity: 0; }
    46%      { opacity: .9; }
    58%      { transform: translateY(120px); opacity: 0; }
    100%     { transform: translateY(120px); opacity: 0; }
  }
}

/* Ayraç bölümün ÜSTÜNE/ALTINA oturur; dolgusu komşu bölümün rengidir,
   boşluğundan bölümün kendi zemini görünür. */
.bolum { position: relative; overflow: hidden; }
.ayrac-ust, .ayrac-alt { position: absolute; left: 0; width: 100%; height: 56px; z-index: 1; pointer-events: none; }
.ayrac-ust { top: -1px; }
.ayrac-alt { bottom: -1px; }
.bolum > .kap { position: relative; z-index: 2; }
.bolum > .serit { position: relative; z-index: 2; }

@media (prefers-reduced-motion: no-preference) {
  /* Yayın ucundaki damla, yay oraya vardığında beliriyor. */
  .su-damla { opacity: 0; animation: damla-bel 3.6s ease-out infinite; animation-delay: var(--gecikme, 0s); }
  .su-damla.su-sol { animation-delay: calc(var(--gecikme, 0s) + .25s); }
  @keyframes damla-bel {
    0%, 55%  { opacity: 0; transform: translateY(-6px); }
    72%      { opacity: .9; transform: translateY(0); }
    100%     { opacity: 0; transform: translateY(6px); }
  }
}

/* 🔴 ARI VARSAYILAN OLARAK GİZLİ — yalnız yolunda uçabildiğinde görünür.
   Taban kural: hareket azaltılmışsa da, `offset-path` desteklenmiyorsa da
   arı hiç çıkmaz. Görünür kılan tek yer no-preference + @supports bloğu. */
.ari { opacity: 0; }