/* ============================================================
   KABE.COM.TR — Midnight Mecca v3 – Full Blog Redesign
   Deep Indigo + Gold · Magazine-Quality Blog Layout
   ============================================================ */

/* ============ 1. Design Tokens ============ */
:root {
    --m-indigo: #1e1b4b;
    --m-indigo-deep: #0f0d2e;
    --m-indigo-mid: #312e81;
    --m-indigo-light: #4338ca;
    --m-indigo-subtle: #eef2ff;
    --m-gold: #d4a843;
    --m-gold-light: #f5d98a;
    --m-gold-dark: #b08a2e;
    --m-gold-glow: rgba(212, 168, 67, .25);
    --m-gold-subtle: #fef9ee;
    --m-live: #ef4444;
    --m-live-dark: #dc2626;
    --m-live-glow: rgba(239, 68, 68, .35);
    --m-bg: #f8f7f4;
    --m-surface: #ffffff;
    --m-surface-warm: #fdfcfa;
    --m-border: #e8e5df;
    --m-border-light: #f0ede8;
    --m-text: #1c1917;
    --m-text-mid: #57534e;
    --m-text-light: #a8a29e;
    --m-text-inverse: #faf9f7;
    --sh-xs: 0 1px 2px rgba(0, 0, 0, .03);
    --sh-sm: 0 2px 8px rgba(0, 0, 0, .04);
    --sh-md: 0 4px 20px rgba(0, 0, 0, .06);
    --sh-lg: 0 8px 40px rgba(0, 0, 0, .08);
    --sh-xl: 0 16px 60px rgba(0, 0, 0, .1);
    --sh-gold: 0 4px 20px rgba(212, 168, 67, .15);
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-2xl: 28px;
    --r-full: 9999px;
    --ease: .3s cubic-bezier(.4, 0, .2, 1);
    --ease-fast: .15s ease;
    --ease-spring: .5s cubic-bezier(.34, 1.56, .64, 1);
    --ease-slow: .6s cubic-bezier(.25, .1, .25, 1);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============ 2. Base Reset & Typography ============ */
body {
    background: var(--m-bg);
    color: var(--m-text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font);
    font-weight: 700;
    line-height: 1.2;
    color: var(--m-text);
    margin-top: 0;
}

a {
    color: var(--m-text);
    text-decoration: none;
    transition: color var(--ease-fast);
}

a:hover {
    color: var(--m-gold-dark);
    text-decoration: none;
}

a:focus,
a:active {
    outline: none !important;
    text-decoration: none;
}

::selection {
    background: var(--m-indigo);
    color: var(--m-gold-light);
}

.title-index {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--m-text);
    padding: 24px 0 16px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    letter-spacing: -.02em;
}

.title-index::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--m-gold), transparent 60%);
    border-radius: 1px;
}


/* ============ 3. HERO ============ */
.kv-hero {
    position: relative;
    height: 600px;
    overflow: hidden;
    background: #0a0a12;
}

.kv-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.kv-hero__bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120vw;
    height: 120vh;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%) scale(1.2);
    border: 0;
    pointer-events: none;
}

.kv-hero__dim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(10, 10, 18, .35) 0%, rgba(10, 10, 18, .2) 40%, rgba(10, 10, 18, .65) 80%, rgba(10, 10, 18, .92) 100%),
        linear-gradient(90deg, rgba(10, 10, 18, .5) 0%, transparent 30%, transparent 70%, rgba(10, 10, 18, .5) 100%);
    pointer-events: none;
}

.kv-hero .container {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
}

.kv-hero__body {
    padding-bottom: 80px;
    max-width: 600px;
}

.kv-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    margin-right: 6px;
    animation: kvPulse 1.5s ease-in-out infinite;
    vertical-align: middle;
    box-shadow: 0 0 8px rgba(239, 68, 68, .5);
}

.kv-live-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: #ef4444;
    padding: 3px 12px 3px 6px;
    border-radius: 100px;
    letter-spacing: .08em;
    margin-bottom: 14px;
    vertical-align: middle;
}

@keyframes kvPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(.8);
    }
}

.kv-hero__h1 {
    font-size: 2.8rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 10px;
    letter-spacing: -.03em;
}

.kv-hero__p {
    color: rgba(255, 255, 255, .55);
    font-size: 15px;
    margin: 0 0 22px;
    line-height: 1.5;
}

.kv-hero__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Stats bar */
.kv-hero__stats {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 14px 0;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.kv-hero__stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 28px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.kv-hero__stat svg {
    opacity: .5;
}

.kv-hero__stat-label {
    color: rgba(255, 255, 255, .4);
    font-size: 11px;
    font-weight: 500;
}

.kv-hero__stat-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, .15);
}

/* Buttons */
.kv-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 26px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all .25s ease;
    cursor: pointer;
    border: none;
}

.kv-btn--primary {
    background: #fff;
    color: #0a0a12;
}

.kv-btn--primary:hover {
    background: #f0f0f5;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
    color: #0a0a12 !important;
}

.kv-btn--outline {
    background: transparent;
    color: rgba(255, 255, 255, .7);
    border: 1px solid rgba(255, 255, 255, .2);
}

.kv-btn--outline:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff !important;
    border-color: rgba(255, 255, 255, .35);
}

/* ============ 4. Top Nav Bar ============ */
.nav-top-container {
    background: var(--m-indigo-deep);
    border-bottom: 1px solid rgba(212, 168, 67, .1);
}

.nav-top {
    padding: 0;
}

