/* =========================================================
   MIRAI BLOG GRID — Premium 6-Column Layout
   (Tüm medya & blog kartları için optimize edilmiş grid)
   ========================================================= */
/* Ana grid: 6 kolon */
.mirai-blog-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 6 kolon */
    gap: 28px;
    /* Kartlar arası boşluk */
}

/* Tablet (3 kolon) */
@media (max-width: 1200px) {
    .mirai-blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobil (1 kolon) */
@media (max-width: 576px) {
    .mirai-blog-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Kart kutusu */
.mirai-blog-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    transition: 0.28s ease;
    overflow: hidden;
}

/* Hover efekti */
.mirai-blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

/* Görsel */
.mirai-blog-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

/* İçerik */
.mirai-blog-card-body {
    padding: 16px 18px 22px 18px;
}

/* Başlık */
.mirai-blog-card-body h5 a {
    font-size: 0.90rem;
    font-weight: 600;
    color: #000;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

/* Paragraf */
.mirai-blog-card-body p {
    font-size: 0.80rem;
    color: #555;
    margin: 10px 0 16px 0;
    line-height: 1.45;
}

/* Devamını Oku */
.mirai-blog-card-body a.more {
    font-size: 0.80rem;
    color: #000;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* =========================================================
   MIRAI BLOG — Yazar Bilgisi + Avatar Glow Hover + Modal
   ========================================================= */
/* Yazar satırı container */
.mirai-blog-author {
    display: flex;
    align-items: center;
    margin-top: 18px;
}

/* Avatar container */
.mirai-blog-author .avatar-wrapper {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    transition: 0.28s ease;
    cursor: pointer;
}

/* Avatar resmi */
.mirai-blog-author .avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transition: 0.35s ease;
}

/* Mirai Glow Hover (Kırmızı soft glow) */
.mirai-blog-author .avatar-wrapper:hover img {
    transform: scale(1.16);
    filter: brightness(1.1);
}

.mirai-blog-author .avatar-wrapper:hover {
    box-shadow: 0 0 18px rgba(255, 0, 80, 0.55);
    border-radius: 50%;
}

/* Yazar adı + tarih */
.mirai-blog-author .author-meta {
    margin-left: 10px;
}

.mirai-blog-author .author-meta a {
    font-size: 0.78rem;
    color: #000;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: 0.25s ease;
}

/* İsme hover */
.mirai-blog-author .author-meta a:hover {
    color: #ff0050;
}

/* Tarih */
.mirai-blog-author .author-meta .date {
    font-size: 0.72rem;
    margin-top: -2px;
    opacity: 0.65;
}

/* ================================================
   Avatar Modal (Popup)
================================================ */
.mirai-avatar-modal .modal-content {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(22px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.mirai-avatar-modal img {
    width: 100%;
    border-radius: 14px;
}

/* =========================================================
   HR SHORT — NET
   ========================================================= */

.hr-short {
  height: 2px;
  width: 60px;
  border: none;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, 0)
  );
}

	
	
	

.blog-card {
    /* Her blog kartında kullanılan ana container */
    transition: transform 0.35s ease,
        /* Hover animasyonu için ölçek geçişi */
        box-shadow 0.35s ease;
    /* Hover gölge efekti için geçiş */
    border-radius: 16px;
    /* Yumuşak köşe */
    overflow: hidden;
    /* Görsel taşmalarını gizler */
    background: #ffffff;
    /* Kart zemini beyaz */
    border: 1px solid #e8e8e8;
    /* İnce, soft kenarlık */
}

.blog-card:hover {
    transform: translateY(-6px);
    /* Yumuşak yukarı kaldırma efekti */
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
    /* Güçlü premium gölge */
}

.blog-card img {
    border-top-left-radius: 16px;
    /* Üst köşelerin yuvarlanması */
    border-top-right-radius: 16px;
    transition: transform 0.45s ease,
        /* Hover’da zoom için geçiş */
        filter 0.45s ease;
    /* Parlaklık değişimi geçişi */
}

.blog-card:hover img {
    transform: scale(1.08);
    /* %8 zoom */
    filter: brightness(1.08);
    /* Görseli hafif parlatır */
}

.blog-card-body {
    padding: 18px 20px;
    /* İç boşluk */
}

.blog-card-body h5 {
    font-size: 1rem;
    /* Başlık boyutu */
    font-weight: 600;
    /* Yarı kalın */
    letter-spacing: 0.4px;
    /* Modern spacing */
    line-height: 1.3;
    /* Sıkı ama okunabilir */
    margin-bottom: 0.6rem;
    /* Başlık alt boşluk */
    color: #000;
    /* Siyah yazı */
}

.blog-card-body p {
    font-size: 0.9rem;
    /* Metin boyutu */
    opacity: 0.78;
    /* Modern solukluk */
    margin-bottom: 1rem;
    /* Alt boşluk */
}

.blog-card-body a.blog-read {
    font-size: 0.85rem;
    /* Link yazı boyutu */
    font-weight: 600;
    /* Vurgu */
    color: #000;
    /* Koyu ton */
    transition: 0.25s ease;
    /* Hover geçiş */
}

.blog-card-body a.blog-read:hover {
    color: #e0005a;
    /* Mirai magenta highlight */
}