/* =====================================================
 *  08 — BLOG (Enterprise Listing)
 *  Marka Tescil & Sınai Mülkiyet İçerik Merkezi
 * ===================================================== */

/* ---------- Hero ---------- */
.blog-hero {
    background:
        radial-gradient(1200px 600px at 100% -10%, rgba(212, 175, 55, .12), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(26, 43, 69, .08), transparent 60%),
        linear-gradient(180deg, #FBFAF6 0%, #FFFFFF 100%);
    padding: 56px 0 48px;
    border-bottom: 1px solid var(--c-line);
}

.blog-hero__grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 24px;
}

.blog-hero__intro h1 {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 14px 0 16px;
}

.blog-hero__lead {
    font-size: 17px;
    line-height: 1.65;
    color: var(--c-text-2);
    max-width: 640px;
}

.blog-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 28px 0;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}

.blog-hero__stats li {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--c-line);
    padding-left: 14px;
}

.blog-hero__stats li:first-child { border-left: 0; padding-left: 0; }

.blog-hero__stats strong {
    font-size: 26px;
    font-weight: 800;
    color: var(--c-ink);
    letter-spacing: -0.02em;
    line-height: 1;
}

.blog-hero__stats span {
    font-size: 12.5px;
    color: var(--c-text-3);
    margin-top: 6px;
}

/* Search */
.blog-hero__search {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--c-line);
    border-radius: var(--radius-pill);
    padding: 4px 4px 4px 52px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.blog-hero__search:focus-within {
    border-color: var(--c-gold);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, .12);
}

.blog-hero__search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--c-text-3);
}

.blog-hero__search input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 14px 8px;
    font-size: 15px;
    font-family: inherit;
    color: var(--c-ink);
    outline: 0;
}

.blog-hero__search input::placeholder { color: var(--c-text-3); }

.blog-hero__search-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: var(--c-line);
    color: var(--c-text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s var(--ease);
}

.blog-hero__search-btn:hover { background: #e5e7eb; }

/* Modern integrated submit (blog-kategori.php) — pill içine gömülü gold buton */
.blog-hero__search--inline { padding: 6px 6px 6px 52px; }
.blog-hero__search--inline input { padding: 12px 8px; }
.blog-hero__search-submit {
    flex-shrink: 0;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    height: 40px;
    border-radius: 999px;
    background: var(--c-gold, #D4AF37);
    color: #1A2B45;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    letter-spacing: -0.01em;
    transition: background .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
    box-shadow: 0 2px 8px rgba(212, 175, 55, .25);
}
.blog-hero__search-submit:hover {
    background: #c8a02f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, .35);
}
.blog-hero__search-submit i { font-size: 16px; }
@media (max-width: 520px) {
    .blog-hero__search--inline { padding: 4px 4px 4px 44px; }
    .blog-hero__search--inline .blog-hero__search-icon { left: 16px; font-size: 18px; }
    .blog-hero__search-submit { padding: 8px 14px; height: 36px; font-size: 13px; }
    .blog-hero__search-submit span { display: none; }
}

.blog-hero__hot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--c-text-3);
    align-items: center;
}

.blog-hero__hot li:first-child {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--c-text-2);
    font-weight: 600;
}

.blog-hero__hot a {
    padding: 4px 10px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    color: var(--c-text-2);
    transition: all .2s var(--ease);
}

.blog-hero__hot a:hover {
    border-color: var(--c-gold);
    color: var(--c-ink);
    background: #FFFAEC;
}

/* Editor expert card */
.blog-hero__expert {
    background: var(--c-ink);
    color: #D9E0EC;
    border-radius: var(--radius-lg);
    padding: 28px;
    position: relative;
    overflow: hidden;
}

.blog-hero__expert::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(180deg, rgba(212, 175, 55, .15), transparent 50%);
    pointer-events: none;
}

.blog-hero__expert-head { position: relative; margin-bottom: 18px; }

.blog-hero__expert-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: 8px;
}

.blog-hero__expert h3 {
    color: #fff;
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
}

.blog-hero__authors {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    margin-bottom: 18px;
}

.blog-hero__authors li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blog-hero__authors strong {
    display: block;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
}

.blog-hero__authors span {
    display: block;
    font-size: 12.5px;
    color: #A6B2C7;
}

.blog-hero__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--av, var(--c-gold));
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 14px;
    letter-spacing: .02em;
    border: 2px solid rgba(255, 255, 255, .12);
}

.blog-hero__avatar::before {
    content: attr(data-initial);
}

.blog-hero__expert-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.blog-hero__expert-badges span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    background: rgba(212, 175, 55, .12);
    color: var(--c-gold);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(212, 175, 55, .25);
}

/* ---------- Filter Bar (sticky) ---------- */
.blog-filter {
    position: sticky;
    top: 64px;
    z-index: 30;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--c-line);
    padding: 14px 0;
}

.blog-filter__bar {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: space-between;
}

.blog-filter__chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.blog-filter__chips::-webkit-scrollbar { display: none; }

.blog-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--c-line);
    background: #fff;
    color: var(--c-text-2);
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s var(--ease);
    font-family: inherit;
}

.blog-chip .ti { font-size: 16px; color: var(--c-text-3); }
.blog-chip em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    background: var(--c-line);
    color: var(--c-text-2);
    border-radius: var(--radius-pill);
    margin-left: 2px;
}