.nav-top ul.left li a,
.nav-top ul.right li a {
    color: rgba(255, 255, 255, .6) !important;
    font-size: 11.5px;
    font-weight: 500;
    padding: 9px 10px;
    transition: color var(--ease-fast);
}

.nav-top ul.left li a:hover,
.nav-top ul.right li a:hover {
    color: var(--m-gold-light) !important;
}

.nav-top .span-sep {
    color: rgba(255, 255, 255, .12) !important;
}

.nav-top .btn-switch-mode svg,
.nav-top .inf-svg-icon {
    fill: rgba(255, 255, 255, .5) !important;
}

.nav-top .btn-switch-mode:hover svg,
.nav-top a:hover .inf-svg-icon {
    fill: var(--m-gold-light) !important;
}

.nav-top .dropdown-menu {
    border: none;
    box-shadow: var(--sh-xl);
    border-radius: var(--r-lg);
    padding: 6px 0;
    background: var(--m-surface);
}

.nav-top .dropdown-menu li a {
    color: var(--m-text) !important;
    padding: 9px 20px;
    font-size: 13px;
}

.nav-top .dropdown-menu li a:hover {
    background: var(--m-gold-subtle);
    color: var(--m-gold-dark) !important;
}

.nav-top ul.right li a[href*="kaabalive"],
.nav-top ul.left li a[href*="canli"] {
    color: var(--m-live) !important;
    font-weight: 700;
}


/* ============ 5. Header & Navigation ============ */
#header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    transition: all var(--ease);
}

/* Mobile nav — visual overrides only (original CSS handles positioning) */
.nav-mobile-header {
    background-color: #0a0a12 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.nav-mobile {
    background: #fff !important;
}

.overlay-bg {
    z-index: 999998 !important;
}

.modal-search {
    z-index: 9999999 !important;
}

/* On mobile: disable backdrop-filter which traps fixed children */
@media (max-width: 992px) {
    #header {
        position: relative;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #fff;
        z-index: auto;
    }
}

#header.scrolled {
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 1px 20px rgba(0, 0, 0, .05);
}

.navbar-inverse {
    background: transparent;
    border: none;
    margin-bottom: 0;
}

.nav-desktop .navbar-nav>li>a {
    color: var(--m-text) !important;
    font-size: 13.5px;
    font-weight: 600;
    padding: 15px 14px;
    position: relative;
    transition: color var(--ease-fast);
}

.nav-desktop .navbar-nav>li>a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 50%;
    height: 2.5px;
    background: linear-gradient(90deg, var(--m-gold), var(--m-gold-light));
    border-radius: 2px 2px 0 0;
    transition: transform var(--ease);
}

.nav-desktop .navbar-nav>li:hover>a::after,
.nav-desktop .navbar-nav>li.active>a::after {
    transform: translateX(-50%) scaleX(1);
}

.nav-desktop .navbar-nav>li:hover>a,
.nav-desktop .navbar-nav>li.active>a {
    color: var(--m-gold-dark) !important;
}

.li-navbar-brand .navbar-brand {
    padding: 8px 14px 8px 0;
}

.top-dropdown {
    border: none !important;
    box-shadow: var(--sh-xl) !important;
    border-radius: var(--r-lg) !important;
    padding: 6px 0 !important;
    animation: menuReveal .22s ease;
    background: var(--m-surface) !important;
    border-top: 2px solid var(--m-gold) !important;
}

.top-dropdown li a {
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--m-text) !important;
    transition: all var(--ease-fast) !important;
}

.top-dropdown li a:hover {
    background: var(--m-gold-subtle) !important;
    color: var(--m-gold-dark) !important;
    padding-left: 24px !important;
}

.li-search .search-icon {
    color: var(--m-text-mid);
    font-size: 16px;
    padding: 15px 10px;
}

.li-search .search-icon:hover {
    color: var(--m-gold-dark);
}

.modal-search .form-control {
    border: 2px solid var(--m-border);
    border-radius: var(--r-xl);
    padding: 14px 24px;
    font-size: 15px;
}

.modal-search .form-control:focus {
    border-color: var(--m-gold);
    box-shadow: 0 0 0 4px var(--m-gold-glow);
}


/* ============ 6. Slider / Hero Area ============ */
#slider {
    margin-top: 0 !important;
}

.slider-container {
    overflow: hidden;
    position: relative;
    border-bottom: 3px solid var(--m-gold);
}

.home-slider-item {
    position: relative;
    overflow: hidden;
}

.home-slider-item img {
    transition: transform 12s linear;
}

.home-slider-item.slick-active img {
    transform: scale(1.1);
}

.home-slider-item .item-info {
    background: linear-gradient(0deg, rgba(15, 13, 46, .92) 0%, rgba(15, 13, 46, .5) 40%, transparent 100%);
    padding: 50px 30px 28px;
}

.home-slider-item .item-info .title {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.home-slider-item .item-info .title a {
    color: #fff !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .4);
}

.home-slider-item .item-info .title a:hover {
    color: var(--m-gold-light) !important;
}

.home-slider-item .post-meta span {
    color: rgba(255, 255, 255, .5);
}

.label-slider-category {
    background: linear-gradient(135deg, var(--m-gold), var(--m-gold-dark)) !important;
    color: var(--m-indigo-deep) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 14px !important;
    border-radius: var(--r-full) !important;
    box-shadow: 0 2px 10px var(--m-gold-glow);
}

.slider-nav button {
    background: rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .1) !important;
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
    color: #fff !important;
    transition: all var(--ease-fast);
}

