/**
 * ARKETIPYA Mythology UI V2
 * Dark Luxury, Cinematic, Cultural-Accented Design System
 */

:root {
    --ark-bg-obsidian: #070708;
    --ark-surface-dark: #101012;
    --ark-surface-raised: #151518;
    --ark-surface-card: rgba(16, 16, 18, 0.85);
    --ark-gold-primary: #C5A775;
    --ark-gold-bright: #E5C78E;
    --ark-gold-muted: #8C7449;
    --ark-gold-border: rgba(197, 167, 117, 0.2);
    --ark-gold-border-hover: rgba(229, 199, 142, 0.5);
    --ark-text-primary: #EDECE8;
    --ark-text-secondary: #9C9B96;
    --ark-text-tertiary: #686763;
    --ark-serif: 'Cormorant Garamond', Georgia, serif;
    --ark-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Default cultural accent */
    --myth-accent: #2C4A6F;
    --myth-accent-glow: rgba(44, 74, 111, 0.35);
    --myth-culture-color: #8faec9;
}

/* Cultural Accents */
.ark-group-turkic {
    --myth-accent: #2C4A6F;
    --myth-accent-glow: rgba(44, 74, 111, 0.35);
    --myth-culture-color: #8faec9;
}
.ark-group-egyptian {
    --myth-accent: #1B325F;
    --myth-accent-glow: rgba(212, 175, 55, 0.3);
    --myth-culture-color: #e5c78e;
}
.ark-group-norse {
    --myth-accent: #2E3840;
    --myth-accent-glow: rgba(78, 125, 115, 0.35);
    --myth-culture-color: #9cb3a8;
}
.ark-group-greek {
    --myth-accent: #1E3A8A;
    --myth-accent-glow: rgba(59, 130, 246, 0.3);
    --myth-culture-color: #93c5fd;
}
.ark-group-mesopotamian {
    --myth-accent: #8B4513;
    --myth-accent-glow: rgba(217, 119, 6, 0.35);
    --myth-culture-color: #f59e0b;
}

/* Global Container */
.ark-mythology-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem 5rem 1.5rem;
    color: var(--ark-text-primary);
    font-family: var(--ark-sans);
    background-color: var(--ark-bg-obsidian);
}

/* ==========================================================================
   1. CINEMATIC GROUP HERO (55-70vh on desktop)
   ========================================================================== */
.ark-group-hero {
    min-height: 60vh;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
    align-items: center;
    padding: 4.5rem 0 3.5rem 0;
    margin-bottom: 4rem;
    border-bottom: 1px solid var(--ark-gold-border);
    position: relative;
}

.ark-group-hero::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--myth-accent-glow) 0%, transparent 70%);
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}

.ark-group-hero-content {
    position: relative;
    z-index: 1;
}

.ark-group-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--ark-gold-primary);
    margin-bottom: 1.25rem;
}

.ark-group-breadcrumb a {
    color: var(--ark-gold-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ark-group-breadcrumb a:hover {
    color: var(--ark-gold-bright);
}

.ark-group-hero h1 {
    font-family: var(--ark-serif);
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    line-height: 1.08;
    color: var(--ark-gold-bright);
    margin: 0 0 1rem 0;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.ark-group-tagline {
    font-family: var(--ark-serif);
    font-style: italic;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.4;
    color: var(--myth-culture-color);
    margin-bottom: 1.5rem;
    border-left: 2px solid var(--ark-gold-primary);
    padding-left: 1.25rem;
}

.ark-group-desc {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ark-text-secondary);
    max-width: 620px;
    margin-bottom: 2rem;
}

.ark-group-stats-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.25rem;
}

.ark-stat-chip {
    background: rgba(21, 21, 24, 0.8);
    border: 1px solid var(--ark-gold-border);
    padding: 0.4rem 1rem;
    border-radius: 30px;
    font-size: 0.85rem;
    color: var(--ark-gold-primary);
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ark-stat-chip strong {
    color: #fff;
    font-weight: 600;
}

.ark-group-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.ark-btn-primary {
    background: linear-gradient(135deg, rgba(197, 167, 117, 0.25) 0%, rgba(140, 116, 73, 0.2) 100%);
    border: 1px solid var(--ark-gold-primary);
    color: var(--ark-gold-bright);
    padding: 0.9rem 1.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.ark-btn-primary:hover {
    background: linear-gradient(135deg, rgba(197, 167, 117, 0.4) 0%, rgba(140, 116, 73, 0.35) 100%);
    border-color: var(--ark-gold-bright);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(197, 167, 117, 0.2);
    color: #fff;
}

.ark-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--ark-text-secondary);
    padding: 0.9rem 1.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ark-btn-secondary:hover {
    border-color: var(--ark-gold-primary);
    color: var(--ark-gold-bright);
    background: rgba(255, 255, 255, 0.03);
}

/* Hero Visual Art Right Column */
.ark-group-hero-artwork {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 420px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--ark-gold-border);
    background: var(--ark-surface-dark);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   2. VISUAL PLACEHOLDER & ATMOSPHERIC ARTWORK ENGINE
   ========================================================================== */
.ark-myth-visual {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ark-aspect-3-4 {
    aspect-ratio: 3 / 4;
}

.ark-aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.ark-aspect-hero {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.ark-myth-visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 7, 8, 0) 40%, rgba(7, 7, 8, 0.95) 100%);
    pointer-events: none;
}

/* Placeholder Styling */
.ark-myth-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 35%, var(--myth-accent) 0%, #08080a 75%);
    position: relative;
}

.ark-placeholder-ambience {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(197, 167, 117, 0.06) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.8;
}

.ark-placeholder-art {
    position: relative;
    z-index: 1;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ark-gold-primary);
    filter: drop-shadow(0 0 20px var(--myth-accent-glow));
    transition: transform 0.5s ease;
}

.ark-glyph-svg {
    width: 100%;
    height: 100%;
}

.ark-placeholder-label {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    text-align: center;
}

.ark-placeholder-culture {
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ark-gold-muted);
    display: block;
    margin-bottom: 0.25rem;
}

.ark-placeholder-title {
    font-family: var(--ark-serif);
    font-size: 1.1rem;
    color: rgba(237, 236, 232, 0.8);
    display: block;
}

/* ==========================================================================
   3. CATEGORY FILTERS (Client-Side, Horizontal Ribbon)
   ========================================================================== */
.ark-filter-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    gap: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ark-filter-ribbon {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ark-filter-ribbon::-webkit-scrollbar {
    display: none;
}

.ark-filter-btn {
    background: rgba(21, 21, 24, 0.6);
    border: 1px solid rgba(197, 167, 117, 0.18);
    color: var(--ark-text-secondary);
    padding: 0.5rem 1.15rem;
    border-radius: 20px;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
    font-family: var(--ark-sans);
}

.ark-filter-btn:hover {
    border-color: var(--ark-gold-primary);
    color: var(--ark-gold-bright);
    background: rgba(197, 167, 117, 0.08);
}

.ark-filter-btn.is-active {
    background: rgba(197, 167, 117, 0.18);
    border-color: var(--ark-gold-bright);
    color: #fff;
    font-weight: 500;
    box-shadow: 0 0 15px rgba(197, 167, 117, 0.2);
}

.ark-filter-count {
    font-size: 0.85rem;
    color: var(--ark-text-tertiary);
    white-space: nowrap;
    letter-spacing: 1px;
}

/* ==========================================================================
   4. FIGURE CARDS (3:4 Cinematic Portrait Cards)
   ========================================================================== */
.ark-figures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 2.25rem;
    margin-bottom: 5rem;
}

.ark-figure-card {
    background: var(--ark-surface-card);
    border: 1px solid var(--ark-gold-border);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.ark-figure-card:hover {
    transform: translateY(-6px);
    border-color: var(--ark-gold-border-hover);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(197, 167, 117, 0.15);
}

.ark-figure-card:hover .ark-myth-visual {
    transform: scale(1.04);
}

.ark-figure-card:hover .ark-placeholder-art {
    transform: scale(1.08);
}

.ark-figure-visual-wrap {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background: #000;
}

.ark-figure-visual-wrap .ark-myth-visual {
    height: 100%;
}

.ark-figure-body {
    padding: 1.5rem 1.75rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    z-index: 2;
}

.ark-figure-meta-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.ark-chip-type {
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ark-gold-bright);
    background: rgba(197, 167, 117, 0.12);
    border: 1px solid rgba(197, 167, 117, 0.25);
    padding: 0.2rem 0.65rem;
    border-radius: 12px;
}

.ark-chip-tradition {
    font-size: 0.75rem;
    color: var(--ark-text-tertiary);
}

.ark-figure-name {
    font-family: var(--ark-serif);
    font-size: 1.85rem;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 0.75rem 0;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.ark-figure-card:hover .ark-figure-name {
    color: var(--ark-gold-bright);
}

.ark-figure-hook {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ark-text-secondary);
    margin-bottom: 1.25rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ark-figure-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.ark-mini-chip {
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--ark-text-secondary);
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
}

.ark-figure-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ark-card-action {
    color: var(--ark-gold-primary);
    text-decoration: none;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.ark-card-action span {
    transition: transform 0.2s ease;
}

.ark-figure-card:hover .ark-card-action {
    color: var(--ark-gold-bright);
}

.ark-figure-card:hover .ark-card-action span {
    transform: translateX(4px);
}

/* ==========================================================================
   5. DISCOVERY GATEWAY ("NEREDEN BAŞLAMAK İSTERSİN?")
   ========================================================================== */
.ark-discovery-gateway {
    margin: 5rem 0;
    padding: 3.5rem 2.5rem;
    background: radial-gradient(circle at 50% 0%, rgba(197, 167, 117, 0.07) 0%, rgba(16, 16, 18, 0.95) 75%);
    border: 1px solid var(--ark-gold-border);
    border-radius: 8px;
    text-align: center;
}

.ark-discovery-title {
    font-family: var(--ark-serif);
    font-size: 2.2rem;
    color: var(--ark-gold-bright);
    margin-bottom: 0.6rem;
    letter-spacing: 1px;
}

.ark-discovery-sub {
    color: var(--ark-text-secondary);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
}

.ark-discovery-paths {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.ark-discovery-card {
    background: rgba(21, 21, 24, 0.85);
    border: 1px solid var(--ark-gold-border);
    padding: 1.75rem 1.25rem;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.ark-discovery-card:hover {
    border-color: var(--ark-gold-bright);
    transform: translateY(-4px);
    background: rgba(30, 30, 34, 0.9);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(197, 167, 117, 0.15);
}

.ark-discovery-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(197, 167, 117, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ark-gold-bright);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.ark-discovery-card h4 {
    font-family: var(--ark-serif);
    font-size: 1.25rem;
    color: #fff;
    margin: 0 0 0.4rem 0;
}

.ark-discovery-card p {
    font-size: 0.85rem;
    color: var(--ark-text-tertiary);
    line-height: 1.4;
    margin: 0;
}

/* ==========================================================================
   6. MYTH / STORY SECTION (16:9 Cinematic Cards)
   ========================================================================== */
.ark-section-heading {
    margin-bottom: 2.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 1px solid var(--ark-gold-border);
    padding-bottom: 1rem;
}

.ark-section-heading h2 {
    font-family: var(--ark-serif);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    color: var(--ark-gold-bright);
    margin: 0;
    letter-spacing: 0.5px;
}

.ark-section-heading p {
    color: var(--ark-text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.ark-myths-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr));
    gap: 2.5rem;
    margin-bottom: 5rem;
}

.ark-myth-card {
    background: var(--ark-surface-card);
    border: 1px solid var(--ark-gold-border);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    position: relative;
}

.ark-myth-card:hover {
    transform: translateY(-5px);
    border-color: var(--ark-gold-border-hover);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(197, 167, 117, 0.15);
}

.ark-myth-visual-wrap {
    width: 100%;
    height: 220px;
    position: relative;
    overflow: hidden;
    background: #000;
}

.ark-myth-visual-wrap .ark-myth-visual {
    height: 100%;
}

.ark-myth-card:hover .ark-myth-visual {
    transform: scale(1.03);
}

.ark-myth-body {
    padding: 1.75rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ark-myth-badge {
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ark-gold-muted);
    margin-bottom: 0.6rem;
}

.ark-myth-title {
    font-family: var(--ark-serif);
    font-size: 1.85rem;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 0.9rem 0;
    transition: color 0.2s ease;
}

.ark-myth-card:hover .ark-myth-title {
    color: var(--ark-gold-bright);
}

.ark-myth-premise {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--ark-text-secondary);
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.ark-myth-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   7. FIGURE DETAIL PAGE (13-Stage Editorial Sanctuary)
   ========================================================================== */
.ark-figure-hero-single {
    display: grid;
    grid-template-columns: 42% 58%;
    gap: 4rem;
    align-items: center;
    padding: 3.5rem 0 4rem 0;
    border-bottom: 1px solid var(--ark-gold-border);
    margin-bottom: 4rem;
}

.ark-figure-single-artwork {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--ark-gold-primary);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px var(--myth-accent-glow);
    aspect-ratio: 3 / 4;
}

.ark-figure-single-artwork .ark-myth-visual {
    height: 100%;
}

.ark-figure-single-info h1 {
    font-family: var(--ark-serif);
    font-size: clamp(2.8rem, 4.5vw, 4.2rem);
    line-height: 1.05;
    color: var(--ark-gold-bright);
    margin: 0 0 0.8rem 0;
    font-weight: 600;
}

.ark-figure-single-hook {
    font-family: var(--ark-serif);
    font-style: italic;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    line-height: 1.45;
    color: var(--myth-culture-color);
    margin-bottom: 1.5rem;
    border-left: 2px solid var(--ark-gold-primary);
    padding-left: 1.25rem;
}

.ark-figure-single-desc {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--ark-text-secondary);
    margin-bottom: 2rem;
}

