/* =========================================================================
   BERK HALI — icerikler.css (içerik listesi + içerik detay)
   ========================================================================= */

/* ---------- Liste ---------- */
.bh-liste__ust-aciklama { max-width: 860px; margin-bottom: 32px; }

.bh-galeri-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bh-galeri-izgara__oge { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: #eceff1; }
.bh-galeri-izgara__oge img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.bh-galeri-izgara__oge span {
   position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 10px;
   background: linear-gradient(transparent, rgba(20, 24, 32, .75)); color: #fff;
   font-family: var(--bh-baslikFont); font-weight: 700; font-size: 13px; text-transform: uppercase;
}
.bh-galeri-izgara__oge:hover img { transform: scale(1.06); }

/* ---------- Detay ---------- */
.bh-makale-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.bh-makale-duzen--tek { grid-template-columns: minmax(0, 860px); justify-content: center; }

.bh-makale { min-width: 0; }
.bh-makale__gorsel { margin: 0 0 22px; border-radius: var(--bh-yaricap); overflow: hidden; background: #eceff1; }
.bh-makale__gorsel img { width: 100%; max-height: 520px; object-fit: cover; }
.bh-makale__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 12.5px; color: var(--bh-soluk); }
.bh-makale__meta .bh-ikon { width: 15px; height: 15px; }
.bh-makale__meta a { color: var(--bh-lacivert); font-weight: 500; }
.bh-makale__ozet { margin-bottom: 22px; padding: 16px 20px; border-left: 3px solid var(--bh-altin); background: #faf7ef; font-size: 15px; line-height: 1.75; color: var(--bh-lacivert); }

.bh-makale__galeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 32px; }
.bh-makale__galeri a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: #eceff1; cursor: zoom-in; }
.bh-makale__galeri img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.bh-makale__galeri a:hover img { transform: scale(1.05); }

.bh-dosyalar { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; }
.bh-dosyalar a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--bh-cizgi); border-radius: 6px; font-size: 13.5px; color: var(--bh-lacivert); transition: box-shadow .2s; }
.bh-dosyalar a:hover { box-shadow: var(--bh-golge); }
.bh-dosyalar b { flex: none; padding: 5px 12px; border-radius: 99px; background: var(--bh-lacivert); color: #fff; font-size: 11.5px; font-weight: 600; }

/* Yan panel */
.bh-yan { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.bh-yan__kutu { border: 1px solid var(--bh-cizgi); border-radius: var(--bh-yaricap); padding: 20px; background: #fff; }
.bh-yan__kutu h2 { font-size: 15px; font-weight: 700; text-transform: uppercase; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--bh-cizgi); }
.bh-yan__kutu li a { display: block; padding: 9px 0 9px 12px; border-left: 2px solid transparent; font-size: 13.5px; color: var(--bh-metin); transition: .2s; }
.bh-yan__kutu li a:hover { color: var(--bh-lacivert); border-left-color: var(--bh-cizgi); }
.bh-yan__kutu li.is-aktif a { color: var(--bh-lacivert); font-weight: 600; border-left-color: var(--bh-turuncu); background: #fbfbfb; }
.bh-yan__kutu--koyu { background: var(--bh-lacivert); border-color: var(--bh-lacivert); color: #c9d0d8; display: flex; flex-direction: column; gap: 10px; }
.bh-yan__kutu--koyu h2 { color: var(--bh-altin); border-bottom-color: rgba(255, 255, 255, .12); margin-bottom: 0; }
.bh-yan__kutu--koyu p { font-size: 13px; }

@media (max-width: 991px) {
   .bh-galeri-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .bh-makale-duzen { grid-template-columns: 1fr; gap: 36px; }
   .bh-yan { position: static; }
}
@media (max-width: 599px) {
   .bh-galeri-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
   .bh-makale__galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}