.slider-nav button:hover {
    background: var(--m-gold) !important;
    border-color: var(--m-gold) !important;
    color: var(--m-indigo-deep) !important;
    transform: scale(1.1);
}

.home-slider-fixer {
    margin-bottom: 0;
}

.col-sl {
    display: none;
}


/* ============ 7. Blog Post Cards — Magazine Grid ============ */
.content {
    padding: 0;
}

#main {
    margin-top: 0;
}

#main.margin-top-30 {
    margin-top: 0 !important;
}

/* Default Vertical Card */
.post-item {
    background: var(--m-surface);
    border-radius: var(--r-xl);
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: var(--sh-sm);
    border: 1px solid var(--m-border-light);
    transition: all var(--ease);
    position: relative;
}

.post-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--m-gold), var(--m-indigo-light), var(--m-gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.post-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
}

.post-item:hover::after {
    transform: scaleX(1);
}

/* Post Image */
.post-item .post-image {
    overflow: hidden;
    position: relative;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
}

.post-item .post-image img {
    transition: transform .6s ease;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.post-item:hover .post-image img {
    transform: scale(1.08);
}

/* Image overlay gradient */
.post-item .post-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--ease);
}

.post-item:hover .post-image::after {
    opacity: 1;
}

/* Content area */
.post-item .post-footer {
    padding: 20px 24px 24px;
}

.post-item .post-footer .title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.4;
    letter-spacing: -.01em;
}

.post-item .post-footer .title a {
    color: var(--m-text);
    transition: color var(--ease-fast);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-item .post-footer .title a:hover {
    color: var(--m-gold-dark);
}

.post-item .summary {
    color: var(--m-text-mid);
    font-size: 14px;
    line-height: 1.65;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Category badge */
.label-post-category {
    background: var(--m-indigo) !important;
    color: var(--m-gold-light) !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 4px 12px;
    border-radius: var(--r-full);
    transition: all var(--ease-fast);
}

.label-post-category:hover {
    background: var(--m-indigo-mid) !important;
}

.default-post-label-category {
    margin-bottom: 8px;
}

/* Post Meta */
.post-meta span {
    color: var(--m-text-light);
    font-size: 12px;
    font-weight: 500;
}

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

.post-meta span a:hover {
    color: var(--m-gold-dark);
}



/* ============ 7b. Manşet Card ============ */
.kv-manset {
    padding: 32px 0 0;
}

.kv-manset__link {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0a0a12;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    transition: box-shadow .3s ease;
}

.kv-manset__link:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
}

.kv-manset__media {
    position: relative;
    overflow: hidden;
}

.kv-manset__media img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    transition: transform 6s linear;
}

.kv-manset__link:hover .kv-manset__media img {
    transform: scale(1.04);
}

.kv-manset__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(10, 10, 18, .88) 0%, rgba(10, 10, 18, .3) 50%, transparent 100%);
    pointer-events: none;
}

.kv-manset__info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px;
    z-index: 2;
}

/* Shared tag badge */
.kv-tag {
    display: inline-block;
    background: #fff;
    color: #0a0a12;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 4px 14px;
    border-radius: 100px;
    margin-bottom: 10px;
}

.kv-tag--float {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
}

.kv-tag--sm {
    font-size: 9px;
    padding: 3px 10px;
}

.kv-manset__h2 {
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 10px;
}

.kv-manset__link:hover .kv-manset__h2 {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.kv-manset__desc {
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 14px;
    max-width: 520px;
}

.kv-manset__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kv-manset__foot time {
    color: rgba(255, 255, 255, .35);
    font-size: 12px;
}

.kv-read-more {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    opacity: .5;
    transition: opacity .2s;
}

.kv-manset__link:hover .kv-read-more,
.kv-post:hover .kv-read-more {
    opacity: 1;
}


/* ============ 7c. Picks Row — 3 Cards ============ */
.kv-picks {
    padding: 36px 0 0;
}

/* Section heading */
.kv-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.kv-heading__text {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0;
    white-space: nowrap;
}

.kv-heading__line {
    flex: 1;
    height: 1px;
    background: #e5e5ea;
}

.kv-picks__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.kv-pick {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #eee;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .03);
    transition: all .3s ease;
    display: flex;
    flex-direction: column;
}

.kv-pick:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
    border-color: #ddd;
}

.kv-pick__img {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.kv-pick__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.kv-pick:hover .kv-pick__img img {
    transform: scale(1.05);
}

.kv-pick__body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.kv-pick__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 6px;
}

.kv-pick__title a {
    color: #1a1a2e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
}

.kv-pick__title a:hover {
    color: #2c5364;
}

.kv-pick__sum {
    color: #888;
    font-size: 12.5px;
    line-height: 1.5;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kv-pick__time {
    color: #bbb;
    font-size: 11px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f5;
}


/* ============ 7d. Latest News Feed ============ */
.kv-latest {
    padding: 36px 0 40px;
}

.kv-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-radius: 16px;
    padding: 20px 24px 0;
    border-right: 1px solid #f0f0f5;
}

.kv-post {
    display: flex;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f5;
    transition: all .2s ease;
}

.kv-post:first-child {
    padding-top: 0;
}

.kv-post:last-child {
    border-bottom: none;
}

.kv-post:hover {
    padding-left: 4px;
}

.kv-post__thumb {
    flex-shrink: 0;
    width: 200px;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.kv-post__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.kv-post:hover .kv-post__thumb img {
    transform: scale(1.05);
}

.kv-post__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kv-post__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    margin: 4px 0 6px;
}

.kv-post__title a {
    color: #1a1a2e;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kv-post__title a:hover {
    color: #2c5364;
}