/* 30-Second Overview Block */
.ark-glimpse-capsule {
    background: radial-gradient(circle at 0% 0%, rgba(197, 167, 117, 0.12) 0%, rgba(20, 20, 24, 0.95) 75%);
    border: 1px solid var(--ark-gold-border);
    border-left: 4px solid var(--ark-gold-primary);
    padding: 2rem 2.25rem;
    border-radius: 6px;
    margin: 0 auto 4rem auto;
    max-width: 840px;
}

.ark-glimpse-label {
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ark-gold-bright);
    margin-bottom: 0.6rem;
    font-weight: 600;
}

.ark-glimpse-text {
    font-family: var(--ark-serif);
    font-size: 1.35rem;
    line-height: 1.6;
    color: #fff;
    margin: 0;
}

/* Editorial Content Column */
.ark-editorial-column {
    max-width: 780px;
    margin: 0 auto 5rem auto;
    font-size: 1.12rem;
    line-height: 1.85;
    color: var(--ark-text-primary);
}

.ark-editorial-column p {
    margin-bottom: 1.8rem;
}

.ark-editorial-column h2,
.ark-editorial-column h3 {
    font-family: var(--ark-serif);
    color: var(--ark-gold-bright);
    margin: 3rem 0 1.25rem 0;
    line-height: 1.2;
}

.ark-editorial-column h2 {
    font-size: 2.2rem;
    border-bottom: 1px solid rgba(197, 167, 117, 0.2);
    padding-bottom: 0.5rem;
}

/* Modern Archetype Reading Block */
.ark-archetype-section {
    max-width: 840px;
    margin: 0 auto 5rem auto;
    background: rgba(18, 18, 22, 0.85);
    border: 1px solid var(--ark-gold-border);
    border-radius: 8px;
    padding: 2.5rem;
}

.ark-archetype-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(197, 167, 117, 0.2);
    padding-bottom: 1rem;
}

.ark-archetype-header h2 {
    font-family: var(--ark-serif);
    font-size: 2rem;
    color: var(--ark-gold-bright);
    margin: 0;
}

.ark-disclaimer-badge {
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(197, 167, 117, 0.12);
    border: 1px solid rgba(197, 167, 117, 0.25);
    color: var(--ark-gold-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

/* Symbol Medallions */
.ark-symbols-medallion-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.ark-symbol-pill {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ark-gold-border);
    padding: 0.5rem 1.15rem;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--ark-gold-bright);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.ark-symbol-pill:hover {
    background: rgba(197, 167, 117, 0.1);
    border-color: var(--ark-gold-bright);
}

/* ==========================================================================
   8. MYTH DETAIL SINGLE PAGE
   ========================================================================== */
.ark-myth-hero-single {
    padding: 4.5rem 0 3.5rem 0;
    border-bottom: 1px solid var(--ark-gold-border);
    margin-bottom: 4rem;
    text-align: center;
    position: relative;
}

.ark-myth-hero-single h1 {
    font-family: var(--ark-serif);
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    line-height: 1.1;
    color: var(--ark-gold-bright);
    margin: 0 auto 1.25rem auto;
    max-width: 900px;
}

.ark-myth-hero-single .ark-myth-summary-lead {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--ark-text-secondary);
    max-width: 780px;
    margin: 0 auto 2rem auto;
}

/* Dramatis Personae Grid */
.ark-dramatis-personae {
    max-width: 780px;
    margin: 0 auto 4rem auto;
    padding: 1.75rem;
    background: rgba(21, 21, 24, 0.6);
    border: 1px solid var(--ark-gold-border);
    border-radius: 6px;
}

.ark-dramatis-personae h3 {
    font-family: var(--ark-serif);
    font-size: 1.25rem;
    color: var(--ark-gold-primary);
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ark-personae-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ark-personae-link {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(197, 167, 117, 0.25);
    color: #fff;
    padding: 0.45rem 1rem;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ark-personae-link:hover {
    background: rgba(197, 167, 117, 0.15);
    border-color: var(--ark-gold-bright);
    color: var(--ark-gold-bright);
}

/* ==========================================================================
   10. PANTHEON TREE / COSMIC ORDER MAP
   ========================================================================== */
.ark-pantheon-tree-section {
    margin: 2.5rem 0 5rem 0;
    padding: 3.5rem 2rem 4rem 2rem;
    background: radial-gradient(ellipse at 50% 12%, rgba(44, 74, 111, 0.22) 0%, rgba(16, 16, 20, 0.7) 45%, var(--ark-bg-obsidian) 85%);
    border: 1px solid var(--ark-gold-border);
    border-radius: 20px;
    position: relative;
    overflow: visible;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
}

.ark-tree-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 3.5rem auto;
}

.ark-tree-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--ark-gold-bright);
    margin-bottom: 0.85rem;
}

.ark-tree-header h2 {
    font-family: var(--ark-serif);
    font-size: 2.6rem;
    color: var(--ark-text-primary);
    margin: 0 0 1rem 0;
    letter-spacing: -0.5px;
    font-weight: 400;
}

.ark-tree-disclaimer {
    font-size: 0.95rem;
    color: var(--ark-text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* Connection & Realm Legend */
.ark-tree-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto 3rem auto;
    padding: 0.65rem 1.6rem;
    background: rgba(14, 14, 18, 0.7);
    border: 1px solid rgba(197, 167, 117, 0.22);
    border-radius: 30px;
    backdrop-filter: blur(8px);
}

.ark-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    color: var(--ark-text-secondary);
    letter-spacing: 0.3px;
}

.ark-legend-indicator {
    display: inline-block;
    width: 20px;
    height: 2px;
}

.ark-ind-solid {
    background: var(--ark-gold-primary);
}

.ark-ind-dotted {
    border-top: 2px dotted var(--ark-gold-primary);
    height: 0;
}

.ark-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ark-ind-sky {
    background: #8faec9;
    box-shadow: 0 0 6px #8faec9;
}

.ark-ind-primordial {
    background: #5cc2e0;
    box-shadow: 0 0 6px #5cc2e0;
}

.ark-ind-middle {
    background: var(--ark-gold-bright);
    box-shadow: 0 0 6px var(--ark-gold-bright);
}

.ark-ind-underworld {
    background: #e55050;
    box-shadow: 0 0 6px #e55050;
}

/* Tradition & Source Badges on Nodes */
.ark-node-tradition {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(197, 167, 117, 0.25);
    color: var(--ark-gold-muted);
    margin-bottom: 0.65rem;
    transition: all 0.25s ease;
}

.ark-badge-variant {
    border-color: rgba(229, 199, 142, 0.55);
    color: var(--ark-gold-bright);
    background: rgba(197, 167, 117, 0.12);
}

.ark-badge-underworld {
    border-color: rgba(200, 70, 70, 0.4);
    color: #e59090;
    background: rgba(90, 20, 20, 0.2);
}

.ark-tree-node:hover .ark-node-tradition,
.ark-tree-node.is-active .ark-node-tradition {
    border-color: var(--ark-gold-bright);
    color: var(--ark-gold-bright);
}

/* Canvas & Realms */
.ark-pantheon-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.ark-tree-realm {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.ark-realm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.25rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.85rem;
    border: 1px solid rgba(197, 167, 117, 0.3);
    background: rgba(14, 14, 17, 0.92);
    backdrop-filter: blur(8px);
}

.ark-realm-sky .ark-realm-badge {
    border-color: rgba(143, 174, 201, 0.45);
    color: #a8cded;
}
.ark-realm-sky .ark-realm-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8faec9;
    box-shadow: 0 0 10px #8faec9;
}

.ark-realm-primordial .ark-realm-badge {
    border-color: rgba(92, 194, 224, 0.45);
    color: #8ee0f7;
    background: rgba(12, 20, 26, 0.92);
}
.ark-realm-primordial .ark-realm-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5cc2e0;
    box-shadow: 0 0 10px #5cc2e0;
}

.ark-realm-middle .ark-realm-badge {
    border-color: rgba(197, 167, 117, 0.5);
    color: var(--ark-gold-bright);
}
.ark-realm-middle .ark-realm-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ark-gold-bright);
    box-shadow: 0 0 10px var(--ark-gold-bright);
}

.ark-realm-underworld .ark-realm-badge {
    border-color: rgba(200, 70, 70, 0.4);
    color: #e59090;
}
.ark-realm-underworld .ark-realm-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e55050;
    box-shadow: 0 0 10px #e55050;
}

/* Realm Nodes Rows */
.ark-realm-nodes {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1.5rem;
    width: 100%;
    flex-wrap: wrap;
}

/* Node Elements */
.ark-tree-node {
    position: relative;
    background: rgba(18, 18, 22, 0.85);
    border: 1px solid rgba(197, 167, 117, 0.25);
    border-radius: 14px;
    padding: 1.35rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    outline: none;
}

.ark-tree-node:focus-visible {
    box-shadow: 0 0 0 2px var(--ark-gold-bright);
}

