/* ============================================
   Avukat SaaS - Public Site Stilleri
   Performans ve SEO odaklı, minimal CSS
   ============================================ */

:root {
    --primary-color: #1a365d;
    --secondary-color: #c9a84c;
    --text-color: #334155;
    --text-light: #64748b;
    --bg-color: #ffffff;
    --bg-light: #f8fafc;
    --border-color: #e2e8f0;
    --font-family: 'Inter', sans-serif;
    --max-width: 1200px;
    --radius: 0.5rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-family);
    color: var(--text-color);
    background: var(--bg-color);
    line-height: 1.7;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }

a { color: var(--primary-color); text-decoration: none; }
a:hover { color: var(--secondary-color); }

img { max-width: 100%; height: auto; }

/* ============================================
   Header / Navigation
   ============================================ */
/* Overhead (topbar + header sarmalayıcısı) */
.site-overhead { position: relative; z-index: 100; }
.site-overhead.is-sticky { position: sticky; top: 0; }

/* Transparent: tüm overhead hero'nun üstüne otursun */
.site-overhead-style-transparent {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: transparent;
}
.site-overhead-style-transparent.is-sticky { position: absolute !important; }

.site-header {
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}

/* Renk stilleri */
.site-header-style-dark { background: #111827; border-bottom-color: #1f2937; }
.site-header-style-dark .nav-menu a { color: rgba(255,255,255,.85); }
.site-header-style-dark .nav-menu a:hover, .site-header-style-dark .nav-menu a.active { background: rgba(255,255,255,.08); color: #fff; }
.site-header-style-dark .logo-text { color: #fff; }
.site-header-style-dark .nav-toggle span { background: #fff; }

.site-header-style-transparent { background: transparent; border-bottom-color: transparent; border-bottom: 0; }
.site-header-style-transparent .nav-menu a { color: #fff; }
.site-header-style-transparent .nav-menu a:hover, .site-header-style-transparent .nav-menu a.active { background: rgba(255,255,255,.12); color: #fff; }
.site-header-style-transparent .logo-text { color: #fff; }
.site-header-style-transparent .nav-toggle span { background: #fff; }
/* Transparent modda bölünmüş/zarif tasarımın iç border'ı da beyaz tonlara dönsün */
.site-header-style-transparent .nav-inner-split .nav-top-row { border-bottom-color: rgba(255,255,255,.18); }
.site-header-style-transparent .nav-inner-split .nav-contact { color: rgba(255,255,255,.9); }
.site-header-style-transparent .nav-zarif-link { color: rgba(255,255,255,.9); }
.site-header-style-transparent .nav-zarif-link:hover, .site-header-style-transparent .nav-zarif-link.active { color: #fff; }
.site-header-style-transparent .nav-zarif-phone { color: #fff; border-left-color: rgba(255,255,255,.25); }

/* Topbar — varsayılan */
.site-topbar { background: var(--primary-color); color: #fff; font-size: .8rem; }
.site-topbar .topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    flex-wrap: wrap;
    min-height: 36px;
}
.topbar-social { display: inline-flex; align-items: center; gap: .6rem; }
.topbar-social-placeholder { width: 1px; }
.topbar-social-link {
    color: rgba(255,255,255,.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-size: .95rem;
    transition: color .15s, background .15s, transform .15s;
}
.topbar-social-link:hover {
    color: #fff;
    background: rgba(255,255,255,.12);
    transform: translateY(-1px);
}
.topbar-contact { display: inline-flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.site-topbar .topbar-item { color: rgba(255,255,255,.9); display: inline-flex; align-items: center; gap: .4rem; }
.site-topbar .topbar-item:hover { color: #fff; }

/* Topbar — transparent modda arka plan yok, ince beyaz alt çizgi */
.site-overhead-style-transparent .site-topbar {
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,.15);
}
.site-overhead-style-transparent .site-topbar .topbar-item { color: rgba(255,255,255,.85); }
.site-overhead-style-transparent .site-topbar .topbar-item:hover { color: #fff; }

/* Transparent modda hero'nun üst padding'i header boyuna göre ayarlanır.
   !important gerekli çünkü home.php inline "padding:var(--hero-padding) 0" kullanıyor. */
body.header-style-transparent main .hero { padding-top: 150px !important; }
body.header-style-transparent.header-design-centered main .hero { padding-top: 210px !important; }
body.header-style-transparent.header-design-split    main .hero { padding-top: 180px !important; }
body.header-style-transparent.header-design-zarif    main .hero { padding-top: 170px !important; }

/* Topbar açıkken ek ~44px */
body.header-style-transparent.topbar-on main .hero { padding-top: 194px !important; }
body.header-style-transparent.topbar-on.header-design-centered main .hero { padding-top: 254px !important; }
body.header-style-transparent.topbar-on.header-design-split    main .hero { padding-top: 224px !important; }
body.header-style-transparent.topbar-on.header-design-zarif    main .hero { padding-top: 214px !important; }

/* Mobil — tüm değerleri düşür */
@media (max-width: 768px) {
    body.header-style-transparent main .hero { padding-top: 110px !important; }
    body.header-style-transparent.header-design-centered main .hero { padding-top: 150px !important; }
    body.header-style-transparent.header-design-split    main .hero { padding-top: 140px !important; }
    body.header-style-transparent.header-design-zarif    main .hero { padding-top: 120px !important; }
    body.header-style-transparent.topbar-on main .hero { padding-top: 150px !important; }
    body.header-style-transparent.topbar-on.header-design-centered main .hero { padding-top: 190px !important; }
    body.header-style-transparent.topbar-on.header-design-split    main .hero { padding-top: 180px !important; }
    body.header-style-transparent.topbar-on.header-design-zarif    main .hero { padding-top: 160px !important; }
}

/* --- Klasik: logo solda, menü sağda --- */
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

/* --- Ortalı: logo üstte, menü altta --- */
.nav-inner-centered { display: flex; flex-direction: column; align-items: center; padding: 1rem 0 .5rem; gap: .75rem; }
.nav-inner-centered .nav-logo-row { display: flex; align-items: center; justify-content: center; width: 100%; position: relative; }
.nav-inner-centered .nav-toggle { position: absolute; right: 0; }
.nav-menu-centered { justify-content: center; flex-wrap: wrap; }

/* --- Bölünmüş: üstte logo+iletişim, altta menü --- */
.nav-inner-split { display: flex; flex-direction: column; gap: .25rem; padding: .5rem 0; }
.nav-inner-split .nav-top-row { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--border-color); }
.nav-inner-split .nav-top-right { display: flex; align-items: center; gap: 1rem; }
.nav-inner-split .nav-contact { font-size: .85rem; color: var(--text-color); display: inline-flex; align-items: center; gap: .4rem; }
.nav-inner-split .nav-contact:hover { color: var(--primary-color); }
.nav-menu-split { justify-content: center; padding: .25rem 0; }

/* --- Zarif: sol menü · merkez logo · sağ CTA (premium avukat tarzı) --- */
.nav-inner-zarif {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 90px;
    padding: .5rem 0;
    position: relative;
}
.nav-menu-zarif-left { justify-content: flex-start; }
.site-logo-center { justify-self: center; text-align: center; }
.site-logo-center .logo-text { font-size: 1.4rem; letter-spacing: .06em; font-weight: 700; }
.nav-zarif-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .9rem;
    flex-wrap: wrap;
}
.nav-zarif-link {
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-color);
    padding: .35rem 0;
}
.nav-zarif-link:hover, .nav-zarif-link.active { color: var(--primary-color); }
.nav-zarif-phone {
    font-size: .85rem;
    font-weight: 600;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding-left: .75rem;
    border-left: 1px solid var(--border-color);
}
.nav-zarif-phone:hover { color: var(--secondary-color); }

/* --- Site Logosu (tüm header tasarımlarında ortak) --- */
.site-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
    text-decoration: none;
    max-width: 100%;
}
.site-logo img {
    height: 45px;
    max-height: 45px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}
.logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
    line-height: 1.1;
}

/* Tasarım başına logo boyutları */
.site-header-classic  .site-logo img { height: 45px; max-height: 45px; }
.site-header-centered .site-logo img { height: 58px; max-height: 58px; max-width: 280px; }
.site-header-centered .logo-text     { font-size: 1.5rem; letter-spacing: .06em; }
.site-header-split    .site-logo img { height: 48px; max-height: 48px; }
.site-header-zarif    .site-logo img { height: 52px; max-height: 52px; max-width: 240px; }
.site-header-zarif    .logo-text     { font-size: 1.4rem; letter-spacing: .06em; }

/* Mobilde biraz küçülsün */
@media (max-width: 768px) {
    .site-header .site-logo img { height: 38px !important; max-height: 38px !important; max-width: 160px; }
    .site-header .logo-text { font-size: 1.1rem !important; }
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 0.25rem;
    align-items: center;
}

.nav-menu a {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    border-radius: var(--radius);
    transition: background 0.2s, color 0.2s;
}

.nav-menu a:hover, .nav-menu a.active {
    background: var(--bg-light);
    color: var(--primary-color);
}

.nav-cta {
    background: var(--primary-color) !important;
    color: #fff !important;
    padding: 0.5rem 1.25rem !important;
}

.nav-cta:hover { background: var(--secondary-color) !important; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text-color); margin: 5px 0; transition: 0.3s; }

/* ============================================
   Hero Section
   ============================================ */
/* --- Hero Base --- */
.hero {
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hero h1 { margin-bottom: 1rem; }
.hero p { opacity: 0.9; max-width: 600px; margin-bottom: 2rem; }
.hero-accent-line { width: 48px; height: 3px; background: var(--secondary-color); border-radius: 2px; margin-bottom: 1.25rem; }
.hero-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero-btn {
    display: inline-block;
    font-weight: 600;
    border-radius: var(--radius);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.hero-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.hero-btn-primary { background: var(--secondary-color); color: #fff; }
.hero-btn-primary:hover { color: #fff; }
.hero-btn-secondary { background: transparent; border: 2px solid rgba(255,255,255,0.6); color: #fff; }
.hero-btn-secondary:hover { background: rgba(255,255,255,0.1); color: #fff; }
.hero-btn-accent { background: var(--secondary-color); color: #fff; }
.hero-btn-accent:hover { color: #fff; }
.hero-btn-outline { background: transparent; border: 2px solid rgba(255,255,255,0.5); color: #fff; }
.hero-btn-outline:hover { background: rgba(255,255,255,0.1); color: #fff; }
.hero-btn-dark { background: var(--primary-color); color: #fff; }
.hero-btn-dark:hover { color: #fff; }
.hero-btn-link { background: none; color: var(--primary-color); padding-left: 0.5rem; padding-right: 0.5rem; font-weight: 600; }
.hero-btn-link:hover { text-decoration: underline; box-shadow: none; transform: none; }
.hero-overlay {
    position: absolute; inset: 0; background: #000; pointer-events: none; z-index: 1;
}

/* --- 1. Classic: centered, gradient bg --- */
.hero-classic {
    text-align: center;
}
.hero-classic .hero-accent-line { margin-left: auto; margin-right: auto; }
.hero-classic p { margin-left: auto; margin-right: auto; }
.hero-classic .hero-buttons { justify-content: center; }

/* --- 2. Split: two-column --- */
.hero-split {
    padding: 0;
}
.hero-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    min-height: 480px;
}
.hero-split-content {
    display: flex; flex-direction: column; justify-content: center;
    padding: 3rem 2.5rem 3rem 0;
    min-width: 0;
}
.hero-split-image {
    position: relative;
    overflow: hidden;
    min-width: 0;
}
.hero-split-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-split-placeholder {
    width: 100%; height: 100%; background: color-mix(in srgb, var(--primary-color) 60%, #000);
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem; opacity: 0.3;
}

/* --- 3. Full Image: bg image with overlay --- */
.hero-fullimage {
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero-fullimage-content {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 5rem 0;
    min-height: inherit;
}
.hero-fullimage p { margin-left: auto; margin-right: auto; }
.hero-fullimage .hero-buttons { justify-content: center; }

/* --- 4. Gradient: diagonal gradient --- */
.hero-gradient {
    text-align: center;
}
.hero-gradient .hero-accent-line { margin-left: auto; margin-right: auto; }
.hero-gradient p { margin-left: auto; margin-right: auto; }
.hero-gradient .hero-buttons { justify-content: center; }

/* --- 5. Minimal: white bg, dark text, large type --- */
.hero-minimal {
}
.hero-minimal p { color: #52525b; opacity: 1; }
.hero-minimal .hero-buttons { align-items: center; }

/* --- 6. Stats: with counters bar --- */
.hero-stats {
    background-size: cover; background-position: center;
    position: relative;
}
.hero-stats-inner { position: relative; z-index: 2; }
.hero-stats-content {
    text-align: center;
}
.hero-stats-content .hero-accent-line { margin-left: auto; margin-right: auto; }
.hero-stats-content p { margin-left: auto; margin-right: auto; }
.hero-stats-content .hero-buttons { justify-content: center; }
.hero-stats-bar {
    display: flex; justify-content: center; gap: 0;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 1.5rem 0;
}
.hero-stat-item {
    flex: 1; text-align: center;
    padding: 0.5rem 1rem;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.hero-stat-item:last-child { border-right: none; }
.hero-stat-value {
    display: block; font-size: 1.75rem; font-weight: 700;
    line-height: 1.2;
}
.hero-stat-label {
    display: block; font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-top: 0.25rem;
}

/* ============================================
   Sections
   ============================================ */
.section { padding: 4rem 0; }
.post-section { padding: 2rem 0 4rem; }
.archive-section { padding: 2rem 0 4rem; }
.service-section { padding: 2rem 0 4rem; }

/* Hizmet detay — masaüstü 2 kolon, mobil tek kolon */
.service-section .service-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: flex-start;
}
.service-section .service-main { min-width: 0; }
.service-section .service-title {
    font-family: var(--h1-font, var(--heading-font, inherit));
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.2; letter-spacing: -.015em;
    margin: 0 0 1rem; color: var(--text-color, #0f172a);
}
.service-section .service-cover {
    width: 100%; height: auto;
    border-radius: var(--radius, 8px);
    margin: 0 0 1.5rem;
    aspect-ratio: 16 / 8; object-fit: cover;
    display: block;
}

/* Meta satırı (yayın / güncelleme) */
.service-section .service-meta {
    display: flex; flex-wrap: wrap; gap: 1rem;
    color: var(--text-light, #6b7280);
    font-size: .82rem;
    margin: -.25rem 0 1.25rem;
}
.service-section .service-meta-item {
    display: inline-flex; align-items: center; gap: .35rem;
}
.service-section .service-meta-item i { opacity: .7; font-size: .85rem; }
.service-section .service-meta-updated { color: var(--secondary-color, #c9a84c); }

/* Lead paragraph */
.service-section .service-lead {
    font-size: 1.1rem; line-height: 1.7; color: var(--text-color, #0f172a);
    margin: 0 0 1.5rem;
    padding-left: 1rem;
    border-left: 3px solid var(--secondary-color, #c9a84c);
    font-weight: 500;
}

/* İçeriklerin altındaki CTA */
.service-section .service-bottom-cta {
    margin-top: 2.5rem; padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #1a365d) 6%, #fff), #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius, 10px);
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    flex-wrap: wrap;
}
.service-section .service-bottom-cta strong { display: block; font-size: 1rem; color: var(--text-color, #0f172a); margin-bottom: .25rem; }
.service-section .service-bottom-cta p { font-size: .88rem; color: var(--text-light, #6b7280); margin: 0; }
.service-section .service-bottom-cta .btn { white-space: nowrap; }
@media (max-width: 600px) {
    .service-section .service-bottom-cta { flex-direction: column; align-items: flex-start; padding: 1.25rem; }
}

/* Sidebar başlıklar — h2 boyutu ile h3'e benzer görünüm (semantic doğru, görsel sade) */
.service-section .service-side-cta-title {
    font-size: 1rem; font-weight: 700; color: var(--text-color, #0f172a);
    margin: 0 0 .35rem;
}

/* Sidebar */
.service-section .service-sidebar { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: calc(var(--dh-height-scrolled, var(--dh-height, 72px)) + 1rem); align-self: flex-start; }
.service-section .service-side-card,
.service-section .service-side-cta {
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius, 8px);
    padding: 1.15rem 1.25rem;
}
.service-section .service-side-cta {
    background: var(--bg-light, #fafaf7);
}
.service-section .service-side-title {
    font-size: .82rem; font-weight: 700;
    color: var(--text-light, #6b7280);
    letter-spacing: .12em; text-transform: uppercase;
    margin: 0 0 .85rem; padding-bottom: .65rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.service-section .service-other-list { list-style: none; padding: 0; margin: 0; }
.service-section .service-other-list li + li { margin-top: .15rem; }
.service-section .service-other-list a {
    display: flex; align-items: center; justify-content: space-between;
    padding: .55rem .65rem; margin: 0 -.65rem;
    color: var(--text-color, #0f172a); text-decoration: none;
    border-radius: 6px; font-size: .9rem; font-weight: 500;
    transition: background .15s, color .15s, padding .15s;
}
.service-section .service-other-list a:hover {
    background: var(--bg-light, #fafaf7);
    color: var(--primary-color, #1a365d);
}
.service-section .service-other-list a i { color: var(--text-light, #9ca3af); font-size: .85rem; transition: transform .15s; }
.service-section .service-other-list a:hover i { transform: translateX(2px); color: var(--secondary-color, #c9a84c); }
.service-section .service-side-cta h4 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 700; color: var(--text-color, #0f172a); }
.service-section .service-side-cta p { font-size: .85rem; line-height: 1.55; color: var(--text-light, #6b7280); margin: 0 0 .85rem; }
.service-section .service-side-cta .btn { width: 100%; text-align: center; }

/* Mobil: tek kolon, sidebar altta, sticky kaldır */
@media (max-width: 900px) {
    .service-section .service-grid { grid-template-columns: 1fr; gap: 2rem; }
    .service-section .service-sidebar { position: static; flex-direction: column; }
}
@media (max-width: 600px) {
    .service-section { padding: 1.5rem 0 3rem; }
    .service-section .service-cover { aspect-ratio: 16 / 9; margin-bottom: 1.25rem; }
    .service-section .service-side-card,
    .service-section .service-side-cta { padding: 1rem; }
}
.section-light { background: var(--bg-light); }
.section-title { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--primary-color); }
.section-subtitle { color: var(--text-light); margin-bottom: 2.5rem; }

/* Arşiv (blog) sayfası — başlık ile manşet arası daha sıkı */
.archive-section .section-title { margin-top: 0; margin-bottom: .35rem; line-height: 1.15; }
.archive-section .section-subtitle { margin-bottom: 1.25rem; }
.archive-section .archive-hero,
.archive-section .archive-banner { margin-bottom: 1.5rem; }
.archive-section .blog-hero { margin-top: 0; margin-bottom: 2rem; }
/* Breadcrumb — arşivde padding tamamen kaldırılır */
.archive-section .breadcrumb { padding: 0 !important; margin: 0 0 .5rem !important; }

/* Kategori açıklaması — "İçeriklerin Altında" konumunda full-width SEO bloku */
.archive-seo-block {
    margin-top: 3rem;
    padding: 2.25rem 2rem;
    background: linear-gradient(180deg, #fafaf7, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
}
.archive-seo-block .archive-seo-head { margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.archive-seo-block .archive-seo-head h2 {
    font-family: var(--h2-font, var(--heading-font, inherit));
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: var(--heading-weight, 600);
    color: var(--primary-color, #1a365d);
    margin: 0; line-height: 1.25;
}
.archive-seo-body { font-size: 1rem; line-height: 1.85; color: var(--text-color, #1f2937); max-width: 900px; }
.archive-seo-body h2, .archive-seo-body h3, .archive-seo-body h4 { font-family: var(--heading-font, inherit); margin: 1.4rem 0 .65rem; line-height: 1.3; }
.archive-seo-body h2 { font-size: 1.3rem; }
.archive-seo-body h3 { font-size: 1.15rem; }
.archive-seo-body h4 { font-size: 1.02rem; }
.archive-seo-body p { margin: 0 0 1rem; }
.archive-seo-body ul, .archive-seo-body ol { margin: 0 0 1rem 1.25rem; }
.archive-seo-body li { margin-bottom: .35rem; }
.archive-seo-body a { color: var(--primary-color, #1a365d); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 768px) {
    .archive-seo-block { padding: 1.5rem 1.15rem; margin-top: 2rem; }
}

.text-center { text-align: center; }

/* ============================================
   Cards Grid
   ============================================ */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
}

.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-4px); }

.card-img { width: 100%; height: 200px; object-fit: cover; }
.card-body { padding: 1.5rem; }
.card-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; }
.card-title a { color: var(--text-color); }
.card-title a:hover { color: var(--primary-color); }
.card-text { color: var(--text-light); font-size: 0.9rem; margin-bottom: 1rem; }
.card-meta { font-size: 0.8rem; color: var(--text-light); }
.card-icon { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 1rem; }

/* ============================================
   Service Card
   ============================================ */
.service-card { text-align: center; padding: 2rem 1.5rem; }
.service-card-icon { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--primary-color) 10%, transparent); color: var(--primary-color); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem; }

/* ============================================
   Blog List
   ============================================ */
.blog-card .card-body { display: flex; flex-direction: column; }
.blog-card .card-text { flex: 1; }
.blog-date { font-size: 0.8rem; color: var(--text-light); }
.blog-category { display: inline-block; background: color-mix(in srgb, var(--primary-color) 10%, transparent); color: var(--primary-color); padding: 0.2rem 0.6rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 500; }

/* ============================================
   Article Content (sayfalar, hizmet detayları için)
   ============================================ */
.article-content {
    max-width: var(--article-max-width, 800px);
    margin: 0 auto;
    font-family: var(--article-font);
    font-size: var(--article-font-size, 16px);
    line-height: var(--article-line-height, 1.7);
}
.article-content h1 { font-family: var(--h1-font); font-weight: var(--heading-weight); font-size: 2.25rem; line-height: 1.3; margin-bottom: 1rem; }
.article-content h2 { font-family: var(--heading-font); font-weight: var(--heading-weight); font-size: var(--article-h2-size, 1.5rem); margin: 2rem 0 1rem; color: var(--primary-color); }
.article-content h3 { font-family: var(--heading-font); font-weight: var(--heading-weight); font-size: var(--article-h3-size, 1.25rem); margin: 1.5rem 0 0.75rem; }
.article-content h4 { font-family: var(--heading-font); font-weight: var(--heading-weight); font-size: var(--article-h4-size, 1.125rem); margin: 1.25rem 0 .5rem; }
.article-content p { margin-bottom: var(--article-paragraph-spacing, 1.25rem); }
.article-content ul, .article-content ol { margin-bottom: var(--article-paragraph-spacing, 1.25rem); padding-left: 1.5rem; }
.article-content li { margin-bottom: 0.25rem; }
.article-content blockquote { border-left: 4px solid var(--secondary-color); padding-left: 1.5rem; margin: 1.5rem 0; color: var(--text-light); font-style: italic; }
.article-content img { border-radius: var(--radius); margin: 1.5rem 0; }

.article-meta { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; color: var(--text-light); flex-wrap: wrap; }
.article-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.article-featured { width: 100%; border-radius: var(--radius); margin-bottom: 2rem; height: auto; }
.article-narrow { max-width: 720px; margin: 0 auto; }

/* Grid: içerik + sidebar — ESKİ (geriye dönük) */
.article-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.article-page.has-sidebar .article-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; }

/* ════════════════════════════════════════════
   BLOG MANŞETİ (Hero Slider — 6 varyant)
   ════════════════════════════════════════════ */

.blog-hero {
    margin: 0 0 2.5rem;
    position: relative;
}

/* Ortak hero kart */
.hero-card {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background-color: #1e293b;
    background-size: cover;
    background-position: center;
    min-height: 260px;
    transition: transform .3s;
}
.hero-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.8));
}
.hero-card-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.15);
    pointer-events: none;
}
.hero-card-inner {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    z-index: 2;
}
.hero-card-cat {
    display: inline-block;
    background: var(--secondary-color);
    color: #fff;
    font-size: .7rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase;
    padding: .3rem .75rem;
    border-radius: 4px;
    align-self: flex-start;
    margin-bottom: .6rem;
}
.hero-card-title {
    color: #fff;
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.hero-card-excerpt {
    color: rgba(255,255,255,.92);
    margin: .5rem 0 0;
    font-size: .95rem;
    line-height: 1.5;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.hero-card-meta {
    margin-top: .75rem;
    display: flex; gap: 1rem;
    font-size: .78rem;
    color: rgba(255,255,255,.8);
}
.hero-card-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.hero-card:hover .hero-card-overlay { background: rgba(0,0,0,0); }

/* Boyutlar */
.hero-card-sm { min-height: 140px; }
.hero-card-sm .hero-card-title { font-size: 1rem; }
.hero-card-md { min-height: 260px; }
.hero-card-md .hero-card-title { font-size: 1.2rem; }
.hero-card-lg { min-height: 440px; }
.hero-card-lg .hero-card-title { font-size: 2rem; }
.hero-card-xl { min-height: 500px; }
.hero-card-xl .hero-card-title { font-size: 2.35rem; }

/* ─── 1. SLIDER ─── */
.blog-hero-slider { overflow: hidden; }
.blog-hero-slider .hero-slider-track {
    display: flex;
    transition: transform .5s ease-in-out;
}
.blog-hero-slider .hero-slider-track .hero-card {
    flex: 0 0 100%;
    margin-right: 0;
    border-radius: var(--radius);
}
.hero-slider-prev, .hero-slider-next {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.9); border: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1.2rem; color: #111827;
    transition: background .15s, transform .15s;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.hero-slider-prev:hover, .hero-slider-next:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.hero-slider-prev { left: 1rem; }
.hero-slider-next { right: 1rem; }
.hero-slider-dots {
    position: absolute; bottom: 1rem; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: .4rem; z-index: 5;
}
.hero-slider-dots button {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,.4);
    border: 0; cursor: pointer;
    transition: background .15s, width .15s;
}
.hero-slider-dots button.active { background: #fff; width: 28px; border-radius: 5px; }

/* ─── 2. MAGAZINE ─── */
.hero-magazine {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}
.hero-magazine > .hero-card { min-height: 460px; }
.hero-magazine-side {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 1rem;
}

/* ─── 3. GRID 3 ─── */
.hero-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* ─── 4. CAROUSEL ─── */
.blog-hero-carousel { overflow: hidden; }
.hero-carousel { overflow: hidden; }
.hero-carousel-track {
    display: flex;
    gap: 1rem;
    transition: transform .4s ease;
}
.hero-carousel-track .hero-card {
    flex: 0 0 calc(25% - .75rem);
}
.hero-carousel-prev, .hero-carousel-next {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    z-index: 5;
}
.hero-carousel-prev:hover, .hero-carousel-next:hover { color: var(--primary-color); border-color: var(--primary-color); }
.hero-carousel-prev { left: -20px; }
.hero-carousel-next { right: -20px; }

/* ─── 5. DUAL ─── */
.hero-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.hero-dual .hero-card { min-height: 400px; }

/* ─── 6. SPLIT (1 büyük + 4 küçük) ─── */
.hero-split {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.hero-split .hero-card-xl { min-height: 480px; }
.hero-split-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.hero-split-bottom .hero-card { min-height: 160px; }

/* Responsive */
@media (max-width: 900px) {
    .hero-magazine { grid-template-columns: 1fr; }
    .hero-magazine > .hero-card { min-height: 320px; }
    .hero-magazine-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
    .hero-magazine-side .hero-card { min-height: 180px; }
    .hero-grid3 { grid-template-columns: 1fr 1fr; }
    .hero-carousel-track .hero-card { flex-basis: calc(50% - .5rem); }
    .hero-dual { grid-template-columns: 1fr; }
    .hero-dual .hero-card { min-height: 280px; }
    .hero-split-bottom { grid-template-columns: 1fr 1fr; }
    .hero-split .hero-card-xl { min-height: 320px; }
    .hero-card-lg .hero-card-title, .hero-card-xl .hero-card-title { font-size: 1.5rem; }
    .hero-slider-prev, .hero-slider-next { width: 36px; height: 36px; }
    .hero-slider-prev { left: .5rem; }
    .hero-slider-next { right: .5rem; }
    .hero-carousel-prev { left: 0; }
    .hero-carousel-next { right: 0; }
}
@media (max-width: 600px) {
    .hero-grid3 { grid-template-columns: 1fr; }
    .hero-magazine-side { grid-template-columns: 1fr; }
    .hero-carousel-track .hero-card { flex-basis: 100%; }
    .hero-split-bottom { grid-template-columns: 1fr; }
}

/* Mobil — Blog Manşeti tamamen gizle (768px ve altı). Slider/Carousel mobil için anlamlı değil. */
@media (max-width: 768px) {
    .archive-section .blog-hero { display: none !important; }
}

/* ════════════════════════════════════════════
   ARŞİV (Blog listesi + Kategori) tasarım sistemi
   ════════════════════════════════════════════ */

/* Sayfa başlığı varyantları */
.archive-hero {
    position: relative;
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 70%, #000));
    color: #fff;
    border-radius: var(--radius);
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    text-align: center;
    overflow: hidden;
}
.archive-hero.has-image {
    background-size: cover;
    background-position: center;
    padding: 4.5rem 2rem;
}
.archive-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65));
    z-index: 0;
}
.archive-hero-inner { position: relative; z-index: 2; }
.archive-hero-label {
    display: inline-block;
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.9);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    padding: .35rem .85rem;
    border-radius: 4px;
    margin-bottom: .75rem;
}
.archive-hero h1 { color: #fff; font-size: 2.5rem; line-height: 1.2; margin: .25rem 0 .5rem; }
.archive-hero p { color: rgba(255,255,255,.85); max-width: 680px; margin: 0 auto; font-size: 1.05rem; }

.archive-banner {
    border-left: 4px solid var(--secondary-color);
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    background: var(--bg-light);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.archive-banner h1 { margin: 0 0 .35rem; }
.archive-banner p { margin: 0; color: var(--text-light); }

/* Kategori filtre çipleri */
.archive-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.archive-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .85rem;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 99px;
    color: var(--text-color);
    font-size: .85rem;
    transition: all .15s;
}
.archive-chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
.archive-chip.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.archive-chip-count {
    font-size: .7rem;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    padding: 1px 7px;
    border-radius: 99px;
    font-weight: 600;
}
.archive-chip.active .archive-chip-count { background: rgba(255,255,255,.25); color: #fff; }

/* ─── Ortak kart bileşeni ─── */
.al-img-wrap {
    display: block; position: relative; overflow: hidden;
}
.al-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }

/* Placeholder — featured image yokken stilize fallback */
.al-img-placeholder {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary-color, #1a365d) 92%, #000) 0%,
            color-mix(in srgb, var(--primary-color, #1a365d) 70%, var(--secondary-color, #c9a84c) 30%) 100%);
}
.al-img-placeholder::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 80%,
            color-mix(in srgb, var(--secondary-color, #c9a84c) 28%, transparent),
            transparent 55%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 14px, transparent 14px 28px);
    pointer-events: none;
}
.al-img-placeholder .al-img-ph-mark {
    position: absolute; bottom: 1rem; left: 1rem;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--secondary-color, #c9a84c) 80%, transparent);
    color: #1a1a1a;
    font-size: 1.05rem;
    z-index: 1;
}
.al-img-placeholder .al-img-ph-initial {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--h1-font, 'Georgia', 'Times New Roman', serif);
    font-size: clamp(3rem, 8vw, 5rem); font-weight: 600; font-style: italic;
    color: rgba(255, 255, 255, .14);
    letter-spacing: -.02em;
    pointer-events: none;
}
.al-img-placeholder .al-category { color: #fff; z-index: 2; }
.al-card:hover .al-img-wrap img,
.al-row:hover .al-img-wrap img,
.al-featured:hover .al-img-wrap img { transform: scale(1.04); }
.al-category {
    position: absolute; top: .75rem; left: .75rem;
    background: var(--secondary-color);
    color: #fff;
    font-size: .68rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: 4px;
}
.al-cat-link {
    display: inline-block;
    color: var(--secondary-color);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .4rem;
}
.al-title { margin: 0 0 .5rem; line-height: 1.3; }
.al-title a { color: var(--text-color); text-decoration: none; }
.al-title a:hover { color: var(--primary-color); }
.al-excerpt {
    color: var(--text-light);
    line-height: 1.6;
    margin: 0 0 .85rem;
    font-size: .95rem;
}
.al-meta {
    display: flex; gap: .85rem; flex-wrap: wrap;
    font-size: .78rem; color: var(--text-light);
}
.al-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.al-meta i { opacity: .7; }
/* Meta içinde kategori — tıklanabilir altın rozet */
.al-meta-cat {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .15rem .55rem;
    background: color-mix(in srgb, var(--secondary-color, #c9a84c) 14%, transparent);
    color: var(--secondary-color, #c9a84c);
    border-radius: 4px;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.al-meta-cat:hover {
    background: var(--secondary-color, #c9a84c);
    color: #1a1a1a;
}
.al-meta-cat i { font-size: .7rem; opacity: 1 !important; }

/* ═══ GÖRSEL ORANI — grid/list/large için CSS değişkeniyle ─── */
.archive-ratio-16-10 { --al-img-aspect: 16 / 10; }
.archive-ratio-4-3   { --al-img-aspect: 4 / 3; }
.archive-ratio-1-1   { --al-img-aspect: 1 / 1; }
.archive-ratio-3-4   { --al-img-aspect: 3 / 4; }

/* ═══ LAYOUT: GRID ═══ */
.archive-layout-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    gap: 1.75rem;
}
.archive-layout-grid .al-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.archive-layout-grid .al-img-wrap { aspect-ratio: var(--al-img-aspect, 16/10); }
.archive-layout-grid .al-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.archive-layout-grid .al-title { font-size: 1.1rem; }
.archive-layout-grid .al-excerpt { flex: 1; }

/* Kart stili varyantları (grid) */
.archive-card-soft .al-card {
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.archive-card-elevated .al-card {
    background: #fff;
    border: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,.07);
}
.archive-card-flat .al-card {
    background: transparent;
    border: 0;
    box-shadow: none;
}
.archive-card-flat .al-img-wrap { border-radius: var(--radius); overflow: hidden; }
.archive-card-flat .al-body { padding: 1rem 0 0; }
.archive-card-bordered .al-card {
    background: #fff;
    border: 2px solid var(--border-color);
    box-shadow: none;
}
.archive-card-bordered .al-card:hover { border-color: var(--primary-color); }

/* Hover animasyonu sadece .archive-has-hover ile aktif */
.archive-has-hover .al-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.archive-has-hover .al-img-wrap img { transition: transform .35s; }
.archive-has-hover .al-card:hover .al-img-wrap img,
.archive-has-hover .al-row:hover .al-img-wrap img,
.archive-has-hover .al-featured:hover .al-img-wrap img { transform: scale(1.05); }

/* ═══ LAYOUT: LIST ═══ */
.archive-layout-list { display: flex; flex-direction: column; gap: 1.5rem; }
.archive-layout-list .al-row {
    display: grid;
    grid-template-columns: var(--al-list-img, 280px) 1fr;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}
.archive-layout-list .al-row:last-child { border-bottom: 0; }
.archive-layout-list .al-img-wrap { aspect-ratio: var(--al-img-aspect, 16/10); border-radius: var(--radius); overflow: hidden; }
/* List layout — kategori metni body içinde görünür, görsel overlay'da gizlenir (duplicate olmasın) */
.archive-layout-list .al-img-wrap > .al-category { display: none; }
.archive-layout-list .al-title { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.005em; }
.archive-layout-list .al-excerpt { font-size: 1rem; }

/* Görsel Boyutu — list için */
.archive-list-size-small  { --al-list-img: 200px; }
.archive-list-size-medium { --al-list-img: 280px; }
.archive-list-size-large  { --al-list-img: 380px; }

/* Görsel Pozisyonu — list için
   NOT: archive-list-pos-* ve archive-layout-list AYNI elementte (wrapper),
   bu yüzden descendant değil, children selector kullanıyoruz. */
.archive-list-pos-right.archive-layout-list > .al-row {
    grid-template-columns: 1fr var(--al-list-img, 280px);
}
.archive-list-pos-right.archive-layout-list > .al-row > .al-img-wrap {
    grid-column: 2;
    grid-row: 1;
}
.archive-list-pos-right.archive-layout-list > .al-row > .al-body {
    grid-column: 1;
    grid-row: 1;
}

/* Dönüşümlü — tek satır sol, çift satır sağ */
.archive-list-pos-alternate.archive-layout-list > .al-row:nth-child(even) {
    grid-template-columns: 1fr var(--al-list-img, 280px);
}
.archive-list-pos-alternate.archive-layout-list > .al-row:nth-child(even) > .al-img-wrap {
    grid-column: 2; grid-row: 1;
}
.archive-list-pos-alternate.archive-layout-list > .al-row:nth-child(even) > .al-body {
    grid-column: 1; grid-row: 1;
}

/* ═══ LAYOUT: LARGE (ilk büyük + liste) ═══ */
.archive-layout-large { display: flex; flex-direction: column; gap: 2.5rem; }
.archive-layout-large .al-featured {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
    align-items: center;
}
.archive-layout-large .al-featured .al-img-wrap { aspect-ratio: var(--al-img-aspect, 4/3); border-radius: var(--radius); }
.archive-layout-large .al-title-xl { font-size: 2.1rem; line-height: 1.15; letter-spacing: -.015em; }
.archive-layout-large .al-excerpt-lg { font-size: 1.05rem; line-height: 1.65; }
.archive-layout-large .al-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border-color);
}
.archive-layout-large .al-row-compact {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    align-items: center;
}
.archive-layout-large .al-row-compact .al-img-wrap { aspect-ratio: 1; border-radius: 8px; }
.archive-layout-large .al-row-compact .al-title { font-size: 1rem; line-height: 1.3; margin-bottom: .35rem; }

/* Large varyantlar — aynı elementte chain selector */
.archive-large-pos-top.archive-layout-large > .al-featured {
    grid-template-columns: 1fr;
}
.archive-large-pos-top.archive-layout-large > .al-featured .al-img-wrap {
    aspect-ratio: var(--al-img-aspect, 21/9);
    max-height: 460px;
}
.archive-large-cols-1.archive-layout-large > .al-list {
    grid-template-columns: 1fr;
}

/* ═══ LAYOUT: MASONRY ═══ */
.archive-layout-masonry {
    column-count: var(--cols, 3);
    column-gap: 1.5rem;
}

/* Masonry boşluk varyantları — aynı elementte */
.archive-masonry-gap-narrow.archive-layout-masonry { column-gap: .85rem; }
.archive-masonry-gap-narrow.archive-layout-masonry .al-card { margin-bottom: .85rem; }
.archive-masonry-gap-normal.archive-layout-masonry { column-gap: 1.5rem; }
.archive-masonry-gap-normal.archive-layout-masonry .al-card { margin-bottom: 1.5rem; }
.archive-masonry-gap-wide.archive-layout-masonry { column-gap: 2.25rem; }
.archive-masonry-gap-wide.archive-layout-masonry .al-card { margin-bottom: 2.25rem; }
.archive-layout-masonry .al-card {
    break-inside: avoid;
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    display: inline-block;
    width: 100%;
}
.archive-layout-masonry .al-body { padding: 1rem 1.1rem 1.15rem; }
.archive-layout-masonry .al-title { font-size: 1.05rem; }
.archive-layout-masonry .al-img-wrap img { height: auto; }

/* ═══ LAYOUT: TIMELINE ═══ */
.archive-layout-timeline {
    position: relative;
    padding-left: 2rem;
    border-left: 2px solid var(--border-color);
    max-width: 760px;
    margin: 0 auto;
}
.al-timeline-item { position: relative; margin-bottom: 2rem; padding-left: 1rem; }
.al-timeline-dot {
    position: absolute;
    left: -2.6rem; top: .35rem;
    width: 14px; height: 14px;
    background: #fff;
    border: 3px solid var(--secondary-color);
    border-radius: 50%;
    z-index: 2;
}
.al-timeline-content {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    transition: border-color .15s, box-shadow .15s;
}
.al-timeline-item:hover .al-timeline-content { border-color: var(--primary-color); box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.al-timeline-date {
    font-size: .78rem; color: var(--text-light);
    display: block; margin-bottom: .35rem;
    font-weight: 500;
}
.al-timeline-content .al-title { font-size: 1.2rem; line-height: 1.3; }

/* Timeline — center hizalama varyantı (aynı element + children) */
.archive-timeline-center.archive-layout-timeline {
    max-width: 900px;
    padding-left: 0;
    border-left: 0;
    position: relative;
}
.archive-timeline-center.archive-layout-timeline::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--border-color);
    transform: translateX(-50%);
}
.archive-timeline-center .al-timeline-item {
    width: 50%;
    padding: 0 2rem;
    margin-bottom: 2rem;
}
.archive-timeline-center .al-timeline-item:nth-child(odd) {
    margin-left: 0;
    text-align: right;
}
.archive-timeline-center .al-timeline-item:nth-child(even) {
    margin-left: 50%;
    text-align: left;
}
.archive-timeline-center .al-timeline-dot {
    left: auto;
    right: -1.5rem;
    top: .35rem;
}
.archive-timeline-center .al-timeline-item:nth-child(even) .al-timeline-dot {
    left: -1.5rem;
    right: auto;
}
/* ═══ LAYOUT: COMPACT ═══ */
.archive-layout-compact { display: flex; flex-direction: column; }
.al-compact-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: var(--al-compact-py, .95rem) 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    text-decoration: none;
    transition: background .15s;
}
.al-compact-row:hover { background: var(--bg-light); }

/* Compact yoğunluk varyantları */
.archive-compact-dense       { --al-compact-py: .55rem; }
.archive-compact-normal      { --al-compact-py: .95rem; }
.archive-compact-comfortable { --al-compact-py: 1.4rem; }

/* Zebra arkaplan — sadece compact ile mantıklı */
.archive-has-zebra.archive-layout-compact > .al-compact-row:nth-child(even) {
    background: var(--bg-light);
}
.archive-has-zebra.archive-layout-compact > .al-compact-row:nth-child(even):hover {
    background: color-mix(in srgb, var(--primary-color) 6%, var(--bg-light));
}
.al-compact-row:hover .al-compact-title { color: var(--primary-color); }
.al-compact-cat {
    font-size: .68rem; font-weight: 700;
    color: var(--secondary-color);
    text-transform: uppercase; letter-spacing: .08em;
}
.al-compact-title { font-size: 1rem; font-weight: 500; line-height: 1.35; }
.al-compact-date { font-size: .78rem; color: var(--text-light); white-space: nowrap; }

/* ─── Arşiv + Sidebar grid layout ─── */
.archive-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 3rem;
    align-items: start;
}
.archive-main { min-width: 0; }
.archive-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 1rem;
    align-self: start;
}

/* Sidebar widget ortak */
.archive-sidebar .sidebar-widget {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
}
.archive-sidebar .sidebar-widget-title {
    margin: 0 0 1rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-color);
    padding-bottom: .65rem;
    border-bottom: 2px solid var(--secondary-color);
    display: flex; align-items: center; gap: .4rem;
}
.archive-sidebar .sidebar-widget-title i { color: var(--secondary-color); font-size: .9rem; }

/* Kategori listesi */
.sidebar-cat-list { list-style: none; padding: 0; margin: 0; }
.sidebar-cat-list li { margin: 0; }
.sidebar-cat-list a {
    display: flex; justify-content: space-between; align-items: center;
    padding: .55rem .25rem;
    font-size: .9rem;
    color: var(--text-color);
    border-bottom: 1px dashed #f1f5f9;
    text-decoration: none;
    transition: color .15s, padding-left .15s;
}
.sidebar-cat-list li:last-child a { border-bottom: 0; }
.sidebar-cat-list a:hover { color: var(--primary-color); padding-left: .5rem; }
.sidebar-cat-list a.active { color: var(--primary-color); font-weight: 600; padding-left: .5rem; }
.sidebar-cat-count {
    font-size: .72rem;
    background: var(--bg-light);
    color: var(--text-light);
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 500;
}
.sidebar-cat-list a.active .sidebar-cat-count {
    background: var(--primary-color);
    color: #fff;
}

/* Sidebar post listesi */
.archive-sidebar .sidebar-posts { display: flex; flex-direction: column; }
.archive-sidebar .sidebar-post {
    display: flex; gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: var(--text-color);
}
.archive-sidebar .sidebar-post:last-child { border-bottom: 0; }
.archive-sidebar .sidebar-post img {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.archive-sidebar .sidebar-post strong {
    display: block;
    font-size: .85rem;
    line-height: 1.35;
    font-weight: 500;
}
.archive-sidebar .sidebar-post:hover strong { color: var(--primary-color); }
.archive-sidebar .sidebar-post small {
    color: var(--text-light);
    font-size: .72rem;
    display: block;
    margin-top: .25rem;
}

/* CTA widget */
.archive-sidebar .sidebar-cta {
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 70%, #000));
    border: 0;
    color: #fff;
}
.archive-sidebar .sidebar-cta h4 { margin: 0 0 .5rem; color: #fff; font-size: 1.05rem; }
.archive-sidebar .sidebar-cta p { color: rgba(255,255,255,.88); margin: 0 0 1rem; font-size: .85rem; line-height: 1.5; }
.archive-sidebar .sidebar-cta .btn {
    background: var(--secondary-color);
    color: #fff;
    display: block;
    text-align: center;
    width: 100%;
    border: 0;
    padding: .65rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    transition: filter .15s;
}
.archive-sidebar .sidebar-cta .btn:hover { filter: brightness(1.08); }

/* Sidebar varken grid/masonry kolon sayısını otomatik azalt */
.archive-with-sidebar .archive-layout-grid {
    grid-template-columns: repeat(min(2, var(--cols, 3)), 1fr);
}
.archive-with-sidebar .archive-layout-masonry {
    column-count: min(2, var(--cols, 3));
}

/* Responsive */
@media (max-width: 900px) {
    .archive-with-sidebar {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .archive-sidebar { position: static; }
}

/* Sayfalama — arşiv için tek parça */
.archive-pagination {
    display: flex; gap: .35rem; justify-content: center;
    flex-wrap: wrap; margin-top: 3rem;
}
.archive-page-link {
    min-width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .65rem;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    font-size: .9rem;
    text-decoration: none;
    transition: all .15s;
}
.archive-page-link:hover { border-color: var(--primary-color); color: var(--primary-color); }
.archive-page-link.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    font-weight: 600;
}

/* Boş durum */
.archive-empty {
    text-align: center; padding: 4rem 1rem;
    color: var(--text-light);
}
.archive-empty i { font-size: 3rem; opacity: .3; display: block; margin-bottom: 1rem; }
.archive-empty p { font-size: 1rem; margin: 0; }

/* Responsive */
@media (max-width: 900px) {
    .archive-layout-grid    { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .archive-layout-masonry { column-count: 2; column-gap: 1.25rem; }
    .archive-layout-list .al-row { grid-template-columns: 200px 1fr; gap: 1.25rem; }
    .archive-layout-list .al-title { font-size: 1.25rem; }
    .archive-layout-large .al-featured { grid-template-columns: 1fr; }
    .archive-layout-large .al-title-xl { font-size: 1.75rem; }
    .archive-layout-large .al-list { grid-template-columns: 1fr; }
    .al-compact-row { grid-template-columns: 100px 1fr auto; }
}

@media (max-width: 600px) {
    .archive-layout-grid    { grid-template-columns: 1fr; }
    .archive-layout-masonry { column-count: 1; }
    .archive-layout-list .al-row { grid-template-columns: 1fr; }
    .archive-layout-list .al-img-wrap { aspect-ratio: 16/9; }
    .archive-layout-large .al-row-compact { grid-template-columns: 90px 1fr; }
    .al-compact-row {
        grid-template-columns: 1fr;
        gap: .3rem;
        padding: .8rem 1rem;
    }
    .al-compact-cat { order: -1; }
    .al-compact-date { align-self: flex-start; }
    .archive-hero { padding: 2rem 1.25rem; }
    .archive-hero h1 { font-size: 1.75rem; }
    .archive-layout-timeline { padding-left: 1.25rem; }
    .al-timeline-dot { left: -1.9rem; }
}

/* ════════════════════════════════════════════
   BLOG POST — Jannah tarzı tasarım sistemi
   ════════════════════════════════════════════ */

/* Okuma ilerleme çubuğu — pozisyon + renk varyantları */
.reading-progress {
    position: fixed; left: 0;
    width: 0%; z-index: 1000;
    transition: width .08s linear;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.reading-progress-top    { top: 0; }
.reading-progress-bottom { bottom: 0; }
.reading-progress-color-primary   { background: var(--primary-color); }
.reading-progress-color-secondary { background: var(--secondary-color); }
.reading-progress-color-gradient  { background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); }

/* Kayan paylaşım çubuğu — pozisyon + şekil varyantları */
.floating-share {
    position: fixed; top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex; flex-direction: column; gap: .4rem;
    background: #fff; padding: .5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04);
}
.floating-share-left  { left: 20px; }
.floating-share-right { right: 20px; }
.floating-share-shape-round  { border-radius: 999px; }
.floating-share-shape-square { border-radius: 10px; }

.floating-share-btn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.05rem;
    transition: transform .15s, filter .15s;
}
.floating-share-shape-round .floating-share-btn  { border-radius: 50%; }
.floating-share-shape-square .floating-share-btn { border-radius: 6px; }

.floating-share-btn:hover { transform: scale(1.1) translateY(-1px); filter: brightness(1.1); }
.floating-share-whatsapp { background: #25D366; }
.floating-share-twitter  { background: #000; }
.floating-share-linkedin { background: #0A66C2; }
.floating-share-facebook { background: #1877F2; }
.floating-share-telegram { background: #26A5E4; }
.floating-share-copy     { background: #64748b; }
@media (max-width: 1200px) { .floating-share { display: none; } }

/* ─── Hero varyantları ─── */

/* Cover — full-width görsel, overlay başlık */
.post-hero-cover {
    position: relative; min-height: 460px;
    background-size: cover; background-position: center;
    display: flex; align-items: flex-end;
    color: #fff; margin-bottom: 2rem;
}
.post-hero-cover .post-hero-inner { padding: 3rem 1.5rem; max-width: 1200px; }
.post-hero-overlay {
    position: absolute; inset: 0;
    /* Tüm görsele ince siyah kaplama + alt kısımda kademeli koyulaşma.
       İki katmanlı: önce gradyan (üste), sonra düz base overlay (alta) */
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0)    0%,
            rgba(0,0,0,0)    35%,
            rgba(0,0,0,0.2) 60%,
            rgba(0,0,0,0.55) 85%,
            rgba(0,0,0,0.75) 100%
        ),
        rgba(0,0,0,0.32); /* Base: tüm görseli hafif karart → beyaz yazı belirgin */
}
.post-hero-overlay-strong {
    /* Fullscreen kapak: daha belirgin sinematik kaplama */
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0)    0%,
            rgba(0,0,0,0)    30%,
            rgba(0,0,0,0.3) 65%,
            rgba(0,0,0,0.9)  100%
        ),
        rgba(0,0,0,0.4);
}

/* Başlık ve metnin hafifçe gölgeyle öne çıkması (text-shadow) */
.post-hero-cover .post-hero-title,
.post-hero-cover-boxed .post-hero-title,
.post-hero-fullscreen .post-hero-title {
    text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.post-hero-cover .post-hero-excerpt,
.post-hero-cover-boxed .post-hero-excerpt,
.post-hero-fullscreen .post-hero-excerpt,
.post-hero-cover .post-meta-cover,
.post-hero-cover-boxed .post-meta-cover,
.post-hero-fullscreen .post-meta-cover {
    text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}
.post-hero-inner { position: relative; z-index: 2; }

/* Cover boxed — container içinde */
.post-hero-cover-boxed {
    position: relative;
    min-height: 380px;
    background-size: cover; background-position: center;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; align-items: flex-end;
    color: #fff; margin-bottom: 2rem;
}
.post-hero-cover-boxed .post-hero-inner { padding: 2rem 2.5rem; }

/* Above-title — görsel üstte, başlık altta ortalı */
.post-hero-above-image { width: 100%; max-height: 520px; overflow: hidden; }
.post-hero-above-image img { width: 100%; height: auto; object-fit: cover; display: block; }
.post-hero-above-head { text-align: center; padding: 2.5rem 1rem 1.5rem; max-width: 860px; margin: 0 auto; }
.post-hero-above-head .post-meta { justify-content: center; border: 0; padding: 0; margin-bottom: 1rem; }
.post-hero-title-center { font-size: 2.5rem; line-height: 1.2; letter-spacing: -.02em; margin: .5rem 0 1rem; color: var(--text-color); }
.post-hero-excerpt-center { font-size: 1.15rem; color: var(--text-light); max-width: 720px; margin: 0 auto; line-height: 1.55; }

/* Fullscreen — viewport yüksekliğinde */
.post-hero-fullscreen {
    position: relative;
    min-height: 85vh;
    background-size: cover; background-position: center;
    background-attachment: fixed;
    display: flex; align-items: flex-end;
    color: #fff; margin-bottom: 3rem;
}
.post-hero-fullscreen .post-hero-inner-bottom { padding: 4rem 1.5rem 3rem; }
.post-hero-title-xl { font-size: 3.5rem !important; line-height: 1.08 !important; letter-spacing: -.03em; }
.post-hero-scroll {
    position: absolute; bottom: 1.5rem; left: 50%;
    transform: translateX(-50%); z-index: 3;
    font-size: .75rem; letter-spacing: .12em; opacity: .7;
    animation: postScrollBounce 2s infinite ease-in-out;
}
@keyframes postScrollBounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 6px); }
}

.post-hero-title { font-size: 2.75rem; line-height: 1.12; letter-spacing: -.02em; margin: .75rem 0 1rem; color: #fff; }
.post-hero-excerpt { font-size: 1.15rem; opacity: .9; max-width: 720px; margin: 0; }

/* Kategori rozeti */
.post-category {
    display: inline-block;
    background: var(--secondary-color); color: #fff;
    padding: .3rem .8rem; border-radius: 4px;
    font-size: .72rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase;
}
.post-category-glow {
    box-shadow: 0 0 20px rgba(201,168,76,.4);
}

/* Meta */
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.post-meta-items { display: flex; flex-wrap: wrap; gap: 1.15rem; font-size: .85rem; color: var(--text-light); }
.post-meta-item { display: inline-flex; align-items: center; gap: .35rem; }
.post-meta-item i { opacity: .75; }
.post-meta-cover .post-meta-items { color: rgba(255,255,255,.9); }
.post-meta-updated { color: var(--secondary-color) !important; font-weight: 500; }

/* Grid */
.post-grid { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 3rem; }
.post-grid-single { display: block; }
.post-layout-fullwidth .post-grid-single,
.post-layout-cover .post-grid-single,
.post-layout-above-title .post-grid-single { max-width: 820px; margin: 0 auto; }
.post-layout-fullscreen .post-grid-single { max-width: 780px; margin: 0 auto; }
.post-layout-cover-boxed .post-grid-single { max-width: 820px; margin: 0 auto; }

/* Makale */
.post-article { min-width: 0; }
.post-title { font-size: 2.25rem; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 1rem; }
.post-featured { width: 100%; border-radius: var(--radius); margin: 0 0 2rem; height: auto; }
.post-featured-small {
    display: block;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    float: none;
    margin: 0 auto 1.75rem;
}

/* İçerik tipografisi (makale ayarları) */
.post-content {
    font-family: var(--article-font);
    font-size: var(--article-font-size, 18px);
    line-height: var(--article-line-height, 1.8);
    max-width: var(--article-max-width, 720px);
    margin: 0 auto;
}
@media (min-width: 769px) {
    .post-content {
        max-width: none;
        margin: 0;
    }
}
.post-content h2 {
    font-family: var(--heading-font);
    font-weight: var(--heading-weight);
    font-size: var(--article-h2-size, 1.75rem);
    line-height: 1.25; margin: 1rem 0;
    color: var(--text-color); scroll-margin-top: 100px;
}
.post-content h3 {
    font-family: var(--heading-font);
    font-weight: var(--heading-weight);
    font-size: var(--article-h3-size, 1.375rem);
    line-height: 1.3; margin: 1.75rem 0 .75rem; scroll-margin-top: 100px;
}
.post-content h4 {
    font-family: var(--heading-font);
    font-weight: var(--heading-weight);
    font-size: var(--article-h4-size, 1.15rem);
    margin: 1.5rem 0 .5rem;
}
.post-content p { margin: 0 0 var(--article-paragraph-spacing, 1.25rem); }
.post-content ul, .post-content ol { margin: 0 0 var(--article-paragraph-spacing, 1.25rem); padding-left: 1.5rem; }
.post-content li { margin-bottom: .35rem; }
.post-content blockquote {
    border-left: 4px solid var(--secondary-color);
    padding: .5rem 0 .5rem 1.5rem;
    margin: 1.75rem 0; color: var(--text-light);
    font-style: italic; font-size: 1.1em;
}
.post-content img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.5rem 0; display: block; }
.post-content a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover { color: var(--secondary-color); }

/* ─── Tablolar — makale içi ─── */
.post-content table,
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-size: .95em;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.post-content thead,
.article-content thead {
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border-bottom: 2px solid var(--border-color);
}
.post-content th,
.article-content th {
    font-weight: 600;
    text-align: left;
    padding: .85rem 1rem;
    color: var(--text-color);
    font-size: .9em;
    letter-spacing: -.005em;
    white-space: nowrap;
}
.post-content td,
.article-content td {
    padding: .75rem 1rem;
    border-top: 1px solid var(--border-color);
    vertical-align: top;
    line-height: 1.55;
}
.post-content tbody tr:nth-child(even),
.article-content tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--primary-color) 3%, #fff);
}
.post-content tbody tr:hover,
.article-content tbody tr:hover {
    background: color-mix(in srgb, var(--secondary-color) 8%, #fff);
}
.post-content caption,
.article-content caption {
    caption-side: top;
    padding: .5rem 0 .75rem;
    font-size: .85em;
    color: var(--text-light);
    text-align: left;
    font-style: italic;
}

/* Mobilde yatay kaydırma sarmalayıcısı */
@media (max-width: 768px) {
    .post-content table,
    .article-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        margin: 1.25rem -1rem;
        width: calc(100% + 2rem);
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        position: relative;
    }
    .post-content table thead,
    .article-content table thead,
    .post-content table tbody,
    .article-content table tbody {
        display: table;
        width: max-content;
        min-width: 100%;
    }
    .post-content th,
    .article-content th,
    .post-content td,
    .article-content td {
        padding: .6rem .85rem;
        font-size: .85em;
    }
}

/* İçindekiler (TOC) */
.post-toc {
    background: linear-gradient(180deg, #f8fafc, #fff);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--secondary-color);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 0 0 2rem;
}
.post-toc-head {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 600; font-size: .95rem; color: var(--primary-color);
    margin-bottom: .75rem;
}
.post-toc-head i:first-child { color: var(--secondary-color); }
.post-toc-toggle {
    margin-left: auto; background: transparent; border: 0;
    color: var(--text-light); cursor: pointer; padding: 2px 6px;
    border-radius: 4px; transition: background .15s;
}
.post-toc-toggle:hover { background: rgba(0,0,0,.06); }
.post-toc-list { padding-left: 1.5rem; margin: 0; }
.post-toc-list li { margin-bottom: .35rem; }
.post-toc-list a { color: var(--text-color); text-decoration: none; font-size: .92rem; line-height: 1.45; }
.post-toc-list a:hover { color: var(--primary-color); text-decoration: underline; }
.post-toc-h3 { margin-left: 1rem; }
.post-toc-h3 a { font-size: .85rem; color: var(--text-light); }
.post-toc.collapsed .post-toc-list { display: none; }
.post-toc.collapsed .post-toc-toggle i { transform: rotate(180deg); }
.post-toc-toggle i { transition: transform .2s; display: inline-block; }

/* TOC liste stilleri */
.post-toc-style-numbered .post-toc-list { list-style: decimal; }
.post-toc-style-numbered .post-toc-list .post-toc-h3 { list-style: lower-alpha; }
.post-toc-style-bullet .post-toc-list { list-style: disc; }
.post-toc-style-bullet .post-toc-list .post-toc-h3 { list-style: circle; }
.post-toc-style-plain .post-toc-list { list-style: none; padding-left: 0; }
.post-toc-style-plain .post-toc-list .post-toc-h3 { padding-left: 1rem; }
.post-toc-style-plain .post-toc-list li { padding: .3rem 0; border-bottom: 1px dashed #f1f5f9; }

/* ─── TOC Sidebar Modu ───
   Sidebar pozisyonunda yer aldığında sticky + scrollspy destekli,
   sidebar ile uyumlu tipografiye sahip özel tasarım. */
.post-toc-sidebar {
    /* Sticky burada DEĞİL — .post-sidebar zaten sticky; çift sticky overlay yapıyordu */
    background: #fff !important;
    border: 1px solid var(--border-color) !important;
    border-left: 4px solid var(--secondary-color) !important;
    border-radius: 10px;
    padding: 1.1rem 1.25rem !important;
    margin: 0 0 1.5rem !important;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.post-toc-sidebar::-webkit-scrollbar { width: 4px; }
.post-toc-sidebar::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }
.post-toc-sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* Başlık — uppercase, minimalize */
.post-toc-sidebar .post-toc-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-light);
    margin: 0 0 .85rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--secondary-color);
}
.post-toc-sidebar .post-toc-head i:first-child {
    font-size: .85rem;
    color: var(--secondary-color);
}
.post-toc-sidebar .post-toc-toggle {
    margin-left: auto;
    padding: 2px 6px;
    color: var(--text-light);
    font-size: .75rem;
}

/* Liste — sol çizgili minimal görünüm */
.post-toc-sidebar .post-toc-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    counter-reset: tocSidebar;
    border-left: 2px solid color-mix(in srgb, var(--border-color) 100%, transparent);
    padding-left: 0 !important;
}
.post-toc-sidebar .post-toc-list li {
    counter-increment: tocSidebar;
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none !important;
}

/* Bağlantı — bloksel, hover + active animasyonlu */
.post-toc-sidebar .post-toc-list a {
    display: block;
    padding: .48rem .75rem .48rem 1.9rem;
    margin-left: -2px;
    font-size: .85rem;
    line-height: 1.4;
    color: var(--text-color);
    text-decoration: none !important;
    border-left: 2px solid transparent;
    transition: color .15s, background .15s, border-color .15s, padding-left .15s;
    position: relative;
}
.post-toc-sidebar .post-toc-list a:hover {
    color: var(--primary-color);
    background: var(--bg-light);
    border-left-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
}

/* Scrollspy aktif link — en belirgin görünüm */
.post-toc-sidebar .post-toc-list a.active {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
    border-left-color: var(--secondary-color);
    font-weight: 600;
}
.post-toc-sidebar .post-toc-list a.active::after {
    content: '';
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 4px;
    background: var(--secondary-color);
    border-radius: 50%;
}

/* Numaralı stil — özel sayaç */
.post-toc-sidebar.post-toc-style-numbered .post-toc-list a::before {
    content: counter(tocSidebar, decimal-leading-zero);
    position: absolute;
    left: .6rem;
    top: .5rem;
    font-size: .7rem;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    transition: color .15s;
}
.post-toc-sidebar.post-toc-style-numbered .post-toc-list a:hover::before,
.post-toc-sidebar.post-toc-style-numbered .post-toc-list a.active::before {
    color: var(--secondary-color);
    font-weight: 700;
}

/* Madde stili — nokta */
.post-toc-sidebar.post-toc-style-bullet .post-toc-list a::before {
    content: '•';
    position: absolute;
    left: .85rem;
    top: .45rem;
    color: var(--text-light);
    font-size: 1rem;
    transition: color .15s, transform .15s;
}
.post-toc-sidebar.post-toc-style-bullet .post-toc-list a:hover::before,
.post-toc-sidebar.post-toc-style-bullet .post-toc-list a.active::before {
    color: var(--secondary-color);
    transform: scale(1.4);
}

/* Sade stil — sadece sol çizgi */
.post-toc-sidebar.post-toc-style-plain .post-toc-list a {
    padding-left: 1rem;
}
.post-toc-sidebar.post-toc-style-plain .post-toc-list li {
    border: 0;
}

/* H3 başlıkları — alt düzeyde, küçük */
.post-toc-sidebar .post-toc-h3 a {
    padding-left: 2.6rem !important;
    font-size: .78rem;
    color: var(--text-light);
    line-height: 1.35;
}
.post-toc-sidebar .post-toc-h3 a:hover,
.post-toc-sidebar .post-toc-h3 a.active {
    color: var(--primary-color);
}
.post-toc-sidebar.post-toc-style-numbered .post-toc-h3 a::before {
    content: counter(tocSidebar, lower-alpha);
    left: 1.3rem;
    font-size: .65rem;
}
.post-toc-sidebar.post-toc-style-bullet .post-toc-h3 a::before {
    left: 1.55rem;
    font-size: .75rem;
}

/* Collapse durumu */
.post-toc-sidebar.collapsed .post-toc-list {
    display: none;
}
.post-toc-sidebar.collapsed .post-toc-head {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.post-toc-sidebar.collapsed .post-toc-toggle i {
    transform: rotate(180deg);
}

/* Mobilde sidebar TOC = normal TOC olsun (sticky kaldırılır) */
@media (max-width: 900px) {
    .post-toc-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* Etiketler */
.post-tags { margin: 2rem 0 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.post-tags-label { font-size: .85rem; color: var(--text-light); font-weight: 500; margin-right: .25rem; }
.post-tag {
    display: inline-block; background: var(--bg-light); color: var(--text-color);
    padding: .35rem .75rem; border-radius: 4px; font-size: .78rem;
    transition: background .15s, color .15s;
}
.post-tag:hover { background: var(--primary-color); color: #fff; }

/* Alt paylaşım */
.post-share {
    margin: 2.5rem 0; padding: 1.5rem;
    background: var(--bg-light); border-radius: var(--radius);
    display: flex; flex-direction: column; gap: .75rem;
}
.post-share-label { font-size: .9rem; font-weight: 600; color: var(--text-color); }
.post-share-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.post-share-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1rem; border-radius: 6px;
    color: #fff; font-size: .85rem; font-weight: 500;
    transition: transform .15s, filter .15s;
}
.post-share-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.post-share-whatsapp { background: #25D366; }
.post-share-twitter  { background: #000; }
.post-share-linkedin { background: #0A66C2; }
.post-share-facebook { background: #1877F2; }
.post-share-telegram { background: #26A5E4; }
.post-share-copy     { background: #64748b; }

/* Yazar Kutusu — varyant stilleri */
.author-box {
    margin: 2.5rem 0;
    padding: 1.75rem;
    display: flex; gap: 1.5rem; align-items: flex-start;
    border-radius: var(--radius);
}
.author-box-avatar {
    flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff; font-size: 2rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.author-box-body { flex: 1; min-width: 0; }
.author-box-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--secondary-color); text-transform: uppercase; }
.author-box-name { font-size: 1.2rem; font-weight: 600; margin: .25rem 0 .5rem; color: var(--text-color); }
.author-box-bio { margin: 0; color: var(--text-light); line-height: 1.6; font-size: .95rem; }
.author-box-social { display: flex; gap: .6rem; margin-top: .75rem; }
.author-box-social a {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg-light); color: var(--text-color);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.author-box-social a:hover { background: var(--primary-color); color: #fff; }

/* 1. Kart stili */
.author-box-card {
    background: linear-gradient(135deg, #f8fafc, #fff);
    border: 1px solid var(--border-color);
}

/* 2. Minimal */
.author-box-minimal {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 1.25rem 0;
    border-radius: 0;
}
.author-box-minimal .author-box-avatar { width: 60px; height: 60px; font-size: 1.5rem; }

/* 3. Banner */
.author-box-banner {
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 70%, #000));
    color: #fff;
    border: 0;
}
.author-box-banner .author-box-label { color: var(--secondary-color); }
.author-box-banner .author-box-name { color: #fff; }
.author-box-banner .author-box-bio { color: rgba(255,255,255,.85); }
.author-box-banner .author-box-avatar { background: #fff; color: var(--primary-color); }
.author-box-banner .author-box-social a { background: rgba(255,255,255,.15); color: #fff; }
.author-box-banner .author-box-social a:hover { background: var(--secondary-color); }

/* Eski sınıf geriye dönük (varsa) — .post-author-box ile .author-box eşdeğer */
.post-author-box { margin: 2.5rem 0; background: linear-gradient(135deg, #f8fafc, #fff); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 1.75rem; display: flex; gap: 1.5rem; align-items: flex-start; }
.post-author-avatar { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: #fff; font-size: 2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.post-author-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--secondary-color); text-transform: uppercase; }
.post-author-name { font-size: 1.2rem; font-weight: 600; margin: .25rem 0 .5rem; color: var(--text-color); }
.post-author-bio { margin: 0; color: var(--text-light); line-height: 1.6; font-size: .95rem; }

/* Yazı Navigasyonu */
.post-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    margin: 2.5rem 0;
}
.post-nav-link {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem; border: 1px solid var(--border-color);
    border-radius: var(--radius);
    text-decoration: none; color: var(--text-color);
    transition: border-color .15s, transform .15s, box-shadow .15s;
    min-width: 0;
}
.post-nav-link:hover { border-color: var(--primary-color); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.post-nav-link img { width: 70px; height: 70px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.post-nav-prev { text-align: left; }
.post-nav-next { text-align: right; flex-direction: row-reverse; }
.post-nav-label { font-size: .72rem; color: var(--text-light); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.post-nav-title { display: block; margin-top: .25rem; font-size: .95rem; line-height: 1.35; color: var(--text-color); }

/* Post-nav stil varyantları */
.post-nav-style-simple .post-nav-link img { display: none; }
.post-nav-style-simple .post-nav-link { padding: .75rem 1rem; }
.post-nav-style-card .post-nav-link {
    background: linear-gradient(135deg, #f8fafc, #fff);
    padding: 1.25rem 1.5rem;
}
.post-nav-label-arrow { font-size: 1rem !important; letter-spacing: 0 !important; }

/* Sidebar */
.post-sidebar {
    display: flex; flex-direction: column; gap: 1.5rem;
    position: sticky;
    /* Sticky header altında kalmasın — header yüksekliği + 1rem nefes payı */
    top: calc(var(--dh-height-scrolled, var(--dh-height, 72px)) + 1rem);
    align-self: flex-start;
    max-height: calc(100vh - var(--dh-height-scrolled, var(--dh-height, 72px)) - 2rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.post-sidebar::-webkit-scrollbar { width: 4px; }
.post-sidebar::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }
.sidebar-widget h3, .sidebar-widget h4 { margin: 0 0 1rem; font-size: 1.1rem; }
.sidebar-widget .sidebar-post {
    display: flex; gap: .75rem; padding: .75rem 0;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none; color: var(--text-color);
}
.sidebar-widget .sidebar-post:last-child { border-bottom: 0; }
.sidebar-widget .sidebar-post img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.sidebar-widget .sidebar-post strong { display: block; font-size: .88rem; line-height: 1.35; }
.sidebar-widget .sidebar-post small { color: var(--text-light); font-size: .75rem; display: block; margin-top: .25rem; }
.sidebar-cta { padding: 1.5rem; background: var(--bg-light); border-radius: var(--radius); }
.sidebar-cta p { font-size: .9rem; margin: .5rem 0 .75rem; }
.sidebar-cta .btn { width: 100%; text-align: center; display: block; }

/* İlgili Yazılar */
.post-related { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--border-color); }
.post-related-title { font-size: 1.6rem; margin-bottom: 1.5rem; text-align: center; }
.post-related-title::after {
    content: ''; display: block;
    width: 40px; height: 3px; background: var(--secondary-color);
    margin: .5rem auto 0; border-radius: 2px;
}
.post-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.post-related-card {
    background: #fff; border: 1px solid var(--border-color);
    border-radius: var(--radius); overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .15s, box-shadow .15s;
    text-decoration: none; color: var(--text-color);
}
.post-related-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.post-related-card img { width: 100%; height: 180px; object-fit: cover; margin: 0; border-radius: 0; }
.post-related-body { padding: 1rem 1.2rem 1.2rem; }
.post-related-cat { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--secondary-color); margin-bottom: .4rem; }
.post-related-body h3,
.post-related-body h4,
.post-related-card-title { margin: 0 0 .5rem; font-size: 1.02rem; line-height: 1.35; font-weight: 600; }
.post-related-body small { color: var(--text-light); font-size: .78rem; }

/* TOC görünürlük kontrolü:
   - desktop-only sınıfı: sadece >=901px görünür
   - mobile-only sınıfı: sadece <=900px görünür */
@media (min-width: 901px) {
    .post-toc-mobile-only { display: none !important; }
}
@media (max-width: 900px) {
    .post-toc-desktop-only { display: none !important; }
    /* Mobilde sidebar'ı tamamen gizle (TOC inline kopyaya devredilir) */
    .post-grid > .post-sidebar { display: none !important; }
}

/* Responsive */
@media (max-width: 900px) {
    .post-grid { grid-template-columns: 1fr; gap: 2rem; }
    .post-hero-title { font-size: 2rem; }
    .post-hero-title-xl { font-size: 2.3rem !important; }
    .post-hero-title-center { font-size: 1.9rem; }
    .post-hero-cover { min-height: 320px; }
    .post-hero-cover .post-hero-inner { padding: 2rem 1rem; }
    .post-hero-fullscreen { min-height: 70vh; background-attachment: scroll; }
    .post-author-box { flex-direction: column; text-align: center; padding: 1.25rem; }
    .post-author-avatar { margin: 0 auto; }
    .post-nav { grid-template-columns: 1fr; }
    .post-nav-next { flex-direction: row; text-align: left; }
    .post-featured-small { max-width: 100%; aspect-ratio: 16 / 9; margin: 0 0 1.5rem; }
    .post-hero-above-head { padding: 1.5rem 1rem 1rem; }
}

/* Sidebar */
.article-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 1rem; align-self: flex-start; }
.sidebar-widget h3, .sidebar-widget h4 { margin: 0 0 .75rem; font-size: 1.05rem; }
.sidebar-post { display: block; padding: .65rem 0; border-bottom: 1px solid var(--border-color); }
.sidebar-post strong { font-size: .9rem; display: block; color: var(--text-color); line-height: 1.35; }
.sidebar-post small { color: var(--text-light); font-size: .75rem; }
.sidebar-cta { padding: 1.25rem; background: var(--bg-light); border-radius: var(--radius); }
.sidebar-cta .btn { width: 100%; text-align: center; display: block; margin-top: .75rem; }

/* Sosyal paylaşım */
.article-share { display: flex; align-items: center; gap: .5rem; margin: 2rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
.article-share-label { font-size: .85rem; color: var(--text-light); font-weight: 500; margin-right: .25rem; }
.article-share-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-light); color: var(--text-color);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, transform .15s;
}
.article-share-btn:hover { background: var(--primary-color); color: #fff; transform: translateY(-2px); }

/* İlgili yazılar */
.article-related { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border-color); }
.article-related-title { font-size: 1.35rem; margin-bottom: 1.25rem; }
.article-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.article-related-card {
    background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform .15s, box-shadow .15s;
}
.article-related-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.article-related-card img { width: 100%; height: 140px; object-fit: cover; margin: 0; border-radius: 0; }
.article-related-body { padding: .85rem 1rem 1rem; }
.article-related-body h4 { margin: 0 0 .35rem; font-size: .95rem; line-height: 1.35; color: var(--text-color); }
.article-related-body small { color: var(--text-light); font-size: .75rem; }

/* ═══ TASARIM VARYANTLARI ═══ */

/* 2 — Magazine: tam genişlik hero */
.article-magazine-hero {
    position: relative; min-height: 380px;
    background-size: cover; background-position: center;
    border-radius: var(--radius);
    margin-bottom: 2.5rem;
    display: flex; align-items: flex-end;
}
.article-magazine-hero::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.75));
    border-radius: var(--radius);
}
.article-magazine-hero-inner {
    position: relative; z-index: 2; padding: 2rem 2.5rem; color: #fff; max-width: 900px;
}
.article-magazine-hero-inner h1 { color: #fff; font-size: 2.5rem; line-height: 1.15; margin: .5rem 0 .75rem; }
.article-magazine-cat {
    display: inline-block; background: var(--secondary-color); color: #fff;
    padding: .3rem .8rem; border-radius: 4px; font-size: .75rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
}
.article-magazine-meta { display: flex; gap: 1.25rem; font-size: .85rem; opacity: .9; }
.article-magazine-meta span::before { content: '•'; margin-right: .75rem; opacity: .6; }
.article-magazine-meta span:first-child::before { display: none; }

/* 3 — Minimal: merkez dar, meta üstte */
.article-minimal { max-width: 680px; padding: 2rem 0; text-align: left; }
.article-minimal .article-meta { justify-content: center; border: 0; padding: 0; margin: 0 0 .5rem; font-size: .8rem; }
.article-minimal h1 { text-align: center; font-size: 2.25rem; line-height: 1.25; margin: .5rem 0 2rem; }

/* 4 — Longform: büyük başlık + kapak görseli */
.article-longform-head { max-width: 860px; margin: 0 auto 1.5rem; text-align: center; padding: 1rem 0; }
.article-longform-head h1 { font-size: 2.8rem; line-height: 1.15; margin: .75rem 0 1rem; }
.article-longform-head .article-meta { justify-content: center; border: 0; padding: 0; }
.article-longform-cover { width: 100%; max-height: 480px; object-fit: cover; border-radius: var(--radius); margin: 0 auto 2.5rem; display: block; }
.article-longform-body { max-width: 780px; margin: 0 auto; font-size: 1.05rem; }

/* 5 — Split: sol sticky meta, sağ içerik */
.article-split { display: grid; grid-template-columns: 280px 1fr; gap: 3rem; align-items: start; }
.article-split-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.article-split-side img { width: 100%; border-radius: var(--radius); margin: 0; }
.article-split-meta { display: flex; flex-direction: column; gap: .5rem; font-size: .9rem; color: var(--text-light); }
.article-split-meta div { display: inline-flex; align-items: center; gap: .5rem; }
.article-split-body { max-width: none; margin: 0; }
.article-split-body h1 { font-size: 2.35rem; line-height: 1.2; margin: 0 0 1.5rem; }

/* 6 — Card: içerik beyaz kart içinde */
.article-card-wrap {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.04);
    max-width: none;
}
.article-card-cover { width: 100%; height: 360px; object-fit: cover; margin: 0; border-radius: 0; display: block; }
.article-card-body { padding: 2.5rem 2.75rem; }
.article-card-body h1 { margin: 0 0 1rem; }

/* Responsive */
@media (max-width: 900px) {
    .article-page.has-sidebar .article-grid { grid-template-columns: 1fr; }
    .article-split { grid-template-columns: 1fr; gap: 1.5rem; }
    .article-split-side { position: static; }
    .article-magazine-hero { min-height: 260px; }
    .article-magazine-hero-inner { padding: 1.5rem; }
    .article-magazine-hero-inner h1 { font-size: 1.75rem; }
    .article-longform-head h1 { font-size: 2rem; }
    .article-card-body { padding: 1.5rem; }
    .article-card-cover { height: 220px; }
}

/* ============================================
   Breadcrumb
   ============================================ */
.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 0 .65rem;
    margin: 0 0 .85rem;
    font-size: 0.78rem;
    color: var(--text-light);
}

.breadcrumb-item + .breadcrumb-item::before { content: '/'; margin-right: 0.5rem; }
.breadcrumb-item a { color: var(--text-light); }
.breadcrumb-item a:hover { color: var(--primary-color); }
.breadcrumb-item.active { color: var(--text-color); }

/* ============================================
   Form
   ============================================ */
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-weight: 500; margin-bottom: 0.375rem; font-size: 0.9rem; }
.form-input {
    width: 100%;
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s;
}
.form-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent); }
textarea.form-input { min-height: 120px; resize: vertical; }

.btn {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.btn:hover { background: color-mix(in srgb, var(--primary-color) 85%, #000); color: #fff; }

/* ─── 10 Buton Stili (theme_button_style) ───
   Sitedeki TÜM buton sınıflarına uygulanır.
   Her buton tipi için aynı uzun :is() listesi tekrar edilir; !important ile section CSS override edilir. */

/* Birincil buton selector listesi (filled / primary tarz) */
body[data-btn-style="rounded"]   :is(.btn, .btn-primary, .btn-secondary, .cta-primary, .cta-outline, .cta-c-btn, .cta-fw-btn, .cta-g-btn, .cta-s-btn, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]),
body[data-btn-style="square"]    :is(.btn, .btn-primary, .btn-secondary, .cta-primary, .cta-outline, .cta-c-btn, .cta-fw-btn, .cta-g-btn, .cta-s-btn, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]),
body[data-btn-style="outline"]   :is(.btn, .btn-primary, .btn-secondary, .cta-primary, .cta-outline, .cta-c-btn, .cta-fw-btn, .cta-g-btn, .cta-s-btn, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]),
body[data-btn-style="gradient"]  :is(.btn, .btn-primary, .btn-secondary, .cta-primary, .cta-outline, .cta-c-btn, .cta-fw-btn, .cta-g-btn, .cta-s-btn, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]),
body[data-btn-style="shadow"]    :is(.btn, .btn-primary, .btn-secondary, .cta-primary, .cta-outline, .cta-c-btn, .cta-fw-btn, .cta-g-btn, .cta-s-btn, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]),
body[data-btn-style="underline"] :is(.btn, .btn-primary, .btn-secondary, .cta-primary, .cta-outline, .cta-c-btn, .cta-fw-btn, .cta-g-btn, .cta-s-btn, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]),
body[data-btn-style="ghost"]     :is(.btn, .btn-primary, .btn-secondary, .cta-primary, .cta-outline, .cta-c-btn, .cta-fw-btn, .cta-g-btn, .cta-s-btn, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]),
body[data-btn-style="emboss"]    :is(.btn, .btn-primary, .btn-secondary, .cta-primary, .cta-outline, .cta-c-btn, .cta-fw-btn, .cta-g-btn, .cta-s-btn, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]),
body[data-btn-style="arrow"]     :is(.btn, .btn-primary, .btn-secondary, .cta-primary, .cta-outline, .cta-c-btn, .cta-fw-btn, .cta-g-btn, .cta-s-btn, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]) {
    transition: all .2s !important;
}

/* 1. classic — default (override yok, mevcut tasarım korunur) */

/* 2. rounded — pill */
body[data-btn-style="rounded"] :is(.btn, .btn-primary, .btn-secondary, .cta-primary, .cta-outline, .cta-c-btn, .cta-fw-btn, .cta-g-btn, .cta-s-btn, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]) {
    border-radius: 999px !important;
}

/* 3. square — keskin köşe */
body[data-btn-style="square"] :is(.btn, .btn-primary, .btn-secondary, .cta-primary, .cta-outline, .cta-c-btn, .cta-fw-btn, .cta-g-btn, .cta-s-btn, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]) {
    border-radius: 0 !important;
    letter-spacing: .04em !important;
}

/* 4. outline — sadece çerçeve */
body[data-btn-style="outline"] :is(.btn, .btn-primary, .cta-primary, .cta-c-btn.primary, .cta-fw-btn.primary, .cta-g-btn.primary, .cta-s-btn.primary, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]) {
    background: transparent !important;
    color: var(--primary-color) !important;
    border: 1.5px solid var(--primary-color) !important;
    box-shadow: none !important;
}
body[data-btn-style="outline"] :is(.btn, .btn-primary, .cta-primary, .cta-c-btn.primary, .cta-fw-btn.primary, .cta-g-btn.primary, .cta-s-btn.primary, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]):hover {
    background: var(--primary-color) !important;
    color: #fff !important;
}
body[data-btn-style="outline"] :is(.cta-outline, .btn-secondary) {
    background: transparent !important;
    color: var(--primary-color) !important;
    border: 1.5px solid var(--primary-color) !important;
}

/* 5. gradient — primary→secondary degrade */
body[data-btn-style="gradient"] :is(.btn, .btn-primary, .cta-primary, .cta-c-btn.primary, .cta-fw-btn.primary, .cta-g-btn.primary, .cta-s-btn.primary, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]) {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--primary-color) 45%, transparent) !important;
}
body[data-btn-style="gradient"] :is(.btn, .btn-primary, .cta-primary, .cta-c-btn.primary, .cta-fw-btn.primary, .cta-g-btn.primary, .cta-s-btn.primary, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--primary-color) 55%, transparent) !important;
}

/* 6. shadow — yüksek gölge */
body[data-btn-style="shadow"] :is(.btn, .btn-primary, .cta-primary, .cta-c-btn.primary, .cta-fw-btn.primary, .cta-g-btn.primary, .cta-s-btn.primary, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]) {
    border-radius: 8px !important;
    box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--primary-color) 45%, transparent),
                0 2px 6px rgba(0,0,0,.08) !important;
}
body[data-btn-style="shadow"] :is(.btn, .btn-primary, .cta-primary, .cta-c-btn.primary, .cta-fw-btn.primary, .cta-g-btn.primary, .cta-s-btn.primary, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]):hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -8px color-mix(in srgb, var(--primary-color) 55%, transparent),
                0 3px 10px rgba(0,0,0,.12) !important;
}

/* 7. underline — minimal metin + alt çizgi */
body[data-btn-style="underline"] :is(.btn, .btn-primary, .btn-secondary, .cta-primary, .cta-outline, .cta-c-btn, .cta-fw-btn, .cta-g-btn, .cta-s-btn, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]) {
    background: transparent !important;
    color: var(--primary-color) !important;
    padding: .25rem 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 2px solid var(--primary-color) !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    font-size: .85rem !important;
    box-shadow: none !important;
}
body[data-btn-style="underline"] :is(.btn, .btn-primary, .btn-secondary, .cta-primary, .cta-outline, .cta-c-btn, .cta-fw-btn, .cta-g-btn, .cta-s-btn, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]):hover {
    color: var(--secondary-color) !important;
    border-bottom-color: var(--secondary-color) !important;
}

/* 8. ghost — translucent zemin */
body[data-btn-style="ghost"] :is(.btn, .btn-primary, .cta-primary, .cta-c-btn.primary, .cta-fw-btn.primary, .cta-g-btn.primary, .cta-s-btn.primary, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]) {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent) !important;
    color: var(--primary-color) !important;
    border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
    box-shadow: none !important;
}
body[data-btn-style="ghost"] :is(.btn, .btn-primary, .cta-primary, .cta-c-btn.primary, .cta-fw-btn.primary, .cta-g-btn.primary, .cta-s-btn.primary, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]):hover {
    background: color-mix(in srgb, var(--primary-color) 22%, transparent) !important;
    color: var(--primary-color) !important;
}

/* 9. emboss — 3D press */
body[data-btn-style="emboss"] :is(.btn, .btn-primary, .cta-primary, .cta-c-btn.primary, .cta-fw-btn.primary, .cta-g-btn.primary, .cta-s-btn.primary, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]) {
    border-radius: 8px !important;
    border: 1px solid color-mix(in srgb, var(--primary-color) 70%, #000) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
                0 3px 0 color-mix(in srgb, var(--primary-color) 60%, #000),
                0 4px 8px rgba(0,0,0,.15) !important;
}
body[data-btn-style="emboss"] :is(.btn, .btn-primary, .cta-primary, .cta-c-btn.primary, .cta-fw-btn.primary, .cta-g-btn.primary, .cta-s-btn.primary, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]):hover {
    transform: translateY(1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
                0 1px 0 color-mix(in srgb, var(--primary-color) 60%, #000),
                0 2px 4px rgba(0,0,0,.15) !important;
}

/* 10. arrow — sağa kayan ok */
body[data-btn-style="arrow"] :is(.btn, .btn-primary, .cta-primary, .cta-c-btn.primary, .cta-fw-btn.primary, .cta-g-btn.primary, .cta-s-btn.primary, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]) {
    border-radius: 4px !important;
    padding-right: 2.4rem !important;
    position: relative !important;
}
body[data-btn-style="arrow"] :is(.btn, .btn-primary, .cta-primary, .cta-c-btn.primary, .cta-fw-btn.primary, .cta-g-btn.primary, .cta-s-btn.primary, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit])::after {
    content: '\2192';
    position: absolute;
    right: 1.2rem; top: 50%;
    transform: translateY(-50%);
    transition: transform .25s;
    font-weight: 400;
}
body[data-btn-style="arrow"] :is(.btn, .btn-primary, .cta-primary, .cta-c-btn.primary, .cta-fw-btn.primary, .cta-g-btn.primary, .cta-s-btn.primary, .cta-f-btn, .hero-minimal-cta, .dh-cta, .svc-idx-foot a, .abt-it-cta, .abt-ti-cta, .abt-tl-cta, .abt-ts-cta, .blg-grid3-cta, .blg-grid4-cta, .blg-list-cta, .cn-mi-cta, .faq-side-cta, .nl-c-btn, .nl-i-btn, .svc-grid3-cta, .svc-grid4-cta, .svc-list-cta, .svc-tabs-feat-cta, button[type=submit], input[type=submit]):hover::after {
    transform: translateY(-50%) translateX(4px);
}

.alert { padding: 1rem; border-radius: var(--radius); margin-bottom: 1.5rem; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ============================================
   Pagination
   ============================================ */
.pagination { display: flex; justify-content: center; gap: 0.25rem; margin-top: 2rem; }
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid var(--border-color); border-radius: var(--radius);
    font-size: 0.9rem; color: var(--text-color); transition: 0.2s;
}
.pagination a:hover { background: var(--bg-light); }
.pagination .current { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* ============================================
   Contact Info
   ============================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.contact-info-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.contact-info-icon { width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--primary-color) 10%, transparent); color: var(--primary-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.25rem; }
.map-embed { margin-top: 2rem; border-radius: var(--radius); overflow: hidden; }
.map-embed iframe { width: 100%; height: 350px; border: 0; }

/* ============================================
   Footer
   ============================================ */
.site-footer {
    background: var(--primary-color);
    color: rgba(255,255,255,0.8);
    padding: 3rem 0 0;
    margin-top: 4rem;
}

.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; }
.footer-col h3 { color: #fff; font-size: 1.1rem; margin-bottom: 1rem; }
.footer-col p { font-size: 0.9rem; margin-bottom: 0.5rem; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.375rem; }
.footer-col ul a { color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.footer-col ul a:hover { color: var(--secondary-color); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding: 1.25rem 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
.footer-social { display: flex; gap: 1rem; }
.footer-social a { color: rgba(255,255,255,0.6); }
.footer-social a:hover { color: var(--secondary-color); }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .nav-toggle { display: block; }
    .nav-menu { display: none; position: absolute; top: 70px; left: 0; right: 0; background: var(--bg-color); flex-direction: column; padding: 1rem; border-bottom: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .nav-menu.open { display: flex; }
    .nav-menu a { padding: 0.75rem 1rem; }

    /* Ortalı: mobilde basit üst üste yerleşim */
    .nav-inner-centered { padding: .5rem 0; }
    .nav-inner-centered .nav-toggle { position: absolute; right: 1rem; top: 1rem; }

    /* Bölünmüş: mobilde tek satır */
    .nav-inner-split .nav-top-right .nav-contact { display: none; }
    .nav-inner-split .nav-top-right .nav-cta { display: none; }

    /* Zarif: mobilde klasik yapıya dön */
    .nav-inner-zarif { grid-template-columns: 1fr auto; min-height: 70px; }
    .nav-inner-zarif .nav-menu-zarif-left { display: none; }
    .nav-inner-zarif .nav-zarif-right { display: none; }
    .nav-inner-zarif .site-logo-center { justify-self: flex-start; }

    /* hero-split kuralları aşağıdaki 991.98px bloğuna taşındı */
    .hero-stats-bar { flex-direction: column; gap: 0.75rem; }
    .hero-stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.75rem; }
    .hero-stat-item:last-child { border-bottom: none; }

    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }

    .section { padding: 2.5rem 0; }
}

@media (max-width: 480px) {
    .article-content h1 { font-size: 1.75rem; }
}

/* Hero (front.css legacy) — split varyantı için tablet+mobil collapse.
   Proje breakpoint konvansiyonu: 991.98px. */
@media (max-width: 991.98px) {
    .hero-split-grid { grid-template-columns: 1fr; min-height: auto; gap: 0; }
    .hero-split-content { padding: 2.5rem 1rem; }
    .hero-split-image { min-height: 240px; max-height: 360px; }
    .hero-split-image img { aspect-ratio: 16/9; }
}

/* ════════════════════════════════════════════════
   BLOG — MOBİL RESPONSIVE (<=768px ve <=480px)
   ════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Container padding */
    .container { padding-left: 1rem; padding-right: 1rem; }

    /* Section başlıkları */
    .section-title { font-size: 1.75rem; line-height: 1.2; }
    .section-subtitle { font-size: 1rem; }

    /* ─── Blog Listesi ─── */
    .blog-card .card-title { font-size: 1.05rem; line-height: 1.35; }
    .blog-card .card-img { height: 180px; }
    .blog-card .card-body { padding: 1.1rem; }
    .blog-card .card-text { font-size: .9rem; }
    .blog-card .card-meta { font-size: .75rem; flex-wrap: wrap; gap: .35rem .6rem; }

    /* Kategori pill'leri */
    .blog-category {
        font-size: .7rem; padding: .25rem .55rem;
        white-space: nowrap;
    }

    /* Pagination — daha kompakt */
    .pagination {
        gap: .35rem; flex-wrap: wrap; justify-content: center;
        padding: 1rem 0;
    }
    .pagination a,
    .pagination .current {
        min-width: 34px; height: 34px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: .85rem;
    }

    /* ─── Blog Single — Başlık & Meta ─── */
    .post-title { font-size: 1.6rem; line-height: 1.25; letter-spacing: -.01em; }
    .post-hero-title { font-size: 1.6rem !important; line-height: 1.2 !important; }
    .post-hero-title-center { font-size: 1.55rem; }
    .post-hero-title-xl { font-size: 1.9rem !important; line-height: 1.15 !important; }
    .post-hero-excerpt,
    .post-hero-excerpt-center { font-size: .95rem; line-height: 1.45; }

    /* Cover hero — mobilde daha az yükseklik, düzgün okunabilir overlay */
    .post-hero-cover { min-height: 240px; padding: 0; }
    .post-hero-cover .post-hero-inner { padding: 1.5rem 1rem 1.25rem; }
    .post-hero-cover-boxed { min-height: 220px; }
    .post-hero-cover-boxed .post-hero-inner { padding: 1.25rem 1.25rem 1rem; }
    .post-hero-fullscreen { min-height: 60vh; background-attachment: scroll; }
    .post-hero-fullscreen .post-hero-inner-bottom { padding: 2rem 1rem 2rem; }
    .post-hero-above-image { max-height: 260px; }
    .post-hero-above-head { padding: 1.25rem 1rem .75rem; }
    .post-hero-scroll { font-size: .65rem; bottom: .75rem; }

    /* Meta öğeleri — satıra akar, daha küçük */
    .post-meta { gap: .5rem; margin-bottom: 1rem; }
    .post-meta-items {
        gap: .5rem .85rem; font-size: .78rem;
    }
    .post-meta-item i { font-size: .85em; }
    .post-category { font-size: .65rem; padding: .25rem .6rem; }

    /* Öne çıkan görsel — tam genişlik, kenar yuvarlatma az */
    .post-featured { border-radius: 8px; margin-bottom: 1.5rem; }
    .post-featured-small {
        float: none !important; max-width: 100% !important;
        margin: 0 0 1.25rem !important;
    }

    /* İçerik — mobil padding */
    .post-content { font-size: 16px !important; line-height: 1.7 !important; }
    .post-content h2 { font-size: 1.3rem !important; margin: 1.75rem 0 .75rem; line-height: 1.25; }
    .post-content h3 { font-size: 1.1rem !important; margin: 1.5rem 0 .5rem; line-height: 1.3; }
    .post-content h4 { font-size: 1rem !important; margin: 1.25rem 0 .4rem; }
    .post-content p { margin-bottom: 1rem; }
    .post-content blockquote {
        padding: .4rem 0 .4rem 1rem;
        margin: 1.25rem 0;
        font-size: 1em;
    }
    .post-content img { margin: 1.25rem 0; border-radius: 6px; }

    /* İçindekiler — mobilde kompakt */
    .post-toc { padding: .85rem 1rem; margin-bottom: 1.5rem; }
    .post-toc-head { font-size: .85rem; margin-bottom: .5rem; }
    .post-toc-list { padding-left: 1.25rem; }
    .post-toc-list a { font-size: .85rem; line-height: 1.4; }

    /* Etiketler */
    .post-tags { gap: .4rem; margin: 1.5rem 0 1.25rem; }
    .post-tags-label { font-size: .78rem; width: 100%; margin-bottom: .35rem; }
    .post-tag { font-size: .72rem; padding: .3rem .65rem; }

    /* Alt paylaşım — mobilde 3'lü grid, ikon üstte + etiket altta */
    .post-share {
        margin: 1.5rem 0; padding: 1rem;
        border-radius: 12px;
        background: var(--bg-light);
    }
    .post-share-label {
        font-size: .8rem; font-weight: 600;
        display: block; text-align: center;
        margin-bottom: .75rem;
        color: var(--text-color);
    }
    .post-share-btns {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem;
    }
    .post-share-btn {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .3rem;
        padding: .7rem .5rem;
        border-radius: 10px;
        font-size: .72rem;
        min-width: 0;
        min-height: 68px;
    }
    .post-share-btn i { font-size: 1.2rem; }
    .post-share-btn span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
        line-height: 1;
    }

    /* Yazar kutusu — dikey, ortalı */
    .author-box {
        flex-direction: column; text-align: center;
        gap: 1rem; padding: 1.25rem;
    }
    .author-box-avatar { margin: 0 auto; width: 64px; height: 64px; font-size: 1.5rem; }
    .author-box-social { justify-content: center; }

    /* Yazı navigasyonu — dikey stack */
    .post-nav { grid-template-columns: 1fr; gap: .75rem; margin: 2rem 0; }
    .post-nav-link {
        padding: .85rem 1rem; gap: .75rem;
    }
    .post-nav-next { flex-direction: row; text-align: left; }
    .post-nav-link img { width: 56px; height: 56px; }
    .post-nav-title { font-size: .85rem; }
    .post-nav-label { font-size: .65rem; }

    /* İlgili yazılar — tek kolon */
    .post-related { margin-top: 2.5rem; padding-top: 1.75rem; }
    .post-related-title { font-size: 1.25rem; }
    .post-related-grid { grid-template-columns: 1fr; gap: 1rem; }
    .post-related-card img { height: 160px; }
    .post-related-body { padding: .85rem 1rem 1rem; }
    .post-related-body h3,
    .post-related-body h4,
    .post-related-card-title { font-size: .95rem; }

    /* Sidebar — mobilde içerik altında */
    .post-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
    .post-sidebar { position: static !important; }
    .sidebar-widget h3, .sidebar-widget h4 { font-size: 1rem; }
    .sidebar-widget .sidebar-post img { width: 56px; height: 56px; }
    .sidebar-widget .sidebar-post strong { font-size: .85rem; }

    /* Breadcrumb */
    .breadcrumb { padding: 0 0 .5rem; margin: 0 0 .65rem; font-size: .72rem; gap: .3rem; }

    /* İlerleme çubuğu — mobilde biraz daha belirgin */
    .reading-progress { height: 3px !important; }
}

@media (max-width: 480px) {
    .post-title,
    .post-hero-title { font-size: 1.4rem !important; }
    .post-hero-title-xl { font-size: 1.6rem !important; }

    /* İçerik biraz daha sıkı */
    .post-content { font-size: 15.5px !important; }
    .post-content h2 { font-size: 1.2rem !important; }
    .post-content h3 { font-size: 1.05rem !important; }

    /* Meta tek satıra zorlanmasın */
    .post-meta-items { font-size: .75rem; gap: .4rem .7rem; }

    /* Paylaşım butonları — çok küçük ekranda 3 sütun daha dar */
    .post-share-btn {
        padding: .55rem .3rem !important;
        min-height: 58px !important;
        font-size: .66rem !important;
    }
    .post-share-btn i { font-size: 1.05rem !important; }

    /* Blog listesi */
    .blog-card .card-img { height: 160px; }
    .section-title { font-size: 1.5rem; }
}

/* ============================================
   Lazy Loading
   ============================================ */
img[loading="lazy"] { opacity: 1; transition: opacity 0.3s; }

/* ============================================
   Dinamik Header (.dh-*) — header.php'den taşındı (PSI)
   Dinamik renk değişkenleri ve mobile_breakpoint inline kalır.
   ============================================ */
.dh-root {
    width: 100%; z-index: 999; color: var(--dh-text);
    background: var(--dh-bg);
    border-bottom: 1px solid var(--dh-border);
    transition: background .25s, box-shadow .25s, height .25s;
}
.dh-root.dh-sticky { position: sticky; top: 0; }
.dh-root.dh-transparent:not(.dh-scrolled) { background: transparent; border-bottom-color: transparent; }
.dh-root.dh-shadow-scroll.dh-scrolled { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.dh-root.dh-scroll-hide.dh-hide { transform: translateY(-100%); }

.dh-root.dh-transparent {
    position: absolute !important; top: 0; left: 0; right: 0; z-index: 50;
}
.dh-root.dh-transparent.dh-sticky.dh-scrolled {
    position: fixed !important; top: 0;
    background: var(--dh-bg);
    border-bottom: 1px solid var(--dh-border);
}
body:has(.dh-root.dh-transparent) { position: relative; }
body:has(.dh-root.dh-transparent) main > section.hb-section:first-child {
    padding-top: calc(var(--dh-over-h, var(--dh-height, 80px)) + var(--hb-section-padding, var(--hb-padding-y, 4rem)));
}

/* Topbar */
.dh-topbar { background: var(--dh-topbar-bg); color: var(--dh-topbar-text); font-size: .8rem; padding: .5rem 0; }
.dh-topbar .dh-container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dh-topbar .dh-icon-link { color: var(--dh-topbar-link); text-decoration: none; }
.dh-topbar .dh-icon-link:hover { color: var(--dh-topbar-text); }
.dh-topbar .dh-social a { color: var(--dh-topbar-link); }
.dh-topbar .dh-social a:hover { color: var(--dh-topbar-text); }

/* Main bar */
.dh-main { height: var(--dh-height); display: flex; align-items: center; transition: height .25s; }
.dh-root.dh-scrolled .dh-main { height: var(--dh-height-scrolled); }
.dh-container {
    width: 100%; max-width: var(--dh-maxw);
    margin: 0 auto; padding: 0 1.25rem;
    display: flex; align-items: center; gap: 1.5rem;
}
.dh-zone { display: flex; align-items: center; gap: 1.25rem; }
.dh-zone.dh-left  { justify-content: flex-start; }
.dh-zone.dh-center { justify-content: center; flex: 1; }
.dh-zone.dh-right { justify-content: flex-end; }

/* Logo */
.dh-logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; flex-shrink: 0; }
.dh-logo img { max-height: calc(var(--dh-height) - 24px); max-width: 220px; width: auto; height: auto; transition: max-height .25s; }
.dh-root.dh-scrolled .dh-logo img { max-height: calc(var(--dh-height-scrolled) - 20px); }
.dh-logo-text { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }

/* Menu */
.dh-menu > ul { display: flex; gap: 1.5rem; list-style: none; padding: 0; margin: 0; align-items: center; }
.dh-menu-item { position: relative; }
.dh-menu-item > a {
    color: var(--dh-link); text-decoration: none; font-size: .92rem; font-weight: 500;
    padding: .6rem 0; display: inline-flex; align-items: center; gap: .35rem;
    transition: color .15s;
}
.dh-menu-item > a:hover { color: var(--dh-link-hover); }
.dh-menu-item.active > a { color: var(--dh-link-active); }
.dh-menu-item .dh-caret { font-size: .7rem; transition: transform .2s; }
.dh-menu-item:hover .dh-caret { transform: rotate(180deg); }

/* Submenu */
.dh-submenu {
    position: absolute; top: 100%; left: 0; min-width: 220px;
    background: #fff; border: 1px solid var(--dh-border);
    border-radius: 10px; box-shadow: 0 12px 36px rgba(0,0,0,.08);
    list-style: none; padding: .5rem; margin: 0;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 100;
}
.dh-menu-item:hover > .dh-submenu,
.dh-menu-item:focus-within > .dh-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.dh-submenu li a {
    display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem;
    color: #334155; text-decoration: none; font-size: .88rem; border-radius: 6px;
    transition: background .15s, color .15s;
}
.dh-submenu li a:hover { background: #f1f5f9; color: var(--dh-link-hover); }

/* Search variants */
.dh-search { position: relative; display: inline-flex; align-items: center; }
.dh-search-toggle {
    width: 38px; height: 38px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent;
    color: var(--dh-link); cursor: pointer; font-size: 1.05rem;
    transition: background .15s, color .15s, border-color .15s;
}
.dh-search-toggle:hover { background: rgba(0,0,0,.04); color: var(--dh-link-hover); border-color: var(--dh-border); }

.dh-search-inline {
    background: #f1f5f9; border-radius: 999px; padding: 0 .85rem;
    height: 38px; min-width: 240px;
    transition: background .2s, width .25s ease;
}
.dh-search-inline:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--dh-link-hover); }
.dh-search-inline .dh-search-icon { color: var(--dh-link); font-size: .95rem; margin-right: .5rem; }
.dh-search-inline input {
    border: none; background: transparent; outline: none;
    flex: 1; font-size: .88rem; color: var(--dh-text);
    min-width: 0; width: 100%; font-family: inherit;
}
.dh-search-inline input::placeholder { color: var(--dh-link); opacity: .8; }

.dh-search-dropdown .dh-search-popover {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: #fff; border: 1px solid var(--dh-border);
    border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.12);
    padding: .5rem; display: flex; align-items: center; gap: .5rem;
    min-width: 360px; z-index: 999;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
.dh-search-dropdown.open .dh-search-popover { opacity: 1; visibility: visible; transform: translateY(0); }
.dh-search-dropdown .dh-search-popover > i { color: var(--dh-link); margin-left: .4rem; }
.dh-search-dropdown .dh-search-popover input {
    flex: 1; border: none; outline: none; padding: .5rem; font-size: .9rem;
    background: transparent; color: var(--dh-text); font-family: inherit; min-width: 0;
}
.dh-search-dropdown .dh-search-popover button[type=submit] {
    background: var(--dh-cta-bg); color: var(--dh-cta-text); border: none;
    padding: .5rem 1rem; border-radius: 8px; font-weight: 500; cursor: pointer;
    font-size: .85rem; font-family: inherit;
}

.dh-search-expandable { width: 38px; height: 38px; transition: width .3s cubic-bezier(.4,0,.2,1); }
.dh-search-expandable .dh-search-toggle {
    position: absolute; inset: 0;
    width: 38px; height: 38px; border-radius: 8px;
    z-index: 2; transition: opacity .2s;
}
.dh-search-expandable .dh-search-panel {
    position: absolute; top: 0; right: 0;
    display: flex; align-items: center; gap: .3rem;
    background: #fff; border: 1px solid transparent; border-radius: 999px;
    height: 38px; width: 0; padding: 0; overflow: hidden;
    transition: width .3s cubic-bezier(.4,0,.2,1), padding .3s, box-shadow .3s, border-color .3s;
    z-index: 1; opacity: 0; visibility: hidden;
}
.dh-search-expandable.open { width: 320px; }
.dh-search-expandable.open .dh-search-panel {
    width: 320px; padding: 0 .35rem 0 1rem;
    border-color: var(--dh-border);
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    opacity: 1; visibility: visible; z-index: 3;
}
.dh-search-expandable.open:focus-within .dh-search-panel { border-color: var(--dh-link-hover); }
.dh-search-expandable.open .dh-search-toggle { opacity: 0; pointer-events: none; }
.dh-search-expandable .dh-search-panel input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: .88rem; color: var(--dh-text); font-family: inherit; min-width: 0;
    opacity: 0; transition: opacity .2s .15s;
}
.dh-search-expandable.open .dh-search-panel input { opacity: 1; }
.dh-search-expandable .dh-search-panel button {
    width: 30px; height: 30px; border: none; border-radius: 50%;
    background: var(--dh-cta-bg); color: var(--dh-cta-text); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: .9rem;
    flex-shrink: 0;
    opacity: 0; transform: scale(.8); transition: opacity .2s .15s, transform .2s .15s;
}
.dh-search-expandable.open .dh-search-panel button { opacity: 1; transform: scale(1); }

.dh-search-modal-btn {
    width: 38px; height: 38px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent;
    color: var(--dh-link); cursor: pointer; font-size: 1.05rem;
    transition: background .15s, color .15s, border-color .15s;
}
.dh-search-modal-btn:hover { background: rgba(0,0,0,.04); color: var(--dh-link-hover); border-color: var(--dh-border); }

.dh-search-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,.88); backdrop-filter: blur(8px);
    z-index: 10000; display: none; align-items: flex-start; justify-content: center;
    padding: 6rem 1rem 1rem;
}
.dh-search-overlay.open { display: flex; animation: dhFadeIn .2s; }
@keyframes dhFadeIn { from { opacity: 0; } to { opacity: 1; } }
.dh-search-overlay-close {
    position: absolute; top: 1rem; right: 1rem;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.1); color: #fff; border: none; cursor: pointer;
    font-size: 1.5rem; display: inline-flex; align-items: center; justify-content: center;
}
.dh-search-overlay-close:hover { background: rgba(255,255,255,.2); }
.dh-search-overlay form {
    width: 100%; max-width: 680px;
    background: #fff; border-radius: 14px; padding: 1rem;
    display: flex; align-items: center; gap: .5rem;
    box-shadow: 0 24px 64px rgba(0,0,0,.3);
    animation: dhSlideDown .3s cubic-bezier(.4,0,.2,1);
}
@keyframes dhSlideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.dh-search-overlay form i.bi-search { font-size: 1.4rem; color: #64748b; margin-left: .5rem; }
.dh-search-overlay input {
    flex: 1; border: none; outline: none; padding: .85rem .5rem; font-size: 1.15rem;
    background: transparent; color: #0f172a; font-family: inherit;
}
.dh-search-overlay button[type=submit] {
    background: #0f172a; color: #fff; border: none;
    padding: .85rem 1.5rem; border-radius: 10px; font-weight: 500; cursor: pointer;
    font-size: .95rem; font-family: inherit;
}

.dh-icon-link {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--dh-link); text-decoration: none; font-size: .85rem;
    transition: color .15s;
}
.dh-icon-link:hover { color: var(--dh-link-hover); }

.dh-social { display: inline-flex; gap: .25rem; }
.dh-social a {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--dh-link); text-decoration: none; transition: background .15s, color .15s;
}
.dh-social a:hover { background: rgba(0,0,0,.05); color: var(--dh-link-hover); }

.dh-cta {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1.1rem; border-radius: 8px; font-size: .88rem; font-weight: 600;
    background: var(--dh-cta-bg); color: var(--dh-cta-text);
    text-decoration: none; transition: opacity .15s, transform .15s;
}
.dh-cta:hover { opacity: .9; transform: translateY(-1px); color: var(--dh-cta-text); }

.dh-below { border-top: 1px solid var(--dh-border); padding: .5rem 0; display: flex; justify-content: center; }

.dh-hamburger {
    display: none; background: none; border: none; padding: .5rem; cursor: pointer;
    color: var(--dh-text); font-size: 1.5rem;
}
.dh-mobile { display: none; align-items: center; gap: .75rem; }

.dh-drawer {
    position: fixed; inset: 0 auto 0 0; width: 320px; max-width: 90vw;
    background: #fff; z-index: 9999;
    transform: translateX(-100%); transition: transform .25s ease;
    overflow-y: auto; padding: 1rem 1.25rem; box-shadow: 2px 0 24px rgba(0,0,0,.15);
}
.dh-drawer.open { transform: translateX(0); }
.dh-drawer-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.4);
    z-index: 9998; opacity: 0; visibility: hidden; transition: opacity .2s;
}
.dh-drawer-backdrop.open { opacity: 1; visibility: visible; }
.dh-drawer-head {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: .75rem; border-bottom: 1px solid var(--dh-border); margin-bottom: .75rem;
}
.dh-drawer-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #64748b; padding: .25rem .5rem; }
.dh-drawer-menu { list-style: none; padding: 0; margin: 0 0 1rem; }
.dh-drawer-menu > li { border-bottom: 1px solid #f1f5f9; }
.dh-drawer-menu > li > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem .25rem; color: #0f172a; text-decoration: none; font-weight: 500;
}
.dh-drawer-menu .dh-submenu-mobile {
    list-style: none; padding: 0 0 .5rem 1rem; margin: 0;
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.dh-drawer-menu li.open .dh-submenu-mobile { max-height: 500px; }
.dh-drawer-menu .dh-submenu-mobile a {
    display: block; padding: .5rem .25rem; color: #475569; font-size: .88rem; text-decoration: none;
}
.dh-drawer-menu .dh-submenu-mobile a:hover { color: var(--dh-link-hover); }
.dh-drawer-menu button.dh-submenu-toggle { background: none; border: none; padding: .5rem; cursor: pointer; color: #64748b; }
.dh-drawer-menu li.open button.dh-submenu-toggle i { transform: rotate(180deg); }
.dh-drawer-menu button.dh-submenu-toggle i { transition: transform .2s; display: inline-block; }

.dh-drawer-contact { font-size: .85rem; margin: 1rem 0; padding: 1rem; background: #f8fafc; border-radius: 8px; }
.dh-drawer-contact .dh-icon-link { display: flex; gap: .5rem; padding: .35rem 0; color: #334155; }
.dh-drawer-social { display: flex; gap: .5rem; justify-content: center; padding: .75rem 0; }
.dh-drawer-cta { display: block; text-align: center; padding: .85rem; background: var(--dh-cta-bg); color: var(--dh-cta-text); border-radius: 8px; text-decoration: none; font-weight: 600; margin-top: 1rem; }