.kv-post__excerpt {
    color: #888;
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kv-post__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.kv-post__meta time {
    color: #bbb;
    font-size: 11.5px;
}

.kv-read-more {
    font-size: 12px;
    font-weight: 700;
    color: #2c5364;
    transition: all .2s;
}

.kv-post:hover .kv-read-more {
    opacity: 1;
    color: #0f2027;
}

.kv-pagination {
    margin: 24px 0 8px;
}


/* ============ 8. Horizontal Post Card ============ */
.post-item-horizontal {
    background: var(--m-surface);
    border-radius: var(--r-xl);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: var(--sh-xs);
    border: 1px solid var(--m-border-light);
    transition: all var(--ease);
    display: flex;
}

.post-item-horizontal:hover {
    transform: translateX(6px);
    box-shadow: var(--sh-md);
    border-left: 3px solid var(--m-gold);
}

.post-item-horizontal .item-image {
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--r-xl) 0 0 var(--r-xl);
}

.post-item-horizontal .item-image img {
    object-fit: cover;
    height: 100%;
    transition: transform .5s ease;
}

.post-item-horizontal:hover .item-image img {
    transform: scale(1.06);
}

.post-item-horizontal .item-content {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-item-horizontal .item-content .title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 6px;
}

.post-item-horizontal .item-content .summary {
    font-size: 13.5px;
    color: var(--m-text-mid);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ============ 9. Boxed Post Card ============ */
.post-item-boxed {
    background: var(--m-surface);
    border-radius: var(--r-xl);
    overflow: hidden;
    margin-bottom: 22px;
    box-shadow: var(--sh-xs);
    border: 1px solid var(--m-border-light);
    transition: all var(--ease);
}

.post-item-boxed:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-lg);
}

.post-item-boxed .item-image {
    overflow: hidden;
}

.post-item-boxed .item-image img {
    transition: transform .5s ease;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    display: block;
}

.post-item-boxed:hover .item-image img {
    transform: scale(1.06);
}

.post-item-boxed .item-content {
    padding: 16px 20px 22px;
}



/* ============ 10. Sidebar — Clean Cards ============ */
.sidebar {
    position: static;
}

.sidebar-widget {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    border: 1px solid #f0f0f5;
    position: relative;
    overflow: hidden;
    transition: box-shadow .3s ease;
}

.sidebar-widget:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

/* Subtle top accent on hover */
.sidebar-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #1a1a2e, #2c5364);
    opacity: 0;
    transition: opacity .3s;
}

.sidebar-widget:hover::before {
    opacity: 1;
}

/* Widget titles */
.widget-title .title,
.widget-popular-posts-title .title {
    font-size: 12px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f5;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* Override ::before and ::after from old styles */
.widget-title .title::before,
.widget-popular-posts-title .title::before {
    display: none;
}

.widget-title .title::after,
.widget-popular-posts-title .title::after {
    display: none;
}


/* ── Popular Posts ── */
.w-popular-list {
    margin: 0;
    padding: 0;
    counter-reset: popular;
}

.w-popular-list li {
    padding: 12px 0;
    border-bottom: 1px solid #f8f8fb;
    display: flex;
    gap: 12px;
    list-style: none;
    counter-increment: popular;
    position: relative;
    align-items: center;
}

.w-popular-list li:first-child {
    padding-top: 0;
}

.w-popular-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.w-popular-list li .left {
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    width: 72px;
    height: 54px;
    position: relative;
}

.w-popular-list li .left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.w-popular-list li:hover .left img {
    transform: scale(1.06);
}

.w-popular-list li .left::after {
    content: counter(popular);
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    background: #1a1a2e;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    border-radius: 0 0 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.w-popular-list li .right .title {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 2px;
}

.w-popular-list li .right .title a {
    color: #1a1a2e;
    transition: color .2s;
}

.w-popular-list li .right .title a:hover {
    color: #2c5364;
}

.w-popular-list li .right .post-meta span {
    font-size: 10px;
    color: #bbb;
}

.w-popular-list li .right .post-meta span a {
    color: #bbb;
}


/* ── Namaz Vakitleri ── */
.namaz {
    margin-top: 4px;
}

.namaz #citySelect {
    width: 100%;
    padding: 9px 12px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid #e8e8f0;
    border-radius: 8px;
    background: #fafafe;
    color: #1a1a2e;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%231a1a2e' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    transition: all .2s;
}

.namaz #citySelect:focus {
    border-color: #1a1a2e;
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 26, 46, .08);
}

.namaz ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.namaz ul li {
    padding: 9px 12px;
    background: #fafafe;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    margin-bottom: 4px;
    transition: background .2s;
}

.namaz ul li:hover {
    background: #f0f4f8;
}

.namaz ul li span:first-child {
    font-weight: 600;
    color: #666;
}

.namaz ul li span:last-child {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #1a1a2e;
    font-size: 13px;
}

.namaz ul li.current-time {
    background: #1a1a2e !important;
    box-shadow: 0 2px 10px rgba(26, 26, 46, .15);
}

.namaz ul li.current-time span:first-child {
    color: rgba(255, 255, 255, .65);
}

.namaz ul li.current-time span:last-child {
    color: #fff;
    font-weight: 800;
}


/* ── Categories ── */
.w-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.w-category-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background .2s;
    margin-bottom: 1px;
}

.w-category-list li:hover {
    background: #f8f8fb;
}

.w-category-list li a {
    color: #555 !important;
    font-size: 12.5px;
    font-weight: 500;
    transition: all .2s;
    flex: 1;
}

