:root {
    --bg-primary: #0a1628;
    --bg-secondary: #0f1e36;
    --bg-tertiary: #15273e;
    --gold: #C9A84C;
    --gold-hover: #d4b95a;
    --gold-dark: #a3873b;
    --text-primary: #f5f5f5;
    --text-muted: #98a2b3;
    --border: rgba(201, 168, 76, 0.18);
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.08);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-gold: 0 0 40px rgba(201, 168, 76, 0.25);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Source Sans 3', -apple-system, system-ui, Segoe UI, Roboto, sans-serif;
    font-weight: 400;
    line-height: 1.7;
    padding-top: 76px;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: var(--text-primary);
}

a { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold-hover); }

.text-gold { color: var(--gold) !important; }
.text-muted { color: var(--text-muted) !important; }

/* ---------- BUTTONS ---------- */
/* Language switcher */
.lang-switcher { display: flex; align-items: center; gap: .35rem; }
.lang-switcher .lang-btn {
    color: var(--text-muted);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    padding: .25rem .45rem;
    border-radius: 4px;
    transition: color .2s, background .2s;
    letter-spacing: .5px;
}
.lang-switcher .lang-btn:hover { color: var(--gold); }
.lang-switcher .lang-btn.active { color: var(--gold); background: rgba(201, 168, 76, .12); }
.lang-switcher .lang-sep { color: var(--text-muted); opacity: .5; }

.btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #0a1628;
    border: none;
    font-weight: 600;
    padding: .7rem 1.6rem;
    border-radius: 4px;
    transition: all .25s ease;
    letter-spacing: .3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28); color: #0a1628; }

.btn-outline-gold {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
    font-weight: 600;
    padding: .65rem 1.4rem;
    border-radius: 4px;
    transition: all .25s ease;
}
.btn-outline-gold:hover { background: var(--gold); color: var(--bg-primary); }

.btn-outline-light {
    border-color: rgba(255,255,255,.4);
    color: var(--text-primary);
    font-weight: 600;
    border-radius: 4px;
}
.btn-outline-light:hover { background: rgba(255,255,255,.08); color: #fff; border-color: #fff; }

/* ---------- NAV ---------- */
.site-nav {
    background: rgba(10, 22, 40, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all .3s ease;
    padding: .85rem 0;
    border-bottom: 1px solid transparent;
}
.site-nav.scrolled {
    background: rgba(10, 22, 40, 0.97);
    border-bottom-color: var(--border);
    padding: .55rem 0;
}
.site-nav .nav-link {
    color: var(--text-primary) !important;
    font-weight: 500;
    padding: .5rem 1rem !important;
    position: relative;
    transition: color .2s;
}
.site-nav .nav-link:hover { color: var(--gold) !important; }
.site-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 1rem; right: 1rem; bottom: 6px;
    height: 2px; background: var(--gold);
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s;
}
.site-nav .nav-link:hover::after { transform: scaleX(1); }

.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand-mark {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--bg-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.2rem;
    border-radius: 6px;
    letter-spacing: 1px;
}
.brand-mark-lg { width: 56px; height: 56px; font-size: 1.5rem; }
.brand-text {
    font-family: 'Playfair Display', serif;
    color: var(--text-primary);
    font-weight: 600; font-size: 1.1rem;
}
.navbar-toggler { border-color: var(--border); }
.navbar-toggler-icon { filter: invert(1); }

/* ---------- HERO ---------- */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center;
    background:
        linear-gradient(135deg, rgba(10, 22, 40, 0.92) 0%, rgba(10, 22, 40, 0.97) 60%, rgba(10, 22, 40, 1) 100%),
        radial-gradient(ellipse at top right, rgba(201, 168, 76, 0.12), transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(91, 141, 239, 0.08), transparent 50%),
        url('/images/me/hero-bg.jpg') center/cover no-repeat,
        var(--bg-primary);
    overflow: visible;
}
@media (max-width: 991.98px) {
    .hero-section {
        background:
            linear-gradient(180deg, rgba(10, 22, 40, 0.55) 0%, rgba(10, 22, 40, 0.78) 60%, rgba(10, 22, 40, 0.95) 100%),
            url('/images/me/portraits/s2.png') center top / cover no-repeat,
            var(--bg-primary);
    }
}
.hero-bg-mesh {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
}
.hero-particles { position: absolute; inset: 0; pointer-events: none; }
.hero-particles span {
    position: absolute; width: 4px; height: 4px;
    background: var(--gold); border-radius: 50%; opacity: .3;
    animation: float 8s ease-in-out infinite;
}
@keyframes float {
    0%,100% { transform: translateY(0) translateX(0); opacity: .2; }
    50% { transform: translateY(-30px) translateX(15px); opacity: .6; }
}

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .4rem .9rem;
    background: rgba(201,168,76,.08);
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--gold);
    font-size: .85rem; font-weight: 500;
    letter-spacing: .5px;
}
.hero-eyebrow .dot {
    width: 8px; height: 8px; background: var(--gold); border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,.7); }
    50% { box-shadow: 0 0 0 8px rgba(201,168,76,0); }
}