.ark-node-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.ark-node-glyph {
    font-size: 1.55rem;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.ark-node-name {
    font-family: var(--ark-serif);
    font-size: 1.38rem;
    color: var(--ark-text-primary);
    margin: 0 0 0.3rem 0;
    letter-spacing: 0.2px;
    font-weight: 500;
    transition: color 0.25s ease;
}

.ark-node-role {
    font-size: 0.78rem;
    color: var(--ark-gold-muted);
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Node Variations */
/* Supreme Node: Kök Tengri */
.ark-node-supreme {
    min-width: 260px;
    padding: 1.7rem 2.2rem;
    border-color: rgba(229, 199, 142, 0.55);
    background: radial-gradient(circle at 50% 20%, rgba(44, 74, 111, 0.45) 0%, rgba(18, 18, 24, 0.95) 75%);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(197, 167, 117, 0.15);
}
.ark-node-supreme .ark-node-name {
    font-size: 1.75rem;
    color: #fff;
}
.ark-node-supreme .ark-node-role {
    color: var(--ark-gold-bright);
    font-size: 0.85rem;
}
.ark-node-icon-circle {
    width: 48px;
    height: 48px;
    margin-bottom: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ark-node-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 6px rgba(229, 199, 142, 0.4));
}

/* Major Nodes: Ülgen, Umay, Yer-Su */
.ark-node-major {
    min-width: 220px;
    flex: 1;
    max-width: 260px;
}
.ark-node-highlight {
    border-color: rgba(229, 199, 142, 0.5);
    background: radial-gradient(circle at 50% 10%, rgba(197, 167, 117, 0.18) 0%, rgba(18, 18, 22, 0.92) 70%);
}

/* Satellite & Sub Nodes */
.ark-node-satellite, .ark-node-sub {
    min-width: 190px;
    opacity: 0.92;
    border-style: dashed;
    background: rgba(14, 14, 17, 0.75);
}

/* Primordial Cosmogonic Threshold Node: Ak Ana */
.ark-node-primordial {
    min-width: 220px;
    max-width: 260px;
    border-style: dashed;
    border-color: rgba(92, 194, 224, 0.45);
    background: radial-gradient(circle at 50% 15%, rgba(25, 65, 90, 0.35) 0%, rgba(12, 18, 24, 0.9) 75%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(92, 194, 224, 0.15);
}
.ark-node-primordial:hover,
.ark-node-primordial.is-active {
    border-color: #7ddbf5;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(92, 194, 224, 0.35);
}
.ark-node-primordial .ark-node-name {
    font-size: 1.35rem;
}

/* Underworld: Erlik */
.ark-node-underworld {
    min-width: 250px;
    border-color: rgba(180, 60, 60, 0.45);
    background: radial-gradient(circle at 50% 20%, rgba(90, 20, 20, 0.35) 0%, rgba(16, 12, 14, 0.96) 75%);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(180, 50, 50, 0.15);
}
.ark-node-underworld .ark-node-name {
    font-size: 1.65rem;
    color: #fce4e4;
}
.ark-underworld-circle {
    color: #e57070;
}
.ark-node-kormos {
    border-color: rgba(120, 50, 50, 0.3);
}

/* Hover & Active States */
.ark-tree-node:hover,
.ark-tree-node.is-active {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--ark-gold-bright);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(197, 167, 117, 0.35);
}

.ark-tree-node:hover .ark-node-name,
.ark-tree-node.is-active .ark-node-name {
    color: var(--ark-gold-bright);
}

.ark-node-underworld:hover,
.ark-node-underworld.is-active {
    border-color: #f87171;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(239, 68, 68, 0.35);
}

/* Connectors / Spine */
.ark-tree-spine {
    width: 100%;
    max-width: 480px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    pointer-events: none;
}
.ark-spine-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Popovers / Tooltips */
.ark-node-popover {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 270px;
    background: #0f0f13;
    border: 1px solid var(--ark-gold-primary);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.92), 0 0 20px rgba(197, 167, 117, 0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 50;
    text-align: left;
}

/* Popover Arrow */
.ark-node-popover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 7px;
    border-style: solid;
    border-color: var(--ark-gold-primary) transparent transparent transparent;
}

/* Underworld realm popover placement */
.ark-realm-underworld .ark-node-popover {
    bottom: auto;
    top: calc(100% + 14px);
}
.ark-realm-underworld .ark-node-popover::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent var(--ark-gold-primary) transparent;
}

/* Popover Content */
.ark-popover-variant-flag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--ark-gold-bright);
    border: 1px solid rgba(229, 199, 142, 0.5);
    background: rgba(229, 199, 142, 0.12);
    padding: 0.12rem 0.45rem;
    border-radius: 3px;
    margin-bottom: 0.5rem;
}

.ark-node-popover strong {
    display: block;
    font-family: var(--ark-serif);
    font-size: 1.2rem;
    color: var(--ark-gold-bright);
    margin-bottom: 0.35rem;
    line-height: 1.2;
}

.ark-popover-source {
    display: block;
    font-size: 0.72rem;
    color: var(--ark-text-tertiary);
    margin-bottom: 0.25rem;
    font-style: italic;
    line-height: 1.4;
}

.ark-popover-role {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ark-gold-muted);
    margin-bottom: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ark-popover-desc {
    font-size: 0.82rem;
    color: var(--ark-text-primary);
    line-height: 1.55;
    margin: 0 0 0.85rem 0;
}

.ark-popover-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ark-gold-bright);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(229, 199, 142, 0.4);
    padding-bottom: 1px;
    transition: all 0.2s ease;
}

.ark-popover-link:hover {
    border-color: var(--ark-gold-bright);
    color: #fff;
    transform: translateX(2px);
}

.ark-popover-tag {
    display: inline-block;
    font-size: 0.72rem;
    color: var(--ark-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Show Popover on Hover or .is-active */
.ark-tree-node:hover .ark-node-popover,
.ark-tree-node:focus-within .ark-node-popover,
.ark-tree-node.is-active .ark-node-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Footer & Review Drawer */
.ark-tree-footer-info {
    text-align: center;
    margin-top: 3.5rem;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.ark-tree-footer-hint {
    font-size: 0.84rem;
    color: var(--ark-text-tertiary);
    letter-spacing: 0.4px;
    margin-bottom: 1.25rem;
}

.ark-tree-review-drawer {
    background: rgba(14, 14, 18, 0.75);
    border: 1px solid rgba(197, 167, 117, 0.2);
    border-radius: 12px;
    padding: 1.1rem 1.5rem;
    text-align: left;
    font-size: 0.82rem;
    color: var(--ark-text-secondary);
    line-height: 1.6;
}

.ark-review-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ark-gold-bright);
    border: 1px solid rgba(197, 167, 117, 0.35);
    background: rgba(197, 167, 117, 0.08);
    border-radius: 12px;
    padding: 0.2rem 0.65rem;
    margin-bottom: 0.5rem;
}

.ark-tree-review-drawer p {
    margin: 0;
}

/* ==========================================================================
   11. GREEK PANTHEON (YUNAN PANTEONU - INTERACTIVE GENEALOGY MAP)
   ========================================================================== */
.ark-pantheon-greek {
    background: radial-gradient(ellipse at 50% 10%, rgba(30, 58, 138, 0.25) 0%, rgba(16, 18, 26, 0.75) 45%, var(--ark-bg-obsidian) 85%);
    border-color: rgba(197, 167, 117, 0.28);
}

.ark-tree-intro {
    font-size: 1.08rem;
    color: var(--ark-text-primary);
    line-height: 1.6;
    margin: 0 0 0.85rem 0;
    font-style: italic;
    font-family: var(--ark-serif);
}

/* Domain Filter Ribbon (Compact) */
.ark-greek-domain-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 auto 1.5rem auto;
    max-width: 920px;
    padding: 0.4rem 0.6rem;
    background: rgba(14, 16, 24, 0.85);
    border: 1px solid rgba(197, 167, 117, 0.22);
    border-radius: 30px;
    backdrop-filter: blur(10px);
}

.ark-domain-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ark-text-secondary);
    padding: 0.35rem 0.85rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ark-domain-btn:hover {
    color: var(--ark-gold-bright);
    background: rgba(197, 167, 117, 0.08);
}

.ark-domain-btn.is-active {
    background: rgba(197, 167, 117, 0.2);
    border-color: var(--ark-gold-bright);
    color: var(--ark-gold-bright);
    box-shadow: 0 2px 10px rgba(197, 167, 117, 0.25);
}

/* Greek Legend Indicators (Compact & Clearer) */
.ark-greek-legend {
    margin-bottom: 2rem;
}

.ark-ind-double {
    display: inline-block;
    width: 22px;
    height: 6px;
    border-top: 1.8px solid var(--ark-gold-bright);
    border-bottom: 1.8px solid var(--ark-gold-bright);
}

.ark-ind-blue-gold {
    background: linear-gradient(90deg, #3b82f6, var(--ark-gold-primary));
}

.ark-ind-burgundy {
    background: #a8324b;
    box-shadow: 0 0 6px rgba(168, 50, 75, 0.6);
}

.ark-ind-conflict {
    border-top: 2px dashed #ea580c;
    height: 0;
}

/* Greek Layers & Layout (Height Optimized 20-30%) */
.ark-greek-canvas {
    max-width: 1180px;
    margin: 0 auto;
    gap: 1.25rem;
}

.ark-greek-layer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-bottom: 0.5rem;
}

.ark-layer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 1.1rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    background: rgba(14, 16, 22, 0.95);
    border: 1px solid rgba(197, 167, 117, 0.35);
    color: var(--ark-gold-bright);
    backdrop-filter: blur(8px);
}

.ark-layer-roman {
    color: var(--ark-gold-bright);
    font-family: var(--ark-serif);
    font-size: 0.9rem;
}

.ark-badge-chthonic {
    border-color: rgba(168, 50, 75, 0.55);
    color: #fca5a5;
    background: rgba(168, 50, 75, 0.12);
}

.ark-badge-titan-threshold {
    border-color: rgba(234, 88, 12, 0.6);
    color: #fb923c;
    background: rgba(234, 88, 12, 0.12);
}

/* Layer 1: Context Root */
.ark-context-root-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.ark-context-node {
    background: rgba(18, 18, 24, 0.65);
    border: 1px dashed rgba(197, 167, 117, 0.35);
    border-radius: 10px;
    padding: 0.6rem 1.15rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    cursor: default;
    user-select: none;
    min-width: 130px;
}

.ark-context-tag {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--ark-gold-muted);
    text-transform: uppercase;
}

.ark-node-glyph-context {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.2rem 0;
    color: var(--ark-gold-bright);
}

.ark-node-glyph-context svg {
    width: 22px;
    height: 22px;
}

.ark-context-name {
    font-family: var(--ark-serif);
    font-size: 1.1rem;
    color: var(--ark-text-primary);
    line-height: 1.2;
}

.ark-context-greek {
    font-family: var(--ark-serif);
    font-size: 0.75rem;
    font-style: italic;
    color: rgba(229, 199, 142, 0.6);
}

.ark-context-sub {
    font-size: 0.68rem;
    color: var(--ark-text-tertiary);
}

.ark-context-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.ark-double-line {
    width: 26px;
    height: 6px;
    border-top: 1.8px solid var(--ark-gold-bright);
    border-bottom: 1.8px solid var(--ark-gold-bright);
}

.ark-connector-label {
    font-size: 0.6rem;
    letter-spacing: 1px;
    color: var(--ark-gold-bright);
    font-weight: 700;
}

/* Layer 2: All 6 Siblings in Generation II */
.ark-nodes-kronides-v2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    flex-wrap: wrap;
}

.ark-node-context-sibling {
    background: rgba(18, 18, 24, 0.7);
    border: 1px dashed rgba(197, 167, 117, 0.45);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    width: 165px;
    min-height: 175px;
    cursor: default;
}

.ark-node-context-sibling:hover {
    border-color: var(--ark-gold-bright);
    box-shadow: 0 4px 16px rgba(197, 167, 117, 0.15);
}

.ark-node-hades-sibling {
    border-color: rgba(168, 50, 75, 0.55) !important;
    background: radial-gradient(circle at 50% 15%, rgba(168, 50, 75, 0.2) 0%, rgba(16, 12, 18, 0.95) 75%) !important;
}

.ark-node-hades-sibling:hover {
    border-color: #fca5a5 !important;
    box-shadow: 0 0 20px rgba(168, 50, 75, 0.35) !important;
}

.ark-marital-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.25rem;
}

.ark-double-gold-line {
    width: 28px;
    height: 6px;
    border-top: 1.8px solid var(--ark-gold-bright);
    border-bottom: 1.8px solid var(--ark-gold-bright);
}

.ark-bridge-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--ark-gold-bright);
    text-transform: uppercase;
}

/* Custom SVG Glyph in Nodes */
.ark-node-glyph-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.4rem;
    color: var(--ark-gold-bright);
    transition: all 0.3s ease;
}

.ark-node-glyph-svg svg {
    width: 28px;
    height: 28px;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.ark-tree-node:hover .ark-node-glyph-svg svg {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(229, 199, 142, 0.6));
}

.ark-glyph-supreme svg {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 0 8px rgba(229, 199, 142, 0.4));
}

.ark-glyph-fire svg {
    color: #fb923c;
    filter: drop-shadow(0 0 8px rgba(234, 88, 12, 0.5));
}

/* Node Visual Hierarchy */
.ark-node-supreme {
    width: 225px;
    min-height: 215px;
    border: 1.5px solid var(--ark-gold-bright);
    background: radial-gradient(circle at 50% 20%, rgba(30, 58, 138, 0.35) 0%, rgba(18, 18, 24, 0.98) 75%);
    box-shadow: 0 0 24px rgba(197, 167, 117, 0.22);
}

.ark-node-supreme .ark-node-name {
    font-size: 1.55rem;
    color: #fff;
    font-weight: 600;
}