.w-category-list li:hover a {
    color: #1a1a2e !important;
    padding-left: 4px;
}

.w-category-list li span {
    color: #bbb;
    font-size: 10px;
    font-weight: 600;
    background: #f0f0f5;
    padding: 2px 8px;
    border-radius: 100px;
}


/* ── Old categories fallback ── */
.sidebar-widget .w-categories-list li a,
.sidebar-widget .category-list li a {
    color: #555 !important;
    transition: all .2s;
}

.sidebar-widget .w-categories-list li a:hover,
.sidebar-widget .category-list li a:hover {
    color: #1a1a2e !important;
}


/* ── Our Picks ── */
.w-our-picks-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.w-our-picks-list li {
    margin-bottom: 12px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #f0f0f5;
    transition: all .3s;
}

.w-our-picks-list li:last-child {
    margin-bottom: 0;
}

.w-our-picks-list li:hover {
    border-color: #ddd;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .04);
}

.w-our-picks-list li .post-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.w-our-picks-list li .post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.w-our-picks-list li:hover .post-image img {
    transform: scale(1.04);
}

.w-our-picks-list li .label-post-category {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(26, 26, 46, .85);
    color: #fff !important;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 100px;
    z-index: 2;
}

.w-our-picks-list li .title {
    padding: 8px 10px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.w-our-picks-list li .title a {
    color: #1a1a2e !important;
    transition: color .2s;
}

.w-our-picks-list li .title a:hover {
    color: #2c5364 !important;
}

.w-our-picks-list li .post-meta {
    padding: 0 10px 8px;
}

.w-our-picks-list li .post-meta span {
    color: #bbb;
    font-size: 10px;
}

.w-our-picks-list li .post-meta span a {
    color: #bbb;
}


/* ── Tags ── */
.w-tag-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.widget-tags a,
.tag-list a,
.tags a,
.w-tag-list li a {
    display: inline-block;
    background: #f5f6fa;
    border: 1px solid #eee;
    border-radius: 100px;
    padding: 5px 14px;
    margin: 0 4px 6px 0;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    transition: all .2s;
}

.widget-tags a:hover,
.tag-list a:hover,
.tags a:hover,
.w-tag-list li a:hover {
    background: #1a1a2e;
    border-color: #1a1a2e;
    color: #fff !important;
}


/* ── Random Slider ── */
.sidebar-widget .random-slider-container {
    border-radius: 10px;
    overflow: hidden;
}

.sidebar-widget .home-slider-boxed-item .item-info {
    background: linear-gradient(0deg, rgba(0, 0, 0, .65), transparent);
}

.sidebar-widget .home-slider-boxed-item .item-info .title a {
    color: #fff;
    font-size: 12px;
}

.sidebar-widget .label-slider-category {
    background: #1a1a2e !important;
    color: #fff !important;
    font-size: 9px;
    font-weight: 700;
    border-radius: 100px;
    padding: 3px 8px;
}

.sidebar-widget .random-slider-nav button {
    background: #fff;
    border: 1px solid #eee;
    color: #333;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    transition: all .2s;
}

.sidebar-widget .random-slider-nav button:hover {
    background: #1a1a2e;
    color: #fff;
}


/* ── Polls ── */
.sidebar-widget .poll-container h3 {
    color: #1a1a2e;
    font-size: 13px;
}

.sidebar-widget .poll-option,
.sidebar-widget .poll-container label {
    color: #555;
    font-size: 12.5px;
}

.sidebar-widget .poll-container .btn,
.sidebar-widget .poll-container button {
    background: #1a1a2e;
    color: #fff;
    border: none;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    padding: 7px 18px;
    transition: all .2s;
}

.sidebar-widget .poll-container .btn:hover,
.sidebar-widget .poll-container button:hover {
    background: #2c5364;
}

.sidebar-widget .poll-bar {
    background: #f0f0f5;
    border-radius: 100px;
    overflow: hidden;
}

.sidebar-widget .poll-bar-fill {
    background: #1a1a2e;
}

/* Widget body + Bootstrap overrides */
.sidebar-widget .widget-body {
    padding: 0;
}

.sidebar-widget>.row,
.sidebar-widget .widget-body>.row {
    margin-left: 0;
    margin-right: 0;
}

.sidebar-widget>.row>[class*="col-"],
.sidebar-widget .widget-body>.row>[class*="col-"],
.sidebar-widget>[class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.sidebar .ad-space {
    border-radius: 14px;
    overflow: hidden;
}


/* ============ 12. Pagination ============ */
.pagination {
    margin: 28px 0 16px;
    display: flex;
    gap: 5px;
}

.pagination>li>a,
.pagination>li>span {
    border: none;
    color: var(--m-text-mid);
    font-weight: 600;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: var(--r-sm) !important;
    transition: all var(--ease-fast);
    background: var(--m-surface);
    box-shadow: var(--sh-xs);
}

.pagination>li>a:hover {
    background: var(--m-indigo);
    color: var(--m-gold-light);
    transform: translateY(-1px);
}

.pagination>.active>a,
.pagination>.active>span {
    background: var(--m-indigo) !important;
    border-color: var(--m-indigo) !important;
    color: var(--m-gold-light) !important;
    box-shadow: 0 3px 14px rgba(30, 27, 75, .2);
}


/* ============ 13. Post Detail Page ============ */

/* White background for entire post page */
#main {
    background: #fff;
    padding: 20px 0 40px;
}

#main .content {
    padding: 0 24px 0 0;
    border-right: 1px solid #f0f0f5;
}