.blog-chip:hover {
    border-color: var(--c-ink);
    color: var(--c-ink);
}

.blog-chip.is-active {
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: #fff;
}

.blog-chip.is-active .ti { color: var(--c-gold); }
.blog-chip.is-active em { background: var(--c-gold); color: var(--c-ink); }

.blog-filter__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--c-text-3);
    font-weight: 600;
    flex-shrink: 0;
}

.blog-filter__meta span { color: var(--c-ink); font-size: 14px; }

/* ---------- Section head row variant ---------- */
.section-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
    max-width: 100%;
    margin-bottom: 36px;
}

/* ---------- Article body content (lists, spacing, readability) ---------- */
.article-content {
    color: var(--c-ink);
    font-size: 16px;
    line-height: 1.75;
}

.article-content p {
    margin: 0 0 1.05em;
    color: var(--c-text-2);
}

.article-content ul,
.article-content ol {
    margin: 0 0 1.25em 0;
    padding-left: 1.75em;
    padding-right: 1.25em;
    color: var(--c-text-2);
}

.article-content ul { list-style-type: disc; }
.article-content ol { list-style-type: decimal; }

.article-content li {
    margin: 0.55em 0;
    padding-right: 0.5em;
    line-height: 1.7;
}

.article-content ul ul,
.article-content ol ol,
.article-content ul ol,
.article-content ol ul {
    margin-top: 0.35em;
    margin-bottom: 0.35em;
    padding-left: 1em;
}

.article-content li::marker {
    color: var(--c-ink);
}

/* preserve and slightly tighten spacing for custom article lists */
.article-content .article-checks { list-style: disc; padding-left: 1.15em; }
.article-content .article-ordered { list-style: decimal; padding-left: 1.15em; }

.section-head--row > div { text-align: left; }
.section-head--row .eyebrow { justify-content: flex-start; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--c-ink);
    white-space: nowrap;
    flex-shrink: 0;
}

.link-arrow:hover { color: var(--c-gold-2); }
.link-arrow .ti { transition: transform .2s var(--ease); }
.link-arrow:hover .ti { transform: translateX(3px); }

/* ---------- Featured Post ---------- */
.blog-featured-section { padding: 64px 0 32px; }

.blog-featured {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow .3s var(--ease);
}

.blog-featured:hover { box-shadow: var(--shadow-md); }

.blog-featured__media {
    position: relative;
    min-height: 380px;
    overflow: hidden;
    display: block;
}

.blog-featured__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(238, 177, 65, .28), transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(255, 255, 255, .08), transparent 55%);
    pointer-events: none;
}

.blog-featured__media-overlay {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--c-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform .25s var(--ease);
    z-index: 2;
}

.blog-featured__media:hover .blog-featured__media-overlay {
    transform: scale(1.08) rotate(-8deg);
}

.blog-featured__body {
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-featured__title {
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.22;
    margin: 14px 0 14px;
    letter-spacing: -0.015em;
}

.blog-featured__title a { color: var(--c-ink); }
.blog-featured__title a:hover { color: var(--c-gold-2); }

.blog-featured__excerpt {
    color: var(--c-text-2);
    font-size: 15.5px;
    line-height: 1.65;
    margin-bottom: 22px;
}

.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}

.blog-tags li {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    background: #F7F5EE;
    color: var(--c-text-2);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(212, 175, 55, .25);
}

.blog-tags .ti { font-size: 13px; color: var(--c-gold); }

.blog-featured__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 22px;
    border-top: 1px solid var(--c-line);
    flex-wrap: wrap;
}

/* ---------- Author chip ---------- */
.blog-author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.blog-author__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--c-ink), #2C3E5C);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .12);
}

.blog-author__avatar::before { content: attr(data-initial); }
.blog-author__avatar--img { padding: 0; background: none; }
.blog-author__avatar--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.blog-author strong {
    display: block;
    font-size: 14px;
    color: var(--c-ink);
    font-weight: 600;
    line-height: 1.2;
}

.blog-author small {
    display: block;
    font-size: 12px;
    color: var(--c-text-3);
}

.blog-author--sm .blog-author__avatar {
    width: 32px;
    height: 32px;
    font-size: 11.5px;
}

.blog-author--sm strong { font-size: 13px; }
.blog-author--sm small { font-size: 11.5px; }

/* ---------- Card grid (override) ---------- */
.blog-grid--lg {
    grid-template-columns: repeat(3, 1fr);
}

.blog-card .post__media {
    aspect-ratio: 16 / 10;
    display: block;
}

.blog-card .post__body {
    padding: 22px 22px 18px;
}

.post__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(15, 23, 42, .85);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.post__badge .ti { font-size: 13px; color: var(--c-gold); }

.blog-card.is-soon { opacity: .92; }
.blog-card.is-soon .post__media { filter: saturate(.75); }
.blog-card.is-soon h3 a { pointer-events: none; }

.post__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--c-line);
    margin-top: 6px;
}

.post__more--soon {
    color: var(--c-text-3);
    font-size: 12.5px;
    font-style: italic;
    font-weight: 500;
    cursor: default;
}

/* ---------- Empty state ---------- */
.blog-empty {
    text-align: center;
    padding: 64px 24px;
    background: #fff;
    border: 1px dashed var(--c-line);
    border-radius: var(--radius-lg);
    margin-top: 28px;
}