.ark-node-major {
    width: 185px;
    min-height: 195px;
}

.ark-node-major .ark-node-name {
    font-size: 1.25rem;
}

.ark-node-standard {
    width: 175px;
    min-height: 185px;
}

.ark-node-standard .ark-node-name {
    font-size: 1.15rem;
}

.ark-node-titan {
    width: 230px;
    min-height: 200px;
    border-color: rgba(234, 88, 12, 0.6) !important;
    background: radial-gradient(circle at 50% 15%, rgba(180, 60, 20, 0.35) 0%, rgba(18, 14, 16, 0.95) 75%) !important;
}

.ark-node-titan .ark-node-name {
    font-size: 1.35rem;
    color: #fff;
}

.ark-aura-titan-fire {
    background: radial-gradient(circle, rgba(234, 88, 12, 0.3) 0%, transparent 70%);
}

/* Greek Node Subtitles: Subdued so Latin Display Name Prevails */
.ark-node-greek-title {
    font-family: var(--ark-serif);
    font-size: 0.82rem;
    font-style: italic;
    color: rgba(229, 199, 142, 0.6);
    margin-top: -0.15rem;
    margin-bottom: 0.3rem;
    letter-spacing: 0.5px;
}

/* Layer 3: Second Generation Grid (Slightly more compact) */
.ark-greek-nodes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    width: 100%;
}

@media (max-width: 1080px) {
    .ark-greek-nodes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Aphrodite Dual Origin Styling */
.ark-node-aphrodite {
    border-color: rgba(197, 167, 117, 0.45);
    background: linear-gradient(135deg, rgba(30, 80, 110, 0.3) 0%, rgba(18, 18, 24, 0.95) 50%, rgba(120, 90, 40, 0.25) 100%);
    position: relative;
    overflow: hidden;
}

.ark-badge-dual {
    background: linear-gradient(90deg, rgba(60, 150, 190, 0.25), rgba(212, 175, 55, 0.25));
    border-color: var(--ark-gold-bright);
    color: #fff;
    font-weight: 700;
}

.ark-badge-variant {
    border-color: rgba(197, 167, 117, 0.45);
    color: var(--ark-gold-bright);
    background: rgba(197, 167, 117, 0.1);
}

.ark-badge-underworld {
    border-color: rgba(168, 50, 75, 0.6);
    color: #fca5a5;
    background: rgba(168, 50, 75, 0.18);
}

.ark-badge-persephone {
    border-color: rgba(180, 80, 100, 0.45);
    color: #fca5a5;
    background: rgba(180, 80, 100, 0.15);
}

.ark-badge-titan {
    border-color: #ea580c;
    color: #fb923c;
    background: rgba(234, 88, 12, 0.15);
}

/* Layer 4: Persephone Relational Triangle UI */
.ark-triangle-guide-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
    width: 100%;
    max-width: 780px;
    flex-wrap: wrap;
}

.ark-triangle-branch {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border-radius: 18px;
    background: rgba(14, 16, 22, 0.85);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.ark-branch-demeter {
    border: 1px solid rgba(212, 180, 120, 0.4);
    color: #e5c78e;
}

.ark-branch-hades {
    border: 1px solid rgba(168, 50, 75, 0.45);
    color: #fca5a5;
}

.ark-dot-amber {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e5c78e;
    box-shadow: 0 0 6px #e5c78e;
}

.ark-dot-burgundy {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e57070;
    box-shadow: 0 0 6px #e57070;
}

.ark-triangle-connector-svg {
    display: flex;
    align-items: center;
    width: 140px;
}

.ark-nodes-chthonic-center,
.ark-nodes-titan-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Layer 5: Prometheus Conflict Architecture */
.ark-conflict-spine-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
    width: 100%;
    max-width: 580px;
}

.ark-conflict-line {
    flex: 1;
    height: 0;
    border-top: 1.8px dashed rgba(234, 88, 12, 0.65);
}

.ark-conflict-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    color: #fb923c;
    background: rgba(234, 88, 12, 0.15);
    border: 1px solid rgba(234, 88, 12, 0.4);
    border-radius: 12px;
    padding: 0.25rem 0.75rem;
    text-transform: uppercase;
}

/* Interactive Domain Filtering States (3-Tier) */
.ark-tree-node.is-domain-match {
    opacity: 1 !important;
    filter: none !important;
    border-color: var(--ark-gold-bright) !important;
    box-shadow: 0 0 22px rgba(197, 167, 117, 0.4) !important;
    transform: translateY(-2px);
    z-index: 5;
}

.ark-tree-node.is-domain-connected {
    opacity: 0.72 !important;
    filter: none !important;
    border-color: rgba(197, 167, 117, 0.45) !important;
}

.ark-tree-node.is-domain-dimmed {
    opacity: 0.22 !important;
    filter: grayscale(60%) !important;
    transform: scale(0.98);
    transition: all 0.3s ease;
}

/* Spines slightly faint while filtering */
.ark-greek-canvas.is-filtering .ark-spine-svg {
    opacity: 0.35;
}

/* ==========================================================================
   FIGURE FALLBACK VISUALS & GREEK HERO ARCHITECTURAL ATMOSPHERE
   ========================================================================== */
.ark-hero-architectural {
    position: relative;
    overflow: hidden;
}