/* — Breadcrumb — */
.page-breadcrumb {
    width: 100%;
    padding: 0 15px;
    margin-bottom: 8px;
}

.breadcrumb {
    background: transparent;
    padding: 12px 0;
    font-size: 12px;
    margin: 0;
    border: none;
    box-shadow: none;
}

.breadcrumb>li+li::before {
    content: "›";
    color: #ccc;
    padding: 0 6px;
}

.breadcrumb a {
    color: #888;
    font-weight: 500;
    transition: color .2s;
}

.breadcrumb a:hover {
    color: #1a1a2e;
}

.breadcrumb>.active {
    color: #1a1a2e;
    font-weight: 600;
}

/* — Post Title — */
.post-content .post-title .title {
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1.25;
    color: #1a1a2e;
    margin: 0 0 14px;
    letter-spacing: -.02em;
}

/* — Post Summary (h2) — */
.post-content .post-summary h2 {
    font-size: 1.05rem;
    font-weight: 400;
    color: #666;
    line-height: 1.6;
    margin: 0 0 16px;
    border-left: 3px solid #1a1a2e;
    padding-left: 14px;
}

/* — Post Meta Bar — */
.post-content .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
    margin-bottom: 18px;
    border-top: 1px solid #f0f0f5;
    border-bottom: 1px solid #f0f0f5;
    font-size: 12px;
}

.post-content .post-meta a,
.post-content .post-meta span {
    color: #888;
    font-weight: 500;
    transition: color .2s;
}

.post-content .post-meta a:hover {
    color: #1a1a2e;
}

.post-content .post-meta i {
    font-size: 11px;
    opacity: .5;
}

.post-content .post-meta .add-to-reading-list,
.post-content .post-meta .delete-from-reading-list {
    background: #f5f6fa;
    border: 1px solid #eee;
    border-radius: 100px;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all .2s;
}

.post-content .post-meta .add-to-reading-list:hover,
.post-content .post-meta .delete-from-reading-list:hover {
    background: #1a1a2e;
    color: #fff;
    border-color: #1a1a2e;
}

/* — Post Image — */
.post-content .post-image {
    margin: 0 0 22px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.post-content .post-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
}

/* — Post Video — */
.post-video {
    border-radius: 14px;
    overflow: hidden;
    margin: 0 0 22px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

/* — Post Content Body — */
.post-text.text-style {
    font-size: 16px;
    line-height: 1.85;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.post-text.text-style p {
    margin-bottom: 16px;
}

.post-text.text-style h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 28px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f5;
}

.post-text.text-style h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 24px 0 10px;
}

.post-text.text-style img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 16px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.post-text.text-style a {
    color: #2c5364;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-text.text-style a:hover {
    color: #0f2027;
}

.post-text.text-style blockquote {
    border-left: 4px solid #1a1a2e;
    background: #f8f8fb;
    padding: 16px 20px;
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: #555;
    margin: 20px 0;
}

.post-text.text-style ul,
.post-text.text-style ol {
    padding-left: 20px;
    margin: 12px 0;
}

.post-text.text-style li {
    margin-bottom: 6px;
    line-height: 1.7;
}

.post-text.text-style table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

.post-text.text-style thead th {
    background: #1a1a2e;
    color: #fff;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}

.post-text.text-style td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f5;
    font-size: 13.5px;
}

.post-text.text-style tbody tr:hover {
    background: #fafafe;
}

/* — Optional URL Button — */
.optional-url-cnt {
    margin: 20px 0;
}

.optional-url-cnt .btn-custom {
    background: #1a1a2e;
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 700;
    transition: all .2s;
}

.optional-url-cnt .btn-custom:hover {
    background: #2c5364;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 26, 46, .15);
}

/* — Post Files — */
.post-files {
    margin: 20px 0;
    padding: 16px;
    background: #f8f8fb;
    border-radius: 12px;
}

.post-files .title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 10px;
}

.post-files .file button {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12.5px;
    color: #2c5364;
    cursor: pointer;
    transition: all .2s;
    margin-bottom: 6px;
}

.post-files .file button:hover {
    background: #1a1a2e;
    color: #fff;
    border-color: #1a1a2e;
}

/* — Post Tags — */
.post-tags {
    margin: 20px 0;
    padding-top: 16px;
    border-top: 1px solid #f0f0f5;
}

.post-tags .tags-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #1a1a2e;
    margin: 0 0 10px;
}

.post-tags .tag-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.post-tags .tag-list li a {
    display: inline-block;
    background: #f5f6fa;
    border: 1px solid #eee;
    border-radius: 100px;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    transition: all .2s;
}

.post-tags .tag-list li a:hover {
    background: #1a1a2e;
    border-color: #1a1a2e;
    color: #fff;
}

/* — Social Share Buttons — */
.post-share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
    padding: 16px 0;
    border-top: 1px solid #f0f0f5;
    border-bottom: 1px solid #f0f0f5;
}

.post-share .btn-share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: all .2s;
}

.post-share .btn-share:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    color: #fff;
}

.post-share .facebook {
    background: #1877f2;
}

.post-share .twitter {
    background: #1da1f2;
}

.post-share .whatsapp {
    background: #25d366;
}

.post-share .linkedin {
    background: #0077b5;
}

.post-share .pinterest {
    background: #e60023;
}

.post-share .facebook:hover {
    background: #0d6ce8;
}

.post-share .twitter:hover {
    background: #0c90d8;
}

.post-share .whatsapp:hover {
    background: #1da855;
}

.post-share .linkedin:hover {
    background: #005e93;
}