.hero-title { font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.05; letter-spacing: -1px; white-space: nowrap; }
.hero-typer { font-size: 1.4rem; color: var(--text-muted); font-weight: 500; }
.hero-typer-static { color: var(--text-muted); margin-right: .5rem; }
.hero-typer-text { color: var(--gold); }
.hero-typer-text::after { content: '|'; animation: blink 1s step-end infinite; margin-left: 2px; color: var(--gold); }
@keyframes blink { 50% { opacity: 0; } }

.hero-lead { font-size: 1.05rem; color: var(--text-muted); }
.hero-sub { font-size: 1.1rem; color: var(--text-primary); max-width: 640px; }

.hero-card {
    padding: 2rem; position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    border: 1px solid var(--card-border);
    border-radius: 12px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow);
}
.glass-card { background: rgba(255,255,255,.025); border: 1px solid var(--card-border); border-radius: 12px; }
.hero-card-glow {
    position: absolute; inset: -1px;
    background: linear-gradient(135deg, transparent, var(--gold), transparent);
    border-radius: 12px; opacity: .12; z-index: -1; filter: blur(20px);
}
.hero-avatar {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--bg-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 800;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(201, 168, 76, .3);
}
.hero-avatar img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* About section portrait photo */
.about-photo {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .45);
    border: 1px solid var(--card-border);
    background: #0a1628;
}
.about-photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
    display: block;
    transition: transform .6s ease;
}

/* About photo when used with transparent portrait PNG */
.about-photo.about-photo-portrait {
    background:
        radial-gradient(ellipse at 50% 70%, rgba(201, 168, 76, .15) 0%, transparent 60%),
        linear-gradient(180deg, #1a2742 0%, #0a1628 70%, #0f1e36 100%);
}
.about-photo.about-photo-portrait img {
    object-fit: contain;
    object-position: center bottom;
}

/* Hero portrait (replaces glass card) */
/* Full-bleed hero portrait — full natural image, overflows into next section, sits BEHIND text */
.hero-portrait-fullbleed {
    position: absolute;
    top: -80px;
    right: 0;
    width: 48vw;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
    display: flex;
    justify-content: flex-end;
}
.hero-section .container.position-relative { z-index: 1; }
.hero-portrait-fullbleed::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 60% 60%, rgba(201, 168, 76, .14) 0%, transparent 55%),
        radial-gradient(ellipse at 60% 100%, rgba(91, 141, 239, .08) 0%, transparent 50%);
    z-index: -1;
    pointer-events: none;
    filter: blur(22px);
}
.hero-portrait-fullbleed .hero-portrait-img {
    width: 100%;
    height: auto;
    display: block;
    /* Image at native aspect — extends below viewport into next section */
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 92%, transparent 100%);
            mask-image: linear-gradient(180deg, black 0%, black 92%, transparent 100%);
    filter: drop-shadow(0 0 80px rgba(201, 168, 76, .18))
            drop-shadow(0 30px 60px rgba(0, 0, 0, .6));
}
@media (max-width: 991px) {
    .hero-portrait { display: none !important; }
}
.about-photo:hover img { transform: scale(1.04); }
.about-photo-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1rem 1.2rem;
    background: linear-gradient(to top, rgba(10, 22, 40, .92), transparent);
    color: var(--text-primary);
    font-size: .88rem;
    display: flex; align-items: center; gap: .5rem;
    z-index: 2;
}
.about-photo-caption i { color: var(--gold); }

