.soy-page {
    padding-bottom: 2rem;
}

.soy-intro {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
}

.soy-kicker {
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.soy-intro h1 {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.soy-edition {
    border: 1px solid rgba(13, 76, 115, 0.25);
    color: var(--primary-color);
    background: #fff;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    white-space: nowrap;
}

.soy-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.75rem;
}

.soy-filters {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.soy-filters button,
.soy-tools button,
.soy-zoom button {
    border: 1px solid rgba(13, 76, 115, 0.2);
    background: #fff;
    color: var(--primary-color);
    border-radius: 999px;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
}

.soy-filters button.active,
.soy-filters button:hover,
.soy-tools button:hover,
.soy-zoom button:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.soy-filters button.soy-season-btn {
    background: #0d4c73;
    color: #fff;
    border-color: #0d4c73;
}

.soy-filters button.soy-season-btn:hover {
    background: #08344e;
}

.soy-tools {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.soy-tools input {
    border: 1px solid rgba(13, 76, 115, 0.25);
    border-radius: 10px;
    padding: 0.45rem 0.7rem;
    min-width: 220px;
}

.soy-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    color: #567;
    font-size: 0.82rem;
    margin-bottom: 0.75rem;
}

.soy-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.soy-dash {
    width: 28px;
    height: 3px;
    background: #ff4d4d;
    display: inline-block;
}

.soy-dash.sibling { background: repeating-linear-gradient(90deg, #ff8a80 0 8px, transparent 8px 13px); }
.soy-dash.kin { background: repeating-linear-gradient(90deg, #ff8a65 0 2px, transparent 2px 6px); }
.soy-dash.marriage { background: #f0b429; height: 4px; }
.soy-dash.old { background: repeating-linear-gradient(90deg, #e598a8 0 6px, transparent 6px 10px); }
.soy-dash.assoc { background: repeating-linear-gradient(90deg, #7fb3d5 0 3px, transparent 3px 7px); }

.soy-viewport {
    position: relative;
    height: min(72vh, 820px);
    min-height: 520px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 18px;
    border: 1px solid rgba(13, 76, 115, 0.18);
    background:
        radial-gradient(ellipse 70% 55% at 48% 40%, rgba(46, 139, 87, 0.18), transparent 72%),
        linear-gradient(160deg, #0d4c73, #0a2e24 70%);
    box-shadow: var(--shadow);
    cursor: grab;
}

.soy-viewport.is-panning {
    cursor: grabbing;
}

.soy-world {
    position: absolute;
    width: 4420px;
    height: 2460px;
    transform-origin: 0 0;
}

.soy-world svg {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

.soy-world.is-focus .soy-node.is-dim { opacity: 0.16; }
.soy-world.is-focus .soy-edge.is-dim,
.soy-world.is-focus .soy-edge-label.is-dim { opacity: 0.08; }
.soy-world.is-focus .soy-node.is-hot {
    z-index: 6;
    box-shadow: 0 0 0 3px #fff, 0 14px 28px rgba(0, 0, 0, 0.38);
}
.soy-world.is-focus .soy-edge.is-hot { opacity: 1; stroke-width: 4.5; }

.soy-region {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 28px;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.06);
}

.soy-region.varoglu { background: rgba(26, 107, 58, 0.34); }
.soy-region.kocari { background: rgba(18, 92, 58, 0.30); }
.soy-region.er { background: rgba(168, 122, 18, 0.30); }
.soy-region.furtuna { background: rgba(140, 62, 78, 0.34); }
.soy-region.volkov { background: rgba(48, 96, 140, 0.34); }
.soy-region.miryano { background: rgba(78, 64, 122, 0.36); }
.soy-region.adil { background: rgba(24, 98, 124, 0.34); }
.soy-region.bedriye { background: rgba(36, 112, 104, 0.34); }
.soy-region.hicran { background: rgba(128, 88, 58, 0.34); }
.soy-region.muhsine { background: rgba(96, 74, 60, 0.36); }
.soy-region.diger { background: rgba(210, 220, 226, 0.12); }

.soy-region strong {
    position: absolute;
    top: 18px;
    left: 24px;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    color: #f3efe4;
}

.soy-region small {
    position: absolute;
    top: 40px;
    left: 24px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.75rem;
}

.soy-node {
    position: absolute;
    width: 184px;
    height: 177px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: var(--text-color);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    padding: 12px 8px 8px;
    text-align: center;
    z-index: 2;
}

.soy-node::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 0;
    height: 3px;
    background: var(--node-accent, var(--primary-color));
    border-radius: 3px;
}

.soy-node[data-family="kocari"],
.soy-node[data-family="varoglu"] { --node-accent: #1a6b3a; }
.soy-node[data-family="furtuna"] { --node-accent: #9a4a5a; }
.soy-node[data-family="er"] { --node-accent: #b8860b; }
.soy-node[data-family="miryano"] { --node-accent: #5b4d86; }
.soy-node[data-family="volkov"] { --node-accent: #3d6f99; }
.soy-node[data-family="koylu"],
.soy-node[data-family="bedriye_hasan"] { --node-accent: #3d7a72; }
.soy-node[data-family="muhsine_cetin"] { --node-accent: #6b5344; }
.soy-node[data-family="hicran_balli"] { --node-accent: #8a6248; }
.soy-node[data-family="adil_ekibi"] { --node-accent: #1f6f8a; }
.soy-node[data-family="diger"] { --node-accent: #5c6b73; }
.soy-node[data-family="merkez"] { --node-accent: #0d4c73; }

.soy-node:hover,
.soy-node:focus {
    outline: 2px solid var(--node-accent, var(--primary-color));
    z-index: 5;
}

.soy-node.hidden { opacity: 0.08; pointer-events: none; }
.soy-node.match { outline: 3px solid #efc78b; z-index: 6; }

.soy-portrait {
    width: 84px;
    height: 84px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.soy-placeholder {
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}

.soy-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.soy-name {
    font-weight: 700;
    font-size: 0.86rem;
    margin-top: 0.35rem;
    color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.soy-actor {
    font-size: 0.75rem;
    color: #667;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.soy-node.has-role .soy-portrait {
    width: 64px;
    height: 64px;
}

.soy-role {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--primary-color);
}

.soy-chip {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #0d4c73;
    color: #fff;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
}

.soy-chip.dim { background: #6c757d; }

.soy-edge { fill: none; stroke: #ff4d4d; stroke-width: 3; opacity: 0.92; pointer-events: stroke; }
.soy-edge.sibling { stroke-dasharray: 12 7; stroke-width: 2.75; }
.soy-edge.marriage { stroke: #f0b429; stroke-width: 5; stroke-dasharray: none; opacity: 0.95; }
.soy-edge.old { stroke: #e598a8; stroke-dasharray: 10 10; }
.soy-edge.assoc { stroke: #7fb3d5; stroke-dasharray: 4 11; }
.soy-edge.kin { stroke-dasharray: 2 7; stroke-width: 2.6; }
.soy-edge.is-muted { opacity: 0.06; }
.soy-edge-hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; }

.soy-edge-label {
    font-size: 16px;
    fill: #efc78b;
    font-weight: 700;
    text-anchor: middle;
    paint-order: stroke;
    stroke: #0d2a33;
    stroke-width: 6px;
}

.soy-edge-label.is-muted { opacity: 0.05; }

.soy-zoom {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: flex;
    gap: 0.35rem;
    z-index: 4;
}

.soy-zoom button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
}

.soy-hint {
    position: absolute;
    left: 14px;
    bottom: 14px;
    color: #fff;
    background: rgba(7, 24, 32, 0.55);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    pointer-events: none;
}

.soy-story {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
}

.soy-story article,
.soy-directory,
.soy-relations {
    background: #fff;
    border-radius: 16px;
    padding: 1.1rem 1.2rem;
    box-shadow: var(--shadow);
}

.soy-directory {
    margin-top: 1.25rem;
}

.soy-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.8rem;
}

.soy-mini {
    border: 1px solid rgba(13, 76, 115, 0.12);
    border-radius: 12px;
    padding: 0.7rem;
    text-align: center;
    height: 100%;
    background: #fff;
}

.soy-mini img,
.soy-mini .soy-fallback {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.4rem;
}

.soy-mini .soy-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-gradient);
    color: #fff;
    font-weight: 700;
}

.soy-mini a,
.soy-dialog a:not(.soy-actor-btn) {
    color: inherit;
    text-decoration: none;
}

.soy-mini > a {
    display: inline-block;
    color: #5c6b73;
    font-size: 0.82rem;
}

.soy-mini a:hover,
.soy-mini a:focus-visible,
.soy-dialog a:not(.soy-actor-btn):hover,
.soy-dialog a:not(.soy-actor-btn):focus-visible {
    color: var(--primary-color);
}

.soy-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.soy-actor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.65rem 1.15rem;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(13, 76, 115, 0.22);
}

.soy-actor-btn:hover,
.soy-actor-btn:focus-visible {
    color: #fff;
    background: #08344e;
}

.soy-actor-btn-ghost {
    background: #fff;
    color: var(--primary-color);
    border: 1px solid rgba(13, 76, 115, 0.28);
    box-shadow: none;
}

.soy-actor-btn-ghost:hover,
.soy-actor-btn-ghost:focus-visible {
    color: #fff;
    background: var(--primary-color);
}

.soy-actor-btn[hidden] { display: none !important; }

.soy-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1080;
    padding: 1rem;
}

.soy-overlay.show { display: flex; }

.soy-dialog {
    width: min(92vw, 520px);
    background: #fff;
    border-radius: 18px;
    padding: 1.3rem;
    position: relative;
}

.soy-dialog .close {
    position: absolute;
    right: 10px;
    top: 6px;
    border: 0;
    background: transparent;
    font-size: 1.6rem;
}

.soy-dialog-top {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.soy-dialog img {
    width: 112px;
    height: 140px;
    object-fit: cover;
    border-radius: 12px;
    background: #e8eef0;
}

.soy-season-dialog {
    width: min(96vw, 1080px);
    max-height: min(92vh, 920px);
    overflow: auto;
    background: #f4f7f8;
    border-radius: 18px;
    padding: 2.5rem 1rem 1rem;
    position: relative;
}

.soy-season-dialog h2 {
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.soy-season-dialog img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    background: #d5dde3;
}

.soy-season-dialog .close {
    position: absolute;
    right: 10px;
    top: 6px;
    border: 0;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
}

@media (max-width: 850px) {
    .soy-intro,
    .soy-story { display: block; }
    .soy-intro p,
    .soy-kicker,
    .soy-edition { display: none; }
    .soy-intro { margin-bottom: 0.45rem; }
    .soy-intro h1 { font-size: 1.35rem; margin-bottom: 0; }
    .soy-legend { margin-bottom: 0.4rem; gap: 0.55rem; }
    .soy-toolbar { align-items: stretch; }
    .soy-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        padding-bottom: 0.2rem;
        -webkit-overflow-scrolling: touch;
    }
    .soy-filters button {
        flex: 0 0 auto;
        min-height: 44px;
    }
    .soy-tools { margin-top: 0.15rem; width: 100%; }
    .soy-tools input { flex: 1; width: auto; min-width: 0; min-height: 44px; }
    .soy-tools button { min-width: 44px; min-height: 44px; }
    .soy-viewport { height: calc(100dvh - 188px); min-height: 420px; }
    .soy-hint { max-width: calc(100% - 170px); font-size: 0.7rem; }
    .soy-zoom button { width: 48px; height: 48px; font-size: 1.2rem; }
}