.post-share .pinterest:hover {
    background: #cc001f;
}

/* — Emoji Reactions — */
.reactions {
    margin: 16px 0;
}

.reactions .title-reactions {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}

/* — Related Posts — */
.related-posts {
    margin: 32px 0 24px;
}

.related-post-title .title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #1a1a2e;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f5;
}

.related-posts-row {
    margin: 0 -8px;
}

.related-posts-col {
    padding: 0 8px;
    margin-bottom: 16px;
}

.related-posts .post-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.related-posts .post-list li {
    list-style: none;
}

.related-posts .post-list li img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    transition: transform .3s ease;
}

.related-posts .post-list li:hover img {
    transform: scale(1.03);
}

.related-posts .post-list li .title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    margin: 8px 0 0;
}

.related-posts .post-list li .title a {
    color: #1a1a2e;
    transition: color .2s;
}

.related-posts .post-list li .title a:hover {
    color: #2c5364;
}

/* — Comments — */
.comment-section {
    margin-top: 24px;
}

.comment-section .nav-tabs {
    border-bottom: 2px solid #f0f0f5;
    margin-bottom: 20px;
}

.comment-section .nav-tabs>li>a {
    border: none;
    border-bottom: 2px solid transparent;
    color: #888;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 18px;
    margin-bottom: -2px;
    transition: all .2s;
}

.comment-section .nav-tabs>li.active>a,
.comment-section .nav-tabs>li>a:hover {
    border: none;
    border-bottom: 2px solid #1a1a2e;
    background: transparent;
    color: #1a1a2e;
}

/* — Post Content Container (fallback for older pages) — */
.post-content-container {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    border: 1px solid #f0f0f5;
    line-height: 1.85;
    font-size: 15.5px;
}

.post-content-container blockquote {
    border-left: 4px solid #1a1a2e;
    background: #f8f8fb;
    padding: 16px 24px;
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: #555;
    margin: 20px 0;
}

.post-icon {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
}


/* ============ 14. Footer — Starry Night ============ */
#footer {
    background: linear-gradient(180deg, var(--m-indigo-deep) 0%, #060418 100%);
    color: rgba(255, 255, 255, .65);
    margin-top: 56px;
    padding-top: 0;
    position: relative;
    overflow: hidden;
}

#footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--m-gold), var(--m-gold-light), var(--m-gold), transparent);
}

#footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 5% 15%, rgba(255, 255, 255, .18) 0, transparent 100%),
        radial-gradient(1px 1px at 25% 45%, rgba(255, 255, 255, .12) 0, transparent 100%),
        radial-gradient(1px 1px at 55% 25%, rgba(255, 255, 255, .1) 0, transparent 100%),
        radial-gradient(1px 1px at 75% 65%, rgba(255, 255, 255, .1) 0, transparent 100%),
        radial-gradient(1px 1px at 95% 35%, rgba(255, 255, 255, .15) 0, transparent 100%);
    pointer-events: none;
}

#footer>* {
    position: relative;
    z-index: 1;
}

#footer .footer-widgets {
    padding: 52px 0 28px;
}

#footer h4.title {
    color: var(--m-gold-light);
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: 18px;
    padding-bottom: 12px;
    position: relative;
}

#footer h4.title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 2px;
    background: var(--m-gold);
    border-radius: 1px;
}

#footer .title-line {
    display: none;
}

#footer p {
    color: rgba(255, 255, 255, .45);
    font-size: 13.5px;
    line-height: 1.7;
}

#footer a {
    color: rgba(255, 255, 255, .55);
    transition: color var(--ease-fast);
}

#footer a:hover {
    color: var(--m-gold-light);
}

/* Social Icons */
.f-widget-follow ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0;
    list-style: none;
    margin: 0;
}

.f-widget-follow ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .5) !important;
    font-size: 15px;
    transition: all var(--ease);
}

.f-widget-follow ul li a:hover {
    background: var(--m-gold);
    border-color: var(--m-gold);
    color: var(--m-indigo-deep) !important;
    transform: translateY(-3px);
    box-shadow: 0 4px 20px var(--m-gold-glow);
}

/* Newsletter */
.widget-newsletter {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--r-md);
    padding: 18px;
    margin-top: 14px;
}

.widget-newsletter .newsletter-input {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
    padding: 10px 14px;
    font-size: 13px;
}

.widget-newsletter .newsletter-input::placeholder {
    color: rgba(255, 255, 255, .25);
}

.widget-newsletter .newsletter-button {
    background: linear-gradient(135deg, var(--m-gold), var(--m-gold-dark)) !important;
    border: none;
    color: var(--m-indigo-deep);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 12px;
}

/* Footer Bottom */
#footer hr {
    border-color: rgba(255, 255, 255, .05);
    margin: 16px 0;
}

.footer-bottom {
    padding-bottom: 24px;
}

.footer-bottom-left p {
    font-size: 12px;
    color: rgba(255, 255, 255, .25);
}

.nav-footer li a {
    color: rgba(255, 255, 255, .35) !important;
    font-size: 12px;
}

.nav-footer li a:hover {
    color: var(--m-gold-light) !important;
}

#footer .w-popular-list li {
    border-bottom-color: rgba(255, 255, 255, .04);
    padding: 8px 0;
}

#footer .w-popular-list li .right .title a {
    color: rgba(255, 255, 255, .65);
}

#footer .w-popular-list li .right .title a:hover {
    color: var(--m-gold-light);
}

#footer .post-meta span {
    color: rgba(255, 255, 255, .25);
}


