/* blogs/details.blade.php — blog yazısı detay sayfası.

   Bu dosya yeni. Sayfada kullanılan 85 sınıfın 43'ünün hiçbir CSS dosyasında
   karşılığı YOKTU (ölçüldü): tp-breadcrumb-area, tp-blog-title, postbox-*,
   recent-post-*, sidebar-search-*, sidebar-category-list, tagcloud,
   container-1330, pt-110, pb-80, mb-115, fs-54 ... Hepsi eski temadan kalma.
   Sonuç: başlık sabit header'ın ALTINDA kalıyor, yazar avatarı ~330px
   basılıyor, kenar çubuğu başlıkları gövde metninden büyük çıkıyor ve
   "son yazılar" görselleri tam genişlik alıyordu.

   Kart dili site genelindeki .services-card / .audience-card ile aynı:
   1px --neutral-200 çerçeve, --radius, beyaz zemin. */

/* Üst alan artık components/breadcrumb (.section-hero) tarafından basılıyor;
   buradaki .tp-breadcrumb-* / .tp-blog-title kuralları kaldırıldı. */

/* ---------- Gövde ---------- */

.postbox-area {
    /* Üst boşluk 72'den 56'ya: breadcrumb bileşeni (.section-hero v2) kendi
       alt boşluğunu taşıyor, ikisi üst üste binince aralık fazla açılıyordu. */
    padding: 56px 0 96px;
}

.postbox-details-item {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--neutral-200);
}

.postbox-details-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

.postbox-author-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Avatar eski hâlde boyutsuzdu; Voyager'ın varsayılan silüeti 330px
   basılıyordu ve sayfanın ilk ekranını tek başına dolduruyordu. */
.postbox-author-img img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--neutral-100);
}

.postbox-author-name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
}

.postbox-meta,
.post-box-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    /* --secondary sayfa zemininde 4.10:1 ile AA'nın altında; bir kademe koyu. */
    color: var(--neutral-600);
}

.postbox-meta > span,
.post-box-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* SVG'lerin stroke'u kaynakta stroke="white" yazıyordu: açık zeminde
   görünmüyorlardı. Blade'de currentColor'a çevrildi, boyut buradan. */
.postbox-meta i,
.post-box-meta i {
    display: inline-flex;
    color: var(--neutral-500);
}

.postbox-meta svg,
.post-box-meta svg {
    width: 15px;
    height: 15px;
}

.postbox-details-thumb {
    margin-bottom: 32px;
}

.postbox-details-thumb img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    /* Yazı görselleri farklı oranlarda yükleniyor; sabit oran + cover, yükleme
       sırasında düzen kaymasını da önlüyor. */
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ---------- Yazı gövdesi (zengin metin) ---------- */

.postbox-details-text {
    margin-bottom: 32px;
    max-width: 72ch;
    color: var(--neutral-700);
    font-size: 17px;
    line-height: 1.8;
}

.postbox-details-text > *:first-child {
    margin-top: 0;
}

.postbox-details-text h2 {
    margin: 40px 0 12px;
    color: var(--primary);
    font-size: 26px;
    line-height: 1.3;
    font-weight: 600;
}

.postbox-details-text h3 {
    margin: 32px 0 10px;
    color: var(--primary);
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
}

.postbox-details-text h4,
.postbox-details-text h5,
.postbox-details-text h6 {
    margin: 24px 0 8px;
    color: var(--primary);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
}

/* font-size doğrudan p'ye yazılmalı: styles.css'te global `p { font-size: 14px }`
   var ve doğrudan kural, kapsayıcıdan miras alınanı yener. */
.postbox-details-text p,
.postbox-details-text li {
    font-size: 17px;
    line-height: 1.8;
}

.postbox-details-text p {
    margin: 0 0 18px;
}

.postbox-details-text ul,
.postbox-details-text ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

/* list-style li'de olmalı: styles.css `ul, li { list-style-type: none }`
   yazıyor ve bildirim li'nin kendisinde olduğu için ul'dan verilen değer
   ona ulaşmıyor. */
