/* Proje Detayı stilleri bölümü başlangıcı — SADECE bu sayfaya özel sınıflar.
   .shell/.button/renkler/.campaign-card zaten navbar-yeni.css ve
   project-card-yeni.css'te yükleniyor; .subcategory-grid/.subcategory-card
   projelerimiz-yeni.css'te zaten var (link ile eklendi, kopyalanmadı).
   body/html sıfırlaması BİLEREK yok. */

.section {
  padding: 44px 0;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.85rem;
}
.breadcrumb a {
  color: var(--teal);
  font-weight: 700;
  transition: color 0.2s ease;
}
.breadcrumb a:hover {
  color: var(--teal-dark);
}

/* Başlık + paylaş bölümü başlangıcı */
.detail-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}
.detail-heading h1 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  overflow-wrap: break-word;
}
/* Paylaş menüsü — webrev2 güncellemesi: eski Bootstrap #shareModal (tıkla-aç,
   tüm sitede tek modal) yerine, masaüstünde FARE İLE ÜZERİNE GELİNCE açılan,
   dokunmatik cihazda tıklayınca açılan bağımsız bir panel (bkz. js/share-panel-yeni.js).
   Diğer, henüz yeniden tasarlanmamış sayfalardaki #shareModal'a HİÇ dokunulmadı. */
.share-menu {
  position: relative;
  flex: none;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  background: #fff;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.share-btn svg {
  width: 16px;
  height: 16px;
}
.share-btn:hover,
.share-btn.is-active {
  color: #fff;
  border-color: var(--teal);
  background: var(--teal);
}
.share-panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 6;
  width: 190px;
  padding: 8px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
  pointer-events: none;
}
.share-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.share-backdrop {
  display: none;
}
.share-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: start;
  background: none;
  transition: background 0.15s ease;
}
.share-link:hover {
  background: var(--ivory, #f4f6f5);
}
.share-link svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--teal);
}
.share-link.is-copied {
  color: var(--teal);
}
@media (max-width: 560px) {
  .share-panel {
    position: fixed;
    inset-inline: 14px;
    bottom: 14px;
    top: auto;
    width: auto;
    max-width: none;
    padding: 10px;
    border-radius: 18px;
    transform: translateY(16px);
    z-index: 50;
  }
  .share-panel.is-open {
    transform: translateY(0);
  }
  .share-link {
    padding: 13px 12px;
    font-size: 0.9rem;
  }
  .share-backdrop.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(10, 20, 20, 0.35);
  }
}
/* Başlık + paylaş bölümü bitişi */

/* Galeri + bağış paneli bölümü başlangıcı */
.detail-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
  /* start -> center: müşteri talebi — resim dikey (kısa+dar kart) ya da yatay
     (kısa+geniş kart) fark etmeksizin, iki sütundan (galeri kartı / bağış
     paneli) KISA olan, UZUN olana göre dikeyde ortalanmalı; sabit "start"
     hizası kısa tarafı üstte bırakıp altta boşluk yaratıyordu. */
  align-items: center;
}
.detail-gallery {
  /* fit-content + margin-inline:auto: kart artık TAM SÜTUN GENİŞLİĞİNDE sabit
     bir kutu değil, doğrudan içindeki .detail-photo'nun (resmin) gerçek
     boyutuna sarılıyor ve sütun içinde ortalanıyor. Eskiden kart sütunun tam
     genişliğinde kalıp SADECE resim ortalanınca (dikey/dar resimlerde) kartın
     zemin rengi resmin İKİ YANINDA/gri boşluk olarak görünüyordu — müşteri
     "gri alan taşmalarda gözüküyor" diye bildirdi. Zemin rengi de TAMAMEN
     kaldırıldı, artık kartın kendisi = resmin çerçevesi. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  text-align: center;
}
/* webrev2 güncellemesi: kapak görseli artık zorla 4:3 kırpılıp tam genişliğe
   gerilmiyor — kendi en/boy oranında, en fazla 560px yükseklikte, ortalanmış
   gösteriliyor (mockup'ın hakkımızda'daki gibi rastgele kırpma yapmaması isteği). */
.detail-photo {
  display: block;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  max-height: 560px;
  margin-inline: auto;
}
.detail-photo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 560px;
}

