/* ========================================================= */
/* Sade Link Bölümü Stilleri (BÖLGE & ŞEHİR) */
/* ========================================================= */

/* Ortak Kapsayıcı Stilleri */
.bolge-linkleri,
.sehir-linkleri {
    padding: 15px 0;
    background-color: transparent; /* Arka plan tamamen sayfa ile uyumlu */
    border-bottom: 1px solid #e0e0e0; /* Alt sınır isteğe göre kaldırılabilir */
}

/* Başlıklar (::before) */
.bolge-linkleri::before,
.sehir-linkleri::before {
    display: block;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2e7d32;
    margin-bottom: 15px;
}

/* Başlık Metinleri */
.bolge-linkleri::before { content: "BÖLGELER"; }
.sehir-linkleri::before { content: "ŞEHİRLER"; }

/* Link Butonları Kapsayıcısı */
.bolge-linkleri .link-buttons,
.sehir-linkleri .link-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 15px;
}

/* Tekil Link Stili (Minimal ve Küçük) */
.bolge-linkleri .tag-button,
.sehir-linkleri .tag-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    padding: 3px 8px;
    background-color: transparent; /* Linklerin arka planı tamamen şeffaf */
    color: #555;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 5px;
    transition: color 0.25s ease, border-color 0.25s ease;
    border: 1px solid #ccc; /* Hafif çerçeve */
}

/* İkon */
.bolge-linkleri .tag-button i,
.sehir-linkleri .tag-button i {
    margin-right: 4px;
    font-size: 0.85rem;
    color: inherit;
}

/* Hover Efekti (sadece renk ve çerçeve) */
.bolge-linkleri .tag-button:hover,
.sehir-linkleri .tag-button:hover {
    color: #2e7d32;
    border-color: #2e7d32;
    background-color: transparent; /* Arka plan değişmez */
}

/* H3 Başlıkları */
.bolge-linkleri h3,
.sehir-linkleri h3 {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 15px;
}

/* Strong + HR Başlıkları */
.bolge-linkleri + hr + strong,
.sehir-linkleri + hr + strong {
    display: block;
    text-align: center;
    font-size: 1rem;
    color: #555;
    margin: 8px auto;
}

/* Responsive (mobil) */
@media (max-width: 600px) {
    .bolge-linkleri .link-buttons,
    .sehir-linkleri .link-buttons {
        gap: 4px;
    }

    .bolge-linkleri::before,
    .sehir-linkleri::before {
        font-size: 1rem;
        margin-bottom: 10px;
    }
}


/* ========================================================= */
/* BİLGİ KUTUSU VE PARAGRAF
/* ========================================================= */
.bilgi-kutusu {
    /* Genel Görünüm ve Konumlandırma */
    margin: 10px auto; 
    max-width: 100%;
    text-align: center;
}
.bilgi-paragraf {   
    /* Kutu Dizaynı */
    border: 3px solid #1a8f00; /* Daha doğal bir yeşil tonu */
    padding: 10px; /* İç boşluğu artırdık */
    border-radius: 10px; 
    background-color: #f0fff0; /* Çok açık yeşil arka plan */
    box-shadow: 0 6px 12px rgba(26, 143, 0, 0.3); /* Yeşile uygun gölge */
    color: #333; 
    font-size: 1em; /* Metni daha belirgin yaptık */
    font-weight: 500;
    line-height: 1.7;
    margin: 0; /* İç boşluğu sıfırladık */
}
.item-thumb {
    position: relative; /* KRİTİK: Etiketin buraya göre konumlanmasını sağlar */
    overflow: hidden; 
}

/* 2. Etiketi resmin üzerine konumlandırır */
.category-badge {
    position: absolute; 
    top: 10px;          /* Üstten 10 piksel boşluk */
    left: 10px;         /* Soldan 10 piksel boşluk */
    z-index: 10;        /* Resmin ve diğer elementlerin üzerinde görünmesini sağlar */
    
    /* Etiket metninin dışına ekstra boşluk vermemek için */
    padding: 0; 
    margin: 0;
}

/* 3. Etiket Görünümü (Arka Plan ve Yazı) */
.category-badge a {
    display: inline-block;
    padding: 4px 8px;
    
    /* Renkler */
    background-color: #ff5810; /* Mavi Arka Plan */
    color: #ffffff !important; 
    
    /* Yazı Stili */
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 3px;
    text-decoration: none;
    line-height: 1; 
    opacity: 0.9;
    transition: opacity 0.3s;
}

.category-badge a:hover {
    opacity: 1;
    background-color: #2e7d32; 
}