/* ==========================================================================
   HotelNerede - Blog listesi ve yazı sayfası

   Elle yazıldı: tailwind.css depoya derlenmiş halde giriyor ve derleme adımı
   projede kurulu değil (node_modules yok). Bu dosya sayfaya $ekStiller ile
   ekleniyor.

   Renkler tailwind.config.js paletiyle aynı:
     birincil #0692CF   başlık #333333   metin #777777   çizgi #ececec
   ========================================================================== */

.bl-sayfa { background: #FFFFFF; }

.bl-kabuk {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 20px 64px;
}

/* ---------- Sayfa başlığı ---------- */
.bl-ust { margin-bottom: 32px; }

.bl-yol {
    font-size: 12px;
    color: #B1B1B1;
    margin: 0 0 8px;
}

.bl-yol a { color: #0692CF; }
.bl-yol a:hover { text-decoration: underline; }

.bl-ust h1 {
    font-size: 30px;
    font-weight: 800;
    color: #333333;
    margin: 0 0 8px;
    line-height: 1.25;
}

.bl-ust p {
    font-size: 14px;
    color: #777777;
    margin: 0;
    max-width: 620px;
}

/* ---------- Bölüm süzgeci ----------
   Her bölümün kendi blogu olduğu için okur konuya göre daraltabilmeli. */
.bl-suzgec {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.bl-suzgec a {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 15px;
    border: 1px solid #E4E7EA;
    border-radius: 17px;
    font-size: 13px;
    font-weight: 700;
    color: #667085;
    background: #FFFFFF;
    transition: border-color .15s, color .15s, background .15s;
}

.bl-suzgec a:hover { border-color: #9FD3EC; color: #0692CF; }

.bl-suzgec a.is-aktif {
    background: #0692CF;
    border-color: #0692CF;
    color: #FFFFFF;
}

/* ==========================================================================
   Liste
   ========================================================================== */
.bl-izgara {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 27px;
}

.bl-kart {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #ececec;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}

.bl-kart:hover {
    border-color: transparent;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
}

.bl-kart__gorsel {
    display: block;
    aspect-ratio: 16 / 10;
    background: #F0F2F4;
    overflow: hidden;
}

.bl-kart__gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bl-kart__govde {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bl-kart__tarih {
    font-size: 12px;
    color: #B1B1B1;
    margin-bottom: 7px;
}

.bl-kart__govde h2 {
    font-size: 16px;
    font-weight: 800;
    color: #333333;
    line-height: 1.4;
    margin: 0 0 9px;
}

.bl-kart:hover .bl-kart__govde h2 { color: #0692CF; }

.bl-kart__govde p {
    font-size: 13px;
    color: #777777;
    line-height: 1.6;
    margin: 0 0 16px;
}

.bl-kart__oku {
    margin-top: auto;
    font-size: 13px;
    font-weight: 700;
    color: #0692CF;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.bl-kart__oku i { font-size: 11px; transition: transform .18s; }
.bl-kart:hover .bl-kart__oku i { transform: translateX(3px); }

/* Boş durum */
.bl-bos {
    text-align: center;
    padding: 70px 20px;
    color: #777777;
}

.bl-bos > i { display: block; font-size: 38px; color: #DDE2E6; margin-bottom: 16px; }
.bl-bos > strong { display: block; font-size: 17px; font-weight: 800; color: #333333; margin-bottom: 6px; }
.bl-bos > p { font-size: 14px; margin: 0; }

/* ==========================================================================
   Yazı sayfası
   ========================================================================== */

/* ---------- Okuma ilerleme çubuğu ---------- */
.bl-ilerleme {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: 200;
    pointer-events: none;
}

.bl-ilerleme span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #0692CF, #00A25D);
    transition: width .1s linear;
}

/* ---------- Künye ---------- */
.bl-bas {
    max-width: 780px;
    margin: 0 auto 28px;
    text-align: center;
}

.bl-bas .bl-yol { text-align: center; }

.bl-etiket {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 14px;
    border-radius: 15px;
    background: #EFF7FC;
    color: #0578ab;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
    transition: background .15s;
}

.bl-etiket:hover { background: #DCEEF8; }

.bl-bas h1 {
    font-size: 36px;
    font-weight: 800;
    color: #222222;
    line-height: 1.22;
    margin: 0 0 16px;
    letter-spacing: -.4px;
}

.bl-kunye {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 13px;
    color: #98A2B3;
}

.bl-kunye i { color: #0692CF; margin-right: 6px; }

/* ---------- Kapak ---------- */
.bl-kapak {
    margin: 0 0 40px;
    border-radius: 14px;
    overflow: hidden;
    background: #F0F2F4;
    aspect-ratio: 16 / 7;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .10);
}

.bl-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- İki sütunlu gövde ---------- */
.bl-govde {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
}

.bl-metin { min-width: 0; max-width: 760px; }

.bl-ozet {
    font-size: 17px;
    line-height: 1.7;
    color: #4A5057;
    font-weight: 600;
    padding: 0 0 24px;
    margin: 0 0 28px;
    border-bottom: 1px solid #ececec;
}

/* ---------- Yapışkan yan sütun ---------- */
.bl-yan {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bl-kutu {
    background: #FFFFFF;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 18px 20px;
}

.bl-kutu__baslik {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 800;
    color: #333333;
    margin: 0 0 14px;
}

.bl-kutu__baslik i { color: #0692CF; font-size: 12px; }

/* İçindekiler */
.bl-icindekiler ol {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 46vh;
    overflow-y: auto;
}

.bl-icindekiler li { margin: 0; }

.bl-icindekiler a {
    display: block;
    padding: 7px 0 7px 13px;
    border-left: 2px solid #ececec;
    font-size: 13px;
    line-height: 1.5;
    color: #667085;
    transition: color .15s, border-color .15s;
}

.bl-icindekiler a:hover { color: #0692CF; border-left-color: #9FD3EC; }

.bl-icindekiler a.is-okunan {
    color: #0578ab;
    font-weight: 700;
    border-left-color: #0692CF;
}

/* Alt seviye başlıklar bir kademe içeride */
.bl-ic-h4 a { padding-left: 26px; font-size: 12.5px; }

/* ---------- Paylaşım ---------- */
.bl-paylas { display: flex; gap: 9px; }

.bl-paylas__btn {
    width: 38px;
    height: 38px;
    border: 1px solid #E4E7EA;
    border-radius: 10px;
    background: #FFFFFF;
    color: #667085;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}

.bl-paylas__btn:hover { transform: translateY(-2px); color: #FFFFFF; }
.bl-paylas__btn--wa:hover { background: #25D366; border-color: #25D366; }
.bl-paylas__btn--x:hover  { background: #111111; border-color: #111111; }
.bl-paylas__btn--fb:hover { background: #1877F2; border-color: #1877F2; }
.bl-paylas__btn--kopya:hover { background: #0692CF; border-color: #0692CF; }

.bl-paylas__btn.is-kopyalandi { background: #00A25D; border-color: #00A25D; color: #FFFFFF; }
.bl-paylas__btn.is-hata { background: #D9000D; border-color: #D9000D; color: #FFFFFF; }

/* Yazı sonundaki paylaşım şeridi (dar ekranlarda yan sütun görünmez) */
.bl-alt-paylas {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid #ececec;
}

.bl-alt-paylas > span { font-size: 13px; font-weight: 700; color: #333333; }

/* ---------- Bölüme çağrı ---------- */
.bl-cagri {
    background: linear-gradient(150deg, #0692CF, #0578ab);
    border-color: transparent;
    color: #FFFFFF;
    text-align: center;
}

.bl-cagri > i { font-size: 26px; opacity: .9; }

.bl-cagri strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    margin: 10px 0 6px;
}

.bl-cagri p {
    font-size: 13px;
    line-height: 1.55;
    opacity: .9;
    margin: 0 0 16px;
}

.bl-cagri__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    border-radius: 9px;
    background: #FFFFFF;
    color: #0578ab;
    font-size: 13.5px;
    font-weight: 800;
    transition: transform .15s;
}

.bl-cagri__btn:hover { transform: translateY(-2px); }
.bl-cagri__btn i { font-size: 11px; }

/* ---------- Önceki / sonraki ---------- */
.bl-komsu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 54px;
    padding-top: 32px;
    border-top: 1px solid #ececec;
}

.bl-komsu__oge {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 18px 20px;
    border: 1px solid #ececec;
    border-radius: 12px;
    transition: border-color .15s, box-shadow .15s;
}

.bl-komsu__oge:hover { border-color: transparent; box-shadow: 0 10px 28px rgba(0, 0, 0, .10); }

.bl-komsu__oge span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #0692CF;
}

.bl-komsu__oge strong {
    font-size: 14.5px;
    font-weight: 700;
    color: #333333;
    line-height: 1.45;
}

.bl-komsu__oge--sag { text-align: right; }
.bl-komsu__oge--sag span { justify-content: flex-end; }

/* Editörden gelen içerik — yalnız metin biçimlendirme etiketleri gelir */
.bl-icerik { font-size: 15px; line-height: 1.8; color: #444444; }
.bl-icerik p { margin: 0 0 18px; }
.bl-icerik h3 { font-size: 21px; font-weight: 800; color: #333333; margin: 32px 0 12px; }
.bl-icerik h4 { font-size: 17px; font-weight: 700; color: #333333; margin: 26px 0 10px; }
/* Site genelindeki sıfırlama listelerin işaretini kaldırıyor; yazı içinde
   madde işareti anlam taşır, geri getirilir. */
.bl-icerik ul { list-style: disc outside; }
.bl-icerik ol { list-style: decimal outside; }
.bl-icerik ul,
.bl-icerik ol { margin: 0 0 18px; padding-left: 24px; }
.bl-icerik li { margin-bottom: 8px; display: list-item; }
.bl-icerik li::marker { color: #0692CF; }
.bl-icerik a { color: #0692CF; text-decoration: underline; }
.bl-icerik strong { font-weight: 700; color: #333333; }

.bl-icerik blockquote {
    margin: 0 0 18px;
    padding: 14px 20px;
    border-left: 3px solid #0692CF;
    background: #F7FBFD;
    border-radius: 0 8px 8px 0;
    color: #555555;
}

/* ---------- Diğer yazılar ---------- */
.bl-diger {
    margin-top: 54px;
    padding-top: 34px;
    border-top: 1px solid #ececec;
}

.bl-diger h2 {
    font-size: 20px;
    font-weight: 800;
    color: #333333;
    margin: 0 0 22px;
}

.bl-geri {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 34px;
    font-size: 14px;
    font-weight: 700;
    color: #0692CF;
}

.bl-geri:hover { text-decoration: underline; }

/* ==========================================================================
   Duyarlı davranış
   ========================================================================== */
@media (max-width: 1100px) {
    /* Yan sütun metnin altına iner; içindekiler ve çağrı görünür kalır ama
       yapışkanlığı bırakır — dar ekranda sabit bir sütun yeri boşa harcar. */
    .bl-govde { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .bl-yan   { position: static; }
    .bl-metin { max-width: none; }
    .bl-icindekiler ol { max-height: none; }
}

@media (max-width: 1023px) {
    .bl-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bl-bas h1 { font-size: 28px; }
}

@media (max-width: 639px) {
    .bl-kabuk  { padding: 26px 14px 44px; }
    .bl-izgara { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .bl-ust h1 { font-size: 24px; }
    .bl-bas h1 { font-size: 23px; }
    .bl-ozet   { font-size: 15px; }
    .bl-kapak  { aspect-ratio: 16 / 10; border-radius: 10px; }
    .bl-kunye  { flex-wrap: wrap; gap: 10px 18px; }
    .bl-komsu  { grid-template-columns: minmax(0, 1fr); }
    .bl-komsu__oge--sag { text-align: left; }
    .bl-komsu__oge--sag span { justify-content: flex-start; }
    .bl-alt-paylas { flex-direction: column; align-items: flex-start; gap: 10px; }
}