.ark-hero-architectural-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ark-placeholder-figure .ark-glyph-svg {
    width: 90px;
    height: 90px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ark-figure-card:hover .ark-placeholder-figure .ark-glyph-svg {
    transform: scale(1.1);
}

/* Individual Card Gradient Atmospheres */
.ark-fig-zeus .ark-placeholder-ambience {
    background: radial-gradient(circle at 50% 30%, rgba(30, 58, 138, 0.5) 0%, rgba(13, 20, 38, 0.95) 75%);
}
.ark-fig-hera .ark-placeholder-ambience {
    background: radial-gradient(circle at 50% 30%, rgba(88, 28, 135, 0.45) 0%, rgba(16, 12, 28, 0.95) 75%);
}
.ark-fig-poseidon .ark-placeholder-ambience {
    background: radial-gradient(circle at 50% 30%, rgba(14, 116, 144, 0.5) 0%, rgba(6, 26, 40, 0.95) 75%);
}
.ark-fig-demeter .ark-placeholder-ambience {
    background: radial-gradient(circle at 50% 30%, rgba(161, 98, 7, 0.45) 0%, rgba(28, 22, 10, 0.95) 75%);
}
.ark-fig-hades .ark-placeholder-ambience {
    background: radial-gradient(circle at 50% 30%, rgba(127, 29, 29, 0.4) 0%, rgba(14, 8, 14, 0.95) 75%);
}
.ark-fig-persephone .ark-placeholder-ambience {
    background: radial-gradient(circle at 50% 30%, rgba(190, 24, 93, 0.4) 0%, rgba(14, 20, 16, 0.95) 75%);
}
.ark-fig-athena .ark-placeholder-ambience {
    background: radial-gradient(circle at 50% 30%, rgba(30, 64, 175, 0.45) 0%, rgba(12, 18, 34, 0.95) 75%);
}
.ark-fig-apollo .ark-placeholder-ambience {
    background: radial-gradient(circle at 50% 30%, rgba(202, 138, 4, 0.5) 0%, rgba(32, 24, 8, 0.95) 75%);
}
.ark-fig-artemis .ark-placeholder-ambience {
    background: radial-gradient(circle at 50% 30%, rgba(13, 148, 136, 0.4) 0%, rgba(8, 24, 22, 0.95) 75%);
}
.ark-fig-ares .ark-placeholder-ambience {
    background: radial-gradient(circle at 50% 30%, rgba(185, 28, 28, 0.45) 0%, rgba(28, 10, 10, 0.95) 75%);
}
.ark-fig-hermes .ark-placeholder-ambience {
    background: radial-gradient(circle at 50% 30%, rgba(71, 85, 105, 0.5) 0%, rgba(16, 22, 32, 0.95) 75%);
}
.ark-fig-hephaestus .ark-placeholder-ambience {
    background: radial-gradient(circle at 50% 30%, rgba(194, 65, 12, 0.45) 0%, rgba(30, 14, 6, 0.95) 75%);
}
.ark-fig-dionysus .ark-placeholder-ambience {
    background: radial-gradient(circle at 50% 30%, rgba(126, 34, 206, 0.45) 0%, rgba(22, 10, 30, 0.95) 75%);
}
.ark-fig-aphrodite .ark-placeholder-ambience {
    background: radial-gradient(circle at 50% 30%, rgba(219, 39, 119, 0.35) 0%, rgba(24, 14, 24, 0.95) 75%);
}
.ark-fig-prometheus .ark-placeholder-ambience {
    background: radial-gradient(circle at 50% 30%, rgba(234, 88, 12, 0.5) 0%, rgba(32, 12, 6, 0.95) 75%);
}

/* Family Network Highlight */
.ark-tree-node.is-family-origin {
    border-color: var(--ark-gold-bright) !important;
    box-shadow: 0 0 30px rgba(229, 199, 142, 0.5) !important;
    transform: translateY(-5px) scale(1.03) !important;
    z-index: 10;
}

.ark-tree-node.is-family-member {
    border-color: rgba(229, 199, 142, 0.85) !important;
    box-shadow: 0 0 20px rgba(197, 167, 117, 0.3) !important;
    transform: translateY(-2px);
    opacity: 1 !important;
    filter: none !important;
}

.ark-tree-node.is-family-dimmed {
    opacity: 0.18 !important;
    filter: grayscale(70%) !important;
    transition: all 0.3s ease;
}

/* ==========================================================================
   9. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
    .ark-group-hero {
        grid-template-columns: 1fr;
        gap: 3rem;
        min-height: auto;
        padding: 3rem 0;
    }
    .ark-group-hero-artwork {
        min-height: 320px;
    }
    .ark-figure-hero-single {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .ark-figure-single-artwork {
        max-width: 380px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .ark-mythology-container {
        padding: 0 1rem 4rem 1rem;
    }
    .ark-group-hero h1 {
        font-size: 2.6rem;
    }
    .ark-group-tagline {
        font-size: 1.2rem;
    }
    .ark-figures-grid {
        grid-template-columns: 1fr;
    }
    .ark-myths-grid {
        grid-template-columns: 1fr;
    }
    .ark-filter-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .ark-section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .ark-discovery-paths {
        grid-template-columns: 1fr 1fr;
    }

    /* Pantheon Tree Mobile Styles */
    .ark-pantheon-tree-section {
        padding: 2.2rem 1.1rem 2.8rem 1.1rem;
        margin: 1.5rem 0 3.5rem 0;
    }
    
    .ark-tree-header h2 {
        font-size: 2rem;
    }

    .ark-tree-legend {
        border-radius: 14px;
        gap: 0.75rem 1.25rem;
        padding: 0.85rem 1rem;
        justify-content: flex-start;
    }

    .ark-pantheon-canvas {
        gap: 2.2rem;
        position: relative;
        padding-left: 1.5rem;
    }

    /* Vertical Timeline Spine Line on Mobile */
    .ark-pantheon-canvas::before {
        content: '';
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 6px;
        width: 2px;
        background: linear-gradient(to bottom, #8faec9, var(--ark-gold-primary), #e55050);
        opacity: 0.45;
    }

    .ark-tree-spine {
        display: none;
    }

    .ark-tree-realm {
        align-items: flex-start;
        width: 100%;
    }

    .ark-realm-badge {
        margin-bottom: 1.25rem;
        font-size: 0.7rem;
    }

    .ark-realm-nodes {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .ark-tree-node {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        text-align: left;
        align-items: flex-start;
        padding: 1.15rem 1.25rem;
    }

    .ark-node-inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 0.35rem;
        width: 100%;
    }

    .ark-node-tradition {
        margin-bottom: 0.35rem;
    }

    .ark-node-glyph,
    .ark-node-icon-circle {
        margin-bottom: 0.25rem;
        flex-shrink: 0;
    }

    .ark-node-supreme .ark-node-name {
        font-size: 1.4rem;
    }

    /* Popover on Mobile: Inline accordion style */
    .ark-node-popover {
        position: static;
        transform: none !important;
        width: 100%;
        margin-top: 0.85rem;
        display: none;
        box-shadow: none;
        border-left: 2px solid var(--ark-gold-primary);
        border-top: none;
        border-right: none;
        border-bottom: none;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.03);
        padding: 0.75rem 0.5rem 0.5rem 0.75rem;
    }

    .ark-node-popover::after {
        display: none;
    }

    .ark-tree-node.is-active .ark-node-popover {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Greek Pantheon Mobile Rules */
    .ark-greek-domain-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 0.6rem 0.8rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ark-greek-domain-filters::-webkit-scrollbar {
        display: none;
    }
    .ark-greek-nodes-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .ark-greek-nodes-row,
    .ark-nodes-chthonic {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }
    .ark-marital-bridge,
    .ark-underworld-bridge {
        margin: 0.4rem 0;
    }
    .ark-context-root-row {
        flex-direction: column;
        width: 100%;
    }
    .ark-context-node {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .ark-discovery-paths {
        grid-template-columns: 1fr;
    }
    .ark-btn-primary, .ark-btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   12. EGYPTIAN DIVINE SYSTEM MAP (MISIR'IN İLAHİ DÜZENİ)
   ========================================================================== */
.ark-pantheon-egyptian {
    background: radial-gradient(ellipse at 50% 8%, rgba(16, 42, 67, 0.4) 0%, rgba(13, 27, 42, 0.75) 45%, var(--ark-bg-obsidian) 88%);
    border-color: rgba(197, 167, 117, 0.32);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75);
}

/* Egyptian Lens Filter Ribbon */
.ark-egyptian-lens-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    margin: 0 auto 1.75rem auto;
    max-width: 980px;
    padding: 0.45rem 0.75rem;
    background: rgba(10, 14, 22, 0.9);
    border: 1px solid rgba(197, 167, 117, 0.28);
    border-radius: 32px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.ark-lens-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ark-text-secondary);
    padding: 0.38rem 0.95rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.ark-lens-btn:hover {
    color: var(--ark-gold-bright);
    background: rgba(197, 167, 117, 0.1);
}

.ark-lens-btn.is-active {
    background: linear-gradient(135deg, rgba(197, 167, 117, 0.25), rgba(42, 157, 143, 0.2));
    border-color: var(--ark-gold-bright);
    color: var(--ark-gold-bright);
    box-shadow: 0 2px 14px rgba(197, 167, 117, 0.3);
}

/* Egyptian Legend Specific Indicators */
.ark-egyptian-legend {
    margin-bottom: 2.5rem;
}

.ark-ind-turquoise {
    display: inline-block;
    width: 18px;
    height: 3px;
    background: #2a9d8f;
    border-radius: 2px;
}

.ark-ind-syncretic {
    display: inline-block;
    width: 22px;
    height: 3.5px;
    background: linear-gradient(90deg, #1e3a8a 0%, #2a9d8f 50%, #d4af37 100%);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(42, 157, 143, 0.6);
}

.ark-ind-royal {
    display: inline-block;
    width: 18px;
    height: 3px;
    background: #e5c78e;
    box-shadow: 0 0 6px rgba(229, 199, 142, 0.6);
    border-radius: 2px;
}

.ark-ind-funerary {
    display: inline-block;
    width: 18px;
    height: 3px;
    background: #0d9488;
    box-shadow: 0 0 6px rgba(13, 148, 136, 0.5);
    border-radius: 2px;
}

/* Canvas & Cluster Layout */
.ark-egyptian-canvas {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    transition: opacity 0.3s ease;
}

.ark-egyptian-system-cluster {
    background: rgba(13, 18, 28, 0.68);
    border: 1px solid rgba(197, 167, 117, 0.22);
    border-radius: 18px;
    padding: 2.25rem 2rem;
    position: relative;
    backdrop-filter: blur(8px);
    transition: all 0.35s ease;
}

.ark-egyptian-system-cluster:hover {
    border-color: rgba(197, 167, 117, 0.38);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.ark-system-header {
    text-align: center;
    margin-bottom: 2rem;
}

.ark-system-subtext {
    font-size: 0.88rem;
    color: var(--ark-text-secondary);
    line-height: 1.5;
    margin: 0.5rem auto 0 auto;
    max-width: 720px;
    font-style: italic;
}

/* System Header Badges */
.ark-badge-heliopolis {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(229, 199, 142, 0.6);
    color: #fef08a;
}

.ark-badge-solar {
    background: rgba(234, 88, 12, 0.12);
    border-color: rgba(249, 115, 22, 0.55);
    color: #fdba74;
}

.ark-badge-funerary {
    background: rgba(13, 148, 136, 0.14);
    border-color: rgba(45, 212, 191, 0.5);
    color: #5eead4;
}

.ark-badge-memphis {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.5);
    color: #7dd3fc;
}

.ark-badge-thebes {
    background: rgba(30, 58, 138, 0.25);
    border-color: rgba(147, 197, 253, 0.5);
    color: #bfdbfe;
}

/* Ennead Genealogy Flow */
.ark-ennead-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
}

.ark-ennead-tier {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    position: relative;
    z-index: 2;
}

.ark-tier-siblings {
    flex-wrap: wrap;
    gap: 1rem;
}

.ark-genealogy-stem {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.6rem 0;
    position: relative;
    z-index: 1;
}

.ark-stem-line {
    width: 2px;
    height: 32px;
    background: linear-gradient(180deg, rgba(197, 167, 117, 0.7), rgba(197, 167, 117, 0.25));
}

.ark-line-royal {
    background: linear-gradient(180deg, #d4af37, #e5c78e);
    box-shadow: 0 0 8px rgba(229, 199, 142, 0.5);
}

.ark-stem-label {
    font-size: 0.65rem;
    color: var(--ark-gold-primary);
    letter-spacing: 0.9px;
    text-transform: uppercase;
    background: rgba(13, 17, 24, 0.95);
    padding: 0.15rem 0.6rem;
    border-radius: 10px;
    border: 1px solid rgba(197, 167, 117, 0.25);
    margin-top: -16px;
    margin-bottom: 2px;
}

/* Context Nodes (Unlinked, Small Text Chips) */
.ark-context-node {
    background: rgba(18, 22, 32, 0.75);
    border: 1px dashed rgba(197, 167, 117, 0.35);
    border-radius: 12px;
    padding: 0.6rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 125px;
    user-select: none;
    cursor: default;
    transition: all 0.25s ease;
}

.ark-context-node:hover {
    border-color: rgba(197, 167, 117, 0.6);
    background: rgba(22, 28, 42, 0.85);
}

.ark-context-icon {
    width: 26px;
    height: 26px;
    color: var(--ark-gold-primary);
    opacity: 0.85;
}

.ark-context-name {
    font-size: 0.85rem;
    color: var(--ark-text-primary);
    font-family: var(--ark-serif);
    font-weight: 500;
}

.ark-context-desc {
    font-size: 0.65rem;
    color: var(--ark-text-muted);
}

.ark-context-connector {
    color: var(--ark-gold-primary);
    font-weight: 700;
    font-size: 1.1rem;
    opacity: 0.65;
}

/* Egyptian Node Cards */
.ark-node-egyptian {
    min-width: 175px;
    background: rgba(18, 24, 36, 0.88);
    border: 1px solid rgba(197, 167, 117, 0.3);
    border-radius: 14px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    cursor: pointer;
    position: relative;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.ark-node-egyptian:hover,
.ark-node-egyptian:focus {
    transform: translateY(-2px);
    border-color: var(--ark-gold-bright);
    background: rgba(24, 32, 48, 0.95);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.25);
    outline: none;
    z-index: 10;
}

.ark-node-egyptian .ark-node-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197, 167, 117, 0.2) 0%, rgba(16, 24, 38, 0.8) 100%);
    border: 1px solid rgba(197, 167, 117, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ark-gold-bright);
    transition: all 0.25s ease;
}

.ark-node-egyptian:hover .ark-node-avatar {
    border-color: var(--ark-gold-bright);
    box-shadow: 0 0 10px rgba(229, 199, 142, 0.4);
    transform: scale(1.05);
}

.ark-svg-egyptian {
    width: 22px;
    height: 22px;
}

.ark-node-tradition {
    display: block;
    font-size: 0.6rem;
    color: var(--ark-gold-primary);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    margin-top: 0.2rem;
    opacity: 0.85;
}

/* Node Variant Special Colors */
.ark-node-solar-core {
    border-color: rgba(249, 115, 22, 0.45);
    background: radial-gradient(ellipse at 50% 0%, rgba(234, 88, 12, 0.15) 0%, rgba(18, 24, 36, 0.9) 70%);
}

.ark-node-solar-core:hover {
    border-color: #f97316;
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.3);
}

.ark-node-maat {
    border-color: rgba(42, 157, 143, 0.45);
}

.ark-node-maat:hover {
    border-color: #2a9d8f;
    box-shadow: 0 8px 24px rgba(42, 157, 143, 0.35);
}

.ark-node-key-royal {
    border-color: rgba(229, 199, 142, 0.55);
    box-shadow: 0 4px 18px rgba(212, 175, 55, 0.25);
}

.ark-node-key-royal:hover {
    border-color: #fef08a;
    box-shadow: 0 8px 28px rgba(229, 199, 142, 0.45);
}

.ark-node-anubis {
    border-color: rgba(13, 148, 136, 0.45);
}

.ark-node-anubis:hover {
    border-color: #14b8a6;
    box-shadow: 0 8px 24px rgba(20, 184, 166, 0.35);
}

.ark-node-ptah {
    border-color: rgba(56, 189, 248, 0.45);
}

.ark-node-ptah:hover {
    border-color: #38bdf8;
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.35);
}

.ark-node-amun {
    border-color: rgba(147, 197, 253, 0.45);
    background: radial-gradient(ellipse at 50% 0%, rgba(30, 58, 138, 0.25) 0%, rgba(18, 24, 36, 0.9) 70%);
}

.ark-node-amun:hover {
    border-color: #93c5fd;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
}

/* Solar Axis Grid */
.ark-solar-axis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.ark-system-relation-banner {
    text-align: center;
    padding: 0.65rem 1rem;
    background: rgba(10, 14, 22, 0.6);
    border: 1px solid rgba(197, 167, 117, 0.18);
    border-radius: 10px;
    font-size: 0.78rem;
    color: var(--ark-text-secondary);
    line-height: 1.6;
}

.ark-system-relation-banner strong {
    color: var(--ark-gold-bright);
}