.detail-donate {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.detail-donate h2 {
  margin: 0 0 18px;
  font-size: 1.1rem;
}
.donate-panel-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.donate-panel-body .inputlar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.donate-panel-body .text {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}
.donate-panel-body .fiyat .input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.donate-panel-body .fiyat input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  outline: none;
  font: inherit;
  /* 2026-09-22 düzeltme: burada font-weight:700 + font-size:1rem kullanılıyordu,
     hem mockup'ın kaynak .donate-input input kuralından (webrev2/footer/styles.css
     — kalın DEĞİL, 0.82rem) hem de ana sayfa/footer'daki aynı bileşenden
     (css/footer-yeni.css .donate-input input) sapıyordu — müşteri "ana sayfadaki
     hızlı bağış kutusu naif duruyor, detaydaki kalın" diye bildirdi. Aynı hafif
     görünüme çekildi. */
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
}
.donate-panel-body .fiyat .input-group-addon {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
  background: #f4f6f5;
  white-space: normal;
}
/* .input-group DOM sırası input->addon; flex "row" yön (dir) duyarlı olduğundan
   rtl'de (ar) otomatik ayna alıp addon'u sola düşürüyor. Ana sayfadaki
   .donate-input bileşeninde para birimi zaten DOM'da ilk sırada olduğu için
   rtl'de doğru (sağda) çıkıyor; burada DOM sırası tersken diller arası tutarlı
   kalması için order ile sadece rtl'de görsel olarak öne alıyoruz. */
[dir="rtl"] .donate-panel-body .fiyat .input-group-addon {
  order: -1;
}
.donate-panel-body .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.donate-panel-body .card-actions .button {
  flex: 1;
  min-width: 140px;
  justify-content: center;
}
.detail-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.8rem;
}
.detail-trust svg {
  width: 16px;
  height: 16px;
  color: var(--teal);
  flex: none;
}
/* Galeri + bağış paneli bölümü bitişi */

/* Açıklama + video bölümü başlangıcı */
.detail-description {
  margin-top: 34px;
  max-width: 900px;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.9;
  overflow-wrap: break-word;
}
.detail-description img {
  max-width: 100%;
  height: auto;
}
.detail-description .videokod {
  margin-bottom: 20px;
}
.detail-description .videokod:empty {
  display: none;
}
.detail-description .videokod iframe,
.detail-description .videokod video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
}
/* Açıklama + video bölümü bitişi */

/* Görsel galerisi bölümü başlangıcı — ölçü/boşluk/oran/animasyon REFERANS
   çalışma sayfasıyla (webrev2/proje detayi, .gallery-grid/.gallery-item)
   BİREBİR eşleşecek şekilde ayarlandı: sabit 3 sütun, 20px boşluk, 16:9
   kart oranı, hover'da 0.3s'lik 1.06x yakınlaştırma. Başlık artık ayrı bir
   .detail-gallery-title değil, sayfanın geri kalanıyla (.similar-section)
   AYNI paylaşılan .section-title/h2 kalıbını kullanıyor. */
.detail-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 20px;
  margin-top: 34px;
}
.detail-gallery-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #d4dbd8;
}
.detail-gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}
.detail-gallery-thumb:hover img {
  transform: scale(1.06);
}
@media (max-width: 760px) {
  .detail-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
/* Görsel galerisi bölümü bitişi */

/* Benzer projeler / kategori bölümü başlangıcı */
/* 2026-09-25 müşteri talebi: üstteki çizgi (border-top) kaldırıldı. */
.section-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 30px;
}
.section-title h2 {
  margin: 0;
  font-size: 1.3rem;
}
.section-title span {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
}
/* 2026-09-25 müşteri talebi: "Benzer Projeler" başlığı ve altındaki (artık en
   fazla 3 kart — bkz. genel/proje2.php) kart satırı ortalansın. Genel
   .section-title (sol hizalı, "Tüm Görseller" da kullanıyor) DEĞİL, sadece
   .similar-section içindekini kapsıyor. */
.similar-section .section-title {
  display: block;
  text-align: center;
}
.similar-section .projects-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
  justify-content: center;
}
/* Benzer projeler / kategori bölümü bitişi */

@media (max-width: 860px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
  /* 2026-09-25 müşteri talebi: tabletten itibaren (bu sayfanın zaten kullandığı
     860px eşiği) "Diğer Projelerimiz"deki 3 kart, anasayfadaki .campaign-grid
     ile AYNI native scroll-snap teknikle (JS kütüphanesi yok) yatay
     kaydırmalı slider'a dönüşüyor — sarıp alt alta yığılmak yerine. */
  .similar-section .projects-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .similar-section .projects-grid::-webkit-scrollbar {
    display: none;
  }
  .similar-section .projects-grid > .campaign-card {
    flex: 0 0 280px;
    min-width: 0;
    scroll-snap-align: start;
  }
}
@media (max-width: 560px) {
  .detail-heading {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* Proje Detayı stilleri bölümü bitişi */