@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================
   1. DEĞİŞKENLER VE ANA AYARLAR (KOYU TEMA)
========================================== */
:root {
    --bg-main: #0f172a;       /* En arka plan lacivert */
    --bg-card: #1e293b;       /* Kart arka planı */
    --text-main: #f8fafc;     /* Ana yazı rengi (beyazımsı) */
    --text-muted: #94a3b8;    /* Sönük yazı rengi */
    --border-color: #334155;  /* Çizgi rengi */
    --sidebar-bg: #0b1120;    /* Sağ sidebar biraz daha koyu */
    --input-bg: #0f172a;      /* Arama ve modal iç arka planı */
    --modal-bg: #1e293b;      /* Modal arka planı */
    --accent-color: #8b5cf6;  /* Mor detaylar */
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Inter', sans-serif; 
}

body { 
    background-color: var(--bg-main); 
    color: var(--text-main); 
}

/* Scrollbar Özelleştirme (Koyu Temaya Uygun) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ==========================================
   2. GİRİŞ (LOGIN) EKRANI
========================================== */
.login-wrapper {
    height: 100vh; background-color: var(--bg-main); display: flex;
    justify-content: center; align-items: center; position: relative; overflow: hidden;
}

.login-box {
    background: rgba(30, 41, 59, 0.7); padding: 40px; border-radius: 16px;
    width: 400px; z-index: 10; box-shadow: 0 10px 30px rgba(0,0,0,0.5); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.05);
}

.login-header { text-align: center; margin-bottom: 30px; }
.login-header h2 { color: white; font-size: 22px; }

.input-group { margin-bottom: 20px; }
.input-group label { display: block; color: #cbd5e1; font-size: 13px; margin-bottom: 8px; font-weight: 500;}
.input-group input {
    width: 100%; padding: 12px 15px; border-radius: 8px; border: 1px solid var(--border-color);
    background: rgba(15, 23, 42, 0.8); color: white; outline: none; font-size: 14px; transition: 0.2s;
}
.input-group input:focus { border-color: var(--accent-color); }

.login-btn {
    width: 100%; padding: 14px; border: none; border-radius: 8px;
    background: linear-gradient(90deg, #6d28d9, #8b5cf6); color: white;
    font-weight: 600; font-size: 15px; cursor: pointer; transition: 0.3s; margin-top: 10px;
}
.login-btn:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4); }

.login-footer { text-align: center; margin-top: 25px; }
.login-footer a { color: #64748b; font-size: 13px; text-decoration: none; transition: 0.2s; font-weight: 500;}
.login-footer a:hover { color: var(--accent-color); }

.wave-bg {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 35%;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="%234c1d95" fill-opacity="0.3" d="M0,160L48,170.7C96,181,192,203,288,192C384,181,480,139,576,133.3C672,128,768,160,864,186.7C960,213,1056,235,1152,218.7C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
    background-size: cover;
}

/* ==========================================
   3. ANA UYGULAMA VE YÜZEN ÜST BAR (FLOATING)
========================================== */
.app-container { display: flex; flex-direction: column; min-height: 100vh; }

.floating-top-bar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1000px;
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    backdrop-filter: blur(16px);
    z-index: 1000;
}

.logo-area { display: flex; align-items: center; justify-content: center; }
.floating-logo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.1); }

.action-bar-inner { display: flex; align-items: center; gap: 15px; }

