/* ============================================================
   246 Software — Blog

   Ana sayfa   → .home-blog  (kapak görselli altı kart)
   /blog       → .post-grid + .post-card (görselsiz kartlar)
   /blog/{slug}→ .post (uzun yazı)

   /blog ve yazı sayfası iskelet olarak service-page.css'teki .svc,
   .crumbs ve .svc-sec'i kullanıyor. Yer tutucu (.ph) portfolio.css'te.
   ============================================================ */


/* ============================================================
   Ana sayfa bölümü
   ============================================================ */
.home-blog {
    padding-block: clamp(3.5rem, calc(var(--vw) * 6.5), 8rem);
    background-color: var(--c-black);
    color: var(--c-white);
}

.home-blog__eyebrow {
    color: var(--c-yellow);
    font-size: clamp(0.75rem, calc(var(--vw) * 0.73), 0.9375rem);
    font-weight: var(--fw-bold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.home-blog__title {
    margin-block-start: var(--sp-3);
    font-size: clamp(1.5rem, calc(var(--vw) * 2.9), 3.25rem);
    font-weight: var(--fw-bold);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* Portfolyo başlığındaki "Yenilikçi" vurgusuyla aynı */
.home-blog__accent {
    color: var(--c-yellow);
    font-style: italic;
    padding-inline-end: 0.1em;
}

.home-blog__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.75rem, calc(var(--vw) * 1.6), 2rem);
    margin-block-start: clamp(1.5rem, calc(var(--vw) * 2.6), 3.125rem);
}

/* Mobilde üç, tablette dört kart; masaüstünde altısı birden */
.home-blog__item:nth-child(n + 4) {
    display: none;
}

.home-blog__more {
    display: flex;
    justify-content: flex-end;
    margin-block-start: clamp(1.5rem, calc(var(--vw) * 2.4), 2.875rem);
}

.home-blog__more-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--c-yellow);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.885), 1.0625rem);
    font-weight: var(--fw-bold);
    transition: gap var(--t-fast), color var(--t-fast);
}

.home-blog__more-link:hover {
    gap: var(--sp-4);
    color: var(--c-white);
}


/* ---------- Kapak görselli kart ---------- */
/* Portfolyo kartının (.work) yüzey dili: koyu zemin, ince çerçeve, yuvarlak köşe */
.blog-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #0A0A0A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    transition: border-color var(--t-fast), background-color var(--t-fast);
}

.blog-tile:hover {
    background-color: #101010;
    border-color: rgba(255, 255, 255, 0.18);
}

/* Kapak 16:9 — önerilen dosya 1200×675 */
.blog-tile__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #121212;
}

.blog-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow);
}

.blog-tile:hover .blog-tile__media img {
    transform: scale(1.03);
}

/* Yer tutucu kartın kenarına yapışmasın */
.blog-tile__media .ph {
    border: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 0;
}

.blog-tile__body {
    display: grid;
    align-content: start;
    gap: var(--sp-2);
    padding: clamp(1rem, calc(var(--vw) * 1.4), 1.75rem);
}

/* Üstte sarı kategori, altında "tarih · okuma süresi" */
.blog-tile__cat,
.post-card__cat {
    color: var(--c-yellow);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.15em;
    line-height: 1.3;
    text-transform: uppercase;
}

.blog-tile__meta,
.post-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-3);
    color: var(--c-gray-500);
    font-size: 0.8125rem;
    font-weight: var(--fw-medium);
}

.blog-tile__meta > * + *::before,
.post-card__meta > * + *::before {
    content: '·';
    margin-inline-end: var(--sp-3);
    color: var(--c-gray-700);
}

/* base.css başlıkları "balance" ile dengeliyor; kartlarda bu, satırları
   erken kırıp sağda boşluk bırakıyordu. Başlık kartın sağ kenarına kadar uzansın. */
.blog-tile__title,
.post-card__title {
    text-wrap: wrap;
}

.blog-tile__title {
    font-size: clamp(1.125rem, calc(var(--vw) * 1.35), 1.5rem);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.02em;
    line-height: 1.25;
    transition: color var(--t-fast);
}

.blog-tile:hover .blog-tile__title {
    color: var(--c-yellow);
}

.blog-tile__desc {
    color: var(--c-gray-400);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.885), 1.0625rem);
    line-height: 1.55;
}


/* ============================================================
   Görselsiz kartlar — /blog ve "Diğer yazılar"
   ============================================================ */
.post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.75rem, calc(var(--vw) * 1.4), 1.5rem);
    margin-block-start: clamp(2rem, calc(var(--vw) * 3.6), 4rem);
}

.svc-sec .post-grid {
    margin-block-start: 0;
}

.post-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    height: 100%;
    padding: clamp(1.25rem, calc(var(--vw) * 1.7), 2rem);
    background-color: #0A0A0A;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    transition: border-color var(--t-fast), background-color var(--t-fast);
}

.post-card:hover {
    background-color: #101010;
    border-color: rgba(254, 224, 1, 0.45);
}

