/* ═══════════════════════════════════════════════════════════════
   MONO — siyah-beyaz minimal kural katmanı (site.css'ten SONRA yüklenir)
   Spec: docs/superpowers/specs/2026-08-23-...-design.md §3
   Kural: beyaz zemin, #1B1B1B metin, 1px #E5E5E5 çizgi, köşe 0, gölge yok.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --mono-metin: #1b1b1b;
  --mono-ikincil: #6b6b6b;
  --mono-cizgi: #e5e5e5;
  --mono-zemin: #ffffff;
}

body {
  background: var(--mono-zemin);
  color: var(--mono-metin);
}

/* ── Köşe ve gölge sıfırlama (rounded-pill dahil) ─────────────── */
.btn, .card, .badge, .form-control, .form-select, .alert, .modal-content,
.dropdown-menu, .rounded, .rounded-3, .rounded-pill, img.card-img-top {
  border-radius: 0 !important;
}
.card, .btn, .shadow, .shadow-sm { box-shadow: none !important; }

/* ── İSTİSNA: header + koyu hero (Balancia uyarlaması) ───────────
   Header hap'ı ve koyu hero, balancia.vamtam.com header'ının birebir
   uyarlaması olarak bilinçli biçimde yuvarlak/haplı. Mono'nun köşe
   sıfırlaması bu iki bölgede geçerli değil; bölgeye özgü değerler
   site.css'teki "Floating Header" ve "Hero v2 — KOYU" bloklarında. */
.hero-v2-btns .btn,
.hero-mono .btn { border-radius: 80px !important; }

/* ── Tipografi ────────────────────────────────────────────────── */
h1, .display-baslik {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.015em; }

.mikro-etiket {
  display: block;
  font-family: var(--font-govde);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mono-ikincil);
  margin-bottom: 0.9rem;
}

/* ── Çizgi dili ───────────────────────────────────────────────── */
.cizgi-ust { border-top: 1px solid var(--mono-cizgi); }
.bolum { padding: 4.5rem 0; }
.bolum + .bolum { border-top: 1px solid var(--mono-cizgi); }
hr { border-top-color: var(--mono-cizgi); opacity: 1; }

/* ── Butonlar (tam köşe, siyah/çerçeve tersinmesi) ────────────── */
.btn-dark, .btn-primary {
  background: var(--mono-metin); border: 1px solid var(--mono-metin);
  color: #fff; padding: 0.6rem 1.6rem;
}
.btn-dark:hover, .btn-primary:hover {
  background: transparent; color: var(--mono-metin); border-color: var(--mono-metin);
}
.btn-outline-dark, .btn-outline-primary, .btn-outline-secondary {
  background: transparent; border: 1px solid var(--mono-metin);
  color: var(--mono-metin); padding: 0.6rem 1.6rem;
}
.btn-outline-dark:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover {
  background: var(--mono-metin); color: #fff; border-color: var(--mono-metin);
}

