/* Ağaç Temel Yapısı */
.tree ul {
    padding-top: 20px; position: relative;
    transition: all 0.5s;
    display: flex; justify-content: center;
}
.tree li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
}
/* Bağlantı Çizgileri */
.tree li::before, .tree li::after {
    content: ''; position: absolute; top: 0; right: 50%;
    border-top: 2px solid #ccc;
    width: 50%; height: 20px;
}
.tree li::after {
    right: auto; left: 50%; border-left: 2px solid #ccc;
}
.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}
.tree li:only-child { padding-top: 0;}
.tree li:first-child::before, .tree li:last-child::after {
    border: 0 none;
}
.tree li:last-child::before {
    border-right: 2px solid #ccc; border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
    border-radius: 5px 0 0 0;
}
/* Düğümlerden (Kişilerden) aşağı inen çizgiler */
.tree ul ul::before {
    content: ''; position: absolute; top: 0; left: 50%;
    border-left: 2px solid #ccc;
    width: 0; height: 20px;
}
/* Kişi Kutusu Tasarımı */
.member-box {
    border: 1px solid #ccc; padding: 10px;
    text-decoration: none; color: #fff;
    background-color: #333; /* CK3 benzeri koyu tema */
    font-family: arial, verdana, tahoma;
    font-size: 14px; display: inline-block;
    border-radius: 5px; transition: all 0.5s;
    cursor: pointer;
}
.member-box:hover {
    background: #555; color: #fff; border: 1px solid #94a0b4;
}
.expand-btn {
    display: block; margin: 5px auto 0;
    width: 20px; height: 20px;
    background: #007bff; color: white;
    border: none; border-radius: 50%;
    cursor: pointer; font-weight: bold;
}
.hidden-children {
    display: none !important;
}