.post-card__title {
    margin-block-start: var(--sp-2);
    font-size: clamp(1.1875rem, calc(var(--vw) * 1.4), 1.5rem);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.02em;
    line-height: 1.25;
    transition: color var(--t-fast);
}

.post-card:hover .post-card__title {
    color: var(--c-yellow);
}

.post-card__desc {
    color: var(--c-gray-400);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.885), 1.0625rem);
    line-height: 1.6;
}

/* Kartın en altına yaslanır; kartlar farklı uzunlukta olsa da aynı hizada */
.post-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-block-start: auto;
    padding-block-start: var(--sp-2);
    color: var(--c-yellow);
    font-size: 0.9375rem;
    font-weight: var(--fw-bold);
    transition: gap var(--t-fast);
}

.post-card:hover .post-card__more {
    gap: var(--sp-3);
}


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

/* Yazı, altındaki "Diğer yazılar" ve "Hizmetlerimiz" bölümleriyle aynı
   genişlikte (service-page.css'teki 1180px'lik .svc sütunu); sağ kenar
   sayfanın geri kalanıyla hizalı. */

.post__head {
    margin-block-start: clamp(1.5rem, calc(var(--vw) * 2.4), 2.75rem);
}

.post__cat {
    color: var(--c-yellow);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: color var(--t-fast);
}

.post__cat:hover {
    color: var(--c-white);
}

.post__title {
    margin-block-start: var(--sp-4);
    font-size: clamp(1.875rem, calc(var(--vw) * 3.3), 3.25rem);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.post__lead {
    margin-block-start: var(--sp-5);
    color: var(--c-gray-300);
    font-size: clamp(1.0625rem, calc(var(--vw) * 1.15), 1.3125rem);
    line-height: 1.65;
}

.post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-4);
    margin-block-start: var(--sp-6);
    padding-block: var(--sp-4);
    border-block: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--c-gray-500);
    font-size: 0.875rem;
    font-weight: var(--fw-medium);
}

.post__meta > * + *::before {
    content: '·';
    margin-inline-end: var(--sp-4);
    color: var(--c-gray-700);
}


/* ---------- Yazı gövdesi ---------- */
.post__body {
    margin-block-start: clamp(2rem, calc(var(--vw) * 3), 3rem);
    color: var(--c-gray-300);
    font-size: clamp(1rem, calc(var(--vw) * 1.05), 1.1875rem);
    line-height: 1.85;
}

.post__body > * + * {
    margin-block-start: 1.1em;
}

/* base.css'teki "balance" ara başlıkları erken kırıyordu; satır sonuna kadar uzansın */
.post__title,
.post__body h2,
.post__body h3 {
    text-wrap: wrap;
}

.post__body h2 {
    margin-block-start: 2.2em;
    color: var(--c-white);
    font-size: clamp(1.375rem, calc(var(--vw) * 1.9), 2rem);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.post__body h3 {
    margin-block-start: 1.6em;
    color: var(--c-white);
    font-size: clamp(1.125rem, calc(var(--vw) * 1.35), 1.375rem);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.post__body h2 + *,
.post__body h3 + * {
    margin-block-start: 0.6em;
}

.post__body ul {
    display: grid;
    gap: 0.5em;
    padding-inline-start: 1.25em;
    list-style: none;
}

/* Sitenin sarı eşkenar dörtgeni madde işareti olarak */
.post__body li {
    position: relative;
}

.post__body li::before {
    content: '';
    position: absolute;
    inset-block-start: 0.8em;
    inset-inline-start: -1.1em;
    width: 0.4em;
    height: 0.4em;
    background-color: var(--c-yellow);
    transform: rotate(45deg);
}

.post__body strong {
    color: var(--c-white);
    font-weight: var(--fw-semibold);
}

.post__body a {
    color: var(--c-yellow);
    font-weight: var(--fw-semibold);
    transition: color var(--t-fast);
}

.post__body a:hover {
    color: var(--c-white);
}


/* ---------- İlgili hizmet çağrısı ---------- */
.post__service {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-4);
    margin-block-start: clamp(2.5rem, calc(var(--vw) * 3.6), 4rem);
    padding: clamp(1.125rem, calc(var(--vw) * 1.6), 1.875rem);
    border: 1px solid rgba(254, 224, 1, 0.35);
    border-radius: 2px;
    transition: border-color var(--t-fast);
}

.post__service:hover {
    border-color: var(--c-yellow);
}

.post__service-label {
    color: var(--c-gray-400);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.95), 1.125rem);
}

.post__service-name {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--c-yellow);
    font-size: clamp(1.0625rem, calc(var(--vw) * 1.2), 1.375rem);
    font-weight: var(--fw-semibold);
    transition: gap var(--t-fast);
}

.post__service:hover .post__service-name {
    gap: var(--sp-3);
}


/* ============================================================
   Kırılımlar
   ============================================================ */
@media (min-width: 640px) {
    .home-blog__grid,
    .post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Tablette 2+2 */
    .home-blog__item:nth-child(4) {
        display: block;
    }
}

@media (min-width: 1024px) {
    .home-blog__grid,
    .post-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Masaüstünde 3+3 */
    .home-blog__item:nth-child(n + 4) {
        display: block;
    }
}