/* Funerary Ritual Network */
.ark-funerary-ritual-network {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

.ark-funerary-flow-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.ark-flow-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(45, 212, 191, 0.25);
    border-radius: 12px;
    padding: 0.65rem 1.15rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ark-flow-title {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #5eead4;
}

.ark-flow-desc {
    font-size: 0.7rem;
    color: var(--ark-text-muted);
}

.ark-flow-arrow {
    color: #5eead4;
    font-size: 1.2rem;
    opacity: 0.75;
}

/* Memphite Triad Row */
.ark-memphite-triad-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.ark-context-triad {
    border-color: rgba(56, 189, 248, 0.35);
}

/* Theban Syncretism Layer */
.ark-theban-syncretism-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

.ark-syncretic-bridge {
    max-width: 680px;
    width: 100%;
    background: linear-gradient(135deg, rgba(16, 42, 67, 0.45) 0%, rgba(30, 58, 138, 0.35) 50%, rgba(212, 175, 55, 0.15) 100%);
    border: 1px solid rgba(229, 199, 142, 0.35);
    border-radius: 14px;
    padding: 1.1rem 1.5rem;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.ark-syncretic-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.85rem;
    background: rgba(10, 14, 22, 0.9);
    border: 1px solid var(--ark-gold-bright);
    border-radius: 16px;
    font-size: 0.76rem;
    color: var(--ark-gold-bright);
    margin-bottom: 0.65rem;
    box-shadow: 0 0 12px rgba(229, 199, 142, 0.3);
}

.ark-syn-icon {
    font-size: 1.1rem;
    color: #38bdf8;
}

.ark-syncretic-explanation {
    font-size: 0.82rem;
    color: var(--ark-text-primary);
    line-height: 1.55;
    margin: 0;
    font-style: italic;
}

.ark-theban-triad-context {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* Lens Filtering Multi-Tier Visual States */
.ark-egyptian-canvas.is-filtering .ark-tree-node.is-lens-match {
    opacity: 1 !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 24px rgba(229, 199, 142, 0.5), 0 8px 24px rgba(0, 0, 0, 0.6);
    border-color: var(--ark-gold-bright);
    z-index: 10;
}

.ark-egyptian-canvas.is-filtering .ark-tree-node.is-lens-connected {
    opacity: 0.72 !important;
    filter: brightness(0.92);
}

.ark-egyptian-canvas.is-filtering .ark-tree-node.is-lens-dimmed {
    opacity: 0.22 !important;
    filter: grayscale(0.6) blur(0.3px);
    pointer-events: auto;
}

.ark-egyptian-canvas.is-filtering .ark-context-node.is-lens-dimmed {
    opacity: 0.2 !important;
}

.ark-egyptian-canvas.is-filtering .ark-genealogy-stem,
.ark-egyptian-canvas.is-filtering .ark-relation-connector,
.ark-egyptian-canvas.is-filtering .ark-syncretic-bridge {
    transition: opacity 0.3s ease;
}

/* Hover/Focus Family & Theological Relation Highlight */
.ark-egyptian-canvas .ark-tree-node.is-relation-origin {
    border-color: var(--ark-gold-bright) !important;
    box-shadow: 0 0 20px rgba(229, 199, 142, 0.6) !important;
    transform: scale(1.03);
    z-index: 15;
}

.ark-egyptian-canvas .ark-tree-node.is-relation-member {
    border-color: #2a9d8f !important;
    box-shadow: 0 0 16px rgba(42, 157, 143, 0.5) !important;
    opacity: 1 !important;
    z-index: 12;
}

.ark-egyptian-canvas .ark-tree-node.is-relation-dimmed {
    opacity: 0.25 !important;
    filter: grayscale(0.5);
}

/* Mobile Responsive System */
@media (max-width: 992px) {
    .ark-egyptian-canvas {
        gap: 1.75rem;
    }
    .ark-egyptian-system-cluster {
        padding: 1.75rem 1.25rem;
    }
    .ark-tier-siblings {
        flex-direction: column;
        width: 100%;
    }
    .ark-solar-axis-grid {
        grid-template-columns: 1fr;
    }
    .ark-memphite-triad-row {
        flex-direction: column;
        width: 100%;
    }
    .ark-funerary-flow-indicators {
        flex-direction: column;
    }
    .ark-theban-triad-context {
        flex-direction: column;
        width: 100%;
    }
    .ark-node-egyptian,
    .ark-context-node {
        width: 100%;
        max-width: 360px;
    }
}

@media (max-width: 768px) {
    .ark-egyptian-lens-filters {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0.4rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ark-egyptian-lens-filters::-webkit-scrollbar {
        display: none;
    }
    .ark-lens-btn {
        padding: 0.32rem 0.75rem;
        font-size: 0.7rem;
    }
    .ark-node-egyptian {
        max-width: 100%;
    }
    .ark-context-node {
        max-width: 100%;
    }
}

/* ==========================================================================
   NORSE COSMIC NETWORK (İSKANDİNAV KOZMİK AĞI)
   Aesthetics: Iron Slate, Frost Cyan, Ash Wood, Bone Ivory, Restrained Ember
   Zero Emoji • Scholarly Editorial Design • Yggdrasil Information Spine
   ========================================================================== */

.ark-pantheon-norse {
    position: relative;
    padding: 3.5rem 1.5rem 4rem;
    background: radial-gradient(ellipse at 50% 10%, rgba(30, 41, 59, 0.45) 0%, rgba(10, 14, 20, 0.98) 75%), #0a0e14;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    color: #e2e8f0;
    overflow: hidden;
}

/* Norse Caveat Box */
.ark-pantheon-norse .ark-tree-caveat-box {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-left: 3px solid #38bdf8;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    margin-top: 1.25rem;
    max-width: 820px;
}

.ark-pantheon-norse .ark-caveat-icon {
    color: #38bdf8;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.ark-pantheon-norse .ark-caveat-text {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #cbd5e1;
    font-style: italic;
}

/* Lens Filters */
.ark-norse-lens-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0 1.5rem;
    position: relative;
    z-index: 10;
}

.ark-norse-lens-filters .ark-lens-btn {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #94a3b8;
    padding: 0.45rem 1rem;
    border-radius: 3px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ark-norse-lens-filters .ark-lens-btn:hover {
    color: #f8fafc;
    border-color: rgba(56, 189, 248, 0.5);
    background: rgba(30, 41, 59, 0.8);
}

.ark-norse-lens-filters .ark-lens-btn.is-active {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.ark-norse-lens-filters .ark-btn-ragnarok-special {
    border-color: rgba(249, 115, 22, 0.4);
    color: #fdba74;
}

.ark-norse-lens-filters .ark-btn-ragnarok-special:hover {
    border-color: #f97316;
    color: #ffedd5;
    background: rgba(249, 115, 22, 0.15);
}

.ark-norse-lens-filters .ark-btn-ragnarok-special.is-active {
    background: rgba(249, 115, 22, 0.2);
    border-color: #f97316;
    color: #ffedd5;
    box-shadow: 0 0 16px rgba(249, 115, 22, 0.4);
}

/* Legend Styling */
.ark-norse-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.ark-ind-alliance {
    background: #38bdf8;
}

.ark-ind-conflict-norse {
    background: #ef4444;
}

.ark-ind-vanir {
    background: #10b981;
}

.ark-ind-cosmogony {
    background: #a855f7;
}

.ark-ind-fate {
    background: #94a3b8;
    box-shadow: 0 0 6px rgba(148, 163, 184, 0.6);
}

.ark-ind-ragnarok {
    background: #f97316;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.7);
}

/* Norse Canvas & Clusters */
.ark-norse-canvas {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.ark-norse-system-cluster {
    position: relative;
    padding: 2.25rem 2rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 6px;
    transition: opacity 0.4s ease, border-color 0.4s ease, filter 0.4s ease;
}

.ark-norse-system-cluster:hover {
    border-color: rgba(148, 163, 184, 0.3);
}

.ark-layer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.85rem;
    border-radius: 3px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.ark-layer-roman {
    font-family: Georgia, serif;
    font-size: 0.85rem;
    opacity: 0.8;
}

.ark-badge-ice {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #7dd3fc;
}

.ark-badge-asgard {
    background: rgba(229, 199, 142, 0.12);
    border: 1px solid rgba(229, 199, 142, 0.45);
    color: #e5c78e;
}

.ark-badge-vanir {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

.ark-badge-loki {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #fcd34d;
}

.ark-badge-underworld {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
}

.ark-badge-ragnarok {
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.5);
    color: #fdba74;
}

/* Grids & Layouts */
.ark-aesir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.ark-vanir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

/* Nodes Styling */
.ark-node-norse {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 5px;
    padding: 1rem 1.1rem;
    cursor: pointer;
    position: relative;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ark-node-norse:hover,
.ark-node-norse:focus {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(56, 189, 248, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(56, 189, 248, 0.2);
    outline: none;
    z-index: 10;
}

.ark-node-norse .ark-node-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 20, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 4px;
    color: #94a3b8;
    transition: all 0.25s ease;
}

.ark-node-norse:hover .ark-node-avatar,
.ark-node-norse:focus .ark-node-avatar {
    color: #38bdf8;
    border-color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.ark-node-norse .ark-node-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ark-node-norse .ark-node-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: 0.5px;
    margin: 0.15rem 0;
}

.ark-node-norse .ark-node-role {
    font-size: 0.72rem;
    color: #94a3b8;
    line-height: 1.35;
}

.ark-node-norse .ark-node-tradition {
    font-size: 0.68rem;
    color: #38bdf8;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 0.2rem;
}

/* Specific Node Distinctions */
.ark-node-odin .ark-node-tradition {
    color: #e5c78e;
}

.ark-node-loki-core {
    border-color: rgba(245, 158, 11, 0.4);
}

.ark-node-loki-core:hover {
    border-color: #f59e0b;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 16px rgba(245, 158, 11, 0.3);
}

.ark-node-loki-core .ark-node-tradition {
    color: #fcd34d;
}

.ark-node-surtr-primordial {
    border-color: rgba(249, 115, 22, 0.45);
}

.ark-node-surtr-primordial:hover {
    border-color: #f97316;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 16px rgba(249, 115, 22, 0.35);
}

.ark-node-surtr-primordial .ark-node-tradition {
    color: #fdba74;
}

/* Contextual Nodes (No fake link, informative chips) */
.ark-context-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(15, 23, 42, 0.55);
    border: 1px dashed rgba(148, 163, 184, 0.3);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    min-width: 140px;
}

.ark-context-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    margin-bottom: 0.35rem;
}

.ark-context-tag {
    font-size: 0.62rem;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
}

.ark-context-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #cbd5e1;
    margin: 0.15rem 0;
}

.ark-context-desc {
    font-size: 0.68rem;
    color: #94a3b8;
    line-height: 1.3;
}

/* Primordial Cluster Flow */
.ark-primordial-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.ark-cosmogony-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.ark-cosmogony-line {
    width: 2px;
    height: 28px;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.6), rgba(168, 85, 247, 0.6));
}

.ark-badge-micro {
    font-size: 0.65rem;
    letter-spacing: 0.8px;
    padding: 0.2rem 0.6rem;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 3px;
    color: #c084fc;
}

.ark-context-creation-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

/* Norns / Fate Row */
.ark-fate-norns-row {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.2);
}

.ark-norns-group {
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 4px;
    padding: 1rem 1.25rem;
}

.ark-norns-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.ark-norns-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.ark-norns-tags {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ark-context-fate-chip {
    font-size: 0.72rem;
    background: rgba(10, 14, 20, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.3);
    padding: 0.25rem 0.65rem;
    border-radius: 3px;
    color: #cbd5e1;
}

.ark-context-fate-chip strong {
    color: #e2e8f0;
}

.ark-fate-disclaimer {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.85rem;
    line-height: 1.4;
    font-style: italic;
}

/* Vanir Hostage Bridge */
.ark-vanir-hostage-bridge {
    margin-top: 1.75rem;
    padding: 1.25rem 1.5rem;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 4px;
}

.ark-hostage-bridge-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #6ee7b7;
    text-transform: uppercase;
}

.ark-hostage-desc {
    font-size: 0.8rem;
    color: #cbd5e1;
    margin: 0.5rem 0 0.85rem;
    line-height: 1.45;
}

.ark-hostage-direction {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.75rem;
    color: #94a3b8;
    flex-wrap: wrap;
}

.ark-hostage-arrow {
    color: #10b981;
    font-weight: 700;
}

/* Loki Liminal Cluster */
.ark-loki-liminal-box {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.ark-loki-centerpiece {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ark-loki-liminal-box .ark-node-loki-core {
    max-width: 480px;
    width: 100%;
}

.ark-loki-roles-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.ark-liminal-role-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 4px;
    padding: 0.85rem 1rem;
}

.ark-role-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #f59e0b;
    margin-bottom: 0.35rem;
}

.ark-liminal-role-card p {
    font-size: 0.75rem;
    color: #cbd5e1;
    line-height: 1.35;
    margin: 0;
}

.ark-baldr-murder-box {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-left: 3px solid #ef4444;
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.ark-murder-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #fca5a5;
    text-transform: uppercase;
}

.ark-baldr-murder-box p {
    font-size: 0.8rem;
    color: #e2e8f0;
    line-height: 1.45;
    margin: 0.4rem 0 0;
}