/* Professional photo gallery (Hakkımda below) */
.gallery-photos h3 { font-family: 'Playfair Display', Georgia, serif; }
.gallery-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    margin: 0;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .45);
    border: 1px solid var(--card-border);
    background: #0a1628;
}
.gallery-card img {
    width: 100%; height: 100%;
    display: block; object-fit: cover;
    object-position: center 20%;
    transition: transform .6s ease;
}
/* Portrait variant — transparent PNG with custom background */
.gallery-card.gallery-card-portrait {
    background:
        radial-gradient(ellipse at 50% 70%, rgba(201, 168, 76, .14) 0%, transparent 60%),
        linear-gradient(180deg, #1a2742 0%, #0a1628 75%, #0f1e36 100%);
}
.gallery-card.gallery-card-portrait img {
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45));
}
.gallery-card:hover img { transform: scale(1.05); }
.gallery-card figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1rem 1.2rem;
    background: linear-gradient(to top, rgba(10, 22, 40, .92), transparent);
    color: var(--text-primary);
    font-size: .9rem;
    display: flex; align-items: center; gap: .55rem;
    z-index: 2;
}
.gallery-card figcaption i { color: var(--gold); }
.hero-card-list { list-style: none; padding: 0; margin: 0; }
.hero-card-list li { padding: .55rem 0; border-bottom: 1px dashed rgba(255,255,255,.06); color: var(--text-primary); }
.hero-card-list li:last-child { border-bottom: none; }
.hero-card-list i { margin-right: .55rem; }

.hero-scroll {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; gap: 4px;
    cursor: pointer; opacity: .7;
}
.hero-scroll span {
    display: block; width: 22px; height: 22px;
    border-bottom: 2px solid var(--gold);
    border-right: 2px solid var(--gold);
    transform: rotate(45deg);
    animation: scrollDown 2s infinite;
}
.hero-scroll span:nth-child(2) { animation-delay: .15s; }
.hero-scroll span:nth-child(3) { animation-delay: .3s; }
@keyframes scrollDown {
    0% { opacity: 0; transform: rotate(45deg) translate(-12px,-12px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: rotate(45deg) translate(12px,12px); }
}

/* ---------- SECTIONS ---------- */
.section { padding: 6rem 0; position: relative; }
.section-header { margin-bottom: 1.5rem; }
.section-eyebrow {
    color: var(--gold); letter-spacing: 3px; font-size: .8rem; font-weight: 600;
    margin-bottom: 1rem; text-transform: uppercase;
}
.section-title {
    font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; letter-spacing: -.5px;
}
.section-sub { color: var(--text-muted); font-size: 1.05rem; max-width: 720px; margin: 0 auto; }

.section-services { background: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary)); }
.section-about { background: var(--bg-secondary); }
.section-about p { max-width: 70ch; }
.section-services .section-sub { max-width: 65ch; margin-left: auto; margin-right: auto; }
.hero-sub { max-width: 60ch; }
.timeline-card p { max-width: 65ch; }
.site-footer p { max-width: 60ch; }
.article-detail-content p { max-width: 70ch; }
.contact-info-item > div { max-width: 50ch; }