.blog-empty .ti {
    font-size: 56px;
    color: var(--c-text-3);
    margin-bottom: 16px;
}

.blog-empty h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

.blog-empty p {
    color: var(--c-text-2);
    margin-bottom: 18px;
}

/* ---------- Topic cloud ---------- */
.blog-topics { padding: 80px 0; }

.topic-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 880px;
    margin: 0 auto;
}

.topic-cloud__item {
    display: inline-block;
    padding: 10px 18px;
    background: #fff;
    color: var(--c-ink);
    border: 1.5px solid var(--c-line);
    border-radius: var(--radius-pill);
    font-weight: 600;
    transition: all .2s var(--ease);
}

.topic-cloud__item:hover {
    background: var(--c-ink);
    color: #fff;
    border-color: var(--c-ink);
    transform: translateY(-2px);
}

.topic-size-1 { font-size: 13.5px; }
.topic-size-2 { font-size: 15px; }
.topic-size-3 { font-size: 16.5px; }
.topic-size-4 { font-size: 18px; }

/* ---------- Newsletter ---------- */
.blog-newsletter { padding: 0 0 80px; }

.blog-newsletter__box {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    background:
        linear-gradient(135deg, var(--c-ink) 0%, #1A2B45 100%);
    border-radius: var(--radius-lg);
    padding: 56px;
    color: #D9E0EC;
    position: relative;
    overflow: hidden;
}

.blog-newsletter__box::before {
    content: "";
    position: absolute;
    right: -100px;
    bottom: -100px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, .22), transparent 70%);
    pointer-events: none;
}

.blog-newsletter__copy { position: relative; }

.blog-newsletter__copy h2 {
    color: #fff;
    margin: 12px 0 12px;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.2;
}

.blog-newsletter__copy p {
    color: #A6B2C7;
    margin-bottom: 18px;
    font-size: 15px;
}

.blog-newsletter__bullets {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-newsletter__bullets li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #C7D0DF;
}

.blog-newsletter__bullets .ti {
    color: var(--c-gold);
    font-size: 18px;
}

.blog-newsletter__form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 22px;
}

.blog-newsletter__input {
    width: 100%;
    border: 1.5px solid var(--c-line);
    background: #fff;
    border-radius: var(--radius-md, 12px);
    padding: 13px 16px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--c-ink);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.blog-newsletter__input:focus {
    outline: 0;
    border-color: var(--c-gold);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, .12);
}

.blog-newsletter__form small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--c-text-3);
    margin-top: 4px;
    text-align: center;
    justify-content: center;
}

.blog-newsletter__form small a { color: var(--c-text-2); text-decoration: underline; }

/* eyebrow light variant + sr-only */
.eyebrow--light {
    color: var(--c-gold) !important;
}

.eyebrow--light::before {
    background: var(--c-gold) !important;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ---------- CTA Band grid wrapper ---------- */
.cta-band__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
}

