/* ═══════════════════════════════════════════════════════════════
   Blog heykel bahçesi — AÇIK TONLU İSTİSNA BÖLÜM (17 Eyl 2026)
   Sitenin koyu dili (#05090F) nav/footer/listede kalır; bu bölüm
   fildişi sis + sığ su dünyasıdır. Vurgu yine teal/mavi.
   Sahne: .bahce yüksek bir kaydırma rayı, .bahce-sticky yapışkan sahne.
   ═══════════════════════════════════════════════════════════════ */
.bahce {
  --b-zemin: #EEF0EC;      /* sis / gökyüzü rengi — app.js'teki fog ile AYNI */
  --b-ink: #1B2430;
  --b-ink-soft: #4A5568;
  --b-cam: rgba(255, 255, 255, .62);
  --b-kenar: rgba(27, 36, 48, .12);
  --b-bolum: 6;
  position: relative;
  height: calc((var(--b-bolum) + 2.4) * 100vh);
  background: var(--b-zemin);
  color: var(--b-ink);
  margin-top: -68px;          /* Base.astro mainStyle padding-top'u sıfırla: sahne nav'ın altına girer */
}
.bahce-sticky {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;   /* dvh: iOS adres çubuğu (§17) */
  background: var(--b-zemin);
}
.bahce-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }   /* dikey kaydırma native; heykele dokunma = tıklama */
.bahce-sticky::after {
  /* alt kenarda listeye geçişi yumuşatan koyu perde */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5, 9, 15, 0), rgba(5, 9, 15, .0));
}