/* PDF article embed */
.article-pdf-wrapper {
    margin: 1.5rem 0 2rem;
}
.article-pdf-embed {
    width: 100%;
    height: 85vh;
    min-height: 600px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: #ffffff;
    display: block;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.article-pdf-fallback {
    margin-top: .85rem;
    font-size: .9rem;
    color: var(--text-muted);
    text-align: center;
}
.article-pdf-fallback a {
    color: var(--gold);
    text-decoration: underline;
}
@media (max-width: 768px) {
    .article-pdf-embed { height: 70vh; min-height: 480px; }
}

/* Plain alphabetical article list */
.article-list-plain { max-width: 80ch; margin: 0 auto; }
.article-list-group { margin-bottom: 2.5rem; }
.article-list-category {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.35rem;
    color: var(--gold);
    border-bottom: 1px solid var(--border);
    padding-bottom: .55rem;
    margin-bottom: 1rem;
    font-weight: 700;
}
.article-list-plain ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.article-list-plain li {
    padding: .55rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .06);
}
.article-list-plain li:last-child { border-bottom: none; }
.article-list-plain a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color .2s, padding-left .2s;
    display: block;
}
.article-list-plain a:hover {
    color: var(--gold);
    padding-left: .4rem;
}
.about-bg-deco {
    position: absolute; right: 0; top: 0; width: 50%; height: 100%;
    background: radial-gradient(circle at right, rgba(201,168,76,.06), transparent 50%);
    pointer-events: none;
}
.section-experience { background: var(--bg-primary); }
.section-articles { background: var(--bg-secondary); }
.section-social { background: var(--bg-primary); }
.section-contact { background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary)); }
.section-related { background: var(--bg-secondary); padding: 4rem 0; }

/* ---------- SERVICE CARDS ---------- */
.service-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 2.2rem 1.8rem;
    transition: all .35s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: scaleX(0); transform-origin: center;
    transition: transform .35s;
}
.service-card:hover { transform: translateY(-6px); border-color: var(--gold); background: rgba(255,255,255,.05); }
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
    display: inline-block;
    color: var(--gold);
    font-size: 1.9rem;
    line-height: 1;
    margin-bottom: 1.1rem;
}
.service-card h3 {
    font-size: 1.25rem; margin-bottom: .8rem; font-family: 'Playfair Display', serif;
    color: var(--text-primary);
}
.service-card p { color: var(--text-muted); margin-bottom: 0; }

/* ---------- DEGREE LIST + STATS ---------- */
.degree-list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.degree-item {
    background: rgba(201,168,76,.06);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: .5rem 1rem; border-radius: 6px;
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .92rem;
}
.degree-tag {
    background: var(--gold); color: var(--bg-primary); padding: 2px 8px;
    border-radius: 4px; font-size: .75rem; font-weight: 700; letter-spacing: .5px;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.6rem 1.4rem; text-align: center; height: 100%;
    transition: all .25s;
}
.stat-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.stat-card-wide { text-align: left; padding: 1.2rem 1.6rem; }
.stat-num {
    font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 800;
    color: var(--gold); line-height: 1; margin-bottom: .4rem;
}
.small-stat { font-size: 1.3rem; }
.stat-lbl { color: var(--text-muted); font-size: .9rem; }

/* ---------- TIMELINE ---------- */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
    content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px;
    background: linear-gradient(180deg, var(--gold), transparent);
}
.timeline-item { position: relative; margin-bottom: 1.5rem; }
.timeline-dot {
    position: absolute; left: -32px; top: 14px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--bg-primary); border: 3px solid var(--gold);
    box-shadow: 0 0 0 4px rgba(201,168,76,.15);
}
.timeline-card {
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: 12px; padding: 1.4rem 1.6rem;
}
.timeline-tag {
    display: inline-block; background: rgba(201,168,76,.15); color: var(--gold);
    padding: 2px 10px; border-radius: 4px; font-size: .75rem; letter-spacing: .5px;
    margin-bottom: .6rem;
}
.timeline-card h4 { font-size: 1.15rem; margin-bottom: .4rem; }
.timeline-card p { color: var(--text-muted); margin-bottom: 0; }