/* Monster Genealogy */
.ark-loki-monster-genealogy {
    margin-top: 1.75rem;
    padding: 1.5rem;
    background: rgba(10, 14, 20, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 4px;
}

.ark-monster-genealogy-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.ark-monster-parents-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ark-parent-connector {
    font-size: 1.2rem;
    color: #64748b;
}

.ark-monster-offspring-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* Hel Realm vs Figure */
.ark-hel-realm-distinction {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.ark-hel-column {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 4px;
    padding: 1.25rem;
}

.ark-hel-column-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.ark-hel-tag {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #94a3b8;
}

.ark-hel-desc {
    font-size: 0.78rem;
    color: #cbd5e1;
    line-height: 1.45;
    margin-top: 0.85rem;
}

.ark-hel-features {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ark-hel-features li {
    font-size: 0.74rem;
    color: #94a3b8;
    line-height: 1.35;
}

.ark-hel-features li strong {
    color: #cbd5e1;
}

.ark-hel-distinction-banner {
    margin-top: 1.25rem;
    padding: 0.85rem 1.25rem;
    background: rgba(15, 23, 42, 0.7);
    border-left: 3px solid #64748b;
    border-radius: 0 4px 4px 0;
}

.ark-hel-distinction-banner p {
    font-size: 0.78rem;
    color: #94a3b8;
    font-style: italic;
    line-height: 1.45;
    margin: 0;
}

/* Surtr Primordial Box */
.ark-surtr-primordial-box {
    margin-top: 1.75rem;
    padding: 1.5rem;
    background: rgba(249, 115, 22, 0.05);
    border: 1px solid rgba(249, 115, 22, 0.25);
    border-radius: 4px;
}

.ark-surtr-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.ark-surtr-tag {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #fdba74;
}

.ark-surtr-primordial-box .ark-node-surtr-primordial {
    max-width: 480px;
}

/* Ragnarök Matchups Section */
.ark-cluster-ragnarok {
    border-color: rgba(249, 115, 22, 0.35);
    background: radial-gradient(ellipse at 50% 0%, rgba(249, 115, 22, 0.08) 0%, rgba(15, 23, 42, 0.8) 70%);
}

.ark-ragnarok-matchups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
}

.ark-matchup-card {
    background: rgba(10, 14, 20, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 5px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ark-matchup-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #94a3b8, #f97316);
    opacity: 0.6;
}

.ark-matchup-card:hover {
    border-color: rgba(249, 115, 22, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(249, 115, 22, 0.25);
}

.ark-matchup-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #fdba74;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.ark-matchup-vs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ark-matchup-fighter {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ark-matchup-fighter:hover {
    color: #38bdf8;
}

.ark-duel-vs {
    color: #f97316;
    font-size: 1.1rem;
    font-weight: 700;
}

.ark-matchup-desc {
    font-size: 0.75rem;
    color: #cbd5e1;
    line-height: 1.4;
    margin: 0;
}

/* Source Caution Card (Tyr vs Garm) */
.ark-matchup-garm {
    border-style: dashed;
    border-color: rgba(148, 163, 184, 0.35);
}

.ark-matchup-garm .ark-matchup-badge {
    color: #94a3b8;
}

.ark-matchup-garm .ark-duel-vs {
    color: #94a3b8;
}

/* Realms Overview Band */
.ark-realms-overview-band {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 4px;
}

.ark-realms-heading {
    font-size: 0.85rem;
    font-weight: 700;
    color: #cbd5e1;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.ark-realms-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ark-realm-pill {
    font-size: 0.72rem;
    background: rgba(10, 14, 20, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 3px;
    padding: 0.35rem 0.75rem;
    color: #94a3b8;
}

.ark-realm-pill strong {
    color: #e2e8f0;
}

.ark-pill-variant {
    border-color: rgba(245, 158, 11, 0.4);
}

.ark-pill-variant strong {
    color: #fcd34d;
}

/* ==========================================================================
   INTERACTIVE STATES: 3-Tier Filter & Ragnarök Signature Mode
   ========================================================================== */

.ark-pantheon-norse.is-filtering .ark-tree-node {
    transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}

.ark-pantheon-norse.is-filtering .ark-tree-node.is-lens-dimmed {
    opacity: 0.18 !important;
    filter: grayscale(0.8) blur(0.3px);
    pointer-events: none;
}

.ark-pantheon-norse.is-filtering .ark-tree-node.is-lens-match {
    opacity: 1 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.35) !important;
    z-index: 5;
}

.ark-pantheon-norse.is-filtering .ark-tree-node.is-lens-connected {
    opacity: 0.75 !important;
    border-color: rgba(148, 163, 184, 0.5) !important;
}

/* Ragnarök Signature Mode */
.ark-pantheon-norse.is-ragnarok-active .ark-norse-system-cluster:not(.ark-cluster-ragnarok) {
    opacity: 0.15;
    filter: grayscale(0.7);
}

.ark-pantheon-norse.is-ragnarok-active .ark-cluster-ragnarok {
    opacity: 1;
    border-color: #f97316;
    box-shadow: 0 0 35px rgba(249, 115, 22, 0.25);
}

.ark-pantheon-norse.is-ragnarok-active .ark-matchup-card {
    border-color: rgba(249, 115, 22, 0.6);
    background: rgba(20, 14, 12, 0.95);
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.25);
}

.ark-pantheon-norse.is-ragnarok-active .ark-matchup-fighter {
    color: #ffedd5;
    text-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
}

/* Relation Hover Glow */
.ark-norse-canvas .ark-tree-node.is-relation-highlight {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.5) !important;
    opacity: 1 !important;
    z-index: 12;
}

.ark-norse-canvas .ark-tree-node.is-relation-dimmed {
    opacity: 0.25 !important;
    filter: grayscale(0.6);
}

/* Mobile Responsive Adjustments */
@media (max-width: 992px) {
    .ark-norse-canvas {
        gap: 2rem;
    }
    .ark-norse-system-cluster {
        padding: 1.75rem 1.25rem;
    }
    .ark-hel-realm-distinction {
        grid-template-columns: 1fr;
    }
    .ark-aesir-grid,
    .ark-vanir-grid,
    .ark-ragnarok-matchups-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ark-norse-lens-filters {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0.4rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ark-norse-lens-filters::-webkit-scrollbar {
        display: none;
    }
    .ark-norse-lens-filters .ark-lens-btn {
        padding: 0.35rem 0.8rem;
        font-size: 0.7rem;
        white-space: nowrap;
    }
    .ark-node-norse {
        width: 100%;
    }
    .ark-context-node {
        width: 100%;
    }
}

/* ==========================================================================
   14. ARKETIPYA MYTHOLOGY HUB V2.1 (GRAND GATEWAY & EXPLORATION ATLAS)
   Black / Antique Gold Identity, Cinematic Editorial Hierarchy & Polish
   ========================================================================== */

.ark-mythology-hub-v2 {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem 4.5rem 1.5rem;
}

/* Typographic Hierarchy Standard across all Sections */
.ark-mythology-hub-v2 .ark-section-heading {
    margin-bottom: 1.5rem;
}

.ark-mythology-hub-v2 .ark-section-heading h2 {
    font-family: var(--ark-serif);
    font-size: clamp(1.75rem, 2.6vw, 2.3rem);
    font-weight: 600;
    color: var(--ark-gold-bright);
    letter-spacing: 0.02em;
    line-height: 1.25;
    margin: 0.2rem 0 0.35rem 0;
}

.ark-mythology-hub-v2 .ark-section-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ark-gold-muted);
    display: inline-block;
    margin-bottom: 0.25rem;
}

.ark-mythology-hub-v2 .ark-section-sub {
    font-size: 0.85rem;
    color: var(--ark-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* 1. Hub Hero & Prominent Convergence Artwork */
.ark-hub-hero {
    margin-bottom: 3rem; /* 10-15% reduced spacing */
}

.ark-hub-title {
    font-family: var(--ark-serif);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #ffffff 35%, var(--ark-gold-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1.15rem;
}

.ark-hub-desc {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    color: #cbd5e1;
    max-width: 700px;
    line-height: 1.6;
    margin-bottom: 1.6rem;
}

.ark-hub-actions {
    margin-bottom: 1.75rem;
}

.ark-hub-stats-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(197, 167, 117, 0.18);
}

.ark-hub-stats-strip .ark-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(197, 167, 117, 0.28);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
}

.ark-hub-stats-strip .ark-stat-chip strong {
    color: var(--ark-gold-bright);
    font-size: 0.82rem;
}

.ark-hub-stats-strip .ark-stat-heritage {
    background: rgba(229, 199, 142, 0.12);
    border-color: rgba(229, 199, 142, 0.45);
}

.ark-hub-stats-strip .ark-stat-heritage strong {
    color: #fef08a;
}

.ark-hub-stats-strip .ark-stat-tag {
    font-size: 0.74rem;
    color: #94a3b8;
    letter-spacing: 0.5px;
    font-style: italic;
    margin-left: 0.5rem;
}

/* Right Hero Artwork Container: Expanded to occupy 65-80% of area */
.ark-hub-hero-artwork {
    position: relative;
    width: 100%;
    min-height: 480px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 50%, rgba(18, 26, 44, 0.95) 0%, rgba(8, 12, 18, 0.98) 75%);
    border: 1px solid rgba(197, 167, 117, 0.28);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(229, 199, 142, 0.08);
    overflow: hidden;
}

.ark-hub-hero-artwork .ark-myth-visual,
.ark-hub-hero-artwork .ark-placeholder-art {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ark-hub-hero-artwork .ark-hero-svg {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: contain;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6));
}

.ark-hero-hub-convergence .ark-placeholder-label {
    display: none; /* SVG artwork already contains refined architectural typography */
}

/* 2. Primary Discovery Gateways ("Nasıl Keşfetmek İstiyorsun?") */
.ark-gateways-section {
    margin-bottom: 3.6rem; /* 10-15% reduced spacing */
}

.ark-discovery-gateways-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.15rem;
    margin-top: 1.75rem;
}

.ark-gateway-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.65rem 1.15rem;
    background: rgba(13, 20, 32, 0.7);
    border: 1px solid rgba(197, 167, 117, 0.22);
    border-radius: 6px;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease,
                background 0.25s ease;
}

.ark-gateway-card:hover {
    transform: translateY(-2.5px); /* Max 2-3px upward lift */
    background: rgba(18, 27, 44, 0.9);
    border-color: var(--ark-gold-bright);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(229, 199, 142, 0.22);
}

.ark-gateway-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.15rem;
    color: var(--ark-gold-bright);
    border-radius: 50%;
    background: rgba(229, 199, 142, 0.08);
    border: 1px solid rgba(229, 199, 142, 0.25);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.ark-gateway-card:hover .ark-gateway-icon {
    transform: scale(1.06);
    border-color: var(--ark-gold-bright);
    background: rgba(229, 199, 142, 0.18);
    box-shadow: 0 0 14px rgba(229, 199, 142, 0.3);
}

.ark-gateway-svg {
    width: 26px;
    height: 26px;
}

.ark-gateway-title {
    font-family: var(--ark-font-heading, inherit);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #f1f5f9;
    margin-bottom: 0.45rem;
    transition: color 0.2s ease;
}

.ark-gateway-card:hover .ark-gateway-title {
    color: var(--ark-gold-bright);
}

.ark-gateway-sub {
    font-size: 0.76rem;
    color: #94a3b8;
    line-height: 1.45;
    margin: 0;
}

/* 3. Traditions Showcase (Strict Breakpoint Rules & Consistent Heights) */
.ark-traditions-section {
    margin-bottom: 3.6rem; /* 10-15% reduced spacing */
}

.ark-traditions-grid-v2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.35rem;
    margin-top: 1.75rem;
    align-items: stretch;
}

/* Breakpoint 768-1099px: 2 columns */
@media (min-width: 768px) and (max-width: 1099px) {
    .ark-traditions-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.35rem;
    }
}

/* Breakpoint 1100-1399px: 3 columns (balanced wrap) */
@media (min-width: 1100px) and (max-width: 1399px) {
    .ark-traditions-grid-v2 {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.35rem;
    }
}

/* Breakpoint >= 1400px: 5-column editorial composition */
@media (min-width: 1400px) {
    .ark-traditions-grid-v2 {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.15rem;
    }
}

.ark-tradition-card-v2 {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(13, 20, 32, 0.75);
    border: 1px solid rgba(197, 167, 117, 0.22);
    border-radius: 6px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.ark-tradition-card-v2:hover {
    transform: translateY(-3px);
    border-color: var(--ark-gold-bright);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 20px var(--myth-accent-glow, rgba(229, 199, 142, 0.15));
}

.ark-tradition-visual-link {
    display: block;
    text-decoration: none;
    overflow: hidden;
}

.ark-tradition-visual-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #090d14;
    overflow: hidden;
}

.ark-tradition-visual-wrap svg,
.ark-tradition-visual-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ark-tradition-card-v2:hover .ark-tradition-visual-wrap svg,
.ark-tradition-card-v2:hover .ark-tradition-visual-wrap img {
    transform: scale(1.04);
}