/* ── Siyah blok bölümler ──────────────────────────────────────── */
.blok-siyah { background: var(--mono-metin); color: #fff; }
.blok-siyah .mikro-etiket { color: #9a9a9a; }
.blok-siyah a { color: #fff; }
.blok-siyah .btn-dark, .blok-siyah .btn-primary {
  background: #fff; border-color: #fff; color: var(--mono-metin);
}
.blok-siyah .btn-dark:hover, .blok-siyah .btn-primary:hover {
  background: transparent; color: #fff;
}
.blok-siyah .btn-outline-dark, .blok-siyah .btn-outline-primary {
  border-color: #fff; color: #fff;
}
.blok-siyah .btn-outline-dark:hover, .blok-siyah .btn-outline-primary:hover {
  background: #fff; color: var(--mono-metin);
}

/* ── Görseller: grayscale → hover'da renk ─────────────────────── */
.gorsel-mono img, img.gorsel-mono,
.gorsel-mono video, video.gorsel-mono {
  filter: grayscale(1);
  transition: filter 0.35s ease;
}
.gorsel-mono:hover img, img.gorsel-mono:hover,
.gorsel-mono:hover video, video.gorsel-mono:hover { filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) {
  .gorsel-mono img, img.gorsel-mono,
  .gorsel-mono video, video.gorsel-mono { transition: none; }
}
.gorsel-mono img, .gorsel-mono video { width: 100%; height: auto; display: block; }

/* ── Hero — balancia.vamtam.com/psychologist hero'sunun uyarlaması ─────────
   Ölçüler canlı sitede getComputedStyle ile alındı (2026-09-02):
     dış kap  margin-top -header-h (header hero'nun üstünde yüzer), padding 0 20px
     kutu     min-height clamp(600px,80vh,1200px) · radius 42px · justify-content flex-end
              zemin: poster görsel (cover) + üstünde autoplay/muted/loop video
     üst şerit min-height 27vh · içerik max 1280px · space-between · gap 3vh
              1. satır align-self flex-start, margin-left 1vw
              2. satır align-self flex-end,   margin-right 7vw
              tipografi Baskervville 80px / 1em / -3px, beyaz; *…* kısımları italik
     alt şerit min-height 23vh · justify-content flex-end · radius 0 0 42px 42px
              ::before → backdrop-filter blur(10px) +
              mask-image linear-gradient(transparent 0%, #000 30%)
     dönen    aynı 80px tipografi, ortalı, blinds animasyonu (harf harf rotateY),
              her kelime 2500ms, harf gecikmesi 50ms, geçiş 0.6s
     not      Manrope 10px/500 · uppercase · letter-spacing 3px · ortalı
     CTA      bg --bh-koyu · 8px açık halka · radius 80px · 14/700
              ok rozeti 33px daire, kap margin-bottom -35px (kutunun dışına taşar)
   ≤1024px: kutu clamp(400px,80vw,800px) / radius 0 0 24px 24px, tipografi 50px
   ≤767px:  kutu min-height 120vw + padding-top 300px, satırlar ortalı, tipografi 35px
   Renkler paletten (--bh-koyu / --bh-mint / --accent) türetilir; sabit hex yok.
   ─────────────────────────────────────────────────────────────────────────── */
.hero-mono {
  position: relative;
  padding: 5px 0 0;   /* kutunun üst kenarı ile ekranın tepesi arasında 5px */
}
/* Header'ın altına kayma yalnız hero sayfanın ilk bloğuysa: bölüm sıralaması
   değişip hero araya düşerse üstündeki bloğun üzerine binmemeli. Header'ın cam
   görünümü de aynı koşula bağlı (site.css: body:has(#main-content > .hero-dark…)). */
#main-content > .hero-mono:first-child { margin-top: calc(-1 * var(--header-h)); }

.hero-kutu {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Yükseklik yalnız GENİŞLİKTEN türüyordu (80vw): telefon yatayda (844x390)
     675px, tablet yatayda 800px çıkıp içeriği ekranın altına itiyordu — ölçüldü,
     başlık top 464 / 559 idi. Artık ekran yüksekliğiyle de sınırlı. svh, mobil
     tarayıcı çubuğu açılıp kapanırken zıplamayı önler; vh eski tarayıcı yedeği. */
  min-height: min(clamp(400px, 80vw, 800px), 92vh);
  min-height: min(clamp(400px, 80vw, 800px), 92svh);
  margin: 0;
  /* overflow YOK: CTA kutunun alt kenarından taşar (Balancia: margin-bottom -35px).
     Kırpma yalnızca .hero-medya'da — köşeler orada yuvarlanır. */
  border-radius: 0 0 24px 24px;
  color: #fff;
  /* Medya yoksa da kutu koyu kalır (header'ın cam hap'ı okunur olsun diye) */
  background: linear-gradient(158deg,
      color-mix(in srgb, var(--bh-koyu) 78%, #000) 0%,
      var(--bh-koyu) 52%,
      color-mix(in srgb, var(--bh-koyu) 86%, #0b1a2a) 100%) center / cover no-repeat;
}
@media (min-width: 1025px) {
  .hero-mono { padding: 5px 20px 0; }
  .hero-kutu { min-height: clamp(600px, 80vh, 1200px); border-radius: 42px; }
}

/* Zemin medyası — kutuyu tamamen kaplar, içeriğin altında kalır */
.hero-medya {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}
.hero-medya video,
.hero-medya img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Metin kontrastı: Balancia'nın videosu zaten koyu; açık bir görselde de okunur kalsın */
.hero-medya::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 8, 14, .55) 0%, rgba(10, 8, 14, .18) 42%, rgba(10, 8, 14, .5) 100%);
}

/* ── Üst şerit: iki kaydırılmış başlık satırı ── */
.hero-ust {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100px;
  padding: 0 20px;
}
.hero-ust-ic {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 3vh;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 1025px) {
  .hero-ust { min-height: 27vh; padding: 0 30px; }
}

.hero-satir {
  margin: 0;
  font-family: var(--font-baslik);
  font-size: clamp(2.1rem, 5.2vw, 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
}
.hero-satir i { font-style: italic; }
@media (min-width: 1025px) {
  .hero-satir--sol { align-self: flex-start; margin-left: 1vw; }
  .hero-satir--sag { align-self: flex-end;   margin-right: 7vw; }
}

/* ── Alt şerit: dönen kelime + not + CTA ── */
.hero-alt {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100px;
  padding: 0 20px;
  border-radius: 0 0 24px 24px;
}
@media (min-width: 1025px) { .hero-alt { border-radius: 0 0 42px 42px; } }
/* Alttaki içeriğin okunurluğu: yukarı doğru sönen bir bulanıklık katmanı */
.hero-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 30%);
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 30%);
}
.hero-alt-ic {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 20px;
}
@media (min-width: 1025px) {
  .hero-alt { min-height: 23vh; padding: 0 30px; }
  .hero-alt-ic { padding-top: 4vh; }
}

/* ── Dönen kelime (Elementor "rotate + blinds" karşılığı) ── */
.hero-donen {
  margin: 0 0 10px;
  text-align: center;
  font-family: var(--font-baslik);
  font-size: clamp(2.1rem, 5.2vw, 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
}
@media (min-width: 1025px) { .hero-donen { margin-bottom: 3vh; } }

.hero-donen-sarmal {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  perspective: 300px;
}
.hero-donen-kelime {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
}
.hero-donen-kelime.is-active { position: relative; opacity: 1; }

.hero-harf {
  display: inline-block;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
.is-active .hero-harf { transform: rotateY(0deg); }
.hero-harf.giris { animation: hero-blinds-in .6s forwards; }
.hero-harf.cikis { animation: hero-blinds-out .6s forwards; }
@keyframes hero-blinds-in  { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } }
@keyframes hero-blinds-out { from { transform: rotateY(0deg); }   to { transform: rotateY(-180deg); } }
@media (prefers-reduced-motion: reduce) {
  .hero-harf, .hero-harf.giris, .hero-harf.cikis { animation: none; transform: none; }
}

/* ── Not satırı ── */
.hero-not {
  max-width: 46rem;
  margin: 0 auto 20px;
  text-align: center;
  font-family: var(--font-govde);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
}
.hero-not p { margin: 0; }
@media (min-width: 1025px) { .hero-not { margin-bottom: 3vh; } }

/* ── CTA — kutunun alt kenarından taşan halkalı hap ── */
.hero-cta-kap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: -35px;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;   /* ikon DOM'da önce, görsel olarak sağda */
  gap: 20px;
  padding: 13px 20px;
  border: 8px solid color-mix(in srgb, var(--bh-mint) 60%, #fff);
  border-radius: 80px;
  background: var(--bh-koyu);
  color: var(--bh-krem);
  font-family: var(--font-govde);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background .3s, color .3s;
}
@media (min-width: 1025px) { .hero-cta { padding: 16px 30px; } }
.hero-cta:hover, .hero-cta:focus-visible {
  background: var(--bh-mint);
  color: var(--bh-metin);
  opacity: 1;
}
.hero-cta-ikon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: -5px -12px -5px 0;
  padding: 7px;
  border-radius: 50%;
  background: var(--bh-mint);
  color: var(--bh-metin);
  transition: background .3s, color .3s;
}
@media (min-width: 1025px) { .hero-cta-ikon { margin: -7px -22px -7px 0; padding: 10px; } }
.hero-cta-ikon svg { width: 13px; height: 13px; fill: currentColor; }
.hero-cta:hover .hero-cta-ikon,
.hero-cta:focus-visible .hero-cta-ikon { background: var(--bh-koyu); color: var(--bh-mint); }

/* 2. CTA — mint hap (header'dan hero'ya taşınan buton; koyu hap'ın ters şeması) */
.hero-cta--mint { background: var(--bh-mint); color: var(--bh-metin); }
.hero-cta--mint .hero-cta-ikon { background: var(--bh-koyu); color: var(--bh-mint); }
.hero-cta--mint:hover, .hero-cta--mint:focus-visible {
  background: var(--bh-koyu);
  color: var(--bh-krem);
}
.hero-cta--mint:hover .hero-cta-ikon,
.hero-cta--mint:focus-visible .hero-cta-ikon { background: var(--bh-mint); color: var(--bh-metin); }

.hero-mono :focus-visible { outline-color: #fff !important; }

/* ── ≤767px: satırlar ortalanır, kutu dikey uzar (Balancia mobil düzeni) ── */
@media (max-width: 767px) {
  .hero-kutu { min-height: min(120vw, 92svh); padding-top: 140px; }
  .hero-ust-ic { align-items: flex-start; gap: 0; }
  .hero-satir--sol, .hero-satir--sag { align-self: center; margin: 0; text-align: center; }
}

/* ── Kısa ve yatay ekran (telefon yatay ~844x390) ─────────────────────────────
   Yükseklik tavanı içeriği ekrana sokuyor ama varsayılan tipografi/boşluk
   ölçüsü 390px'e sığmıyor: başlık clamp'i genişliğe (5.2vw) bağlı olduğundan
   yatayda büyüyor. Burada ölçek yüksekliğe göre kısılır. */
@media (max-height: 600px) and (orientation: landscape) {
  .hero-kutu { padding-top: calc(var(--header-h, 70px) + .5rem); }
  .hero-ust { min-height: auto; }
  .hero-ust-ic { gap: .5rem; }
  .hero-satir { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
  .hero-alt { min-height: auto; }
  .hero-not { font-size: .72rem; letter-spacing: .1em; }
}

/* ── Numaralama (01 02 03…) ───────────────────────────────────── */
.numara {
  font-family: var(--font-baslik);
  font-variant-numeric: tabular-nums;
  color: var(--mono-ikincil);
  font-size: 0.95rem;
  min-width: 2.6rem;
}

/* ── Liste satırı (yazılar, seminerler): hairline + hover kayması ─ */
.satir-link {
  display: block; padding: 1.4rem 0;
  border-top: 1px solid var(--mono-cizgi);
  color: inherit; text-decoration: none;
  transition: padding-left 0.25s ease;
}
.satir-link:hover { padding-left: 0.6rem; color: inherit; }

/* ── Genel nötrleştirme ───────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: 0.06em; }
.text-primary { color: var(--mono-metin) !important; }
a { color: var(--mono-metin); text-underline-offset: 3px; }
.card { border: 0; background: transparent; }
.okuma-govde { max-width: 68ch; }
.okuma-govde img { max-width: 100%; height: auto; }

/* ── Header: mono kuralı UYGULANMAZ ───────────────────────────────
   Eski "beyaz zemin + 1px alt çizgi" header bloğu kaldırıldı: header artık
   balancia.vamtam.com uyarlaması (cam hap + mint CTA + koyu dropdown) ve
   tüm kuralları site.css'teki "Floating Header" bloğunda tek noktada.
   Aşağıdaki köşe/gölge sıfırlama listelerinde de .site-header-* seçicileri
   bilinçli olarak yer almıyor. */

/* ── Footer: siyah blok ───────────────────────────────────────── */
.site-footer {
  background: var(--mono-metin) !important;
  color: #cfcfcf;
  border-top: 0;
}
/* Carried finding (Task 3 review): Footer.cshtml linklerindeki inline
   color:rgba(255,255,255,...) kaldırıldı — taban ton + hover beyaz burada tek noktadan. */
.site-footer a { color: #cfcfcf; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h5, .site-footer h6 {
  color: #fff; font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ── Footer v2 — üstte marka + aksiyon hapları, ortada link dizini, altta yasal ──
   (2026-09-02, Umut'un kararı: bülten formu ve sosyal ikonlar footer'dan kalktı —
   bülten anasayfa bandında, sosyaller SocialDock'ta. Bileşen: Footer.cshtml) */
.footer-ust {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 3.5rem 0 2.5rem;
}
.footer-marka { display: inline-block; }
.footer-marka img { max-height: 48px; display: block; opacity: .9; }
.footer-marka-ad {
  color: #fff;
  font-family: var(--font-baslik);
  font-size: 1.45rem;
  letter-spacing: -.02em;
}
.site-footer a.footer-marka:hover { text-decoration: none; }
.footer-aksiyonlar { display: flex; gap: 12px; flex-wrap: wrap; }
/* Dış hatlı hap — mint hapın koyu zemindeki ikizi */
.footer-hap-dis {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: .7rem 1.5rem;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 60px;
  color: #fff !important;
  font-family: var(--font-govde);
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.footer-hap-dis:hover,
.footer-hap-dis:focus-visible {
  background: var(--bh-mint, #e9fff4);
  border-color: var(--bh-mint, #e9fff4);
  color: var(--bh-metin, #1b1b1b) !important;
}
.site-footer a.hap-btn { color: var(--bh-metin, #1b1b1b); text-decoration: none; }
.site-footer a.hap-btn:hover,
.site-footer a.hap-btn:focus-visible { color: var(--bh-krem, #faf2ea); text-decoration: none; }

.footer-dizin {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 2.5rem 0;
}
.footer-dizin h6 { margin-bottom: 1rem; }
.footer-dizin ul { list-style: none; margin: 0; padding: 0; }
.footer-dizin li a { display: inline-block; padding: .35rem 0; }

/* Sütunlar <details> (2026-09-03, Umut'un isteği): mobilde akordiyon, masaüstünde
   hep açık. Masaüstünde summary tıklanamaz olduğundan kapatılamaz; ok da çıkmaz. */
.footer-grup { border: 0; }
.footer-grup > summary { list-style: none; }
.footer-grup > summary::-webkit-details-marker { display: none; }
.footer-grup > summary h6 { margin-bottom: 1rem; }
@media (min-width: 768px) {
  .footer-grup > summary { pointer-events: none; }
}

@media (max-width: 767px) {
  .footer-ust { flex-direction: column; align-items: flex-start; }
  /* Akordiyonda iki sütun yan yana dururken başlıklar dar kalıyor — tek sütun */
  .footer-dizin { grid-template-columns: 1fr; gap: 0; padding: 1rem 0 1.5rem; }
  .footer-grup + .footer-grup { border-top: 1px solid rgba(255, 255, 255, .1); }
  .footer-grup > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    cursor: pointer;
  }
  .footer-grup > summary h6 { margin: 0; }
  .footer-grup > summary::after {
    content: "";
    width: 9px; height: 9px;
    margin-right: 4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease;
  }
  .footer-grup[open] > summary::after { transform: rotate(-135deg) translateY(2px); }
  .footer-grup > ul { padding-bottom: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-grup > summary::after { transition: none; }
}

.footer-alt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.5rem 0 2rem;
}
.footer-yasal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.4rem;
  font-size: .85rem;
}
.footer-telif { color: rgba(255, 255, 255, .4); font-size: .85rem; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .footer-hap-dis { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FAZ 3 TASK 8 — Görsel kalite turu: kaskad kapatma + son-söz nötrleştirme
   site.css (Apple/mavi tema kalıntısı) ve panel bileşenlerindeki (cookie/dil/
   popup) renk/gölge/köşe/animasyon sızıntıları TEK NOKTADAN kapatılır.
   ═══════════════════════════════════════════════════════════════ */

/* ── site.css token'larını mono paletine kilitle ──────────────────
   site.css'in --bg/--surface/--text/--muted/--border/--accent/--radius/--shadow
   token'larına bağlı HER kural (kart, form, dropdown, modal, footer, badge...)
   bu tek blok sayesinde otomatik mono'ya döner. --accent zaten GorunumKatalogu
   tarafından PaletKodu=mono ile siyaha çekiliyor; burada tutarlılık için tekrar. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #1b1b1b;
  --muted: #6b6b6b;
  --border: #e5e5e5;
  --accent: #1b1b1b;
  --radius: 0;
  --shadow: none;
}

/* ── Köşe sıfırlama: genişletilmiş liste (Bootstrap rounded-* ailesi + tema sınıfları) ── */
.rounded-0, .rounded-1, .rounded-2, .rounded-4, .rounded-5,
.rounded-circle, .rounded-top, .rounded-end, .rounded-bottom, .rounded-start,
.page-link, .filtre-hap,
.blog-content img, .prose img,
.uf-print, .uf-teklif,
.sp-box, .sp-badge, .sp-close, .sp-cta, .sp-divider,
.dil-fab .btn, .dil-fab .dropdown-menu, .dil-fab .dropdown-item,
.nav-link, .dropdown-item {
  border-radius: 0 !important;
}
/* Vendor-önekli pseudo-element ayrı kuralda — tanımadığı bir seçici yüzünden
   tarayıcının tüm grubu geçersiz saymasını (eski davranış) riske etmemek için. */
::-webkit-scrollbar-thumb { border-radius: 0 !important; }

/* ── Placeholder metni: site.css'in hardcoded #6c757d'si (hafif mavi tonlu gri,
   tam achromatic değil) yerine kontrat ikincil tonu — her form alanında render olur. ── */
::placeholder { color: var(--mono-ikincil) !important; opacity: 1; }

/* ── Klavye odak çerçevesi (Faz 3 Task 8 re-review): site.css'in
   :focus-visible{outline:3px solid #0071e3;border-radius:2px} kuralı hardcoded
   hex olduğu için --accent token-kilidiyle düzelmiyor; her klavye-odaklı öğede
   (her sayfa) doğrudan çakışıyordu. Genişlik/offset (erişilebilirlik) korunur,
   yalnız renk/köşe mono'ya çekilir. */
:focus-visible {
  outline-color: var(--mono-metin) !important;
  border-radius: 0 !important;
}

/* ── Koyu zemin istisnası (final-review Finding 2): #1b1b1b arka planlı bloklarda
   (blok-siyah, footer, çerez banner'ı) --mono-metin rengiyle çizilen odak
   çerçevesi neredeyse görünmez oluyor (WCAG 2.4.7). Bu yüzeylerde beyaza döner. */
.blok-siyah :focus-visible,
.site-footer :focus-visible,
#cookieBanner :focus-visible {
  outline-color: #fff !important;
}

/* ── Gölge sıfırlama: genişletilmiş liste ──
   Carried finding (Task 2 review): .product-card:hover / .category-card:hover
   kendi !important gölgesiyle (specificity 0,2,0) .card'ın sıfırlamasını
   (0,1,0) eziyordu — aynı seçiciler burada doğrudan hedefleniyor. */
.product-card:hover, .category-card:hover,
.form-control:focus, .form-select:focus,
.modal-content,
.uf-print, .uf-teklif,
.sp-box, .sp-close {
  box-shadow: none !important;
}

/* ── Hover'da transform/scale/translate kaldırılır (kural yalnız renk/çizgi geçişine izin verir) ── */
.card:hover, .product-card:hover, .product-card:hover img, .category-card:hover,
.btn:hover, .btn:active, .sp-cta:hover {
  transform: none !important;
}

/* ── Yüzen öğeler: ambient animasyon yok (yalnız hover + fade-up serbest).
   Eski WhatsApp FAB kaldırıldı — yerine geçen SocialDock (site.css) zemin rengini
   --bh-koyu → var(--accent) zincirinden alır; mono palette otomatik siyaha düşer. ── */

/* ── Bootstrap semantik renkleri (success/warning/danger/info) → mono ──
   Rozet/uyarı/buton varyantları tek renge (siyah/beyaz) çekilir; anlam artık
   renkle değil ikon/şekil/kalın metinle taşınır. */
.badge { background-color: var(--mono-metin) !important; color: #fff !important; }
.text-success, .text-warning, .text-danger, .text-info { color: var(--mono-metin) !important; }
.text-muted { color: var(--mono-ikincil) !important; }
.alert-success, .alert-warning, .alert-danger, .alert-info {
  background: #fff !important; color: var(--mono-metin) !important;
  border: 1px solid var(--mono-metin) !important;
}
.btn-success, .btn-danger, .btn-warning, .btn-info {
  background: var(--mono-metin); border-color: var(--mono-metin); color: #fff;
}
.btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover {
  background: transparent; color: var(--mono-metin); border-color: var(--mono-metin);
}
.bg-light { background-color: var(--mono-zemin) !important; }

/* ── Tanıtım Bandı — balancia.vamtam.com/psychologist tanıtım bölümü uyarlaması ──
   Ölçüler canlı sitenin post-19.css'inden alındı (2026-09-02, data-id f3ccf74):
     ızgara    ≥768px iki eşit sütun; fotoğraf sütununda sol içe pay ~%16
     içerik    ikon 30px → başlık (h2, serif) → mikro etiket → serif paragraf → buton
     fotoğraf  radius 24px · min-height 550px (≤1024: 500px, ≤767: 100vw, üstte)
     ışıma     arka planda ~580px daire, palet açık rengi, yumuşak yayılım
     buton     14/700 gövde fontu + 33px daire rozet (açık zemin, koyu ok);
               hover'da rozet koyu zemine döner — header CTA'sının ters şeması
   Renkler paletten (--bh-koyu / --bh-mint / --accent-alt) türetilir; sabit hex yok.
   İçerik: Admin → Banner Yönetimi → "Tanıtım Bandı" (bileşen: TanitimBant.cshtml). */
.tanitim-mono {
  position: relative;
  overflow: hidden; /* ışıma taşması yatay kaydırma yaratmasın */
  padding: clamp(4.5rem, 10vh, 8rem) 0;
}
.tanitim-glow {
  position: absolute;
  left: 55%;
  top: 50%;
  width: min(580px, 60vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent-alt, #e9fff4);
  box-shadow: 0 0 200px 100px var(--accent-alt, #e9fff4);
  opacity: .55;
  pointer-events: none;
}
.tanitim-izgara {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 768px) {
  .tanitim-izgara {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2.5rem, 8vw, 7rem);
  }
}

.tanitim-marka {
  display: block;
  width: auto;
  height: 34px;
  margin-bottom: 1.8rem;
}
.tanitim-icerik h2 { margin: 0 0 0.6rem; }
.tanitim-etiket { margin-bottom: 1.8rem; }
.tanitim-metin {
  margin: 0 0 2rem;
  max-width: 46ch;
  font-family: var(--font-baslik);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.45;
}

/* Tanitim bölüm tipi ekleri (/hakkimda — _BolumTanitim.cshtml):
   --ters = görsel solda (ayna); --serbest = görsel kendi oranında (kapaklar kırpılmaz);
   .tanitim-prose = çok paragraflı serif akış metni (bandın tek paragraf ölçüsünden küçük) */
@media (min-width: 768px) {
  .tanitim-izgara--ters .tanitim-medya { order: -1; }
}
.tanitim-medya--serbest { width: 100%; max-width: 460px; margin: 0 auto; position: static; }
.tanitim-foto-serbest {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}
.tanitim-prose {
  font-family: var(--font-baslik);
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.65;
  max-width: 56ch;
}
.tanitim-prose p { margin: 0 0 1rem; }
.tanitim-prose p:last-child { margin-bottom: 0; }
.tanitim-icerik .tanitim-btn,
.tanitim-icerik .kitap-butonlar { margin-top: 1.4rem; }

/* İç sayfa breadcrumb alanı: dikey pay sıfır (Umut'un kararı, 2026-09-02) */
.tp-breadcrumb-area { padding: 0 !important; }

/* CTA kutusu — tema dili: krem zemin + 24px köşe (Balancia ailesi istisnası) */
.cta-kutu {
  background: var(--bh-krem, #faf2ea);
  border-radius: 24px;
}
.cta-butonlar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Açık zemin üstü dış hatlı hap — .hap-btn'in ikizi (tasarım bütünlüğü: köşeler yuvarlak) */
.hap-btn--dis {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: .7rem 1.5rem;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--mono-metin) 35%, transparent);
  border-radius: 60px;
  background: transparent;
  color: var(--mono-metin);
  font-family: var(--font-govde);
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.hap-btn--dis:hover,
.hap-btn--dis:focus-visible {
  background: var(--bh-koyu, #352a44);
  border-color: var(--bh-koyu, #352a44);
  color: var(--bh-krem, #faf2ea);
}
@media (prefers-reduced-motion: reduce) { .hap-btn--dis { transition: none; } }

/* Buton: metin + daire ok rozeti (header CTA şemasının tersi: açık rozet, koyu ok) */
.tanitim-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-govde);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--mono-metin);
  text-decoration: none;
}
.tanitim-btn:hover .tanitim-btn-metin,
.tanitim-btn:focus-visible .tanitim-btn-metin { text-decoration: underline; text-underline-offset: 4px; }
.tanitim-btn-rozet {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: var(--bh-mint, #e9fff4);
  color: var(--bh-koyu, #352a44);
  transition: background 0.25s ease, color 0.25s ease;
}
.tanitim-btn:hover .tanitim-btn-rozet,
.tanitim-btn:focus-visible .tanitim-btn-rozet {
  background: var(--bh-koyu, #352a44);
  color: var(--bh-mint, #e9fff4);
}

.tanitim-foto {
  display: block;
  width: 100%;
  height: clamp(500px, 64vh, 660px);
  object-fit: cover;
  border-radius: 24px;
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* Balancia: tablet'te fotoğraf yapışkan — metin kayarken görsel görünür kalır */
  .tanitim-medya { position: sticky; top: calc(var(--header-h, 70px) + 20px); }
  .tanitim-foto { height: 500px; }
}
@media (max-width: 767px) {
  .tanitim-medya { order: -1; } /* mobilde fotoğraf üstte (kaynaktaki order hilesi) */
  .tanitim-foto { height: 100vw; object-position: top center; }
  .tanitim-mono { padding: 2.75rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tanitim-btn-rozet { transition: none; }
}

/* ── Özellikler Bandı — balancia /psychologist "Why to choose me" (528f968) uyarlaması ──
   Ölçüler post-19.css'ten (2026-09-02): ortalı h2 + mikro etiket (alt boşluk 50/20/10px);
   3 kart 25% genişlik, arada 1px dikey ayraç (30px yan pay; kaynakta #0000001A);
   kart görseli 170px genişlik / 190px yükseklik contain (tablet 160, mobil 120);
   mobilde kartlar alt alta, ayraç yatay. Renkler token'dan; içerik Banner Yönetimi →
   "Özellikler Bandı" (bileşen: OzelliklerBant.cshtml). */
.ozellikler-mono .ozellikler-baslik {
  margin: 0 0 .6rem;
  text-align: center;
}
.ozellikler-etiket {
  text-align: center;
  margin-bottom: 50px;
}
.ozellikler-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.ozellikler-kart {
  padding: 0 30px;
  text-align: center;
}
.ozellikler-kart + .ozellikler-kart { border-left: 1px solid var(--mono-cizgi); }
.ozellikler-gorsel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  margin-bottom: 26px;
}
.ozellikler-foto {
  width: auto;
  max-width: 170px;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ozellikler-kart-baslik {
  font-size: 1.35rem;
  margin: 0 0 12px;
}
.ozellikler-metin {
  max-width: 32ch;
  margin: 0 auto;
  color: var(--mono-ikincil);
}
@media (max-width: 1024px) {
  .ozellikler-etiket { margin-bottom: 20px; }
  .ozellikler-kart { padding: 0 14px; }
  .ozellikler-gorsel { height: 160px; }
  .ozellikler-foto { max-width: 160px; }
}
@media (max-width: 767px) {
  .ozellikler-etiket { margin-bottom: 10px; }
  .ozellikler-izgara { grid-template-columns: 1fr; }
  .ozellikler-kart { padding: 24px 20px; }
  .ozellikler-kart + .ozellikler-kart { border-left: 0; border-top: 1px solid var(--mono-cizgi); }
  .ozellikler-gorsel { height: 120px; margin-bottom: 16px; }
}

/* ── Yazılar — beyaz zeminde editoryal "öne çıkan + liste" düzeni ─────────
   Koyu kutu + otomatik carousel kaldırıldı (Umut'un kararı, 2026-09-02):
   koyu çapa hero'da kalır, yazılar mono sözleşmenin tipografik diline döner.
   Solda son yazı (24px köşeli 3/2 görsel + mikro etiket + büyük serif başlık +
   2 satır özet), sağda numaralı hairline satırlar (.satir-link/.numara yeniden
   kullanılır). Hareket yalnız hover'da (görsel zoom, ok kayması).
   Başlık/etiket Banner Yönetimi → "Yazılar — Bölüm Başlığı";
   bileşen: BlogList.cshtml. */
.yazilar-ust {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2.4rem;
}
.yazilar-ust h2 { margin: 0; }
.yazilar-tumu {
  color: var(--mono-metin);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.yazilar-tumu:hover,
.yazilar-tumu:focus-visible { text-decoration: underline; text-underline-offset: 4px; color: var(--mono-metin); }

.yazilar-duzen { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 992px) {
  .yazilar-duzen { grid-template-columns: 11fr 9fr; column-gap: clamp(2.5rem, 6vw, 5rem); }
}

/* Öne çıkan (son yazı) */
.yazilar-one { display: block; color: inherit; text-decoration: none; }
.yazilar-one:hover,
.yazilar-one:focus-visible { color: inherit; }
.yazilar-one-gorsel { border-radius: 24px; overflow: hidden; margin-bottom: 1.4rem; }
/* Mobilde gizli (2026-09-03, Umut'un kararı): 375px ekranda 351x667px, yani tam
   bir ekran dolusu yer kaplıyordu. Görsel loading="lazy" olduğundan display:none
   iken hiç görüntü alanına girmiyor — indirilmiyor da. */
@media (max-width: 767px) {
  .yazilar-one-gorsel { display: none; }
}
.yazilar-one-foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.yazilar-one:hover .yazilar-one-foto,
.yazilar-one:focus-visible .yazilar-one-foto { transform: scale(1.03); }
.yazilar-one-baslik {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 .6rem;
}
.yazilar-one:hover .yazilar-one-baslik,
.yazilar-one:focus-visible .yazilar-one-baslik { text-decoration: underline; text-underline-offset: 4px; }
.yazilar-one-ozet {
  margin: 0;
  color: var(--mono-ikincil);
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta satırı (kategori · tarih) — öne çıkanda ve liste satırlarında */
.yazilar-meta {
  font-family: var(--font-govde);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mono-ikincil);
  margin: 0 0 .4rem;
}

/* Sağ sütun: numaralı tipografik satırlar (8 satır — genel .satir-link'ten
   daha sıkı dikey ritim, öne çıkan blokla boy dengesi için) */
.yazilar-liste .satir-link { padding: 0.85rem 0; }
.yazilar-liste .satir-link:last-child { border-bottom: 1px solid var(--mono-cizgi); }
.yazilar-liste .yazilar-meta { margin-bottom: .2rem; }
.yazilar-satir-baslik { font-size: 1.15rem; line-height: 1.3; margin: 0; }
.yazilar-ok { transition: transform .25s ease; }
.satir-link:hover .yazilar-ok,
.satir-link:focus-visible .yazilar-ok { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .yazilar-one-foto, .yazilar-ok { transition: none; }
  .yazilar-one:hover .yazilar-one-foto { transform: none; }
}

/* ── Ortak mint hap buton — kitap/akademi/bülten bantlarının CTA'sı ──────────
   Header CTA'sı ve hero mint hapıyla aynı aile; bölüm bantlarında tek buton dili. */
.hap-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: .7rem 1.5rem;
  border: 0;
  border-radius: 60px;
  background: var(--bh-mint, #e9fff4);
  color: var(--bh-metin, #1b1b1b);
  font-family: var(--font-govde);
  font-size: .9rem;
  font-weight: 700;
  min-height: 44px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease;
}
.hap-btn:hover,
.hap-btn:focus-visible {
  background: var(--bh-koyu, #352a44);
  color: var(--bh-krem, #faf2ea);
}

/* ── Kitap Vitrini — krem kutuda ön+arka kapak kompozisyonu ──────────────────
   İçerik Banner Yönetimi → "Kitap Vitrini"; bileşen KitapTanitim.cshtml.
   Ön kapak önde hafif sola dönük, arka kapak arkada sağa dönük; hover'da
   yelpaze gibi açılırlar (yalnız hover — mono sözleşme). */
.kitap-kutu {
  background: var(--bh-krem, #faf2ea);
  border-radius: 24px;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 992px) {
  .kitap-kutu { grid-template-columns: 5fr 7fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.kitap-kapak-kap { position: relative; max-width: 300px; margin: 0 auto; }
.kitap-kapak { border-radius: 10px; overflow: hidden; transition: transform .35s ease; }
.kitap-kapak-foto { width: 100%; height: auto; display: block; }
.kitap-kapak--on { position: relative; z-index: 2; transform: rotate(-3deg); }
.kitap-kapak--arka { position: absolute; inset: 0; z-index: 1; transform: rotate(5deg) translateX(9%); }
.kitap-kapak-kap:hover .kitap-kapak--on,
.kitap-kapak-kap:focus-within .kitap-kapak--on { transform: rotate(-6deg) translateX(-34%); }
.kitap-kapak-kap:hover .kitap-kapak--arka,
.kitap-kapak-kap:focus-within .kitap-kapak--arka { transform: rotate(2deg) translateX(30%); }
/* Arka kapak yoksa tek kapak dik durur */
.kitap-kapak-kap:not(:has(.kitap-kapak--arka)) .kitap-kapak--on { transform: none; }
.kitap-baslik { margin: 0 0 .8rem; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.kitap-alinti {
  font-family: var(--font-baslik);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  margin: 0 0 1rem;
}
.kitap-metin { color: var(--mono-ikincil); max-width: 55ch; margin: 0 0 1.8rem; }
.kitap-butonlar { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.kitap-link {
  color: var(--mono-metin);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--mono-cizgi);
  padding-bottom: 2px;
  transition: border-color .25s ease;
}
.kitap-link:hover,
.kitap-link:focus-visible { color: var(--mono-metin); border-color: var(--mono-metin); }
@media (max-width: 767px) {
  .kitap-kapak-kap { max-width: 240px; }
  .kitap-icerik { text-align: center; }
  .kitap-metin { margin-left: auto; margin-right: auto; }
  .kitap-butonlar { justify-content: center; }
}

/* ── Danışmanlık Kartları — iki büyük kart + "tümü" linki ────────────────────
   İçerik Banner Yönetimi → "Danışmanlık Kartları"; bileşen DanismanlikKartlari.cshtml.
   Kart hairline çerçeveli 24px kutu; hover'da mint zemine döner, ok rozeti koyu. */
.danis-baslik { text-align: center; margin: 0 0 .6rem; }
.danis-etiket { text-align: center; margin-bottom: 40px; }
.danis-izgara {
  display: grid;
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}
@media (min-width: 768px) { .danis-izgara { grid-template-columns: 1fr 1fr; } }
.danis-kart {
  position: relative;
  display: block;
  padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.4rem, 3vw, 2.4rem) 4.2rem;
  border: 1px solid var(--mono-cizgi);
  border-radius: 24px;
  color: inherit;
  text-decoration: none;
  text-align: center;
  transition: background .25s ease, border-color .25s ease;
}
.danis-kart:hover,
.danis-kart:focus-visible { background: var(--bh-mint, #e9fff4); border-color: var(--bh-mint, #e9fff4); color: inherit; }
.danis-gorsel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  margin-bottom: 1.4rem;
}
.danis-foto { width: auto; max-width: 150px; height: 100%; object-fit: contain; display: block; }
.danis-kart-baslik { font-size: 1.45rem; margin: 0 0 .6rem; }
.danis-metin { color: var(--mono-ikincil); max-width: 40ch; margin: 0 auto; }
.danis-kart:hover .danis-metin,
.danis-kart:focus-visible .danis-metin { color: var(--mono-metin); }
.danis-rozet {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: var(--bh-koyu, #352a44);
  color: var(--bh-mint, #e9fff4);
}
.danis-tumu-kap { text-align: center; margin-top: 2.2rem; }
.danis-tumu { color: var(--mono-metin); text-decoration: none; font-weight: 600; }
.danis-tumu:hover,
.danis-tumu:focus-visible { text-decoration: underline; text-underline-offset: 4px; color: var(--mono-metin); }

/* ── Akademi / Kütüphanem Bandı — solda metin + CTA, sağda çizgi illüstrasyon ─
   .akademi-* yerleşim sınıfları İKİ bant tarafından paylaşılır: AkademiBlok.cshtml
   ve KutuphaneBant.cshtml. Metin/görsel/buton Banner Yönetimi'nden ("Akademi
   Bandı" / "Kütüphanem Bandı"); görsel yoksa tek sütunlu şerit. */
.akademi-duzen { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) {
  .akademi-duzen--gorselli {
    grid-template-columns: 1fr 1fr;   /* görseldeki onaylı düzen: iki eşit yarı */
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}
/* İllüstrasyon kırpılmaz: SVG kompozisyon (yatay elips) kendi oranında, ortalı */
.akademi-gorsel { max-width: 640px; margin: 0 auto; width: 100%; }
.akademi-foto {
  width: 100%;
  height: auto;
  display: block;
}
.akademi-cta { margin-top: 1.6rem; }
.akademi-serit {
  display: flex;
  align-items: center;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  flex-wrap: wrap;
}
.akademi-tarih {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 112px;
  padding: 1.1rem 1.6rem;
  border: 1px solid var(--mono-cizgi);
  border-radius: 18px;
}
.akademi-gun {
  font-family: var(--font-baslik);
  font-size: 3rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.akademi-ay {
  margin-top: .35rem;
  font-family: var(--font-govde);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mono-ikincil);
}
.akademi-icerik { flex: 1 1 320px; }
.akademi-baslik { margin: 0 0 .7rem; }
.akademi-metin { color: var(--mono-ikincil); max-width: 56ch; margin: 0; }
.akademi-seminer { margin: .8rem 0 0; }
.akademi-cta { flex: 0 0 auto; }

/* Kütüphanem: bant AYNADIR — illüstrasyon solda, metin+CTA sağda (Umut'un kararı) */
@media (min-width: 992px) {
  .kutuphane-mono .akademi-gorsel { order: -1; }
}

/* Kütüphanem: kitap kapak şeridi (vitrin işaretli kitaplar; 16 kapak = 8x2 sıra, 2026-09-05) */
.kutuphane-raf {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 14px;
  margin-top: 2.5rem;
}
@media (max-width: 991px) { .kutuphane-raf { grid-template-columns: repeat(4, 1fr); } }
.kutuphane-kapak { display: block; position: relative; }
/* "Şu an okuyorum" kurdelesi — kapak üstünde koyu yer imi
   (2026-09-05: mint, gri tonlu kapaklarda kayboluyordu; koyu yüzey + krem metin — Umut'un isteği) */
.kutuphane-kurdele {
  position: absolute;
  top: 10px;
  left: -6px;
  z-index: 1;
  padding: 3px 10px;
  border-radius: 0 4px 4px 0;
  background: var(--bh-koyu, #352a44);
  color: var(--bh-krem, #faf2ea);
  font-family: var(--font-govde);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kutuphane-kapak-foto {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.kutuphane-kapak-bos {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  padding: .5rem;
  border: 1px solid var(--mono-cizgi);
  border-radius: 8px;
  color: var(--mono-ikincil);
  font-size: .8rem;
  text-align: center;
}
@media (max-width: 767px) {
  .kutuphane-raf { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* ── Bülten Bandı — sitedeki bülten kaydına bağlı ortalı form ────────────────
   Metinler Banner Yönetimi → "Bülten Bandı"; uç POST /bulten-kayit (footer'la aynı).
   Bileşen BultenBant.cshtml. */
.bulten-kutu { max-width: 620px; margin: 0 auto; text-align: center; }
.bulten-etiket { text-align: center; }
.bulten-baslik { margin: 0 0 .6rem; }
.bulten-metin { color: var(--mono-ikincil); margin: 0 0 1.6rem; }
.bulten-form {
  position: relative;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.bulten-input {
  flex: 1 1 260px;
  max-width: 340px;
  min-height: 44px;
  padding: .7rem 1.2rem;
  border: 1px solid var(--mono-cizgi);
  border-radius: 60px;
  background: #fff;
  color: var(--mono-metin);
  font-family: var(--font-govde);
  font-size: .95rem;
}
.bulten-input:focus {
  outline: 2px solid var(--bh-koyu, #352a44);
  outline-offset: 2px;
  border-color: var(--bh-koyu, #352a44);
}
.bulten-sonuc { margin: .9rem 0 0; min-height: 1.2em; font-size: .9rem; }
.bulten-sonuc.is-hata { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .hap-btn, .kitap-kapak, .kitap-link, .danis-kart { transition: none; }
  .kitap-kapak-kap:hover .kitap-kapak--on { transform: rotate(-3deg); }
  .kitap-kapak-kap:hover .kitap-kapak--arka { transform: rotate(5deg) translateX(9%); }
}

/* ── Blog liste — 2'li kart ızgara + kategori hapları (ana sayfa dili) ────────
   (2026-09-02, Umut'un revizesi: tekrar başlıklar yok, açıklama basılmaz;
   sağda hap filtreler + son 10 yazı. Görünüm: Views/Blog/Index.cshtml) */
.blogx-izgara { display: grid; gap: 2.2rem 1.4rem; }
@media (min-width: 768px) { .blogx-izgara { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .blogx-izgara { grid-template-columns: 1fr 1fr 1fr; } }
.blogx-kart { display: block; color: inherit; text-decoration: none; }
.blogx-kart:hover, .blogx-kart:focus-visible { color: inherit; }
.blogx-gorsel {
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: .9rem;
  aspect-ratio: 3 / 2;   /* kart yüksekliği sabit — dikey (story) görseller kırpılır */
}
.blogx-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.blogx-kart:hover .blogx-foto,
.blogx-kart:focus-visible .blogx-foto { transform: scale(1.03); }
.blogx-baslik {
  font-size: 1.12rem;
  line-height: 1.35;
  margin: 0;
  /* Standart yükseklik: başlık 2 satırla sınırlı, kart hizası bozulmaz */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.35em);
}
.blogx-kart:hover .blogx-baslik,
.blogx-kart:focus-visible .blogx-baslik { text-decoration: underline; text-underline-offset: 4px; }

/* Kategori filtreleri — hap dili (aktif: koyu zemin + krem metin) */
.kategori-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2.4rem; }
.kategori-hap {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: .3rem 1rem;
  border: 1px solid var(--mono-cizgi);
  border-radius: 60px;
  color: var(--mono-metin);
  font-family: var(--font-govde);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.kategori-hap:hover,
.kategori-hap:focus-visible { border-color: var(--mono-metin); color: var(--mono-metin); }
.kategori-hap.is-aktif {
  background: var(--bh-koyu, #352a44);
  border-color: var(--bh-koyu, #352a44);
  color: var(--bh-krem, #faf2ea);
}

/* Son yazılar (kenar çubuğu) — küçük görselli hairline satırlar */
.blogx-yan-satir { padding: .8rem 0; }
.blogx-yan-link {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: inherit;
  text-decoration: none;
}
.blogx-yan-link:hover .blogx-yan-baslik,
.blogx-yan-link:focus-visible .blogx-yan-baslik { text-decoration: underline; text-underline-offset: 3px; }
.blogx-mini { flex: 0 0 56px; }
.blogx-mini-foto {
  width: 56px;
  height: 56px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
.blogx-yan-baslik { font-size: .92rem; font-weight: 600; line-height: 1.35; color: var(--mono-metin); }
@media (prefers-reduced-motion: reduce) {
  .blogx-foto, .kategori-hap { transition: none; }
  .blogx-kart:hover .blogx-foto { transform: none; }
}

/* ── Akademi + İletişim iç sayfaları — ana sayfa dili (2026-09-02) ───────────
   Akademi: seminer satırları anasayfa Akademi bandının tarih bloğunu kullanır;
   kilitli içerik hap rozetle. İletişim: solda krem panel + WhatsApp hap + harita,
   sağda yumuşak köşeli form (.form-yumusak — mono'nun köşe sıfırlamasını bu
   sayfada bilinçli olarak ezer; tasarım bütünlüğü kararı: köşeler yuvarlak). */
.seminer-satir {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  padding: 1.6rem 0;
  flex-wrap: wrap;
}
.seminer-satir .flex-grow-1 { min-width: 260px; }
.seminer-aksiyon { flex: 0 0 auto; }
.kilit-rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .35rem .95rem;
  min-height: 38px;
  border: 1px solid var(--mono-cizgi);
  border-radius: 60px;
  color: var(--mono-ikincil);
  font-family: var(--font-govde);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}
.video-kutu { border-radius: 24px; overflow: hidden; }

.iletisim-panel,
.uye-panel {
  background: var(--bh-krem, #faf2ea);
  border-radius: 24px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
/* Üye panelindeki linkler + tam genişlik hap (giriş/kayıt sayfaları) */
.uye-link { color: var(--mono-metin); text-decoration: none; }
.uye-link:hover,
.uye-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; color: var(--mono-metin); }
.hap-btn--tam { width: 100%; justify-content: center; }
.iletisim-satir {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin-bottom: .8rem;
}
.iletisim-satir i { color: var(--bh-koyu, #352a44); font-size: 1.05rem; flex: 0 0 auto; margin-top: .1rem; }
.iletisim-satir a { color: var(--mono-metin); text-decoration: none; }
.iletisim-satir a:hover,
.iletisim-satir a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.iletisim-panel .hap-btn { margin-bottom: 1.2rem; }
.harita-kutu { border-radius: 24px; overflow: hidden; margin-top: 1.2rem; }
.harita-kutu iframe { width: 100%; border: 0; display: block; }

/* Yumuşak köşeli form — mono'nun .form-control köşe sıfırlaması bu kapsamda ezilir */
.form-yumusak .form-control {
  border-radius: 14px !important;
  border-color: var(--mono-cizgi);
  padding: .65rem 1rem;
  min-height: 44px;
}
.form-yumusak textarea.form-control { border-radius: 18px !important; min-height: auto; }
.form-yumusak .form-control:focus {
  border-color: var(--bh-koyu, #352a44);
  box-shadow: none;
  outline: 2px solid var(--bh-koyu, #352a44);
  outline-offset: 1px;
}

/* ── Blog kenar çubuğu: yapışkan bar + satış panelleri (2026-09-02) ──────────
   Bar aşağı inildikçe takip eder; kitap paneli Banner Yönetimi kitap-vitrin
   verisinden (kapak + satın alma linkleri), danışmanlık paneli danismanlik
   bölgesinden beslenir. */
@media (min-width: 992px) {
  .blogx-yan { position: sticky; top: calc(var(--header-h, 70px) + 20px); }
}
.yan-panel {
  background: var(--bh-krem, #faf2ea);
  border-radius: 24px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: center;
}
.yan-panel .mikro-etiket { text-align: left; }
.yan-panel--yatay { text-align: left; }
.yan-kitap-duzen { display: flex; gap: 1.1rem; align-items: flex-start; }
.yan-kitap-sag { flex: 1 1 auto; min-width: 0; }
.yan-kitap-kapak { display: block; flex: 0 0 110px; max-width: 110px; }
.yan-kitap-foto {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  transition: transform .3s ease;
}
.yan-kitap-kapak:hover .yan-kitap-foto,
.yan-kitap-kapak:focus-visible .yan-kitap-foto { transform: translateY(-4px); }
.yan-kitap-ad {
  font-family: var(--font-baslik);
  font-size: 1.15rem;
  margin-bottom: .8rem;
}
.yan-kitap-linkler {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
}
.yan-kitap-linkler { width: 100%; }
.yan-kitap-linkler .hap-btn,
.yan-kitap-linkler .hap-btn--dis {
  width: 100%;
  max-width: 220px;
  justify-content: center;
  padding: .55rem 1rem;
  font-size: .85rem;
  min-height: 40px;
}
.yan-danis-foto {
  width: auto;
  max-width: 200px;
  height: 140px;
  object-fit: contain;
  display: block;
  margin: 0 auto .6rem;
}
.yan-danis-baslik {
  font-family: var(--font-baslik);
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: .9rem;
}
@media (prefers-reduced-motion: reduce) { .yan-kitap-foto { transition: none; } }

/* ── Kütüphanem sayfası — kapak kartları + yumuşak filtreler (2026-09-02) ────
   Kart: 10px köşeli kapak (anasayfa şeridiyle aynı), SuAnOkuyorum kurdelesi
   .kutuphane-kurdele'den gelir. Filtre select'leri .form-yumusak kapsamında
   yuvarlak köşeli (tasarım bütünlüğü kararı). */
.form-yumusak .form-select {
  border-radius: 14px !important;
  border-color: var(--mono-cizgi);
  padding: .6rem 2.2rem .6rem 1rem;
  min-height: 44px;
}
.form-yumusak .form-select:focus {
  border-color: var(--bh-koyu, #352a44);
  box-shadow: none;
  outline: 2px solid var(--bh-koyu, #352a44);
  outline-offset: 1px;
}
.ktp-kart { color: var(--mono-metin); }
.ktp-foto {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
.ktp-bos {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--mono-cizgi);
  border-radius: 10px;
  color: var(--mono-ikincil);
  font-size: 2rem;
}
.ktp-ad { font-weight: 600; font-size: .92rem; line-height: 1.3; margin-top: .6rem; }
.ktp-yazar { font-size: .82rem; color: var(--mono-ikincil); }


/* İletişim paneli — formsuz geniş/ortalı kullanım (2026-09-02, Umut'un kararı) */
.iletisim-panel--genis { text-align: center; }
.iletisim-panel--genis .mikro-etiket { text-align: center; }
.iletisim-panel--genis .iletisim-satir { justify-content: center; }
.iletisim-panel--genis .harita-kutu { margin-top: 1.6rem; }

/* ── 4'lü ızgara varyantı + "Diğer Yazılar" akan şeridi (2026-09-02) ─────────
   --4: hizmetler listesi ve detay altı "diğerleri" ızgarası (Umut'un kararı).
   .dgr-akis: blog detay sonunda otomatik akan tek satır carousel — davranış
   Blog/Detail.cshtml script'inde (hover/odak duraklatır, reduced-motion kapatır). */
@media (min-width: 992px) {
  .blogx-izgara--4 { grid-template-columns: repeat(4, 1fr); }
}
.dgr-akis {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dgr-akis::-webkit-scrollbar { display: none; }
.dgr-akis-ic {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 260px;
  gap: 16px;
  align-items: start;
}
.dgr-akis .blogx-baslik { font-size: 1rem; }

/* ── Kütüphanem filtresi — arama + açılır facet hapları (2026-09-03, Umut'un revizesi) ──
   Eski dört iç-kaydırmalı hap tepsisi kaldırıldı: 404 yazarın ancak ~12'sini
   gösteriyor, alfabetik sıra yüzünden en üste en az okunanı koyuyor ve ilk kapak
   görünmeden ~500px yer kaplıyordu. Yeni yapı: tam genişlik arama hapı + dört
   açılır facet (panel içinde yazarak süzme, liste adede göre sıralı) + seçim
   rozetleri. Görünüm: Views/Kitap/Index.cshtml */
.kfiltre { display: grid; gap: .75rem; }
/* Grid/flex öğeleri varsayılan olarak min-width:auto ile içeriklerinin
   min-content genişliğinin altına inmez — 320px ekranda çubuk 321px'e çıkıp
   sayfayı yatay kaydırılır yapıyordu (ölçüldü). Sıfırlanınca hap metni
   ellipsis'e, facet ızgarası sarmaya düşüyor. */
.kfiltre > *,
.kfiltre-facetler > *,
.kfiltre-hap { min-width: 0; }

/* Arama — 904 kitapta birincil araç, tam genişlik hap */
.kfiltre-ara {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .4rem .4rem 1.1rem;
  border: 1px solid var(--mono-cizgi);
  border-radius: 60px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kfiltre-ara:focus-within {
  border-color: var(--bh-koyu, #352a44);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bh-koyu, #352a44) 12%, transparent);
}
.kfiltre-ara-ikon { flex: 0 0 auto; color: var(--mono-ikincil); font-size: 1rem; }
.kfiltre-ara-giris {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--mono-metin);
  font-family: var(--font-govde);
  font-size: 1rem;              /* 16px — iOS odakta otomatik yakınlaştırmasın */
}
.kfiltre-ara-giris:focus { outline: none; }
.kfiltre-ara-giris::placeholder { color: var(--mono-ikincil); }
.kfiltre-ara-btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 60px;
  background: var(--bh-koyu, #352a44);
  color: var(--bh-krem, #faf2ea);
  font-family: var(--font-govde);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s ease;
}
.kfiltre-ara-btn:hover, .kfiltre-ara-btn:focus-visible { opacity: .86; }

/* Facet hapları — tek satır, gerekirse sarar */
.kfiltre-facetler { display: flex; flex-wrap: wrap; gap: .5rem; }
.kfiltre-hap {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-width: 260px;
  min-height: 44px;             /* dokunma hedefi */
  padding: 0 .9rem 0 1rem;
  border: 1px solid var(--mono-cizgi);
  border-radius: 60px;
  background: #fff;
  color: var(--mono-metin);
  font-family: var(--font-govde);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.kfiltre-hap > .bi:first-child { color: var(--mono-ikincil); font-size: .95rem; }
.kfiltre-hap-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kfiltre-hap-ok { font-size: .7rem; color: var(--mono-ikincil); transition: transform .2s ease; }
.kfiltre-hap:hover, .kfiltre-hap:focus-visible { border-color: var(--bh-koyu, #352a44); }
.kfiltre-hap[aria-expanded="true"] .kfiltre-hap-ok { transform: rotate(180deg); }
.kfiltre-hap.is-aktif {
  background: var(--bh-koyu, #352a44);
  border-color: var(--bh-koyu, #352a44);
  color: var(--bh-krem, #faf2ea);
}
.kfiltre-hap.is-aktif > .bi, .kfiltre-hap.is-aktif .kfiltre-hap-ok { color: inherit; }

/* Açılır panel — mono'nun .dropdown-menu köşe sıfırlaması burada bilinçli ezilir */
.kfiltre-panel.dropdown-menu {
  width: min(320px, calc(100vw - 2.5rem));
  padding: .5rem;
  border: 1px solid var(--mono-cizgi);
  border-radius: 20px !important;
  background: #fff;
  box-shadow: 0 18px 40px rgba(27, 27, 27, .10);
}
.kfiltre-panel-ust { padding: .15rem .15rem .5rem; }
.kfiltre-panel-ara {
  width: 100%;
  min-height: 40px;
  padding: 0 .9rem;
  border: 1px solid var(--mono-cizgi);
  border-radius: 60px;
  background: color-mix(in srgb, var(--mono-cizgi) 22%, #fff);
  color: var(--mono-metin);
  font-family: var(--font-govde);
  font-size: .9rem;
}
.kfiltre-panel-ara:focus { outline: 2px solid var(--bh-koyu, #352a44); outline-offset: 1px; }
.kfiltre-liste { max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.kfiltre-secenek {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 40px;
  padding: .35rem .75rem;
  border-radius: 12px;
  color: var(--mono-metin);
  font-family: var(--font-govde);
  font-size: .9rem;
  text-decoration: none;
  transition: background .15s ease;
}
.kfiltre-secenek:hover, .kfiltre-secenek:focus-visible {
  background: var(--bh-krem, #faf2ea);
  color: var(--mono-metin);
}
.kfiltre-secenek-ad {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kfiltre-adet {
  flex: 0 0 auto;
  color: var(--mono-ikincil);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;   /* sayılar sütun gibi hizalansın */
}
.kfiltre-secenek.is-aktif {
  background: var(--bh-koyu, #352a44);
  color: var(--bh-krem, #faf2ea);
  font-weight: 600;
}
.kfiltre-secenek.is-aktif .kfiltre-adet { color: inherit; opacity: .75; }
.kfiltre-secenek.is-temizle {
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--mono-cizgi);
  border-radius: 12px 12px 0 0;
  color: var(--mono-ikincil);
  font-size: .85rem;
}
.kfiltre-secenek.is-temizle .bi { font-size: .7rem; }
.kfiltre-panel-bos { margin: .5rem .75rem; color: var(--mono-ikincil); font-size: .88rem; }

/* Seçim rozetleri — hangi filtrenin açık olduğu panel açmadan görünür */
.kfiltre-rozetler { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kfiltre-rozet {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 34px;
  padding: 0 .75rem 0 .9rem;
  border-radius: 60px;
  background: var(--bh-krem, #faf2ea);
  color: var(--mono-metin);
  font-family: var(--font-govde);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease;
}
.kfiltre-rozet .bi { font-size: .65rem; color: var(--mono-ikincil); }
.kfiltre-rozet:hover, .kfiltre-rozet:focus-visible {
  background: var(--bh-mint, #e9fff4); color: var(--mono-metin);
}
.kfiltre-rozet-tur {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mono-ikincil);
}
.kfiltre-sifirla {
  color: var(--mono-ikincil);
  font-family: var(--font-govde);
  font-size: .85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kfiltre-sifirla:hover, .kfiltre-sifirla:focus-visible { color: var(--mono-metin); }

/* Sonuç yok — çıkmaz sokak değil, çıkış yolu gösterilir */
.kfiltre-sonucsuz {
  margin-bottom: 2rem;
  padding: 2.5rem 1.5rem;
  border-radius: 24px;
  background: var(--bh-krem, #faf2ea);
  text-align: center;
}

@media (max-width: 575.98px) {
  .kfiltre-facetler { display: grid; grid-template-columns: 1fr 1fr; }
  .kfiltre-facetler > .dropdown { min-width: 0; }
  .kfiltre-hap { width: 100%; max-width: none; justify-content: space-between; }
  .kfiltre-ara-btn { padding: 0 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kfiltre-ara, .kfiltre-hap, .kfiltre-hap-ok, .kfiltre-secenek, .kfiltre-rozet { transition: none; }
}

/* ── Uzun kelime/URL taşması (2026-09-03, responsive denetimi) ───────────────
   WordPress'ten taşınan 150 yazının 145'inde gövdede ÇIPLAK URL var
   ("https://www.instagram.com/umutgulactiofficial/" gibi). Bunlar bölünemeyen
   tek kelime sayıldığından 375px ekranda satırı 392px'e çıkarıp SAYFAYI yatay
   kaydırılır hâle getiriyordu. break-word yalnız sığmayan kelimeyi böler,
   normal metnin satır ölçüsüne dokunmaz. */
.blog-content,
.prose,
.tanitim-prose,
.yasal-icerik,
.kfiltre-secenek-ad,
.ktp-ad, .ktp-yazar {
  overflow-wrap: break-word;
}
/* Çıplak bağlantılar ayrıca kendi içinde de bölünebilmeli (uzun tek parça URL) */
.blog-content a, .prose a, .yasal-icerik a { word-break: break-word; }

/* ── Dokunma hedefleri (2026-09-03, responsive denetimi) ─────────────────────
   Denetimde 44px eşiğinin altında kalanlar: mobil menü düğmesi 32x33 (mobilde
   EN ÇOK kullanılan hedef), footer sütun linkleri 34px, footer yasal bandı
   20px, breadcrumb "Anasayfa" 16px, logo 26px.
   Tümü `pointer: coarse` içine alındı — yalnız dokunmatik cihazlarda büyür,
   masaüstü yoğunluğu ve görünümü birebir korunur. */
@media (pointer: coarse) {
  /* Ölçülerek doğrulandı: dolgu tahmini yerine min-height + inline-flex,
     çünkü satır yüksekliği bileşene göre 17-32px arasında değişiyor. */
  .site-header-burger { width: 44px; height: 44px; padding: 11px; }
  .site-header-logo   { display: inline-flex; align-items: center; min-height: 44px; }

  /* Footer sütun linkleri (gövde satırı 22px) */
  .site-footer li > a { display: inline-block; padding: .7rem 0; }

  /* Satır/hap biçimindeki tekil bağlantı ve düğmeler */
  .footer-yasal a,
  .site-footer a.hap-btn,
  .tp-breadcrumb-menu a,
  .kitap-link,
  .tanitim-btn,
  .kategori-hap,
  .yan-kitap-linkler .hap-btn,
  .yan-kitap-linkler .hap-btn--dis,
  .iletisim-satir a,
  .uye-link,
  .kfiltre-ara-btn,
  .kfiltre-rozet,
  .kfiltre-sifirla,
  #cookieBanner .btn,
  #cookieBanner a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-yasal { gap: 0 1.4rem; }

  /* Form denetimleri */
  .bulten-form input,
  .form-yumusak .form-control { min-height: 44px; }
  .form-check-input { width: 20px; height: 20px; margin-top: .1rem; }
  .form-check { display: flex; align-items: center; min-height: 44px; }
  .form-check-label { padding: .35rem 0; }
}