.postbox-details-text ul > li {
    list-style-type: disc;
}

.postbox-details-text ol > li {
    list-style-type: decimal;
}

.postbox-details-text li {
    margin-bottom: 8px;
}

.postbox-details-text li > p {
    margin: 0;
}

.postbox-details-text a {
    color: #246384;
    color: color-mix(in srgb, var(--brand) 60%, #000);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.postbox-details-text strong,
.postbox-details-text b {
    color: var(--primary);
    font-weight: 600;
}

.postbox-details-text blockquote {
    margin: 28px 0;
    padding: 20px 24px;
    border-left: 3px solid var(--brand);
    border-radius: 0 12px 12px 0;
    background: var(--neutral-100);
    color: var(--primary);
    font-size: 18px;
    line-height: 1.7;
}

.postbox-details-text img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ---------- Etiketler ---------- */

.postbox-details-tag-wrap {
    padding-top: 24px;
    border-top: 1px solid var(--neutral-200);
}

.postbox-details-tag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.postbox-details-tag > span {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
}

.tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Etiketler bir arşiv sayfasına gitmiyor (tag rotası yok), bu yüzden link
   değil düz rozet olarak basılıyorlar — tıklanabilir görünüp hiçbir yere
   gitmemeleri kullanıcıyı yanıltıyordu. */
.tagcloud span.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    background: var(--white);
    font-size: 13px;
    color: var(--neutral-600);
}

/* ---------- Kenar çubuğu ---------- */

.sidebar-wrapper .sidebar-widget {
    padding: 22px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius);
    background: var(--white);
}

.sidebar-wrapper .sidebar-title {
    margin: 0 0 14px;
    color: var(--primary);
    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
}

/* Arama */

.sidebar-search-input {
    display: flex;
    align-items: center;
}

.sidebar-search-input input.form-control {
    height: 44px;
    padding: 0 44px 0 14px;
    border: 1px solid var(--neutral-200) !important;
    border-radius: 12px;
    background: var(--neutral-50);
    font-size: 15px;
    color: var(--primary);
}

.sidebar-search-input input.form-control:focus {
    outline: 2px solid var(--neutral-900);
    outline-offset: 1px;
    background: var(--white);
}

.sidebar-search-input .btn {
    right: 6px;
    padding: 6px 8px;
    color: var(--neutral-600) !important;
    text-decoration: none;
}

/* Kategori */

.sidebar-category-list .category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--neutral-50);
    color: var(--neutral-600);
    font-size: 15px;
    text-decoration: none;
}

/* Son yazılar */

.recent-posts-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.recent-post-item {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.recent-post-item + .recent-post-item {
    padding-top: 16px;
    border-top: 1px solid var(--neutral-100);
}

.recent-post-thumb img {
    width: 84px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
}

.recent-post-content .badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--neutral-100);
    font-size: 11px;
    font-weight: 600;
    /* styles.css'teki .sidebar-widget .badge kuralıyla çakışmasın diye renk
       burada da açıkça veriliyor. */
    color: var(--neutral-600);
}

.recent-post-content h3 {
    margin: 6px 0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
}

.recent-post-title {
    color: var(--primary);
    text-decoration: none;
}

.recent-post-title:hover {
    color: #246384;
    color: color-mix(in srgb, var(--brand) 60%, #000);
}

.recent-post-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--neutral-600);
}

/* ---------- Duyarlı ---------- */

@media (max-width: 991.98px) {
    .postbox-area {
        padding: 48px 0 64px;
    }

    .sidebar-wrapper {
        margin-top: 40px;
        padding-left: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .postbox-details-text,
    .postbox-details-text p,
    .postbox-details-text li {
        font-size: 16px;
    }

    .postbox-details-meta {
        gap: 10px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .recent-post-title,
    .sidebar-search-input .btn {
        transition: none;
    }
}