/* =========================================
   GENEL AYARLAR VE TEMEL YAPI
   ========================================= */
body {
    background-color: #050505;
    color: #f0f0f0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1100px;
    margin: auto;
    padding: 30px;
}

a { text-decoration: none; color: inherit; }

/* Daktilo Efekti İmleci */
.typewriter-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background-color: #10b981;
    margin-left: 5px;
    vertical-align: bottom;
    animation: blink 0.8s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* =========================================
   ÖZEL KAYDIRMA ÇUBUĞU (SCROLLBAR)
   ========================================= */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #064e3b, #10b981);
    border-radius: 10px;
    border: 2px solid #000;
}
::-webkit-scrollbar-thumb:hover { background: #34d399; }
::-webkit-scrollbar-track { background: #0a0a0a; }

html {
    scrollbar-width: thin;
    scrollbar-color: #10b981 #0a0a0a;
}

/* =========================================
   BANNER, BAŞLIK VE AYET ALANI
   ========================================= */
.tevhid-banner {
    text-align: center;
    padding: 50px 0;
    background: linear-gradient(to bottom, #000, #050505);
    border-bottom: 2px solid #064e3b;
    margin-top: 20px;
}

.tevhid-banner h1 {
    font-size: 3.5rem;
    color: #10b981;
    margin: 0;
    text-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

.tevhid-banner p {
    color: #666;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-top: 10px;
}

.ayet-box {
    text-align: center;
    padding: 20px;
    color: #10b981;
    font-style: italic;
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto;
    border-left: 3px solid #10b981;
    background: rgba(16, 185, 129, 0.05);
}

/* =========================================
   ÜST BARLAR (DİL VE KULLANICI)
   ========================================= */
.lang-bar {
    position: absolute; top: 20px; left: 30px;
    font-size: 0.9rem; z-index: 1000;
}
.lang-bar a {
    text-decoration: none; color: #666; font-weight: bold;
    padding: 0 5px; transition: color 0.3s;
}
.lang-bar .active-lang { color: #10b981; }

.top-bar {
    position: absolute; top: 20px; right: 20px;
    font-size: 0.9rem; z-index: 1000;
    display: flex; align-items: center; gap: 15px;
}
.user-name { color: #10b981; font-weight: bold; font-size: 0.85rem; }
.top-bar a { text-decoration: none; transition: color 0.3s; }
.yonetim-link { color: #10b981; font-weight: bold; }
.cikis-link { color: #ef4444; }
.giris-link { color: #666; }
.top-bar a:hover { color: white; }

/* =========================================
   ARAMA VE FİLTRELEME
   ========================================= */
.search-container {
    background: rgba(16, 185, 129, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 50px;
    padding: 12px 25px;
    margin: 25px auto;
    max-width: 850px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    text-align: center;
}

.filter-form {
    display: flex; justify-content: center; align-items: center; gap: 12px;
}

.filter-form input, .filter-form select {
    background: #0a0a0a;
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #e5e7eb;
    padding: 8px 15px;
    border-radius: 25px;
    font-size: 0.85rem;
    min-width: 140px;
    outline: none;
    transition: 0.3s;
}

.filter-form button {
    background: #10b981; color: #050505;
    padding: 8px 20px; border-radius: 25px;
    font-size: 0.8rem; font-weight: 700;
    border: none; cursor: pointer; transition: 0.3s;
}

.filter-form button:hover {
    background: #34d399; transform: scale(1.05);
}

.reset-btn {
    text-decoration: none; background: #1f2937;
    padding: 10px; border-radius: 10px;
    color: #10b981; font-size: 1.1rem;
    transition: 0.3s; display: flex;
    align-items: center; justify-content: center;
}

/* =========================================
   ANASAYFA BUTONLARI (Timeline, Atlas vs.)
   ========================================= */
.action-buttons-container {
    display: flex; justify-content: center;
    gap: 10px; margin: 25px auto;
    flex-wrap: wrap; width: 95%; max-width: 700px;
}

.action-btn {
    flex: 1;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid #10b981;
    color: #10b981;
    padding: 12px 10px;
    border-radius: 50px;
    font-weight: bold; font-size: 0.9rem;
    cursor: pointer; text-decoration: none;
    display: flex; align-items: center; justify-content: center;
    gap: 6px; transition: all 0.3s ease;
    white-space: nowrap; min-width: 120px;
}

.action-btn:hover {
    background: #10b981; color: #000;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
    transform: translateY(-2px);
}

/* =========================================
   KART VE GRID SİSTEMİ
   ========================================= */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 50px; row-gap: 50px;
    align-items: stretch;
    padding-bottom: 80px;
}

@keyframes nefes-alma {
    0% { box-shadow: 0 0 5px rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); border-color: rgba(16, 185, 129, 0.8); }
    100% { box-shadow: 0 0 5px rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); }
}

@keyframes hedef-parlama {
    0% { transform: scale(1.05); background: rgba(16, 185, 129, 0.2); }
    100% { transform: scale(1); background: rgba(10, 10, 10, 0.95); }
}

.card {
    display: flex; flex-direction: column; height: 100%;
    background: #0a0a0a;
    border: 1px solid #10b981;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s, opacity 0.8s ease-out;
    margin-bottom: 20px;
    /* Başlangıçta gizli (JS ile açılacak) */
    opacity: 0; transform: translateY(50px);
    animation: nefes-alma 4s infinite ease-in-out;
}

.card.sahneye-cikti {
    opacity: 1; transform: translateY(0);
}

.card:hover {
    border-color: #34d399; transform: translateY(-5px);
}

.card:target {
    animation: hedef-parlama 2s ease-out;
    border-color: #10b981;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
}

.card-footer {
    margin-top: 10px;
    padding: 8px 15px 12px 15px;
    border-top: none;
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(16, 185, 129, 0.02);
}

/* =========================================
   3D FLIP (ÇEVİRME) EFEKTİ
   ========================================= */
.flip-card {
    background-color: transparent;
    width: 100%; height: 300px;
    perspective: 1000px; cursor: pointer;
}

.flip-card-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

@media (hover: hover) and (min-width: 1025px) {
    .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
}

.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg) !important; }

.flip-card-front, .flip-card-back {
    position: absolute; width: 100%; height: 100%;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    border-radius: 8px; overflow: hidden;
}

.flip-card-front img { width: 100%; height: 100%; object-fit: cover; }

.flip-card-back {
    background-color: #0a0a0a; color: #10b981;
    transform: rotateY(180deg);
    display: flex; align-items: center; justify-content: center;
}

.back-content {
    display: flex; flex-direction: column; justify-content: flex-start;
    height: 100%; padding: 15px;
    overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: #10b981 #111;
}

/* =========================================
   İÇERİK ÖĞELERİ (İsim, Vefa, Vasiyet)
   ========================================= */
.name-container {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-top: 15px;
}

.badge {
    margin-top: 10px; display: inline-block;
    color: #10b981; font-weight: bold;
    font-size: 0.8rem; text-transform: uppercase;
}

.sehit-ses-btn {
    display: inline-flex; cursor: pointer;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid #10b981;
    padding: 2px 8px; border-radius: 20px;
    font-size: 0.8rem;
}

/* Vasiyet (Akordiyon) */
.vasiyet-container {
    position: relative; cursor: pointer;
    transition: all 0.3s ease; margin: 10px 15px;
}

.vasiyet-text {
    display: -webkit-box; -webkit-line-clamp: 4;
    -webkit-box-orient: vertical; overflow: hidden;
    text-overflow: ellipsis; line-height: 1.4;
    max-height: 5.6em; opacity: 0.8;
    transition: all 0.5s ease;
}

.vasiyet-container.acik .vasiyet-text {
    -webkit-line-clamp: unset; max-height: 500px; opacity: 1;
}

.read-more-hint {
    font-size: 0.75rem; color: #10b981;
    font-weight: bold; display: none;
    margin-top: 5px; text-align: right;
}

/* Vefa Alanı (Kayan yazı ve Söz ver) */
.vefa-alani {
    width: 90%;
    margin: 15px auto 10px auto;
    /* Kartın dibine itme */
    margin-top: auto !important;
    border-top: 1px solid rgba(16, 185, 129, 0.2);
    padding-top: 10px;
    background: rgba(16, 185, 129, 0.02);
    border-radius: 12px;
}

.vefa-akisi {
    color: #10b981; font-size: 0.7rem;
    font-weight: bold; margin-bottom: 8px; height: 20px;
}

.vefa-mini-form {
    display: flex; width: 100%;
    background: #000;
    border: 1px solid #10b981;
    border-radius: 8px;
    overflow: hidden; height: 35px;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.1);
}

.vefa-mini-form input {
    flex: 1; background: transparent;
    border: none; color: #fff;
    padding: 0 12px; font-size: 0.8rem; outline: none;
}
.vefa-mini-form input::placeholder { color: #444; }

.vefa-mini-form button {
    background: #10b981; color: #000;
    border: none; font-size: 0.75rem;
    font-weight: 900; padding: 0 15px;
    cursor: pointer; transition: 0.3s;
    white-space: nowrap; text-transform: uppercase;
    height: 100%;
}
.vefa-mini-form button:hover { background: #34d399; padding: 0 20px; }

.btn-vefa {
    margin-bottom: 0; display: inline-block; transition: 0.3s;
}

/* =========================================
   ADMİN BUTONLARI (Kart Altı)
   ========================================= */
.admin-islem { display: flex; gap: 10px; }
.btn-duzenle { color: #10b981; border: 1px solid #10b981; padding: 5px 10px; border-radius: 4px; }
.btn-sil { color: #ef4444; border: 1px solid #ef4444; padding: 5px 10px; border-radius: 4px; }
.btn-ekle { color: #10b981; border: 1px solid #10b981; padding: 8px 15px; border-radius: 20px; font-weight: bold; }

/* =========================================
   MODALLAR (Genel)
   ========================================= */
.modal-overlay {
    display: none; position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    justify-content: center; align-items: center;
}

.modal-content {
    background: #0a0a0a;
    border: 2px solid #10b981;
    border-radius: 30px; padding: 35px;
    max-width: 500px; width: 90%;
    text-align: center; position: relative;
    box-shadow: 0 0 50px rgba(16, 185, 129, 0.3);
}

.modal-img {
    width: 140px; height: 140px;
    border-radius: 50%; object-fit: cover;
    border: 3px solid #10b981;
    margin: 0 auto 20px; display: block;
}

.modal-vasiyet {
    font-style: italic; color: #f0f0f0;
    font-size: 1.15rem; line-height: 1.6; margin: 20px 0;
}

.close-modal {
    position: absolute; top: 20px; right: 25px;
    font-size: 28px; color: #666;
    cursor: pointer; transition: 0.3s;
}
.close-modal:hover { color: #fff; }

/* =========================================
   PAYLAŞIM BUTONLARI
   ========================================= */
.share-buttons {
    margin-top: 25px; border-top: 1px solid #222;
    padding-top: 15px; color: #aaa;
}

.share-btn {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 45px; height: 45px; margin: 5px;
    border-radius: 50% !important;
    background: rgba(16, 185, 129, 0.05) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    transition: all 0.3s ease !important;
    color: #10b981;
}

.share-btn svg { transition: transform 0.3s ease; }

.share-btn:hover {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: #10b981 !important;
    transform: translateY(-3px); color: #fff;
}
.share-btn:hover svg {
    transform: scale(1.1); filter: drop-shadow(0 0 8px #10b981);
}

.share-btn.whatsapp:hover { color: #25D366 !important; border-color: #25D366 !important; }
.share-btn.telegram:hover { color: #0088cc !important; border-color: #0088cc !important; }
.share-btn.twitter:hover { color: #fff !important; border-color: #fff !important; }

/* =========================================
   GİRİŞ SAYFASI (LOGIN)
   ========================================= */
.login-page {
    display: flex; justify-content: center; align-items: center;
    height: 100vh; background-color: #050505; margin: 0;
}

.login-container {
    background: #0a0a0a; border: 1px solid #10b981;
    padding: 45px 35px; border-radius: 20px;
    width: 90%; max-width: 400px;
    text-align: center;
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.15);
}

.login-container h2 {
    color: #10b981; margin-bottom: 35px;
    font-size: 1.8rem; font-weight: 600;
}

.input-group { margin-bottom: 20px; }

.input-group input, .login-container input {
    width: 100%; padding: 14px 20px;
    background: #111; border: 1px solid #333;
    color: white; border-radius: 12px;
    font-size: 1rem; outline: none;
    box-sizing: border-box; transition: 0.3s ease;
}

.input-group input:focus, .login-container input:focus {
    border-color: #10b981; background: #151515;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}

.btn-login {
    width: 100%; padding: 14px;
    background: #10b981; color: #000;
    border: none; border-radius: 12px;
    font-weight: 700; font-size: 1.05rem;
    cursor: pointer; transition: 0.3s;
    margin-top: 10px;
}
.btn-login:hover {
    background: #34d399; transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
}

.back-home {
    display: block; margin-top: 25px;
    color: #666; font-size: 0.9rem;
    text-decoration: none; transition: 0.3s;
}
.back-home:hover { color: #10b981; }

/* =========================================
   VEFA KARTI SAYFASI (Özel Tasarım)
   ========================================= */
.vefa-page-bg {
    background-color: #050505;
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; margin: 0; padding: 20px;
}

.vefa-card {
    max-width: 500px; width: 100%;
    background: #0a0a0a;
    border: 2px solid #10b981;
    border-radius: 25px; padding: 40px 25px;
    text-align: center;
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.15);
}

.vefa-arabic {
    color: #10b981; font-size: 2.8rem;
    margin-bottom: 25px;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.vefa-img-box { margin-bottom: 20px; }
.vefa-img-box img {
    width: 180px; height: 180px;
    object-fit: cover; border-radius: 20px;
    border: 3px solid #10b981;
}

.vefa-title {
    color: #ffffff; font-size: 1.6rem;
    margin-bottom: 20px;
    text-transform: uppercase; letter-spacing: 1.5px;
}

.vefa-text {
    color: #e0e0e0; font-size: 1.1rem;
    line-height: 1.6; font-style: italic;
    white-space: normal; padding: 0 10px;
}

/* =========================================
   YÖNETİM (EKLE/DÜZENLE) SAYFALARI
   ========================================= */
.admin-page {
    background-color: #050505; color: #e5e5e5;
    font-family: 'Segoe UI', sans-serif;
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; padding: 40px 20px; box-sizing: border-box;
}

.form-container, .admin-container {
    width: 100%; max-width: 850px;
}

.form-card {
    background: #0a0a0a; border: 1px solid #10b981;
    border-radius: 20px; padding: 35px;
    box-shadow: 0 0 50px rgba(16, 185, 129, 0.1);
}

.form-title, .form-card h2 {
    color: #10b981; text-align: center;
    font-size: 2rem; margin-bottom: 30px;
    text-transform: uppercase;
}

.section-divider, .form-section-title {
    color: #10b981; font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 1.5px;
    margin: 25px 0 15px 0; padding-bottom: 8px;
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
    font-weight: bold;
}

.form-row { display: flex; gap: 20px; flex-wrap: wrap; }
.form-group {
    flex: 1; min-width: 250px; margin-bottom: 20px;
    display: flex; flex-direction: column;
}

.form-group label, .form-card label {
    color: #888; font-size: 0.85rem; margin-bottom: 8px;
    padding-left: 5px; font-weight: bold; display: block;
}

.form-group input, .form-group textarea,
.form-card input[type="text"], .form-card textarea, .form-card input[type="file"] {
    background: #111; border: 1px solid #333;
    color: #fff; padding: 12px 15px;
    border-radius: 10px; font-size: 0.95rem;
    outline: none; transition: 0.3s ease; width: 100%; box-sizing: border-box;
}

.form-group input:focus, .form-group textarea:focus,
.form-card input:focus, .form-card textarea:focus {
    border-color: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.15);
}

.translation-box, .lang-section {
    background: rgba(16, 185, 129, 0.02);
    padding: 20px; border-radius: 15px; margin: 20px 0;
    border: 1px dashed rgba(16, 185, 129, 0.2); position: relative;
}

.form-footer {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 20px; margin-top: 20px;
}

.date-input { max-width: 200px; }

.btn-submit {
    background: #10b981; color: #000; border: none;
    padding: 16px 45px; border-radius: 14px;
    font-weight: 800; cursor: pointer; transition: 0.3s;
}
.btn-submit:hover {
    background: #34d399; transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(16, 185, 129, 0.3);
}

.btn-back-link, .btn-back, .back-link {
    display: block; text-align: center; margin-top: 25px;
    color: #666; text-decoration: none; font-size: 0.9rem;
    transition: color 0.3s;
}
.btn-back-link:hover, .btn-back:hover, .back-link:hover { color: #10b981; }

.current-img {
    display: block; width: 100px; height: 100px;
    object-fit: cover; border-radius: 10px;
    margin: 10px 0; border: 1px solid #333;
}

/* =========================================
   YÖNETİM ODASI (Listeleme & Yetki)
   ========================================= */
.yonetim-container { max-width: 900px; margin: 0 auto; padding: 20px; }
.yonetim-header { text-align: center; margin-bottom: 40px; }
.yonetim-banner h1 { color: #10b981; font-size: 3rem; margin-bottom: 10px; }
.yonetim-baslik h2 { color: #10b981; margin: 0; }

.flash-message {
    background: rgba(16, 185, 129, 0.1); color: #10b981;
    padding: 15px; border-radius: 10px; margin-bottom: 25px;
    text-align: center; border: 1px solid #10b981;
}

.admin-section {
    background: #0a0a0a; padding: 25px; border-radius: 20px; border: 1px solid #10b981;
}
.admin-section h3 { color: #10b981; margin-top: 0; }

.ekle-form { display: flex; gap: 15px; flex-wrap: wrap; }

.input-field {
    flex: 1; padding: 12px; border-radius: 10px;
    border: 1px solid #333; background: #111; color: white;
    min-width: 200px; font-size: 1rem;
}
.input-field:focus { outline: none; border-color: #10b981; }

.btn-yetki {
    background: #10b981; color: black; border: none;
    padding: 12px 30px; border-radius: 10px;
    cursor: pointer; font-weight: bold; transition: 0.3s;
}
.btn-yetki:hover { background: #34d399; }

.user-list-section { margin-top: 50px; }
.user-list-section h3 { color: #10b981; }

.table-wrapper { overflow-x: auto; }
.user-table {
    width: 100%; border-collapse: collapse; margin-top: 20px;
    background: #0a0a0a; border-radius: 15px; overflow: hidden;
}
.user-table th {
    padding: 15px; border-bottom: 2px solid #10b981;
    text-align: left; background: #111; color: #10b981;
}
.user-table td { padding: 15px; border-bottom: 1px solid #222; }
.user-table tr:last-child td { border-bottom: none; }

.role-badge {
    color: #10b981; font-weight: bold; font-size: 0.8rem;
    background: rgba(16, 185, 129, 0.1); padding: 4px 10px; border-radius: 10px;
}
.text-right { text-align: right; }

.btn-revoke {
    color: #ef4444; text-decoration: none; font-size: 0.85rem;
    border: 1px solid #ef4444; padding: 5px 12px;
    border-radius: 8px; transition: 0.3s; display: inline-block;
}
.btn-revoke:hover { background: #ef4444; color: white; }
.admin-label { color: #666; font-size: 0.8rem; }

/* =========================================
   INTRO VE EFEKTLER
   ========================================= */
#intro-perde {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, #0a0a0a 0%, #000 100%);
    z-index: 99999; display: flex; justify-content: center; align-items: center;
    transition: opacity 2s ease-in-out;
}
.intro-icerik { max-width: 80%; text-align: center; }
#intro-ayet {
    color: #10b981; font-family: 'Amiri', serif; font-size: 2.5rem;
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.intro-hidden {
    opacity: 0; transform: translateY(20px);
    transition: all 2s ease; pointer-events: none;
}
.intro-visible {
    opacity: 1; transform: translateY(0); pointer-events: auto;
}

.btn-emanet {
    background: transparent; border: 2px solid #10b981; color: #10b981;
    padding: 15px 40px; border-radius: 50px; cursor: pointer;
    font-weight: 900; letter-spacing: 2px; margin-top: 30px;
    transition: 0.3s;
}
.btn-emanet:hover {
    background: #10b981; color: #000; box-shadow: 0 0 30px #10b981;
}

#intro-particles {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; pointer-events: none; opacity: 0.6;
}

#particles-js {
    position: fixed; width: 100%; height: 100%; top: 0; left: 0;
    background-color: #050505; z-index: -10;
}

.mobile-finger-hint {
    display: none; position: absolute; bottom: 10px; left: 10px;
    font-size: 1.5rem; opacity: 0.6; z-index: 20;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
    animation: soft-touch 2s infinite; pointer-events: none;
}
@keyframes soft-touch {
    0% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 0.4; }
}

/* =========================================
   ATLAS SAYFASI
   ========================================= */
body.atlas-page {
    margin: 0; padding: 0; overflow: hidden;
    background: #000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.back-btn {
    position: absolute; top: 20px; left: 20px; z-index: 100;
    color: #10b981; text-decoration: none; border: 1px solid #10b981;
    padding: 10px 20px; border-radius: 30px;
    background: rgba(0,0,0,0.5); transition: 0.3s; font-weight: bold;
}
.back-btn:hover { background: #10b981; color: #000; }

#info-card {
    position: absolute; bottom: 30px; right: 30px;
    width: 340px; background: rgba(5, 5, 5, 0.95);
    border: 1px solid #10b981; border-radius: 15px;
    padding: 20px; display: none; color: #fff;
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.2);
    backdrop-filter: blur(10px); z-index: 10;
}

.group-header { text-align: center; color: #10b981; border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 10px; }
.sehit-list { list-style: none; padding: 0; margin: 0; max-height: 200px; overflow-y: auto; }
.sehit-item {
    display: flex; align-items: center; gap: 10px; padding: 8px;
    cursor: pointer; transition: 0.2s; border-radius: 8px;
}
.sehit-item:hover { background: rgba(16, 185, 129, 0.1); }
.mini-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid #10b981; }
.mini-name { font-size: 0.95rem; font-weight: bold; }

.single-view { text-align: center; display: none; }
.card-img {
    width: 110px; height: 110px; border-radius: 50%;
    border: 3px solid #10b981; object-fit: cover;
    margin: 0 auto 10px; display: block;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}
.card-title { color: #10b981; margin: 5px 0; font-size: 1.3rem; }
.card-loc { color: #888; font-size: 0.9rem; margin-bottom: 15px; }

.btn-group { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.btn-atlas {
    padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; cursor: pointer;
    border: 1px solid #10b981; background: transparent; color: #10b981;
    text-decoration: none; transition: 0.3s;
}
.btn-atlas:hover { background: #10b981; color: #000; }
.btn-back-atlas { width: 100%; margin-bottom: 10px; background: #222; border: none; color: #aaa; }

.close-card { position: absolute; top: 10px; right: 15px; cursor: pointer; color: #555; font-size: 1.2rem; }
.close-card:hover { color: #fff; }

.atlas-bio-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 999;
    justify-content: center; align-items: center;
}
.atlas-bio-content {
    background: #111; border: 1px solid #10b981;
    padding: 30px; width: 90%; max-width: 600px; max-height: 80vh;
    overflow-y: auto; border-radius: 15px; color: #ddd; position: relative; line-height: 1.6;
}

/* =========================================
   YÜRÜYÜŞ (TIMELINE) SAYFASI
   ========================================= */
body.timeline-page {
    overflow-x: hidden; background: #000; margin: 0;
}
.timeline-container { width: 100%; height: 100vh; overflow: hidden; }
.timeline-track {
    display: flex; padding-left: 50vw; padding-right: 50vw;
    align-items: center; height: 100vh; width: max-content;
}
.timeline-line {
    position: fixed; top: 50%; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, #10b981, transparent);
    z-index: 0; opacity: 0.5;
}
.timeline-card {
    width: 320px; height: 480px; margin: 0 40px;
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid #10b981; border-radius: 15px;
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 20px; transition: transform 0.3s;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
    flex-shrink: 0;
}
.timeline-card:hover {
    transform: scale(1.05); box-shadow: 0 0 40px rgba(16, 185, 129, 0.4);
    border-color: #34d399;
}
.t-img {
    width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
    border: 3px solid #10b981; margin-bottom: 20px;
}
.t-name {
    font-size: 1.25rem; line-height: 1.4; color: #fff;
    margin: 15px 0; font-weight: bold; text-align: center;
    width: 100%; word-wrap: break-word;
}
.t-date { color: #10b981; font-size: 0.9rem; margin-bottom: 5px; font-family: monospace; }
.t-loc { color: #888; font-size: 0.8rem; margin-bottom: 15px; }
.btn-bio {
    background: transparent; border: 1px solid #10b981; color: #10b981;
    padding: 8px 20px; border-radius: 20px; cursor: pointer; transition: 0.3s;
}
.btn-bio:hover { background: #10b981; color: #000; }
.connector {
    position: absolute; top: -20px; left: 50%; width: 15px; height: 15px;
    background: #10b981; border-radius: 50%; transform: translateX(-50%);
    box-shadow: 0 0 10px #10b981; z-index: 1;
}
.bio-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); z-index: 999; justify-content: center; align-items: center;
}
.bio-content {
    background: #050505; border: 1px solid #10b981; padding: 30px;
    max-width: 600px; width: 90%; border-radius: 15px; color: #fff;
    text-align: center; position: relative;
}
.close-bio {
    position: absolute; top: 10px; right: 20px;
    font-size: 30px; cursor: pointer; color: #10b981;
}

/* =========================================
   TEFEKKÜR (ZEN) MODU
   ========================================= */
.zen-trigger-btn {
    margin: 20px auto; width: fit-content;
    padding: 10px 25px; border: 1px solid #555; border-radius: 30px;
    color: #888; cursor: pointer; font-size: 0.9rem;
    transition: 0.3s; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; gap: 10px;
}
.zen-trigger-btn:hover {
    border-color: #10b981; color: #10b981;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

#zen-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 99999;
    display: none; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 1.5s ease;
}

.zen-container { text-align: center; padding: 20px; max-width: 800px; }
.zen-text {
    font-size: 2rem; color: #fff; font-family: 'Segoe UI', serif;
    line-height: 1.5; margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
    animation: nefes-al 6s infinite ease-in-out;
}
.zen-author {
    font-size: 1.2rem; color: #10b981; font-style: italic;
    margin-top: 10px; opacity: 0.8;
}
.zen-controls { position: absolute; top: 30px; right: 30px; }
.zen-close {
    color: #555; cursor: pointer; font-size: 1rem;
    border: 1px solid #333; padding: 8px 15px; border-radius: 20px;
    transition: 0.3s;
}
.zen-close:hover { color: #fff; border-color: #fff; }

@keyframes nefes-al {
    0% { opacity: 0.7; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1); text-shadow: 0 0 20px rgba(255,255,255,0.6); }
    100% { opacity: 0.7; transform: scale(0.98); }
}

/* =========================================
   RESPONSIVE (MOBİL) AYARLAR
   ========================================= */
@media screen and (max-width: 768px) {
    /* Genel Arama Kutusu */
    .search-container {
        width: 95%; margin: 10px auto; padding: 15px; height: auto;
    }
    .filter-form {
        display: flex; flex-direction: column; gap: 12px;
    }
    .filter-form input, .filter-form select, .filter-form button {
        width: 100%; margin: 0; box-sizing: border-box; font-size: 1rem; padding: 12px;
    }
    .reset-btn { width: 100%; box-sizing: border-box; }

    /* Ana Sayfa Butonları */
    .action-buttons-container {
        flex-direction: column !important; width: 90% !important;
        margin: 15px auto !important; gap: 15px !important;
    }
    .action-btn {
        width: 100% !important; padding: 15px !important; font-size: 1rem !important;
    }

    /* Form ve Admin Sayfaları */
    .form-card { padding: 20px; }
    .form-group { min-width: 100%; }
    .form-footer { flex-direction: column-reverse; align-items: stretch; }
    .date-input, .date-box { max-width: 100%; }
    .btn-submit, .btn-save { width: 100%; }

    /* Zen Modu Yazı Boyutu */
    .zen-text { font-size: 1.4rem; }

    /* Mobil İpucu */
    .mobile-finger-hint { display: block; }
    .flip-card-front { cursor: pointer; }
}
/* Genel Arka Plan */
body {
    background-color: #0B3D2E; /* İşte o zengin yeşili */
    color: #ffffff;            /* Yazılar beyaz olsun ki okunsun */
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
}
/* --- MASAÜSTÜ (PC) İÇİN ÖZEL AYARLAR --- */
@media (min-width: 1024px) {
    body {
        /* PC'de daha geniş, ferah bir tasarım */
        padding: 50px;
    }
}

/* --- MOBİL İÇİN ÖZEL AYARLAR --- */
@media (max-width: 1023px) {
    body {
        /* Mobilde parmakla tıklamaya uygun, daha dar tasarım */
        padding: 15px;
        font-size: 14px;
    }
}
/* Bu sınıf varken sayfa asla kaymaz, tertemiz durur */
.sayfa-kilitli {
    overflow: hidden !important;
    height: 100vh;
}

/* --- VEFA KARTI POPUP TASARIMI --- */
.vefa-modal-overlay {
    display: none; /* Başta gizli */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Arkası kararsın */
    z-index: 10000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.vefa-modal-content {
    background: transparent;
    text-align: center;
    position: relative;
    max-width: 400px;
    width: 90%;
}

.vefa-kapat {
    position: absolute;
    top: -40px; right: 0;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
}

/* --- ASIL KART TASARIMI --- */
.vefa-card-design {
    background: linear-gradient(145deg, #0B3D2E, #052018); /* Zengin Yeşili Gradyan */
    border: 2px solid #D4AF37; /* Altın Sarısı Çerçeve */
    padding: 30px 20px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(11, 61, 46, 0.6);
    color: #fff;
    font-family: 'Georgia', serif; /* Daha ağırbaşlı bir font */
}

.vefa-baslik {
    color: #10b981;
    margin: 0;
    font-size: 1.8rem;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.vefa-alt-baslik {
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: #ccc;
    margin-top: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid #D4AF37;
    display: inline-block;
    padding-bottom: 5px;
}

.vefa-img-container {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #D4AF37; /* Altın Çerçeve */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

/* --- VEFA KARTI FOTOĞRAF AYARI (DÜZELTİLMİŞ) --- */
.vefa-img-container img {
    width: 100%;
    height: 100%;
    /* İŞTE SİHİRLİ KODLAR BUNLAR: */
    object-fit: cover; /* Resmi bozmadan, çerçeveyi dolduracak şekilde kırpar */
    object-position: center top; /* Yüzler genelde üstte olur, o yüzden merkezin biraz üstüne odaklan */
    border-radius: 50%; /* Resmin kendisini de yuvarlayalım garanti olsun */
}

.vefa-isim {
    font-size: 1.5rem;
    color: #D4AF37; /* Altın Rengi İsim */
    margin: 10px 0;
    text-transform: uppercase;
}

.vefa-soz {
    font-style: italic;
    font-size: 1rem;
    line-height: 1.4;
    color: #e0e0e0;
    margin-bottom: 20px;
    min-height: 50px;
}

.vefa-footer {
    font-size: 0.7rem;
    color: #666;
    margin-top: 10px;
}

.btn-indir {
    background: #D4AF37;
    color: #000;
    border: none;
    padding: 10px 20px;
    margin-top: 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

/* --- YENİ İKON AYARLARI --- */
.action-btn .btn-ikon {
    width: 24px;       /* İkon genişliği (İstersen 20px veya 30px yapabilirsin) */
    height: 24px;      /* Yükseklik */
    margin-right: 8px; /* Yazı ile ikon arasındaki boşluk */
    vertical-align: middle; /* Yazının tam ortasında dursun */
    object-fit: contain; /* Resim bozulmadan kutuya sığsın */
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5)); /* Hafif gölge atalım, şekil dursun */
}

/* Tefekkür butonundaki ikon beyaz olsun istersen (eğer siyah ikon bulursan) */
.action-btn[onclick="openZenMode()"] .btn-ikon { filter: invert(1); } */
/* Sadece Sonsuzluk Yürüyüşü (timeline-btn) içindeki ikonu beyaz yap */
.timeline-btn .btn-ikon {
    filter: brightness(0) invert(1);
}

/* Butonları tutan kutu: Sıkışırlarsa aşağıya geçsinler */
.action-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* İŞTE ÇÖZÜM: Sığmayan butonu alt satıra atar */
    gap: 15px; /* Butonlar birbirine yapışmasın, araları açılsın */
    margin-top: 30px;
    width: 100%; /* Ekranı tam kullansın */
}

/* Butonların kendisi: İçeriğe göre uzasın */
.action-btn {
    display: flex; /* İkon ve yazıyı hizalar */
    align-items: center;
    justify-content: center;

    /* Sabit genişlik yerine "otomatik" olsun */
    width: auto;
    min-width: 140px; /* Çok da küçülmesin */
    padding: 12px 25px; /* İçeriden boşluk verelim ki yazı kenara değmesin */

    border: 1px solid #10b981;
    border-radius: 50px; /* Hap şeklinde yuvarlak kenar */
    background: rgba(0, 0, 0, 0.3); /* Hafif karartı */
    color: #10b981;
    text-decoration: none;
    transition: all 0.3s ease;

    /* Yazı ayarları */
    font-size: 0.95rem;
    white-space: nowrap; /* Yazı asla alt satıra inmesin, buton uzasın */
}

/* Mobilde butonlar çok büyükse biraz küçültelim */
@media (max-width: 768px) {
    .action-btn {
        font-size: 0.85rem;
        padding: 10px 15px;
        min-width: 120px;
    }
}

/* Tefekkür Modu Açılınca Devreye Girecek Kilit */
.zen-aktif {
    overflow: hidden !important; /* Scrollbar'ı tamamen gizler */
}

/* Tam Ekran Butonunun Ayarı */
.zen-fullscreen {
    cursor: pointer;
    color: #fff;
    margin-right: 20px; /* Çıkış butonuna yapışmasın */
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.zen-fullscreen:hover {
    transform: scale(1.1); /* Üzerine gelince hafif büyüsün */
    color: #10b981; /* Rengi yeşillensin */
}

/* Sağ üstteki kutuyu hizalayalım */
.zen-controls {
    display: flex;       /* İkonları yan yana dizer */
    align-items: center; /* Ortalar */
    position: absolute;  /* Sağ üste çiviler */
    top: 20px;
    right: 20px;
    z-index: 10001;      /* En üstte dursun */
    transition: all 0.5s ease; /* 0.5 saniyede yumuşakça değişsin */
    opacity: 1;
    transform: translateY(0);
}
.zen-controls.gizli {
    opacity: 0; /* Görünmez yap */
    pointer-events: none; /* Tıklanmasını engelle (Arkadaki yazıya engel olmasın) */
    transform: translateY(-50px); /* Hafifçe yukarı kaydırarak yok et */
}



/* --- ATLAS MÜZİK BUTONU (SİMSİYAH & SADE) --- */
.atlas-music-control {
    position: fixed;
    top: 20px;
    left: 140px; /* Geri dön butonunun yanında */
    z-index: 9999;

    width: 40px;
    height: 40px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%; /* Tam yuvarlak */

    cursor: pointer;
    transition: transform 0.2s ease; /* Sadece boyut değişimi için geçiş */
}

/* Üzerine gelince sadece hafifçe büyüsün, renk değişmesin */
.atlas-music-control:hover {
    transform: scale(1.05);
    border-color: #555555; /* Çerçeve çok az belirginleşsin */
}

/* İkon her zaman beyaz kalsın */
.atlas-music-control img {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* Ses Butonu Çerçevesi */
/* --- ŞEHİT SES BUTONU (SADELEŞTİRİLMİŞ) --- */
.sehit-ses-btn {
    cursor: pointer;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Kutu görünümünü sıfırlıyoruz */
    background: transparent;
    border: none;
    padding: 0;

    transition: transform 0.2s ease;
}

.sehit-ses-btn:hover {
    transform: scale(1.15); /* Üzerine gelince güzelce büyüsün */
    filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.6)); /* Hafif yeşil bir parlama */
}

.ses-ikon-img {
    width: 25px; /* İkonu biraz büyüttük, daha net dursun */
    height: 25px;
    object-fit: contain;
}
/* Vefa Kartı Açılınca Sayfayı Donduran Kilit */
.modal-kilit {
    overflow: hidden !important; /* Arka planda kaydırmayı yasaklar */
}

/* Temel Ayarlar */
body {
    margin: 0;
    padding: 0;
    background: #000;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
}

.back-home {
    position: fixed;
    top: 30px;
    left: 30px;
    color: #10b981;
    text-decoration: none;
    font-weight: bold;
    z-index: 100;
}

/* Kapsayıcılar */
.timeline-container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.timeline-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    padding: 0 15vw;
    position: relative;
    align-items: center;
}

/* Yatay Bağlantı Çizgisi */
.timeline-line {
    position: absolute;
    top: 50%; /* Kartların ortasından değil, noktalardan geçecek şekilde ayarlanacak */
    transform: translateY(-245px); /* Noktaların hizasına çekmek için */
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(16, 185, 129, 0.4);
    z-index: 1;
}

/* Ebu Ubeyde Tarzı Kart Tasarımı */
.timeline-card {
    flex: 0 0 auto;
    width: 350px;
    height: 520px;
    background: #0a0a0a;
    border: 2px solid #10b981; /* Yeşil Çerçeve */
    border-radius: 25px; /* Yuvarlak Köşeler */
    margin: 0 60px;
    padding: 50px 30px;
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* Üstteki Yeşil Nokta */
.connector {
    position: absolute;
    top: -12px;
    width: 24px;
    height: 24px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.8);
    z-index: 3;
}

/* Kart İçi Detaylar */
.t-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #10b981;
    margin-bottom: 25px;
}

.t-name {
    font-size: 1.8rem;
    color: #fff;
    margin: 10px 0;
    font-weight: 700;
}

.t-date {
    color: #10b981;
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: block;
}

.t-loc {
    color: #888;
    margin-bottom: 30px;
}

/* Buton Tasarımı */
.btn-bio {
    margin-top: auto;
    padding: 10px 25px;
    background: transparent;
    border: 1.5px solid #10b981;
    color: #10b981;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-bio:hover {
    background: #10b981;
    color: #000;
}

/* Modal Stilleri */
.bio-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bio-content {
    background: #111;
    max-width: 600px;
    width: 100%;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #10b981;
    position: relative;
}

.close-bio {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 2rem;
    color: #10b981;
    cursor: pointer;
}

/* --- MOBİL ÖZELLEŞTİRMELER (768px ve altı) --- */
@media (max-width: 768px) {

    /* Yanlardaki boşluğu azaltarak kartların daha erken görünmesini sağla */
    .timeline-track {
        padding: 0 5vw;
        gap: 2rem; /* Kartlar arası boşluğu daralt */
    }

    /* Bağlantı çizgisini mobil kart boyutuna göre yukarı çek */
    .timeline-line {
        transform: translateY(-205px); /* Kart yüksekliği değiştiği için nokta hizası da değişti */
    }

    /* Kart boyutlarını küçült */
    .timeline-card {
        width: 280px;  /* 350px -> 280px */
        height: 420px; /* 520px -> 420px */
        margin: 0 30px;
        padding: 30px 20px;
        border-radius: 20px;
    }

    /* Resim boyutunu küçült */
    .t-img {
        width: 100px;
        height: 100px;
        margin-bottom: 15px;
    }

    /* Yazı boyutlarını küçült */
    .t-name {
        font-size: 1.3rem;
    }

    .t-date {
        font-size: 0.9rem;
    }

    .t-loc {
        font-size: 0.85rem;
        margin-bottom: 15px;
    }

    /* Butonu daha küçük ve mobil uyumlu yap */
    .btn-bio {
        padding: 8px 20px;
        font-size: 0.85rem;
    }

    /* Modal (Biyografi penceresi) mobilde tam ekran gibi görünsün */
    .bio-content {
        padding: 25px;
        margin: 10px;
        max-height: 80vh;
        max-width: 60vh;
        overflow-y: auto; /* Uzun yazılar için kaydırma */
    }

    .close-bio {
        top: 10px;
        right: 15px;
    }
}

/* Modal ana arka planı */
.bio-modal {
    display: none;
    position: fixed; /* Sayfa kaysa da ekrana sabitlenir */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Arkayı karartır */
    z-index: 9999; /* En üstte durmasını sağlar */
    align-items: center; /* Dikeyde ortalar */
    justify-content: center; /* Yatayda ortalar */
    backdrop-filter: blur(5px); /* Arkayı hafif bulanıklaştırır */
}

/* Modal kutusunun kendisi */
.bio-content {
    background: #111;
    border: 2px solid #10b981;
    border-radius: 20px;
    width: 90%; /* Mobilde geniş durması için */
    max-width: 600px;
    padding: 30px;
    position: relative;
    max-height: 80vh; /* Ekranın dışına taşmaması için */
    overflow-y: auto; /* Yazı çok uzunsa kendi içinde kayar */
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
}

/* Modal içindeki metin ayarları */
#modalText {
    line-height: 1.8;
    color: #eee;
    font-size: 1rem;
    white-space: pre-wrap; /* Satır başlarını korur */
    margin-top: 20px;
}

.close-bio {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    color: #10b981;
    cursor: pointer;
    z-index: 10000;
}

/* Bilgi Kartı ve Modallar İçin */
#info-card {
    display: none; /* JavaScript ile kontrol ediliyor */
}

#info-card.active {
    display: block;
}

.bio-modal-title {
    color: #10b981;
    margin-top: 0;
}

.bio-modal-text {
    white-space: pre-wrap;
    line-height: 1.6;
}

.atlas-bio-modal {
    display: none; /* Varsayılan kapalı */
    /* ... mevcut modal stillerin ... */
}

.atlas-bio-modal.active {
    display: flex; /* Aktifken görünür */
}

#back-to-list-btn {
    margin-bottom: 10px;
}