/* ============ 15. Scroll-to-Top & Cookies ============ */
.scrollup {
    background: var(--m-indigo) !important;
    color: var(--m-gold-light) !important;
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sh-md);
    transition: all var(--ease);
}

.scrollup:hover {
    background: var(--m-gold) !important;
    color: var(--m-indigo-deep) !important;
    transform: translateY(-3px);
    box-shadow: var(--sh-gold);
}

.cookies-warning {
    background: var(--m-surface);
    border-top: 1px solid var(--m-border);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .06);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 20px 24px;
}

.cookies-warning .btn-custom {
    background: var(--m-indigo) !important;
    border-radius: var(--r-sm) !important;
    padding: 10px 24px;
    font-weight: 700;
    font-size: 12px;
}

.modal-newsletter .modal-content {
    border: none;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
    padding: 30px;
    border-top: 3px solid var(--m-gold);
}


/* ============ 16. Entry Animations ============ */
@keyframes menuReveal {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.post-item,
.post-item-horizontal,
.post-item-boxed {
    animation: fadeUp .45s ease both;
}

.post-item:nth-child(1) {
    animation-delay: 0s;
}

.post-item:nth-child(2) {
    animation-delay: .06s;
}

.post-item:nth-child(3) {
    animation-delay: .12s;
}

.post-item:nth-child(4) {
    animation-delay: .18s;
}

.sidebar-widget {
    animation: fadeUp .4s ease both;
}

.sidebar-widget:nth-child(1) {
    animation-delay: .08s;
}

.sidebar-widget:nth-child(2) {
    animation-delay: .16s;
}

.sidebar-widget:nth-child(3) {
    animation-delay: .24s;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* ============ 17. Responsive ============ */
@media (max-width: 1199px) {
    .nav-desktop .navbar-nav>li>a {
        padding: 15px 10px;
        font-size: 13px;
    }
}

@media (max-width: 992px) {
    .sidebar {
        position: static;
        margin-top: 28px;
    }

    .title-index {
        font-size: 1.2rem;
    }

    .home-slider-item .item-info .title {
        font-size: 1.3rem;
    }

    .kv-hero {
        height: 360px;
    }

    .kv-hero__h1 {
        font-size: 2.2rem;
    }

    .kv-manset__media img {
        height: 340px;
    }

    .kv-manset__h2 {
        font-size: 1.6rem;
    }

    .kv-picks__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .post-item {
        margin-bottom: 18px;
        border-radius: var(--r-lg);
    }

    .post-item .post-footer {
        padding: 16px 18px 20px;
    }

    .post-item .post-footer .title {
        font-size: 1rem;
    }

    .home-slider-item .item-info {
        padding: 24px 16px 18px;
    }

    .home-slider-item .item-info .title {
        font-size: 1.05rem;
    }

    .kv-hero {
        height: 380px;
    }

    .kv-hero__h1 {
        font-size: 1.6rem;
    }

    .kv-hero__p {
        font-size: 13px;
    }

    .kv-hero__body {
        padding-bottom: 80px;
    }

    .kv-hero__stats {
        padding: 10px 0;
    }

    .kv-hero__stat {
        padding: 0 14px;
        font-size: 12px;
        gap: 5px;
    }

    .kv-hero__stat-label {
        font-size: 9px;
    }

    .kv-hero__stat svg {
        width: 12px;
        height: 12px;
    }

    .kv-hero__stat-divider {
        height: 18px;
    }

    /* Post detail border removed on mobile */
    #main .content {
        padding: 0;
        border-right: none;
    }

    .kv-manset__media img {
        height: 260px;
    }

    .kv-manset__h2 {
        font-size: 1.3rem;
    }

    .kv-manset__desc {
        display: none;
    }

    .kv-manset__info {
        padding: 20px 24px;
    }

    .kv-picks__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .kv-post {
        flex-direction: column;
        gap: 0;
    }

    .kv-post__thumb {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 12px 12px 0 0;
    }

    .kv-post__content {
        padding: 14px 16px 16px;
    }

    .kv-heading__text {
        font-size: 1rem;
    }

    .nav-top ul.left li a,
    .nav-top ul.right li a {
        font-size: 10.5px;
    }

    .nav-top ul li a,
    .nav-footer li a,
    .pagination>li>a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .post-item .post-footer .title {
        font-size: .95rem;
    }

    .title-index {
        font-size: 1.1rem;
    }

    .kv-hero {
        height: 340px;
    }

    .kv-hero__stats {
        padding: 8px 0;
    }

    .kv-hero__stat {
        padding: 0 10px;
        font-size: 11px;
    }

    .kv-hero__stat-label {
        display: none;
    }

    .kv-hero__h1 {
        font-size: 1.5rem;
    }

    .kv-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 13px;
    }

    .post-content-container {
        padding: 20px 16px;
        font-size: 14.5px;
    }

    .kv-manset__h2 {
        font-size: 1.1rem;
    }

    .kv-manset__info {
        padding: 16px 18px;
    }

    .kv-pick__body {
        padding: 12px 14px 14px;
    }

    .kv-post__title {
        font-size: 14px;
    }

    .kv-post__excerpt {
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }

    .sidebar-widget {
        padding: 16px;
    }
}


/* ============ 18. Print ============ */
@media print {

    #header,
    #footer,
    .sidebar,
    .scrollup,
    .cookies-warning,
    .slider-nav,
    .ad-space,
    .kv-hero {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .post-item {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}


/* ============ 19. Performance ============ */
#footer {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}

.post-item img,
.post-item-boxed img,
.home-slider-item img {
    image-rendering: auto;
}