/* assets/css/anasayfa.css - Ana Sayfa Özel Stilleri */

/* Genel Alan ve Sütun Yapıları */
.hy-main-content-area {
    max-width: 940px; /* Ana içerik alanı genişliği */
    margin: 25px auto;
    padding: 0 10px;
}

/* Üst Tanıtım Alanı (3 Kolonlu) */
.hy-top-intro-grid {
    display: grid;
    /* Butonların bulunduğu orta sütun (ikinci) için 'max-content' kullanarak
       bu sütunun içeriği kadar dar olmasını sağlıyoruz. */
    grid-template-columns: minmax(300px, 1.8fr) max-content 1fr;
    gap: 25px; /* Sütun arası boşluk */
    margin-bottom: 35px;
    padding: 20px;
    background-color: #f8f9fa; /* Hafif arka plan */
    border-radius: 6px;
    align-items: center; /* İçerikleri dikeyde ortala */
}

.hy-intro-text-column p {
    font-size: 0.95em;
    line-height: 1.65;
    color: #343a40;
    margin-bottom: 0;
}

.hy-intro-buttons-column {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Buton grubunu kendi dikey alanında ortalar */
    /* Butonları bu sütun içinde sola yaslamak için 'flex-start' kullanıyoruz.
       Eğer ortalı kalmasını isterseniz 'center' yapabilirsiniz. */
    align-items: flex-start;
    gap: 10px; /* Butonlar arası boşluk */
}

.hy-intro-button {
    background-color: #6c757d; /* Gri tonu */
    color: white;
    border: none;
    padding: 8px 12px;
    text-align: center; /* Buton içindeki metni ortalar */
    font-size: 0.85em;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    line-height: 1.4;

    /* Butonların hepsinin aynı genişlikte olmasını sağlamak için:
       1. width: 100%; ile ebeveynleri olan .hy-intro-buttons-column'un genişliğini alırlar.
       2. max-width: 150px; (veya istediğiniz başka bir değer) ile maksimum genişliklerini sınırlayabilirsiniz.
          Bu durumda, .hy-intro-buttons-column'un genişliği (max-content ile belirlenen) 150px'den darsa
          butonlar o dar genişliği alır, 150px'den genişse butonlar 150px olur.
          Eğer her zaman sabit bir genişlik isterseniz (örneğin 140px),
          o zaman width: 140px; ve max-width: none; (veya max-width'ı kaldırın) kullanabilirsiniz.
          Şu anki ayar, esneklik ve maksimum sınır sağlar.
    */
    width: 100%; /* Ebeveyninin (.hy-intro-buttons-column) genişliğini alır */
    max-width: 150px; /* Maksimum genişlik sınırı (isteğe bağlı, butonların çok büyümesini engeller) */
    box-sizing: border-box; /* padding ve border'ın genişliğe dahil edilmesini sağlar, önemlidir */
}

.hy-intro-button:hover {
    background-color: #0056b3; /* Üzerine gelince mavi */
    color: #ffffff;
}

.hy-intro-image-column {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Resmi sağa yasla */
}

.hy-intro-image-column img {
    max-width: 100%;
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%; /* Yuvarlak resim */
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    border: 2px solid white;
}

/* Sitelerim Alanı (Yatay) */
.hy-owned-sites-horizontal {
    display: flex;
    justify-content: space-between; /* Siteleri aralarında boşluk bırakarak yay */
    flex-wrap: wrap; /* Küçük ekranlarda alt satıra kaysın */
    gap: 15px; /* Öğeler arası boşluk */
    margin-bottom: 35px;
    padding: 25px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.hy-owned-site-item-h {
    text-align: center;
    width: calc(25% - 12px);
    min-width: 140px;
    margin-bottom: 10px;
}

.hy-owned-site-item-h .hy-site-name-h {
    font-size: 0.9em;
    font-weight: 600;
    color: #0056b3;
    display: block;
    margin-bottom: 8px;
    text-decoration: none;
    line-height: 1.2;
}

.hy-owned-site-item-h .hy-site-name-h:hover {
    text-decoration: underline;
}

.hy-owned-site-item-h img.hy-site-logo-h {
    display: block;
    width: 150px;
    height: 75px;
    margin: 0 auto;
    border: 1px solid #ddd;
    padding: 3px;
    border-radius: 3px;
    object-fit: contain;
}

/* Yazılar ve Köşe Yazıları (2 Kolonlu) */
.hy-articles-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.hy-section {
    margin-bottom: 20px;
}

.hy-section h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 6px;
    text-align: left;
    font-weight: 600;
}