/* ---------- CATEGORY CHIPS + ARTICLES ---------- */
.cat-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.cat-chip {
    --chip-color: var(--gold);
    background: transparent; border: 1px solid var(--card-border);
    color: var(--text-muted); padding: .4rem 1rem; border-radius: 100px;
    font-size: .88rem; font-weight: 500; cursor: pointer; transition: all .25s;
    text-decoration: none;
}
.cat-chip:hover { color: var(--chip-color); border-color: var(--chip-color); }
.cat-chip.active {
    background: var(--chip-color); color: var(--bg-primary); border-color: var(--chip-color);
}

.article-card {
    display: block;
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: 12px; overflow: hidden;
    transition: all .35s; height: 100%; text-decoration: none; color: var(--text-primary);
}
.article-card:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: var(--shadow); }
.article-thumb {
    height: 200px;
    background-color: var(--bg-tertiary);
    background-size: cover; background-position: center;
    position: relative;
}
.article-body { padding: 1.4rem 1.5rem; }
.article-cat { font-size: .8rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.article-title { font-size: 1.15rem; margin: .55rem 0 .7rem; color: var(--text-primary); font-family: 'Playfair Display', serif; line-height: 1.35; }
.article-sum { color: var(--text-muted); font-size: .92rem; margin-bottom: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article-meta { display: flex; gap: 1rem; color: var(--text-muted); font-size: .82rem; }
.article-meta i { margin-right: .3rem; }

.article-item.hide { display: none; }

/* ---------- SOCIAL CARDS ---------- */
.social-link-card {
    display: block; background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: 12px; padding: 2rem 1.8rem; text-align: center;
    color: var(--text-primary); text-decoration: none; transition: all .35s;
    height: 100%;
}
.social-link-card:hover { border-color: var(--gold); transform: translateY(-5px); color: var(--text-primary); }
.social-link-icon { font-size: 2.4rem; color: var(--gold); margin-bottom: 1rem; }
.social-link-card h4 { margin-bottom: .4rem; font-size: 1.2rem; }
.social-link-card p { color: var(--text-muted); margin-bottom: .8rem; font-size: .92rem; }
.social-link-handle { color: var(--gold); font-size: .9rem; font-family: 'Source Sans 3', monospace; }

.social-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.05); color: var(--text-primary);
    border: 1px solid var(--card-border); text-decoration: none;
    transition: all .2s;
}
.social-btn:hover { background: var(--gold); color: var(--bg-primary); border-color: var(--gold); }

/* ---------- CONTACT ---------- */
.contact-info-item {
    display: flex; gap: 1rem; padding: 1rem 0;
    border-bottom: 1px dashed rgba(255,255,255,.08);
    align-items: flex-start;
}
.contact-info-item:last-child { border-bottom: none; }
.contact-info-item i {
    color: var(--gold); font-size: 1.2rem; margin-top: .2rem; min-width: 28px;
}
.contact-info-item strong { color: var(--text-primary); }

.contact-card {
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: 12px; padding: 2.5rem;
}
.form-control-dark, .form-select-dark {
    background: rgba(255,255,255,.04); border: 1px solid var(--card-border);
    color: var(--text-primary); padding: .7rem 1rem; border-radius: 6px;
}
.form-control-dark:focus, .form-select-dark:focus {
    background: rgba(255,255,255,.06); border-color: var(--gold);
    color: var(--text-primary); box-shadow: 0 0 0 .15rem rgba(201,168,76,.2);
}
.form-control-dark::placeholder { color: var(--text-muted); }
.form-label { color: var(--text-muted); font-size: .88rem; font-weight: 500; letter-spacing: .3px; margin-bottom: .4rem; }