.ark-tradition-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.15rem 1.15rem 1.15rem;
}

.ark-tradition-meta-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}

.ark-tradition-meta-badge strong {
    color: var(--ark-gold-bright);
}

.ark-tradition-title {
    font-family: var(--ark-serif);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.ark-tradition-title a {
    color: #f8fafc;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ark-tradition-card-v2:hover .ark-tradition-title a {
    color: var(--ark-gold-bright);
}

.ark-tradition-hook {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0 0 1.15rem 0;
    flex: 1;
}

.ark-tradition-footer {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(197, 167, 117, 0.12);
}

.ark-tradition-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--ark-gold-bright);
    text-decoration: none;
    transition: gap 0.25s ease, color 0.2s ease;
}

.ark-tradition-cta span:last-child {
    display: inline-block;
    transition: transform 0.25s ease;
}

.ark-tradition-card-v2:hover .ark-tradition-cta span:last-child {
    transform: translateX(4px);
}

/* 4. Split Section: Featured Figures & Featured Stories */
.ark-hub-showcase-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3.6rem; /* 10-15% reduced spacing */
}

@media (min-width: 1024px) {
    .ark-hub-showcase-split {
        grid-template-columns: 1.35fr 1fr;
        gap: 2.5rem;
    }
}

/* 4A. Featured Figures Column (Real Editorial Portrait Slot) */
.ark-featured-figures-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}

@media (min-width: 1024px) {
    .ark-featured-figures-row {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.65rem;
    }
}

.ark-featured-figure-card {
    display: flex;
    flex-direction: column;
    background: rgba(13, 20, 32, 0.75);
    border: 1px solid rgba(197, 167, 117, 0.22);
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ark-featured-figure-card:hover {
    transform: translateY(-3.5px);
    border-color: var(--ark-gold-bright);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), 0 0 14px rgba(229, 199, 142, 0.15);
}

.ark-featured-fig-artwork-link {
    display: block;
    text-decoration: none;
}

.ark-featured-fig-artwork {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: radial-gradient(circle at 50% 40%, rgba(26, 36, 56, 0.65) 0%, #080c14 85%);
    overflow: hidden;
    border-bottom: 1px solid rgba(197, 167, 117, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ark-featured-fig-artwork .ark-myth-visual,
.ark-featured-fig-artwork .ark-placeholder-art {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ark-featured-fig-artwork svg {
    width: 72%;
    height: 72%;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
    transition: transform 0.35s ease;
}

.ark-featured-figure-card:hover .ark-featured-fig-artwork svg {
    transform: scale(1.08);
}

.ark-featured-fig-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.85rem 0.65rem;
    flex: 1;
}

.ark-featured-fig-group {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    color: var(--ark-gold-muted);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.ark-featured-fig-name {
    font-family: var(--ark-serif);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.35rem 0;
    line-height: 1.25;
}

.ark-featured-fig-name a {
    color: #f1f5f9;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ark-featured-figure-card:hover .ark-featured-fig-name a {
    color: var(--ark-gold-bright);
}

.ark-featured-fig-hook {
    font-size: 0.7rem;
    color: #94a3b8;
    line-height: 1.35;
    font-style: italic;
    margin: 0 0 0.65rem 0;
    flex: 1;
}

.ark-featured-fig-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(197, 167, 117, 0.3);
    color: var(--ark-gold-bright);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.ark-featured-figure-card:hover .ark-featured-fig-action {
    background: var(--ark-gold-bright);
    color: #0b0f17;
    border-color: var(--ark-gold-bright);
    transform: translateX(2px);
}

/* 4B. Featured Stories Column (Stronger Artwork Presence) */
.ark-featured-stories-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.ark-featured-story-card {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    padding: 0.95rem 1.15rem;
    background: rgba(13, 20, 32, 0.7);
    border: 1px solid rgba(197, 167, 117, 0.2);
    border-radius: 6px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease,
                background 0.25s ease,
                box-shadow 0.25s ease;
}

.ark-featured-story-card:hover {
    transform: translateX(4px);
    background: rgba(18, 27, 44, 0.92);
    border-color: var(--ark-gold-bright);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 14px rgba(229, 199, 142, 0.14);
}

.ark-featured-story-thumb {
    width: 96px;
    min-width: 96px;
    aspect-ratio: 16 / 9;
    background: radial-gradient(circle at 50% 50%, rgba(28, 40, 62, 0.7) 0%, #070a10 100%);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(197, 167, 117, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ark-featured-story-thumb svg,
.ark-featured-story-thumb img {
    width: 82%;
    height: 82%;
    object-fit: cover;
}

.ark-featured-story-body {
    flex: 1;
    min-width: 0;
}

.ark-featured-story-group {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    color: var(--ark-gold-muted);
    text-transform: uppercase;
}

.ark-featured-story-title {
    font-family: var(--ark-serif);
    font-size: 1.08rem;
    font-weight: 600;
    margin: 0.15rem 0 0.25rem 0;
    line-height: 1.3;
}

.ark-featured-story-title a {
    color: #f1f5f9;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ark-featured-story-card:hover .ark-featured-story-title a {
    color: var(--ark-gold-bright);
}

.ark-featured-story-question {
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ark-featured-story-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(197, 167, 117, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ark-gold-bright);
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ark-featured-story-card:hover .ark-featured-story-arrow {
    background: var(--ark-gold-bright);
    color: #0b0f17;
    border-color: var(--ark-gold-bright);
    transform: translateX(2px);
}

/* 5. Cross-Cultural Thematic Parallels & Subtle Motif Layer */
.ark-cross-themes-section {
    margin-bottom: 3.6rem; /* 10-15% reduced spacing */
}

.ark-theme-caveat-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: rgba(26, 20, 14, 0.65);
    border: 1px solid rgba(229, 199, 142, 0.32);
    border-left: 3px solid var(--ark-gold-bright);
    border-radius: 4px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.8rem;
    color: #e2e8f0;
    line-height: 1.45;
}

.ark-caveat-bullet {
    color: var(--ark-gold-bright);
    font-size: 0.9rem;
}

.ark-thematic-parallels-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.35rem;
}

@media (min-width: 1024px) {
    .ark-thematic-parallels-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.35rem;
    }
}

.ark-theme-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.65rem 1.5rem;
    background: rgba(13, 20, 32, 0.75);
    border: 1px solid rgba(197, 167, 117, 0.22);
    border-radius: 6px;
    backdrop-filter: blur(8px);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.ark-theme-card:hover {
    border-color: rgba(197, 167, 117, 0.48);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

/* Faint Background SVG Geometric Motifs (Preserves Readability) */
.ark-theme-card-bg-motif {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 170px;
    height: 170px;
    opacity: 0.08;
    color: var(--ark-gold-bright);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ark-theme-card:hover .ark-theme-card-bg-motif {
    opacity: 0.15;
    transform: scale(1.05);
}

.ark-theme-card-header,
.ark-theme-card-desc,
.ark-theme-entities-list {
    position: relative;
    z-index: 1;
}

.ark-theme-badge {
    display: inline-block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--ark-gold-bright);
    margin-bottom: 0.4rem;
}

.ark-theme-card-title {
    font-family: var(--ark-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0 0 0.5rem 0;
}

.ark-theme-card-desc {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0 0 1.25rem 0;
}

.ark-theme-entities-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: auto;
}

.ark-entity-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: rgba(20, 30, 48, 0.85);
    border: 1px solid rgba(197, 167, 117, 0.35);
    border-radius: 20px;
    font-size: 0.75rem;
    color: #f1f5f9;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ark-entity-pill:hover {
    background: rgba(30, 45, 75, 0.95);
    border-color: var(--ark-gold-bright);
    color: var(--ark-gold-bright);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(229, 199, 142, 0.2);
}

.ark-context-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: rgba(15, 20, 30, 0.7);
    border: 1px dashed rgba(148, 163, 184, 0.35);
    border-radius: 20px;
    font-size: 0.75rem;
    color: #94a3b8;
    cursor: default;
}

.ark-pill-role {
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 400;
}

/* 6. Bottom Split: Relationship Teaser & Random Discovery */
.ark-hub-bottom-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 1024px) {
    .ark-hub-bottom-split {
        grid-template-columns: 1.45fr 1fr;
        gap: 2.5rem;
    }
}

/* 6A. Relationship Teaser & Clear Connection Connectors */
.ark-network-toggle-bar {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.25rem;
}

.ark-net-tab {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(197, 167, 117, 0.25);
    color: #94a3b8;
    padding: 0.45rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ark-net-tab:hover {
    color: var(--ark-gold-bright);
    border-color: rgba(197, 167, 117, 0.45);
}

.ark-net-tab.is-active {
    background: rgba(197, 167, 117, 0.18);
    border-color: var(--ark-gold-bright);
    color: var(--ark-gold-bright);
    box-shadow: 0 0 14px rgba(197, 167, 117, 0.2);
}

.ark-relation-network-box {
    background: rgba(10, 15, 25, 0.85);
    border: 1px solid rgba(197, 167, 117, 0.25);
    border-radius: 6px;
    padding: 1.65rem 1.45rem;
    margin-bottom: 1.25rem;
}

.ark-network-nodes-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

.ark-net-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.65rem 0.85rem;
    background: rgba(20, 30, 48, 0.8);
    border: 1px solid rgba(197, 167, 117, 0.35);
    border-radius: 6px;
    min-width: 95px;
    text-align: center;
    color: #f1f5f9;
}

.ark-net-node-link {
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ark-net-node-link:hover {
    border-color: var(--ark-gold-bright);
    background: rgba(30, 45, 75, 0.95);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(229, 199, 142, 0.2);
}

.ark-net-node-context {
    border-style: dashed;
    border-color: rgba(148, 163, 184, 0.35);
}

.ark-net-highlight {
    border-color: rgba(249, 115, 22, 0.65);
    background: rgba(35, 20, 15, 0.75);
}

.ark-net-highlight:hover {
    border-color: #f97316;
    box-shadow: 0 0 16px rgba(249, 115, 22, 0.35);
}

.ark-net-role {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--ark-gold-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 0.25rem;
}

/* Connector with Relation Type Badge */
.ark-net-connector-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    color: var(--ark-gold-muted);
    padding: 0 0.2rem;
}

.ark-net-connector-type {
    font-size: 0.55rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
}

.ark-net-connector-line {
    font-size: 1.15rem;
    color: var(--ark-gold-bright);
    line-height: 1;
}

.ark-net-explanation {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

.ark-relation-actions {
    margin-top: 1rem;
}

/* 6B. Random Discovery Column (Neutral & Scoped Click Feedback) */
.ark-random-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.ark-random-action-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.35rem;
    background: linear-gradient(135deg, rgba(20, 30, 48, 0.85), rgba(13, 20, 32, 0.9));
    border: 1px solid rgba(197, 167, 117, 0.28);
    border-radius: 6px;
    color: #f1f5f9;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease,
                background 0.25s ease;
}

.ark-random-action-btn:hover {
    transform: translateX(4px);
    background: rgba(30, 45, 72, 0.95);
    border-color: var(--ark-gold-bright);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 14px rgba(229, 199, 142, 0.18);
}

.ark-random-action-btn.is-loading {
    opacity: 0.85;
    pointer-events: none;
    border-color: var(--ark-gold-bright);
}

.ark-random-btn-label {
    text-transform: uppercase;
}

.ark-random-btn-arrow {
    font-size: 1.1rem;
    color: var(--ark-gold-bright);
    transition: transform 0.2s ease;
}

.ark-random-action-btn:hover .ark-random-btn-arrow {
    transform: translateX(3px);
}

/* Responsive Rules for Small Devices (< 768px) */
@media (max-width: 767px) {
    .ark-discovery-gateways-grid {
        grid-template-columns: 1fr;
    }
    .ark-network-nodes-flow {
        flex-direction: column;
        align-items: stretch;
    }
    .ark-net-connector-wrap {
        margin: 0.4rem 0;
    }
    .ark-net-connector-line {
        transform: rotate(90deg);
    }
    .ark-hub-stats-strip {
        gap: 0.4rem;
    }
    .ark-hub-stats-strip .ark-stat-tag {
        width: 100%;
        margin-left: 0;
        margin-top: 0.35rem;
    }
}