.hy-article-preview {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px;
    min-height: 170px;
    display: flex;
    flex-direction: column;
}

.hy-article-preview h3 {
    font-size: 1.15em;
    margin-top: 0;
    margin-bottom: 6px;
    line-height: 1.3;
}

.hy-article-preview h3 a {
    text-decoration: none;
    color: #0056b3;
}

.hy-article-preview h3 a:hover {
    text-decoration: underline;
}

.hy-article-preview .hy-date {
    font-size: 0.75em;
    color: #6c757d;
    margin-bottom: 8px;
    display: block;
}

.hy-article-preview .hy-summary {
    font-size: 0.85em;
    line-height: 1.55;
    color: #555;
    margin-bottom: 10px;
    flex-grow: 1;
}

.hy-article-preview .hy-read-more {
    font-weight: 500;
    font-size: 0.85em;
    color: #0056b3;
    text-decoration: none;
    margin-top: auto;
}

.hy-article-preview .hy-read-more:hover {
    text-decoration: underline;
}

.hy-all-items-link-footer {
    display: block;
    text-align: right;
    margin-top: 12px;
    font-weight: bold;
    color: #0056b3;
    font-size: 0.95em;
}

.hy-all-items-link-footer:hover {
    text-decoration: underline;
}

.hy-error-message {
    text-align:center;
    color: #721c24;
    background-color: #f8d7da;
    border:1px solid #f5c6cb;
    padding:10px;
    border-radius:5px;
    margin:15px 0;
    font-size:0.9em;
}

/* Mobil Cihazlar İçin Duyarlılık (Örnek) */
@media (max-width: 768px) {
    .hy-top-intro-grid {
        grid-template-columns: 1fr; /* Tek sütuna düşür */
        text-align: center;
    }
    .hy-intro-image-column {
        justify-content: center;
        margin-top: 15px;
    }
    .hy-intro-buttons-column {
        /* Mobilde butonları ortalamak daha iyi olabilir, isteğe bağlı */
        align-items: center;
    }
    .hy-owned-sites-horizontal {
        justify-content: center;
    }
    .hy-owned-site-item-h {
        width: calc(50% - 10px);
    }
    .hy-articles-columns {
        grid-template-columns: 1fr;
    }
    .hy-section h2 {
        text-align: center;
    }
    .hy-all-items-link-footer {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hy-owned-site-item-h {
        width: calc(100% - 10px);
    }
    .hy-intro-text-column p { font-size: 0.9em; }
    .hy-article-preview h3 { font-size: 1.1em;}
    .hy-article-preview .hy-summary { font-size: 0.8em; }
}
.social-media-links.header-social a svg {
    width: 22px; /* İkon genişliği */
    height: 22px; /* İkon yüksekliği */
    fill: currentColor; /* Bağlantının metin rengini alır. header-social içindeki linklerin rengi neyse onu alacaktır. */
    vertical-align: middle; /* Dikey hizalama */
    margin: 0 5px; /* İkonlar arası sağ ve sol boşluk */
    transition: fill 0.3s ease; /* Renk değişimi için yumuşak geçiş */
}

/* İsteğe bağlı: Fare üzerine gelince ikon rengi değişimi */
.social-media-links.header-social a:hover svg {
    fill: #007bff; /* Örnek bir hover rengi, kendi temanıza göre değiştirin. Örneğin sitenizde kullandığınız bir ana renk olabilir. */
}/* Header ve Footer Sosyal Medya İkonları İçin Genel Stiller */
.header-social a svg,
.footer-social a svg {
    width: 22px; /* İkon genişliği - isteğe bağlı olarak değiştirin */
    height: 22px; /* İkon yüksekliği - isteğe bağlı olarak değiştirin */
    fill: currentColor; /* Bağlantının metin rengini alır */
    vertical-align: middle; /* Dikey hizalama */
    margin: 0 5px; /* İkonlar arası sağ ve sol boşluk */
    transition: fill 0.3s ease; /* Renk değişimi için yumuşak geçiş */
}

/* İsteğe bağlı: Fare üzerine gelince ikon rengi değişimi */
.header-social a:hover svg,
.footer-social a:hover svg {
    fill: #007bff; /* Örnek bir hover rengi, kendi temanıza göre değiştirin */
}