/* ---------- Blog gradient backgrounds (1..10) ---------- */
.blog-grad-1  { background: linear-gradient(135deg, #0F1B2C 0%, #2C3E5C 100%); }
.blog-grad-2  { background: linear-gradient(135deg, #1A2B45 0%, #3A4A66 100%); }
.blog-grad-3  { background: linear-gradient(135deg, #1F1A36 0%, #4B3B6B 100%); }
.blog-grad-4  { background: linear-gradient(135deg, #0E2A2B 0%, #1F4D4E 100%); }
.blog-grad-5  { background: linear-gradient(135deg, #2E1A1A 0%, #5C3030 100%); }
.blog-grad-6  { background: linear-gradient(135deg, #1B2E1B 0%, #355C40 100%); }
.blog-grad-7  { background: linear-gradient(135deg, #2C1E0F 0%, #5C4022 100%); }
.blog-grad-8  { background: linear-gradient(135deg, #181C2E 0%, #2F3A66 100%); }
.blog-grad-9  { background: linear-gradient(135deg, #2A1733 0%, #5A3266 100%); }
.blog-grad-10 { background: linear-gradient(135deg, #0F2226 0%, #1F4A55 100%); }

/* Şık ince ızgara dokusu ekle */
.blog-grad-1::before,
.blog-grad-2::before,
.blog-grad-3::before,
.blog-grad-4::before,
.blog-grad-5::before,
.blog-grad-6::before,
.blog-grad-7::before,
.blog-grad-8::before,
.blog-grad-9::before,
.blog-grad-10::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 30%, rgba(212, 175, 55, .22), transparent 55%),
        radial-gradient(circle at 78% 80%, rgba(255, 255, 255, .07), transparent 55%);
    pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .blog-hero__grid { grid-template-columns: 1fr; }
    .blog-hero__expert { max-width: 520px; }
    .blog-featured { grid-template-columns: 1fr; }
    .blog-featured__media { min-height: 280px; }
    .blog-grid--lg { grid-template-columns: repeat(2, 1fr); }
    .blog-newsletter__box { grid-template-columns: 1fr; padding: 40px 28px; }
    .cta-band__grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .blog-hero { padding: 36px 0 32px; }
    .blog-hero__stats { grid-template-columns: repeat(2, 1fr); }
    .blog-hero__stats li:nth-child(3) { border-left: 0; padding-left: 0; }
    .blog-hero__stats li:nth-child(odd) { border-left: 0; padding-left: 0; }
    .blog-filter { top: 56px; }
    .blog-filter__bar { flex-direction: column; align-items: stretch; }
    .blog-filter__meta { justify-content: flex-end; }
    .section-head--row { flex-direction: column; align-items: flex-start; }
    .blog-featured__body { padding: 28px 22px; }
    .blog-grid--lg { grid-template-columns: 1fr; }
    .blog-newsletter__box { padding: 32px 22px; }
    .blog-newsletter__form { padding: 18px; }
    .topic-cloud__item { font-size: 13px !important; padding: 8px 14px; }
}

/* =====================================================
 *  BLOG DETAY (Single Article)
 * ===================================================== */

/* Reading progress bar (fixed top) */
.read-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    z-index: 200;
    pointer-events: none;
}
.read-progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--c-gold), #EFC65B);
    transition: width .08s linear;
}

/* Article hero */
.article-hero {
    position: relative;
    color: #fff;
    padding: 56px 0 72px;
    overflow: hidden;
    isolation: isolate;
}
.article-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(212,175,55,.22), transparent 55%),
        radial-gradient(circle at 78% 80%, rgba(255,255,255,.05), transparent 55%);
    pointer-events: none;
}
.srv-crumbs--light, .srv-crumbs--light a, .srv-crumbs--light span {
    color: rgba(255,255,255,.78);
}
.srv-crumbs--light a:hover { color: var(--c-gold); }

.article-hero__inner {
    position: relative;
    max-width: 900px;
    margin-top: 22px;
}
.article-hero__cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,.18);
    margin-bottom: 18px;
}
.article-hero__cat .ti { color: var(--c-gold); font-size: 14px; }

.article-hero__title {
    color: #fff;
    font-size: clamp(28px, 4.2vw, 48px);
    line-height: 1.14;
    letter-spacing: -0.022em;
    margin: 0 0 22px;
}

.article-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: rgba(255,255,255,.78);
    font-size: 13.5px;
    margin-bottom: 24px;
}
.article-hero__meta li { display: inline-flex; align-items: center; gap: 6px; }
.article-hero__meta strong { color: #fff; font-weight: 600; margin-left: 2px; }
.article-hero__meta .ti { color: var(--c-gold); font-size: 16px; }

.article-hero__author {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.10);
}
.article-hero__author strong { color: #fff; display: block; font-size: 14.5px; }
.article-hero__author small { color: rgba(255,255,255,.7); display: block; font-size: 12.5px; }
.article-hero__author-badges {
    margin-left: auto;
    display: flex;
    gap: 8px;
}
.article-hero__author-badges span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(212,175,55,.14);
    color: var(--c-gold);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(212,175,55,.28);
}

/* === Two-column grid (sidebar + article) === */
.article-section { padding: 56px 0 32px; }

.article-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 56px;
    align-items: start;
}

.article-aside { position: relative; }
.article-aside__sticky {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* TOC */
.article-toc {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: 20px 18px;
}
.article-toc__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-text-3);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-line);
}
.article-toc__head .ti { color: var(--c-gold); font-size: 16px; }

.article-toc ol {
    list-style: none;
    counter-reset: toc;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}
.article-toc li { counter-increment: toc; }
.article-toc a {
    display: block;
    padding: 8px 10px 8px 28px;
    font-size: 13.5px;
    color: var(--c-text-2);
    border-radius: 8px;
    position: relative;
    line-height: 1.4;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.article-toc a::before {
    content: counter(toc, decimal-leading-zero);
    position: absolute;
    left: 8px;
    top: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-3);
}
.article-toc a:hover { background: #F7F5EE; color: var(--c-ink); }
.article-toc a.is-active {
    background: #FFFAEC;
    color: var(--c-ink);
    font-weight: 600;
}
.article-toc a.is-active::before { color: var(--c-gold); }

/* Share (vertical) */
.article-share {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.article-share__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-text-3);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--c-line);
}
.article-share__label .ti { color: var(--c-gold); font-size: 14px; }
.article-share__btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #F7F5EE;
    border: 0;
    color: var(--c-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    transition: all .2s var(--ease);
}
.article-share__btn:hover { background: var(--c-ink); color: #fff; }
.article-share__btn.is-copied { background: #16A34A; color: #fff; }

.article-share--vertical { align-items: flex-start; }
.article-share--vertical .article-share__btn { width: 100%; }

.article-share--horiz {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 36px;
}
.article-share--horiz .article-share__label { border: 0; padding: 0; }
.article-share--horiz > div { display: flex; gap: 8px; }
.article-share--horiz .article-share__btn { width: 40px; height: 40px; }

/* Mini CTA in sidebar */
.article-cta-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #FFFAEC 0%, #FFF5D6 100%);
    border: 1px solid rgba(212,175,55,.4);
    border-radius: var(--radius-lg);
    padding: 16px;
    color: var(--c-ink);
    transition: all .2s var(--ease);
}
.article-cta-mini:hover {
    border-color: var(--c-gold);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -12px rgba(212,175,55,.45);
}
.article-cta-mini__icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--c-gold);
    color: var(--c-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.article-cta-mini strong { display: block; font-size: 14px; line-height: 1.3; }
.article-cta-mini small { display: block; font-size: 12px; color: var(--c-text-2); margin-top: 2px; }
.article-cta-mini__arrow { color: var(--c-ink); transition: transform .2s var(--ease); }
.article-cta-mini:hover .article-cta-mini__arrow { transform: translateX(3px); }

/* === Article typography === */
.article-body {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--c-text-1, #1A2230);
    max-width: 760px;
}
.article-lead {
    font-size: 19px;
    line-height: 1.6;
    color: var(--c-ink);
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--c-line);
}
.article-body h2 {
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.25;
    letter-spacing: -0.012em;
    margin: 48px 0 18px;
    scroll-margin-top: 100px;
    position: relative;
    padding-left: 16px;
}
.article-body h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 4px;
    background: var(--c-gold);
}
.article-body h3 {
    font-size: 19px;
    margin: 32px 0 12px;
    color: var(--c-ink);
}
.article-body p { margin-bottom: 18px; color: var(--c-text-2); }
.article-body strong { color: var(--c-ink); font-weight: 600; }
.article-body a {
    color: var(--c-ink);
    text-decoration: underline;
    text-decoration-color: rgba(212,175,55,.5);
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    transition: color .15s var(--ease);
}
.article-body a:hover { color: var(--c-gold-2); text-decoration-color: var(--c-gold); }

.article-body ul, .article-body ol { margin-bottom: 22px; padding-left: 1.75em; padding-right: 1em; }
.article-checks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.article-checks li {
    position: relative;
    padding-left: 32px;
    color: var(--c-text-2);
}
.article-checks li::before {
    content: "\eb7b";
    font-family: "tabler-icons";
    position: absolute;
    left: 4px;
    top: 0;
    color: var(--c-gold);
    font-size: 20px;
    line-height: 1.4;
}
.article-ordered {
    counter-reset: aord;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.article-ordered li {
    counter-increment: aord;
    position: relative;
    padding-left: 44px;
    color: var(--c-text-2);
}
.article-ordered li::before {
    content: counter(aord);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--c-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Callouts */
.callout {
    display: flex;
    gap: 14px;
    padding: 18px 22px;
    background: #F7F9FC;
    border: 1px solid var(--c-line);
    border-left: 4px solid var(--c-text-3);
    border-radius: var(--radius-md, 12px);
    margin: 28px 0;
    color: var(--c-text-2);
}
.callout > .ti {
    font-size: 22px;
    color: var(--c-text-3);
    flex-shrink: 0;
    margin-top: 2px;
}
.callout > div { flex: 1; }
.callout p { margin: 6px 0 0; font-size: 14.5px; }
.callout strong { color: var(--c-ink); }

.callout--gold { background: #FFFAEC; border-left-color: var(--c-gold); }
.callout--gold > .ti { color: var(--c-gold); }

.callout--warn { background: #FFF7ED; border-left-color: #F59E0B; }
.callout--warn > .ti { color: #F59E0B; }

.callout--cta {
    background: var(--c-ink);
    color: #D9E0EC;
    border: 0;
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    align-items: center;
    flex-wrap: wrap;
}
.callout--cta strong { color: #fff; font-size: 17px; }
.callout--cta p { color: #A6B2C7; margin: 6px 0 0; }
.callout--cta > div { flex: 1 1 280px; }

/* --- Consulting CTA banner --- */
.callout--consult {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px 26px;
    background: linear-gradient(135deg, #1A2B45 0%, #0F1C30 100%);
    border: 1px solid rgba(212,175,55,.25);
    border-radius: var(--radius-lg);
    margin: 32px 0;
    box-shadow: 0 4px 24px rgba(15,23,42,.12);
    position: relative;
    overflow: hidden;
}
.callout--consult::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,.15), transparent 70%);
    pointer-events: none;
}
.callout--consult__icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(212,175,55,.12);
    border: 1.5px solid rgba(212,175,55,.3);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
    color: var(--c-gold);
}
.callout--consult__body { flex: 1 1 200px; }
.callout--consult__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: 4px;
    display: block;
}
.callout--consult__title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 3px;
}
.callout--consult__sub {
    color: #C0CBDB;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
}
.callout--consult__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.callout--consult__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--c-gold);
    color: #1A2B45 !important;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: var(--radius-pill);
    text-decoration: none !important;
    letter-spacing: -0.01em;
    transition: background .2s var(--ease), transform .15s var(--ease);
    box-shadow: 0 2px 10px rgba(212,175,55,.35);
    white-space: nowrap;
}
.callout--consult__phone:hover {
    background: #c8a02f;
    color: #1A2B45 !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}
.callout--consult__wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(37,211,102,.15);
    color: #4ADE80 !important;
    font-weight: 600;
    font-size: 13px;
    border-radius: var(--radius-pill);
    text-decoration: none !important;
    border: 1px solid rgba(37,211,102,.3);
    transition: background .2s var(--ease);
    white-space: nowrap;
}
.callout--consult__wa:hover {
    background: rgba(37,211,102,.25);
    color: #4ADE80 !important;
    text-decoration: none !important;
}
@media (max-width: 560px) {
    .callout--consult { gap: 16px; padding: 18px 18px; }
    .callout--consult__actions { flex-direction: row; flex-wrap: wrap; }
}

/* Steps grid */
.article-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 24px 0 32px;
}
.article-step {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md, 12px);
    padding: 14px 12px 12px;
    text-align: left;
    position: relative;
    transition: all .2s var(--ease);
}
.article-step:hover { border-color: var(--c-gold); transform: translateY(-2px); }
.article-step span {
    display: inline-flex;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--c-gold);
    color: var(--c-ink);
    font-weight: 800;
    font-size: 12px;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}
.article-step strong { display: block; font-size: 13.5px; line-height: 1.3; color: var(--c-ink); }
.article-step small { display: block; font-size: 11.5px; color: var(--c-text-3); margin-top: 2px; }

/* Table */
.article-table-wrap {
    overflow-x: auto;
    margin: 22px 0;
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--c-line);
}
.article-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 14.5px;
}
.article-table thead {
    background: #F7F5EE;
}
.article-table th, .article-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--c-line);
}
.article-table th {
    font-weight: 700;
    color: var(--c-ink);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.article-table tbody tr:last-child td { border-bottom: 0; }
.article-table tbody tr:hover { background: #FBFAF6; }

/* Article tags */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 40px 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--c-line);
}
.article-tags__label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-text-3);
    letter-spacing: .06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 4px;
}
.article-tags__label .ti { color: var(--c-gold); }
.article-tags a {
    font-size: 13px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    color: var(--c-text-2);
    text-decoration: none;
    transition: all .2s var(--ease);
}
.article-tags a:hover {
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: #fff;
}

