/* Blog Post */
.blog-post {
    margin-bottom: var(--spacing-2xl);
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    /* Overflow kontrolü */
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Post Header */
.post-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2xl);
}

.post-header-main {
    flex: 1;
}

.post-title {
    font-size: var(--font-size-3xl);
    color: var(--text-color);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

/* Post Image */
.post-image {
    margin-bottom: var(--spacing-2xl);
    border-radius: var(--card-radius-sm);
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.post-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Category Section */
.category-section {
    margin-bottom: var(--spacing-2xl);
}

.categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--badge-padding);
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--badge-radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* Post Content */
.post-content {
    font-size: 1rem; /* Normal boyut, daha önce 1.25rem (lg) idi */
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: var(--spacing-2xl);
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    /* Mobilde yatay scroll'u engelle */
    overflow-x: hidden;
    width: 100%;
}

/* CKEditor ve inline style'ları override et */
.post-content * {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Büyük fontları sınırla */
.post-content span[style*="font-size"] {
    font-size: clamp(0.875rem, 2vw, 1.25rem) !important;
}

/* Uzun kelimeler ve inline elemanlar için agresif kırılma */
.post-content span,
.post-content strong,
.post-content em,
.post-content b,
.post-content i {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* CKEditor tarafından eklenen div'ler için */
.post-content div {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Date Info */
.date-info {
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    color: var(--text-color);
    opacity: 0.7;
    font-size: var(--font-size-sm);
}

/* Markdown Content Styles */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    color: var(--text-color);
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-md);
}

.post-content h1 { font-size: 1.75rem; } /* 2.5rem -> 1.75rem */
.post-content h2 { font-size: 1.5rem; }  /* 2rem -> 1.5rem */
.post-content h3 { font-size: 1.25rem; } /* 1.5rem -> 1.25rem */
.post-content h4 { font-size: 1.1rem; }  /* 1.25rem -> 1.1rem */
.post-content h5 { font-size: 1rem; }    /* 1rem (aynı) */
.post-content h6 { font-size: 0.9rem; }  /* 0.875rem -> 0.9rem */

.post-content p {
    margin-bottom: var(--spacing-lg);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.post-content img:not(.random-image) {
    max-width: 100%;
    height: auto;
    border-radius: var(--card-radius-sm);
    margin: var(--spacing-2xl) 0;
}

.post-content a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-base);
}

.post-content a:hover {
    text-decoration: underline;
}

.post-content ul,
.post-content ol {
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-lg);
}

.post-content li {
    margin-bottom: var(--spacing-sm);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.post-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    color: var(--text-color);
    opacity: 0.7;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.post-content code {
    background-color: var(--code-bg);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--card-radius-sm);
    font-size: var(--font-size-sm);
    word-break: break-all;
    overflow-wrap: break-word;
}

.post-content pre {
    background-color: var(--code-bg);
    padding: var(--spacing-md);
    border-radius: var(--card-radius-sm);
    overflow-x: auto;
    margin: var(--spacing-lg) 0;
    max-width: 100%;
    /* Mobilde küçük font boyutu */
    font-size: 0.85rem;
}

.post-content pre code {
    background-color: transparent;
    padding: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Uzun kelimeler ve URL'ler için */
.post-content a {
    word-break: break-all;
    overflow-wrap: break-word;
    display: inline-block;
    max-width: 100%;
}

/* Tablo responsive */
.post-content table {
    width: 100%;
    overflow-x: auto;
    display: block;
    font-size: 0.875rem;
}

/* Tablo wrapper için */
.post-content .table-wrapper,
.post-content .table-responsive {
    overflow-x: auto;
    max-width: 100%;
    margin: var(--spacing-lg) 0;
}

/* İframe'ler için (YouTube, vb.) */
.post-content iframe {
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9;
}

/* Responsive Design */
@media (max-width: 768px) {
    .post-title {
        font-size: 1.5rem;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h1 { font-size: 1.5rem; }
    .post-content h2 { font-size: 1.3rem; }
    .post-content h3 { font-size: 1.15rem; }
    .post-content h4 { font-size: 1rem; }
    .post-content h5 { font-size: 0.95rem; }
    .post-content h6 { font-size: 0.9rem; }
}

@media (max-width: 576px) {
    .post-content {
        font-size: 0.9rem;
        padding: 0 0.5rem;
        /* Agresif overflow kontrolü */
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        hyphens: auto;
    }

    /* Tüm inline elementler için */
    .post-content * {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* Pre ve code elementleri için özel ayarlar */
    .post-content pre {
        font-size: 0.75rem;
        padding: 0.5rem;
    }

    .post-content code {
        font-size: 0.8rem;
    }

    /* Tablolar için */
    .post-content table {
        font-size: 0.75rem;
    }

    /* Uzun URL'ler için */
    .post-content a {
        word-break: break-all !important;
    }

    /* İmage'lar için */
    .post-content img {
        max-width: calc(100vw - 2rem) !important;
        height: auto !important;
    }

    /* iframe'ler için */
    .post-content iframe {
        max-width: calc(100vw - 2rem) !important;
    }
}

/* Rastgele görsel stilleri */
.random-image-container {
    position: relative;
    clear: both;
    margin: var(--spacing-lg) 0;
}

.random-image-container + p,
p + .random-image-container {
    margin: 0;
}

.float-right {
    float: right;
    margin-left: var(--spacing-md);
}

.float-left {
    float: left;
    margin-right: var(--spacing-md);
}

.random-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    background: transparent;
    mix-blend-mode: multiply;
}

.post-content {
    overflow: hidden;
}

.post-meta {
    margin-bottom: var(--spacing-md);
    color: var(--text-color);
    opacity: 0.7;
    font-size: var(--font-size-sm);
}

.post-meta span {
    color: var(--text-color);
}

.post-category {
    margin-right: var(--spacing-md);
}

.post-date {
    color: var(--text-color);
}

/* Related Posts */
.related-posts {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
    border-top: 1px solid var(--border-color);
}

.related-posts h3 {
    color: var(--text-color);
    margin-bottom: var(--spacing-lg);
}

.related-post-content h4 a {
    color: var(--text-color);
    text-decoration: none;
    transition: var(--transition-base);
}

.related-post-content h4 a:hover {
    color: var(--primary-color);
}

.related-post-content .date {
    color: var(--text-color);
    opacity: 0.7;
    font-size: var(--font-size-sm);
}