/* Layout using skeleton .container + grid */

        .blog-grid {

            display: grid;

            grid-template-columns: 1fr 350px; /* Main content + Sidebar */

            gap: 60px;

            padding-top: 60px;

            padding-bottom: 60px;

            min-width: 0;

            max-width: 100%;

        }



        /* Main Content Column */

        .post-main {

            display: flex;

            flex-direction: column;

            min-width: 0;

            max-width: 100%;

        }



        .post-content-wrapper {

            border: 1px solid #E5E7EB;

            padding: 20px;

            min-width: 0;

            max-width: 100%;

            overflow-wrap: break-word;

            word-wrap: break-word;

        }



        .post-main .featured-image {

            width: 100%;

            height: 500px;

            object-fit: cover;

            margin-bottom: 30px;

        }



        .post-main h1 {

            font-size: 32px;

            color: #183A5C;

            font-weight: 600;

            margin-bottom: 15px;

            line-height: 150%;

        }



        .post-main .meta-info {

            font-size: 14px;

            color: #6B7280;

            margin-bottom: 20px;

            display: flex;

            align-items: center;

            gap: 15px;

        }



        .post-main .meta-info span {

            display: flex;

            align-items: center;

        }

        

        .post-main .meta-info .category-name {

            color: #9CA3AF; /* Lighter gray for category if needed, or keeping it same */

        }

        

        .post-main .category-tag {

             background-color: #F3F4F6;

             padding: 4px 10px;

             border-radius: 4px;

             color: #4B5563;

             font-weight: 500;

        }



        .post-divider {

             border: 0;

             border-top: 1px solid #E5E7EB;

             margin-top: 0;

             margin-bottom: 30px;

             width: 100%;

        }



        .post-main .content-body {

            font-size: 17px;

            line-height: 1.8;

            color: #374151;

            max-width: 100%;

            overflow-wrap: break-word;

            word-wrap: break-word;

        }



        .post-main .content-body img,

        .post-main .content-body video,

        .post-main .content-body iframe,

        .post-main .content-body embed,

        .post-main .content-body object {

            max-width: 100% !important;

            height: auto !important;

        }



        .post-main .content-body table {

            display: block;

            max-width: 100%;

            overflow-x: auto;

            -webkit-overflow-scrolling: touch;

        }



        .post-main .content-body pre,

        .post-main .content-body .ql-video {

            max-width: 100%;

            overflow-x: auto;

        }

        

        .post-main .content-body h2 {

            font-size: 24px;

            color: #161F37;

            font-weight: 700;

            margin-top: 30px;

            margin-bottom: 15px;

        }



        .post-main .content-body p {

            margin-bottom: 20px;

        }



        /* Sidebar Column */

        .post-sidebar {

            display: flex;

            flex-direction: column;

            min-width: 0;

            max-width: 100%;

        }



        .sidebar-title {

            font-size: 22px;

            font-weight: 800;

            color: #161F37;

            margin-bottom: 25px;

            text-transform: uppercase;

            padding-bottom: 15px;

            border-bottom: 2px solid #E5E7EB;

            margin-top: 0;

        }



        .sidebar-list {

            display: flex;

            flex-direction: column;

            gap: 30px;

        }



        .sidebar-item {

            text-decoration: none;

            display: block;

        }



        .sidebar-item img {

            width: 100%;

            height: 200px;

            object-fit: cover;

            margin-bottom: 15px;

        }



        .sidebar-item .date {

            font-size: 13px;

            color: #6B7280;

            margin-bottom: 8px;

            display: block;

        }



        .sidebar-item h4 {

            font-size: 16px;

            color: #161F37;

            font-weight: 700;

            line-height: 1.4;

            margin: 0;

            transition: color 0.2s;

        }



        .sidebar-item:hover h4 {

            color: #3B82F6;

        }

        

        .sidebar-item .category {

            color: #3B82F6;

            font-size: 13px;

            font-weight: 600;

            margin-right: 5px;

        }



        /* Tablet: mobil header (≤1200px) + iki sütun blog (≥992px) */

        @media (min-width: 992px) and (max-width: 1200px) {

            .blog-grid {

                padding-top: 104px;

            }

        }



        /* Responsive */

        @media (max-width: 991px) {

            .blog-grid {

                grid-template-columns: 1fr;

                gap: 40px;

            }

            

            .post-main .featured-image {

                height: auto;

                max-height: 360px;

                min-height: 0;

            }

            

            .post-main {

                margin-top: 80px;

            }



            .sidebar-title {

                margin-top: 20px;

            }

        }



        @media (max-width: 767px) {

            .blog-grid {

                gap: 32px;

                padding-top: 8px;

                padding-bottom: 48px;

            }



            .post-main {

                margin-top: 88px;

            }



            .post-main h1 {

                font-size: 22px;

                line-height: 1.35;

            }



            .post-content-wrapper {

                padding: 16px;

            }



            .post-main .featured-image {

                max-height: 260px;

                margin-bottom: 20px;

            }



            .post-main .meta-info {

                flex-wrap: wrap;

                gap: 8px 12px;

            }



            .post-main .content-body {

                font-size: 16px;

                line-height: 1.65;

            }



            .post-main .content-body h2 {

                font-size: 20px;

            }

        }



        @media (max-width: 380px) {

            .post-main h1 {

                font-size: 20px;

            }



            .post-content-wrapper {

                padding: 12px;

            }

        }