/* Author card */
.author-card {
    position: relative;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 28px;
    align-items: start;
    background: linear-gradient(145deg, #fdfcf8 0%, #fff 60%);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: 32px 32px 28px;
    margin-top: 52px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(15,23,42,.06);
}
/* Altın üst aksan çizgisi */
.author-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-gold) 0%, #e8c96a 50%, transparent 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Sağ üst köşe dekoratif desen */
.author-card::after {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,.07) 0%, transparent 70%);
    pointer-events: none;
}
/* Avatar wrapper — halka efekti için */
.author-card__avatar-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
}
.author-card__avatar-wrap::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(var(--c-gold) 0deg 120deg, var(--c-line) 120deg 360deg);
    opacity: .55;
}
.author-card__avatar {
    position: relative;
    width: 110px; height: 110px;
    border-radius: 50%;
    overflow: hidden;
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.15);
    z-index: 1;
}
.author-card__avatar::before { content: attr(data-initial); }
.author-card__avatar--img { padding: 0; }
.author-card__avatar--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.author-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-gold);
    background: rgba(212,175,55,.08);
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(212,175,55,.2);
    margin-bottom: 10px;
}
.author-card h3 {
    font-size: 20px;
    margin: 0 0 3px;
    line-height: 1.2;
    color: var(--c-ink);
}
.author-card h3 a { color: inherit; text-decoration: none; }
.author-card h3 a:hover { color: var(--c-gold); }
.author-card__title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--c-text-3);
    margin-bottom: 2px;
}
.author-card__title::before {
    content: '';
    display: inline-block;
    width: 14px; height: 1.5px;
    background: var(--c-gold);
    border-radius: 2px;
    vertical-align: middle;
}
.author-card small {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--c-text-3);
    margin-top: 2px;
}
.author-card small::before {
    content: '';
    display: inline-block;
    width: 12px; height: 1.5px;
    background: var(--c-gold);
    border-radius: 2px;
    flex-shrink: 0;
}
.author-card p {
    margin: 12px 0 16px;
    font-size: 14px;
    color: var(--c-text-2);
    line-height: 1.7;
    border-left: 2px solid rgba(212,175,55,.35);
    padding-left: 12px;
}
.author-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.author-card__links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-ink);
    text-decoration: none;
    transition: all .22s var(--ease);
    box-shadow: 0 1px 4px rgba(15,23,42,.06);
}
.author-card__links a:hover {
    background: var(--c-ink);
    color: #fff;
    border-color: var(--c-ink);
    box-shadow: 0 4px 12px rgba(15,23,42,.18);
    transform: translateY(-1px);
}
/* WhatsApp butonu özel renk */
.author-card__links a[href*="whatsapp"],
.author-card__links a[href*="wa.me"] {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #16a34a;
}
.author-card__links a[href*="whatsapp"]:hover,
.author-card__links a[href*="wa.me"]:hover {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.author-card__links .ti { font-size: 15px; }

/* Responsive */
@media (max-width: 1100px) {
    .article-grid { grid-template-columns: 1fr; gap: 32px; }
    .article-aside { order: 2; }
    .article-aside__sticky { position: static; flex-direction: column; }
    .article-body { max-width: 100%; }
    .article-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .article-hero { padding: 36px 0 48px; }
    .article-hero__meta { gap: 12px; font-size: 12.5px; }
    .article-hero__author { flex-direction: column; align-items: flex-start; }
    .article-hero__author-badges { margin-left: 0; }
    .article-body { font-size: 16px; line-height: 1.7; }
    .article-lead { font-size: 17px; }
    .article-steps { grid-template-columns: 1fr 1fr; }
    .author-card { grid-template-columns: 1fr; text-align: center; padding: 28px 20px; }
    .author-card__avatar,
    .author-card__avatar-wrap { margin: 0 auto; }
    .author-card__eyebrow { justify-content: center; }
    .author-card p { border-left: none; padding-left: 0; border-top: 2px solid rgba(212,175,55,.35); padding-top: 10px; }
    .author-card__links { justify-content: center; }
    .article-share--horiz { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============================================================
 *  COVER IMAGES (DB'den gelen kapak görselleri)
 * ============================================================ */

/* Kart kapak görseli — .post__media içine yerleştirilir */
.post__media { position: relative; overflow: hidden; }
.post__cover {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    z-index: 0;
}
.post__media.has-cover::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(20,28,45,.05) 0%, rgba(20,28,45,.55) 100%);
    pointer-events: none;
}
.post__media .post__cat,
.post__media .post__badge { position: relative; z-index: 2; }
/* Featured kart üzerindeki köşedeki ok ikonu — daima sağ-alt köşede sabit (absolute) kalmalı */
.blog-featured__media-overlay { z-index: 3; }

/* Featured kart kapağı */
.blog-featured__media { position: relative; overflow: hidden; }
.blog-featured__media.has-cover .post__cover { object-position: center; }

/* Detay sayfası hero kapağı */
.article-hero { position: relative; overflow: hidden; }
.article-hero__cover {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
    opacity: .55;
}
.article-hero.has-cover::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(20,28,45,.78) 0%, rgba(20,28,45,.62) 50%, rgba(20,28,45,.85) 100%);
    pointer-events: none;
}
.article-hero > .container { position: relative; z-index: 2; }