.new-note-btn { 
    background-color: var(--accent-color); color: white; border: none; 
    padding: 10px 20px; border-radius: 25px; font-weight: 500; font-size: 14px;
    cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 8px;
}
.new-note-btn:hover { background-color: #7c3aed; transform: scale(1.05); }

.search-box { 
    display: flex; align-items: center; background: rgba(0,0,0,0.3); 
    border: 1px solid var(--border-color); border-radius: 25px; padding: 10px 18px; width: 250px; 
}
.search-box i { color: var(--text-muted); margin-right: 10px; }
.search-box input { border: none; outline: none; width: 100%; background: transparent; color: var(--text-main); font-size: 14px; }
.search-box input::placeholder { color: var(--text-muted); }

.user-area { display: flex; align-items: center; gap: 20px; }
.notification-icon { font-size: 22px; color: var(--text-muted); cursor: pointer; transition: 0.2s;}
.notification-icon:hover { color: var(--text-main); }
.profile-pic { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; cursor: pointer; border: 2px solid transparent; transition: 0.2s;}
.profile-pic:hover { border-color: var(--accent-color); }

/* ==========================================
   4. AÇILIR MENÜLER (BİLDİRİMLER VE PROFİL)
========================================== */
.notification-wrapper, .profile-wrapper { position: relative; }

.notification-dropdown { 
    display: none; position: absolute; top: 55px; right: -10px; 
    width: 320px; background-color: var(--bg-card); border: 1px solid var(--border-color); 
    border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); z-index: 100; overflow: hidden; 
}
.notification-dropdown.active { display: block; animation: fadeIn 0.2s ease; }

.notif-header { padding: 15px; border-bottom: 1px solid var(--border-color); font-size: 14px; font-weight: 600; color: var(--text-main); background: rgba(0,0,0,0.2); }
.notif-body { max-height: 300px; overflow-y: auto; }
.notif-item { padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,0.03); display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; transition: 0.2s;}
.notif-item:hover { background-color: rgba(255,255,255,0.03); }
.notif-content { flex: 1; }
.notif-text { font-size: 13px; color: var(--text-main); margin-bottom: 5px; line-height: 1.4;}
.notif-time { font-size: 11px; color: var(--text-muted); }
.notif-delete { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; transition: 0.2s; padding: 5px;}
.notif-delete:hover { color: #ef4444; }

.profile-dropdown { 
    display: none; position: absolute; top: 55px; right: 0; 
    width: 200px; background-color: var(--bg-card); border: 1px solid var(--border-color); 
    border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); z-index: 100; overflow: hidden; 
}
.profile-dropdown.active { display: block; animation: fadeIn 0.2s ease;}
.dropdown-item { padding: 12px 18px; font-size: 13px; font-weight: 500; color: var(--text-main); cursor: pointer; display: flex; align-items: center; gap: 12px; transition: 0.2s; }
.dropdown-item i { font-size: 15px; width: 16px; text-align: center; color: var(--text-muted); }
.dropdown-item:hover { background-color: rgba(255,255,255,0.05); }
.dropdown-item:hover i { color: var(--text-main); }
.text-danger { color: #ef4444; border-top: 1px solid var(--border-color); }
.text-danger i { color: #ef4444; }
.text-danger:hover { background-color: rgba(239, 68, 68, 0.1); color: #ef4444; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================
   5. ANA İÇERİK VE NOT KARTLARI
========================================== */
/* Yüzen bar olduğu için içeriği üstten boşluk bırakarak aşağı itiyoruz */
.main-content { display: flex; flex: 1; padding: 110px 30px 20px 30px; gap: 30px; }
.notes-section { flex: 3; display: flex; flex-direction: column; }
.empty-state { text-align: center; color: var(--text-muted); margin-top: 50px; display: none; font-style: italic; font-size: 15px; }

.notes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }

.note-card {
    height: 220px; background-color: var(--bg-card); border-radius: 12px; padding: 18px; 
    border: 2px solid var(--border-color); display: flex; flex-direction: column; 
    cursor: pointer; transition: all 0.2s ease;
}
.note-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.4); }
.note-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }

.priority-badge { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; color: white; letter-spacing: 0.5px;}
.priority-low { background-color: #10b981; } 
.priority-medium { background-color: #f59e0b; } 
.priority-high { background-color: #ef4444; } 

.delete-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; transition: 0.2s;}
.delete-btn:hover { color: #ef4444; transform: scale(1.1); }

.note-title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-main); }
.note-content { font-size: 13px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; margin-top: 10px; line-height: 1.5; }
.note-dates { display: flex; flex-direction: column; font-size: 10px; color: #64748b; margin-top: 12px; border-top: 1px solid var(--border-color); padding-top: 10px; gap: 4px; }

/* ==========================================
   6. ÇEVRİMİÇİ BÖLÜMÜ
========================================== */
.online-section { 
    flex: 1; background-color: var(--sidebar-bg); border: 1px solid var(--border-color); 
    max-width: 260px; border-radius: 16px; padding: 25px; 
}
.online-title { font-size: 13px; margin-bottom: 25px; font-weight: 700; color: var(--text-muted); letter-spacing: 1px; }
.online-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.online-user { display: flex; align-items: center; gap: 12px; padding: 5px; border-radius: 8px; transition: 0.2s; }
.online-user:hover { background-color: rgba(255,255,255,0.03); }
.user-avatar-container { position: relative; }
.user-avatar { width: 38px; height: 38px; border-radius: 50%; background-color: var(--border-color); }
.online-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; background-color: #10b981; border-radius: 50%; border: 2px solid var(--sidebar-bg); }
.user-name { font-size: 14px; font-weight: 500; color: var(--text-main); }

/* ==========================================
   7. MODALLAR (DÜZENLEME, ŞİFRE, YÖNETİM)
========================================== */
.modal-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; 
    z-index: 2000; backdrop-filter: blur(5px);
}
.modal-content { 
    background-color: var(--modal-bg); width: 95%; max-width: 850px; height: 85vh; 
    border-radius: 16px; padding: 30px; display: flex; flex-direction: column; 
    box-shadow: 0 15px 50px rgba(0,0,0,0.6); border: 1px solid var(--border-color);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; margin-bottom: 20px; }
.modal-title-input { font-size: 24px; font-weight: 600; color: var(--text-main); border: none; outline: none; width: 100%; background: transparent; }
.modal-title-input::placeholder { color: var(--text-muted); }

.modal-tools { display: flex; align-items: center; gap: 18px; }
.priority-select { border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-main); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 500; outline: none; cursor: pointer; }

.color-picker-container { position: relative; }
.color-btn { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
.color-btn:hover { color: var(--text-main); }
.color-menu { 
    display: none; position: absolute; top: 35px; right: -20px; background: var(--bg-card); 
    border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; 
    grid-template-columns: repeat(3, 1fr); gap: 10px; z-index: 10; box-shadow: 0 10px 30px rgba(0,0,0,0.6); 
}
.color-menu.active { display: grid; animation: fadeIn 0.2s ease;}
.color-dot { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,0.05); transition: 0.2s;}
.color-dot:hover { transform: scale(1.15); border-color: white;}

.close-btn { background: none; border: none; font-size: 22px; color: var(--text-muted); cursor: pointer; transition: 0.2s;}
.close-btn:hover { color: #ef4444; transform: scale(1.1);}

.modal-body-input { flex: 1; border: none; outline: none; resize: none; font-size: 15px; color: var(--text-main); background: transparent; line-height: 1.7; }
.modal-body-input::placeholder { color: var(--text-muted); }
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}
.save-status { font-size: 13px; font-weight: 600; }

/* Admin Paneli Listesi */
.admin-body { padding: 10px 0; }
.add-user-form { display: flex; gap: 10px; margin-bottom: 25px; }
.admin-user-item { 
    display: flex; justify-content: space-between; align-items: center; 
    background: var(--input-bg); padding: 12px 18px; border-radius: 10px; 
    border: 1px solid var(--border-color); margin-bottom: 10px; transition: 0.2s;
}
.admin-user-item:hover { border-color: var(--accent-color); }
.admin-user-name { font-size: 15px; font-weight: 500; color: var(--text-main); }