/* ---------- FOOTER ---------- */
.site-footer {
    background: #050d1a; color: var(--text-muted);
    padding: 4rem 0 2rem; margin-top: 4rem;
    border-top: 1px solid var(--card-border);
}
.footer-heading { color: var(--text-primary); font-size: .95rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1.2rem; font-family: 'Source Sans 3', sans-serif; font-weight: 600; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { padding: .25rem 0; }
.footer-links a, .footer-link { color: var(--text-muted); text-decoration: none; transition: color .2s; }
.footer-links a:hover, .footer-link:hover { color: var(--gold); }
.footer-divider { border-color: rgba(255,255,255,.06); margin: 2.5rem 0 1.5rem; }

/* ---------- PAGE HERO (sub pages) ---------- */
.page-hero {
    padding: 5rem 0 3rem; background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
    border-bottom: 1px solid var(--border);
}
.page-hero-eyebrow { color: var(--gold); letter-spacing: 3px; font-size: .85rem; font-weight: 600; margin-bottom: 1rem; }
.page-hero-title { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
.page-hero-sub { color: var(--text-muted); }

/* ---------- BREADCRUMB ---------- */
.article-breadcrumb { padding: 1.2rem 0 0; background: var(--bg-secondary); }
.breadcrumb { background: transparent; padding: 0; margin: 0; }
.breadcrumb-item, .breadcrumb-item a { color: var(--text-muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--gold); }
.breadcrumb-item.active { color: var(--text-primary); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); content: "›"; padding: 0 .35rem; }
.page-hero-crumbs { padding: 0; }
.page-hero-crumbs .breadcrumb-item, .page-hero-crumbs .breadcrumb-item a { font-size: .85rem; }

/* ---------- ARTICLE DETAIL ---------- */
.article-detail { padding-bottom: 4rem; }
.article-detail-hero { padding: 3rem 0 2rem; }
.article-detail-meta { font-size: .9rem; }
.article-detail-title { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 1rem; line-height: 1.2; }
.article-detail-sum { font-size: 1.2rem; color: var(--text-muted); }
.article-detail-image img { border-radius: 12px; width: 100%; }
.article-detail-content { font-size: 1.08rem; color: #d5d7da; line-height: 1.85; }
.article-detail-content h2 { margin: 2rem 0 1rem; font-size: 1.7rem; color: var(--gold); }
.article-detail-content h3 { margin: 1.5rem 0 .8rem; font-size: 1.35rem; }
.article-detail-content p { margin-bottom: 1.1rem; }
.article-detail-content blockquote {
    border-left: 3px solid var(--gold); padding: .6rem 1.4rem;
    margin: 1.5rem 0; background: rgba(201,168,76,.05); border-radius: 4px;
    color: var(--text-muted);
}
.article-detail-content code {
    background: rgba(201,168,76,.1); color: var(--gold);
    padding: .15rem .4rem; border-radius: 4px; font-size: .92em;
}
.article-detail-footer { padding: 2rem 0; border-top: 1px solid var(--card-border); }
.author-card { display: flex; gap: 1rem; align-items: center; }

/* ---------- EMPTY / PAGINATION ---------- */
.empty-state { text-align: center; padding: 5rem 1rem; color: var(--text-muted); }
.empty-state i { font-size: 3rem; color: var(--gold); margin-bottom: 1rem; opacity: .6; }
.pagination .page-link {
    background: var(--card-bg); border-color: var(--card-border); color: var(--text-primary);
}
.pagination .page-item.active .page-link { background: var(--gold); border-color: var(--gold); color: var(--bg-primary); }

.error-code { font-family: 'Playfair Display', serif; font-size: 8rem; line-height: 1; margin-bottom: 1rem; }

/* ---------- BACK TO TOP ---------- */
.back-to-top {
    position: fixed; right: 24px; bottom: 24px;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--gold); color: var(--bg-primary);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow); opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s; z-index: 999;
    text-decoration: none;
}
.back-to-top.show { opacity: 1; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-3px); color: var(--bg-primary); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
    body { padding-top: 70px; }
    .site-nav { background: rgba(10, 22, 40, 0.97); }
    .navbar-collapse { background: var(--bg-secondary); padding: 1rem; border-radius: 8px; margin-top: .5rem; }
    .hero-section { min-height: auto; padding: 4rem 0; }
    .section { padding: 4rem 0; }
}

@media (max-width: 576px) {
    .hero-title { font-size: 2.2rem; }
    .hero-typer { font-size: 1.1rem; }
    .contact-card { padding: 1.5rem; }
}