/* Yazar kartı görseli (blog.php sidebar) */
.blog-hero__avatar--img {
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: transparent !important;
    flex-shrink: 0;
}
.blog-hero__avatar--img::before { content: none !important; }
.blog-hero__avatar--img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* ============================================================
 *  AUTHOR PROFILE PAGE (blog-yazar.php)
 * ============================================================ */
.author-hero { padding-bottom: 32px; }
.author-hero__grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 36px;
    align-items: start;
    margin-top: 24px;
}
.author-hero__avatar-wrap { display: flex; justify-content: center; }
.author-hero__avatar {
    width: 200px; height: 200px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D4AF37, #1A2B45);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 64px; font-weight: 700;
    letter-spacing: -0.02em;
    box-shadow: 0 8px 32px rgba(20,28,45,.15);
    border: 4px solid #fff;
}
.author-hero__avatar[data-initial]::before {
    content: attr(data-initial);
}
.author-hero__avatar--img { padding: 0; object-fit: cover; }
.author-hero__avatar--img::before { content: none; }

.author-hero__body h1 {
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.15;
    margin: 8px 0 6px;
    letter-spacing: -0.02em;
}
.author-hero__title {
    color: var(--c-text-2, #4a5568);
    font-size: 16px;
    margin: 0 0 16px;
}
.author-hero__title strong { color: var(--c-ink, #1A2B45); }

.author-hero__bio {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--c-text-2, #4a5568);
    max-width: 720px;
    margin: 0 0 20px;
}

.author-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 24px 0;
    border: 1px solid var(--c-line, #e5e7eb);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.author-hero__stats li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding: 18px 20px;
    border-right: 1px solid var(--c-line, #e5e7eb);
    transition: background .15s ease;
    min-width: 0;
}
.author-hero__stats li:last-child { border-right: none; }
.author-hero__stats li:hover { background: #fdfaf0; }

.author-hero__stats strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--c-gold, #D4AF37);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.author-hero__stats strong i {
    font-size: 22px;
    color: var(--c-gold, #D4AF37);
}
.author-hero__stats span {
    font-size: 11.5px;
    color: var(--c-text-3, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    line-height: 1.3;
}

.author-hero__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.author-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--c-line, #e5e7eb);
    background: #fff;
    color: var(--c-ink, #1A2B45);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: border-color .2s, color .2s, transform .15s;
}
.author-hero__link:hover {
    border-color: var(--c-gold, #D4AF37);
    color: var(--c-gold, #D4AF37);
    transform: translateY(-1px);
}

@media (max-width: 720px) {
    .author-hero { padding-bottom: 24px; }
    .author-hero__grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 16px;
        text-align: center;
    }
    .author-hero__avatar-wrap { justify-content: center; }
    .author-hero__avatar {
        width: 140px; height: 140px;
        font-size: 48px;
        border-width: 3px;
    }
    .author-hero__avatar--img img,
    .author-hero__avatar.author-hero__avatar--img {
        width: 140px; height: 140px;
    }

    /* Body içeriği orta hizalı + flex column (sıralama için) */
    .author-hero__body {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .author-hero__body > * { width: 100%; }
    .author-hero__body .eyebrow {
        justify-content: center;
        display: inline-flex;
        width: auto;
        order: 1;
    }
    .author-hero__body h1 {
        font-size: clamp(24px, 6.5vw, 30px);
        margin: 6px 0 4px;
        text-align: center;
        order: 2;
    }

    /* Heading sarmalı mobilde şeffaf — çocuklar body'nin flex item'ı olsun */
    .author-hero__heading {
        display: contents;
    }
    /* Sıralama: eyebrow(1) → h1(2) → title(3) → quick(4) → bio(5) → stats(6) → specs(7) → links(8) */
    .author-hero__title  { order: 3; }
    .author-hero__quick  {
        order: 4;
        padding-top: 4px;
        justify-content: center;
        width: 100%;
        margin-bottom: 6px;
    }
    .author-hero__bio    { order: 5; }
    .author-hero__stats  { order: 6; }
    .author-hero__specs  { order: 7; }
    .author-hero__links  { order: 8; }

    .author-hero__quick-btn {
        padding: 8px 16px;
        font-size: 13.5px;
    }

    .author-hero__title {
        text-align: center;
        font-size: 14.5px;
        margin: 0 0 8px;
    }
    .author-hero__bio {
        margin: 0 auto 16px;
        font-size: 14.5px;
        line-height: 1.65;
        text-align: center;
    }

    /* Stats kartı */
    .author-hero__stats {
        grid-template-columns: repeat(2, 1fr);
        margin: 18px 0;
    }
    .author-hero__stats li {
        align-items: center;
        text-align: center;
        padding: 16px 10px;
        gap: 4px;
    }
    .author-hero__stats strong {
        font-size: 18px;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .author-hero__stats strong i { font-size: 20px; }
    .author-hero__stats span { font-size: 10.5px; }
    /* Border düzeltmeleri: 2 kolon grid'de sağdaki kolonun border-right'ı yok,
       son satır hariç hepsinde alt çizgi */
    .author-hero__stats li {
        border-right: none;
        border-bottom: 1px solid var(--c-line, #e5e7eb);
    }
    .author-hero__stats li:nth-child(odd) {
        border-right: 1px solid var(--c-line, #e5e7eb);
    }
    .author-hero__stats li:nth-last-child(-n+2) {
        border-bottom: none;
    }
    /* Tek sayıda item varsa son item'a (tek başına satırda) sağ border verme */
    .author-hero__stats li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        border-right: none;
    }

    /* Uzmanlık alanları — orta hizalı */
    .author-hero__specs {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        margin-top: 14px;
    }
    .author-hero__specs-label {
        margin-right: 0;
        justify-content: center;
    }
    .author-hero__specs-list {
        justify-content: center;
    }
    .author-hero__specs-list li {
        font-size: 12px;
        padding: 5px 10px;
    }

    .author-hero__links { justify-content: center; }

    /* Breadcrumb — küçük ekranda yatay scroll */
    .author-hero .srv-crumbs {
        font-size: 13px;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .author-hero__avatar,
    .author-hero__avatar--img img,
    .author-hero__avatar.author-hero__avatar--img {
        width: 120px; height: 120px;
        font-size: 40px;
    }
    .author-hero__body h1 { font-size: 22px; }
    .author-hero__quick { gap: 6px; }
    .author-hero__quick-btn {
        padding: 7px 12px;
        font-size: 12.5px;
    }
    .author-hero__quick-btn .ti { font-size: 14px; }

    /* Stats — küçük ekranda tek kolon değil, kompakt 2 kolon kalsın */
    .author-hero__stats li { padding: 12px 8px; }
    .author-hero__stats strong { font-size: 16px; }
}

/* "Tüm Bloga Dön" geri butonu — kompakt, modern */
.blog-back-wrap {
    text-align: center;
    margin-top: 48px;
}
.blog-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    height: 44px;
    border-radius: 999px;
    border: 1.5px solid var(--c-line, #e5e7eb);
    background: #fff;
    color: var(--c-ink, #1A2B45);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    transition: border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.blog-back-btn i {
    font-size: 18px;
    line-height: 1;
    transition: transform .2s var(--ease);
}
.blog-back-btn:hover {
    border-color: var(--c-gold, #D4AF37);
    color: var(--c-gold, #D4AF37);
    background: #fffdf6;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(212, 175, 55, .18);
}
.blog-back-btn:hover i { transform: translateX(-3px); }

/* ============================================================
   Author hero — yeni alanlar (uzmanlık, WhatsApp)
   ============================================================ */
.author-hero__specs {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}
.author-hero__specs-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1a2b45;
    margin-right: 4px;
}
.author-hero__specs-label .ti {
    color: #d4af37;
    font-size: 16px;
}
.author-hero__specs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.author-hero__specs-list li {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    font-size: 12.5px;
    font-weight: 500;
    color: #1a2b45;
    background: rgba(212, 175, 55, 0.10);
    border: 1px solid rgba(212, 175, 55, 0.30);
    border-radius: 999px;
    line-height: 1.2;
    transition: all .15s ease;
}
.author-hero__specs-list li:hover {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(212, 175, 55, 0.55);
}

/* WhatsApp varyantı — yeşil aksan */
.author-hero__link--wa {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #fff !important;
    font-weight: 600;
}
.author-hero__link--wa:hover {
    background: #128C7E !important;
    border-color: #128C7E !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(37, 211, 102, 0.30);
}

/* ============================================================
   Author hero — heading satırı (isim + sağ üst kompakt butonlar)
   ============================================================ */
.author-hero__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.author-hero__heading h1 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.author-hero__quick {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 6px;
}
.author-hero__quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    border: 1.5px solid transparent;
    text-decoration: none;
    transition: all .18s ease;
    white-space: nowrap;
}
.author-hero__quick-btn .ti {
    font-size: 16px;
}
.author-hero__quick-btn--wa {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}
.author-hero__quick-btn--wa:hover {
    background: #128C7E;
    border-color: #128C7E;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.30);
}
.author-hero__quick-btn--mail {
    background: #fff;
    border-color: #e5e7eb;
    color: #1a2b45;
}
.author-hero__quick-btn--mail:hover {
    border-color: #d4af37;
    background: #fffaf0;
    color: #1a2b45;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.20);
}