/* ── Giriş metni (sahne başı) ── */
.bahce-giris, .bahce-altyazi {
  position: absolute; left: clamp(16px, 5vw, 72px); bottom: clamp(56px, 12vh, 120px);
  max-width: 460px; padding: 22px 24px 20px;
  background: var(--b-cam); border: 1px solid var(--b-kenar); border-radius: 18px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(27, 36, 48, .10);
  transition: opacity .45s ease, transform .45s ease;
}
.bahce-giris { bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; transition-duration: .28s; }   /* konu seçilince hızlı çekilsin */
.bahce-giris .bahce-konular { justify-content: center; }
.bahce-giris .bahce-ipucu { justify-content: center; display: flex; }
.bahce .kicker { color: #0F8F82; font-family: var(--gov); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; }
.bahce-baslik { font-family: var(--bas); font-weight: 600; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; margin: 0 0 12px; color: var(--b-ink); letter-spacing: -.01em; }
.bahce-alt { font-family: var(--gov); font-size: 15px; line-height: 1.55; color: var(--b-ink-soft); margin: 0; }
.bahce-ipucu { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--gov); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--b-ink-soft); }
.bahce-ipucu i { width: 1px; height: 26px; background: linear-gradient(#0F8F82, transparent); animation: bIpucu 1.6s ease-in-out infinite; }
@keyframes bIpucu { 0% { transform: scaleY(0); transform-origin: top } 50% { transform: scaleY(1); transform-origin: top } 51% { transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }

.bahce-giris.is-off, .bahce-altyazi.is-off { opacity: 0; transform: translateY(14px); pointer-events: none; }
.bahce-giris.is-off { transform: translate(-50%, calc(-50% + 14px)); }
.bahce-altyazi[hidden] { display: block; opacity: 0; pointer-events: none; transform: translateY(14px); }
.bahce-altyazi { left: 50%; transform: translateX(-50%); text-align: center; max-width: 560px; bottom: clamp(28px, 6vh, 64px); padding: 16px 24px 16px; }
.bahce-altyazi.is-off, .bahce-altyazi[hidden] { transform: translate(-50%, 14px); }
.bahce-altyazi-ad { font-family: var(--bas); font-weight: 600; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.08; margin: 0 0 8px; color: var(--b-ink); }
.bahce-altyazi-ad i { display: none; }   /* yazı sayısı: yalnız telefonda başlığın yanında (kicker orada gizli) */
.bahce-altyazi-cumle { font-family: var(--gov); font-size: 14.5px; line-height: 1.55; color: var(--b-ink-soft); margin: 0 0 14px; }
.bahce-gor {
  font-family: var(--gov); font-size: 13px; font-weight: 600; letter-spacing: .02em;
  padding: 10px 16px; border-radius: 999px; cursor: pointer;
  background: #0F8F82; color: #fff; border: 0; transition: background .2s, transform .2s;
}
.bahce-gor:hover { background: #0B7A6F; transform: translateY(-1px); }
.bahce-gor i { font-style: normal; opacity: .75; margin-left: 4px; }
.bahce-gor i:empty { display: none; }

/* ── Bölüm gezintisi (sağ kenar) ── */
.bahce-nav { position: absolute; right: clamp(14px, 3vw, 40px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; }
.bahce-nav button {
  position: relative; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--b-ink-soft);
  background: transparent; cursor: pointer; padding: 0; transition: background .2s, border-color .2s, transform .2s;
}
.bahce-nav button span {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-family: var(--gov); font-size: 12px; color: var(--b-ink-soft);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.bahce-nav button:hover span, .bahce-nav button:focus-visible span { opacity: 1; }
.bahce-nav button.is-on { background: #0F8F82; border-color: #0F8F82; transform: scale(1.25); }

.bahce-atla {
  position: absolute; right: clamp(14px, 3vw, 40px); bottom: clamp(20px, 4vh, 36px);
  font-family: var(--gov); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--b-ink-soft); text-decoration: none; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--b-kenar); background: var(--b-cam);
}
.bahce-atla:hover { color: var(--b-ink); }

/* ── Sahnede tıklanabilir heykel imleci ── */
.bahce-canvas.is-hover { cursor: pointer; }

/* ── Yedek görünüm (mobil / WebGL yok / reduced-motion): sahne yerine 6 kart ── */
.bahce-yedek { display: none; padding: 96px 16px 40px; max-width: 1100px; margin: 0 auto; }
.bahce-yedek-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.bahce-yedek-kart {
  text-align: left; padding: 0 0 16px; border-radius: 16px; overflow: hidden; cursor: pointer;
  background: #fff; border: 1px solid var(--b-kenar); color: var(--b-ink); font-family: var(--gov);
  display: flex; flex-direction: column; gap: 6px; transition: transform .2s, box-shadow .2s;
}
.bahce-yedek-kart:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(27, 36, 48, .12); }
.bahce-yedek-gorsel { display: block; aspect-ratio: 4 / 3; background: #E3E6E1 center / cover no-repeat; margin-bottom: 8px; }
.bahce-yedek-kart strong { font-family: var(--bas); font-size: 20px; font-weight: 600; padding: 0 16px; }
.bahce-yedek-kart > span:last-child { font-size: 13.5px; line-height: 1.5; color: var(--b-ink-soft); padding: 0 16px; }

.bahce.is-yedek { height: auto; }
.bahce.is-yedek .bahce-sticky { display: none; }
.bahce.is-yedek .bahce-yedek { display: block; }

/* Dokunmatik (tablet): konu tuşları ≥44 px, bölüm noktaları büyük + geniş isabet alanı */
@media (pointer: coarse) {
  .bahce-konular button { min-height: 44px; padding: 11px 16px; font-size: 14px; }
  .bahce-nav { gap: 20px; }
  .bahce-nav button { width: 14px; height: 14px; }
  .bahce-nav button::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .bahce-ipucu i { animation: none; }
  .bahce-giris, .bahce-altyazi, .bahce-nav button, .bahce-gor, .bahce-yedek-kart { transition: none; }
}

/* ── Yazı kartları heykelin çevresinde (JS listeden taşır) ── */
.bahce-kartlar { position: absolute; inset: 0; pointer-events: none; }
.bahce-kart {
  position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none;
  transition: opacity .35s ease;          /* transform'a geçiş YOK: konum her kare JS'ten gelir, geçiş+gecikme kartı heykelin gerisinde sektiriyordu */
  will-change: transform, opacity;
}
.bahce-kartlar.is-on .bahce-kart { pointer-events: auto; }
.bahce-kart .post-card {
  padding: 11px 14px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .86); border: 1px solid var(--b-kenar);
  backdrop-filter: none; -webkit-backdrop-filter: none;   /* 10 kartta blur = kare düşmesi */
  box-shadow: 0 10px 28px rgba(27, 36, 48, .10);
}
.bahce-kart .post-card:hover { transform: translateY(-2px); border-color: rgba(15, 143, 130, .55); }
.bahce-kart .post-card::before { display: none; }
.bahce-kart .post-card-tag { display: none; }
/* Tam başlık, kırpma YOK (Hoca kararı). Vurgu: ön ifade (iki nokta / soru işaretine kadar) kalın,
   kalanı normal ağırlık ve yumuşak renk — app.js kartı taşırken <b>+<span>'a böler. */
.bahce-kart .post-card-title { color: var(--b-ink); font-size: 14px; line-height: 1.38; margin: 0; font-weight: 400; }
.bahce-kart .post-card-title b { font-weight: 600; color: var(--b-ink); }
.bahce-kart .post-card-title span { color: var(--b-ink-soft); }
.bahce-kart .post-card-desc { display: none; }

/* Öne çıkan yazı giriş kartının içinde */
.bahce-one { margin-top: 16px; }
.bahce-one .post-card { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.7); border: 1px solid var(--b-kenar); }
.bahce-one .post-card::before { display: none; }
.bahce-one .post-card-tag { color: #0F8F82; font-size: 10.5px; }
.bahce-one .post-card-title { color: var(--b-ink); font-size: 15px; line-height: 1.3; margin: 4px 0 0; }
.bahce-one .post-card-desc { display: none; }

/* Sahne aktifken alttaki liste gizlenir (JS'siz/botlar için DOM'da durur) */
#blog.is-bahcede { display: none; }

/* Liste sahneye taşındığında gereksiz kontroller */
.bahce:not(.is-yedek) .bahce-gor, .bahce:not(.is-yedek) .bahce-atla { display: none; }
.bahce-altyazi-cumle { margin-bottom: 0; }

/* Giriş: konu seçimi */
.bahce-konular { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bahce-konular button {
  font-family: var(--gov); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.7); color: var(--b-ink); border: 1px solid var(--b-kenar); transition: background .2s, border-color .2s, transform .2s;
}
.bahce-konular button:hover { border-color: #0F8F82; color: #0F8F82; transform: translateY(-1px); }
.bahce-giris { max-width: 560px; width: calc(100% - 32px); }

/* ═══ TELEFON DÜZENİ (≤760 px) — 18 Eyl gece, §18, Hoca kararı: sahne telefonda da açılır ═══
   Altyazı kutusu ÜSTTE (noktaların altında, kompakt), kartlar ALTTA iki sütunlu ızgara — istasyona gelince HEPSİ birden
   görünür (Hoca: "kaydırarak değil"); sığması için kart yalnız kalın ön ifadeyi gösterir. Konu tuşları 2×3, bölüm
   noktaları üstte yatay, "listeye geç" üst sağda. app.js .is-telefon koyar, kabın opaklığını yazar; konum CSS'ten. */
@media (max-width: 760px) {
  .bahce-giris, .bahce-altyazi { width: calc(100% - 32px); max-width: none; padding: 14px 16px 12px; }
  /* Bölüm kutusu telefonda tek satırlık küçük etiket (Hoca: "bölüm kısmı gereksiz yer kaplıyor"): yalnız ad + yazı sayısı */
  .bahce-altyazi { bottom: auto; top: 108px; width: auto; max-width: calc(100% - 32px); padding: 6px 14px; border-radius: 999px; }
  .bahce-altyazi.is-off, .bahce-altyazi[hidden] { transform: translate(-50%, -10px); }
  .bahce-altyazi .kicker, .bahce-altyazi-cumle { display: none; }
  .bahce-altyazi-ad { font-size: 15px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bahce-altyazi-ad i { display: inline; font-style: normal; font-weight: 400; color: var(--b-ink-soft); font-family: var(--gov); font-size: 12px; margin-left: 6px; }
  .bahce-baslik { font-size: 30px; }
  .bahce-alt { font-size: 14px; }
  .bahce-giris .bahce-konular { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .bahce-giris .bahce-konular button { min-height: 44px; padding: 8px 10px; font-size: 13px; }
  .bahce-giris .bahce-ipucu { margin-top: 12px; }
  .bahce-one { margin-top: 12px; }
  .bahce-one .post-card-title { font-size: 14px; }
  .bahce-nav { flex-direction: row; top: 78px; left: 16px; right: auto; transform: none; gap: 18px; }
  .bahce-nav button span { display: none; }
  .bahce.is-telefon .bahce-atla { display: inline-block; top: 70px; bottom: auto; right: 16px; font-size: 11px; padding: 7px 10px; }
  .bahce-kartlar {
    inset: auto 12px 12px 12px; top: auto; height: auto; display: flex; flex-wrap: wrap; align-content: flex-end; gap: 6px;
    transition: opacity .25s ease;
  }
  .bahce-kartlar.is-on { pointer-events: auto; }
  .bahce-kart { position: relative; left: auto; top: auto; flex: 0 0 calc(50% - 3px); transform: none !important; will-change: opacity; }
  .bahce-kart .post-card { padding: 7px 9px 8px; border-radius: 10px; }
  .bahce-kart .post-card-title { font-size: 12.5px; line-height: 1.3; }
  .bahce-kart .post-card-title span { display: none; }   /* telefonda yalnız kalın ön ifade (hepsi sığsın) */
}
@media (max-width: 760px) and (max-height: 700px) {   /* kısa telefon (SE): giriş kutusu sığsın */
  .bahce-giris .bahce-ipucu, .bahce-one { display: none; }
}
/* ═══ ALÇAK EKRAN (yatay telefon, ≤520 px yükseklik): sahne + altyazı, kartlar gizli ═══ */
@media (max-height: 520px) {
  .bahce-kartlar { display: none; }
  .bahce-giris { padding: 12px 16px 10px; max-width: 560px; }
  .bahce-giris .bahce-ipucu, .bahce-giris .bahce-one, .bahce-alt { display: none; }
  .bahce-baslik { font-size: 24px; margin-bottom: 8px; }
  .bahce-giris .bahce-konular { display: flex; margin-top: 8px; }
  .bahce-giris .bahce-konular button { min-height: 36px; padding: 6px 12px; font-size: 12.5px; }
  .bahce-altyazi { bottom: 12px; padding: 10px 16px 10px; max-width: 520px; width: auto; }
  .bahce-altyazi-ad { font-size: 20px; margin-bottom: 4px; }
  .bahce-altyazi-cumle { font-size: 12.5px; }
}