/* ==========================================
   8. MOBİL VE TABLET UYUMU (RESPONSIVE)
========================================== */
@media (max-width: 1200px) {
    .notes-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .floating-top-bar { width: 90%; top: 15px; border-radius: 15px; flex-wrap: wrap; gap: 15px;}
    .action-bar-inner { order: 3; width: 100%; justify-content: space-between; }
    .action-bar-inner .search-box { width: 60%; }
    .main-content { padding-top: 140px; flex-direction: column; }
    .notes-grid { grid-template-columns: repeat(2, 1fr); }
    .online-section { max-width: 100%; display: flex; flex-direction: column;}
    .online-list { flex-direction: row; flex-wrap: wrap; gap: 20px; }
}

@media (max-width: 600px) {
    .notes-grid { grid-template-columns: 1fr; }
    .action-bar-inner .search-box { width: 100%; }
    .action-bar-inner { flex-direction: column; align-items: stretch; }
    .main-content { padding-top: 180px; }
    .login-box { width: 90%; padding: 30px 20px; }
}

/* ==========================================
   GÜNCELLEMELER: HİZALAMA VE TAŞMA ÇÖZÜMLERİ
========================================== */

/* 1. Boş Durum Yazısını Tam Ekrana Ortalama */
.empty-state { 
    text-align: center; 
    color: var(--text-muted); 
    margin-top: 100px; /* Biraz daha aşağı aldık */
    display: none; 
    font-style: italic; 
    font-size: 15px; 
    /* Sağdaki 260px'lik menüyü dengelemek için yazıyı 130px sağa itiyoruz. Böylece üstteki menüyle TAM KESİŞECEK! */
    transform: translateX(130px); 
}

/* 2. Admin Üye Ekleme Formu Taşma Çözümü */
.add-user-form { 
    display: flex; 
    flex-wrap: wrap; /* Ekrana sığmazsa zekice alt satıra kaysın */
    gap: 12px; 
    margin-bottom: 25px; 
}

.add-user-form input, .add-user-form select {
    flex: 1 1 30%; /* Kutular yan yana esnek dursun */
    min-width: 130px; /* Çok ezilip büzülmesinler */
}

.add-user-form button {
    display: flex;       /* İçeriği (Yazıyı ve varsa ikonu) esnek yapıyoruz */
    justify-content: center; /* Yazıyı YATAYDA (Sağ-Sol) tam merkeze alıyoruz! */
    align-items: center;     /* Yazıyı DİKEYDE (Üst-Alt) tam merkeze alıyoruz */
    
    /* Eski taşma çözümlerimiz de aynen kalsın, onları ezmiyoruz */
    flex: 1 1 100%;       
    margin-top: 5px;
    padding: 12px;
}

/* Mobilde ve Tablette ekran daralınca sağa itmeyi (transform) iptal etmemiz lazım ki ekran dışına çıkmasın */
@media (max-width: 900px) {
    .empty-state { transform: translateX(0); }
}

/* Logo ve yazıyı yan yana hizalayıp boşluk bırakıyoruz */
.logo-area {
    display: flex;
    align-items: center;
    gap: 12px; /* Logo ile yazı arasındaki mesafe */
}

/* Yazının kendisi: Koyu temaya uygun, premium bir yazı tipi (Kanit ile uyumlu Inter) */
.logo-text {
    font-size: 19px;     /* Yazı boyutu (ne çok büyük ne çok küçük) */
    font-weight: 700;    /* Kalın (Bold) yapıyoruz ki marka parlasın */
    color: white;        /* Yazı rengi beyaz */
    letter-spacing: 0.5px; /* Harflerin arasını biraz açtık, daha modern durur */
    
    /* Mobil ve tablette ekran daralınca yazıyı biraz daha küçültelim ki sığsın */
}

/* Mobilde ve Tablette logoyu biraz daha küçültüyoruz */
@media (max-width: 900px) {
    .logo-text { font-size: 16px; }
    .floating-logo { width: 35px; height: 35px; }
}