/*
Theme Name: Derneğim App
Author: Halk Kürsüsü Gençlik Teşkilatı
Description: Dernek Takip Uygulaması
Version: 1.0
*/

:root {
    --bg-color: #eaf1f8; /* Arkaplan resmi yokken görünecek tatlı mavi */
    --text-dark: #1b2749;
    --text-muted: #64748b;
    --accent-blue: #2563eb;
    --accent-cyan: #06b6d4;
    --accent-green: #10b981;
    
    /* Neumorphic & Glass Gölgeler */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.5);
    --shadow-soft: 8px 8px 20px rgba(166, 180, 200, 0.4), -8px -8px 20px rgba(255, 255, 255, 0.9);
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-dark);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ARKA PLAN RESMİ İÇİN AYAR */
.app-background {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center bottom;
    opacity: 0.8;
}

.app-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 30px 20px;
    gap: 50px;
    max-width: 1300px;
    margin: 0 auto;
}

/* ÜST MENÜ PİLLERİ */
.top-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 50px;
}

.neu-pill {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: all 0.3s ease;
}
.neu-pill:hover { transform: translateY(-3px); }
.neu-pill i { font-size: 1.4rem; color: var(--accent-blue); }

/* ANA YERLEŞİM */
.main-dashboard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 30px;
}

.side-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: 1;
}

/* KARTLAR */
.neu-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 25px;
    padding: 25px;
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: transform 0.3s ease;
    gap: 20px;
}
.neu-card:hover { transform: scale(1.02); }

.icon-circle {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    color: var(--accent-blue);
    box-shadow: inset 4px 4px 8px rgba(166, 180, 200, 0.3), inset -4px -4px 8px #fff;
    flex-shrink: 0;
}

.card-text { flex: 1; }
.card-text h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-dark);
}
.card-text .line { height: 4px; border-radius: 2px; width: 40px; }
.line.blue { background: var(--accent-blue); }
.line.cyan { background: var(--accent-cyan); }
.line.dark-blue { background: #1e3a8a; }

.arrow { font-size: 1.5rem; color: var(--text-muted); }

/* ORTA LOGO VE HALKA */
.center-stage {
    position: relative;
    width: 350px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1.2;
}

.outer-ring {
    position: absolute;
    width: 320px; height: 320px;
    border: 3px solid var(--accent-cyan);
    border-radius: 50%;
    z-index: 1;
}

.outer-ring .dot {
    position: absolute;
    width: 14px; height: 14px;
    background: #fff;
    border: 3px solid var(--accent-cyan);
    border-radius: 50%;
}
.dot.top { top: -8px; left: 50%; transform: translateX(-50%); }
.dot.bottom { bottom: -8px; left: 50%; transform: translateX(-50%); }
.dot.left { left: -8px; top: 50%; transform: translateY(-50%); }
.dot.right { right: -8px; top: 50%; transform: translateY(-50%); }

.center-logo-box {
    position: relative;
    z-index: 2;
    width: 260px; height: 260px;
    background: #fff;
    border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: var(--shadow-soft);
    padding: 20px;
}

.logo-icon-wrapper i {
    font-size: 4.5rem;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
}

.center-logo-box h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.3;
}

.tiny-heart { color: var(--accent-cyan); margin-top: 3px; font-size: 1.1rem; }

/* ALT PANEL */
.bottom-panel { width: 100%; display: flex; justify-content: center; }
.wide-card {
    width: 100%;
    max-width: 1600px;
    display: flex;
    justify-content: space-between;
    padding: 30px 40px;
    cursor: default;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 25px;
    box-shadow: var(--shadow-soft);
}
.wide-card:hover { transform: none; }

.info-section { 
    display: flex; 
    align-items: flex-start; 
    gap: 20px; 
    flex: 1; 
    min-width: 0; /* Taşma koruması */
}

.info-lines {
    flex: 1;
    min-width: 0; /* Taşma koruması */
}

.info-lines p {
    font-size: 0.9rem; 
    margin: 10px 0;
    display: flex; 
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 0; /* İçeriklerin daralırken patlamasını engeller */
}
.info-lines .label { 
    font-weight: 600; 
    min-width: 120px; 
    color: var(--text-dark);
    flex-shrink: 0; /* Başlıkların ezilmesini önler */
}
.info-lines .dots { 
    color: var(--text-muted); 
    flex-grow: 1;
    flex-shrink: 1; /* Sıkışınca noktalar otomatik küçülür veya kaybolur */
    overflow: hidden;
    white-space: nowrap;
    margin: 0 10px;
}
.info-lines .value {
    color: var(--text-muted);
    font-weight: 500;
    text-align: right;
    word-break: break-word; /* IBAN'lar güvenle alt satıra geçer, dışarı taşmaz */
    flex-shrink: 0; /* DEĞERLERİN MOBİLDE SIFIRA SIKIŞIP YOK OLMASINI ENGELLER */
    max-width: 65%;
}

.divider-line { 
    width: 2px; 
    background: rgba(166, 180, 200, 0.2); 
    margin: 0 40px; 
    flex-shrink: 0;
}

/* DİNAMİK PANELLER (Açılır pencereler) */
.panel-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(234, 241, 248, 0.8); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: 0.3s; z-index: 100;
}
.panel-overlay.active { opacity: 1; pointer-events: auto; }

.panel-content { 
    width: 95%; 
    max-width: 850px; 
    max-height: 85vh; 
    position: relative; 
    cursor: default; 
    overflow-y: auto; 
    padding: 30px !important;
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 25px;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
}

.close-btn {
    position: absolute; top: 20px; right: 20px;
    background: #fff; border: none; width: 40px; height: 40px; border-radius: 50%;
    box-shadow: var(--shadow-soft); cursor: pointer; color: #ef4444; font-size: 1.2rem;
    z-index: 10;
}

/* =========================================
   AYARLAR PANELİ VE FORM TASARIMI
========================================= */

.dynamic-uploaded-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.settings-box {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 15px;
    padding: 20px;
    box-shadow: inset 2px 2px 5px rgba(166, 180, 200, 0.1);
}

.full-width-row {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .full-width-row {
        grid-column: span 1;
    }
}

.settings-box h4 {
    font-size: 1rem;
    color: var(--accent-blue);
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(166, 180, 200, 0.2);
    padding-bottom: 5px;
}

/* Form İnput Tasarımları */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.form-group input, .form-group textarea {
    padding: 10px 15px;
    border: 1px solid rgba(166, 180, 200, 0.4);
    border-radius: 10px;
    background: #fff;
    font-size: 0.9rem;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.2);
}

.form-sub-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Aksiyon Butonları */
.settings-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(166, 180, 200, 0.2);
}

.btn-action {
    padding: 12px 30px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.2s;
}
.btn-action:active { transform: scale(0.95); }

.btn-cancel { background: #f1f5f9; color: var(--text-muted); }
.btn-save { background: linear-gradient(135deg, #0284c7, #06b6d4); color: #fff; }
.btn-aidat { 
    background: linear-gradient(135deg, #00b5ad, #06b6d4); 
    color: #fff; 
    border: none; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%; 
    max-width: 220px;
    box-shadow: 4px 4px 10px rgba(166, 180, 200, 0.4), -4px -4px 10px rgba(255, 255, 255, 0.9);
}

body.theme-dark-mode .btn-aidat {
    box-shadow: 4px 4px 10px #0b0f19, -4px -4px 10px #1d293d !important;
}

/* Split Görünüm */
.split-info-panel { display: flex; gap: 20px; }
.info-block-box { flex: 1; background: #fff; padding: 20px; border-radius: 15px; box-shadow: var(--shadow-soft); }

/* =========================================
   MOBİL UYUMLULUK (RESPONSIVE DESIGN)
========================================= */

/* Tabletler ve Küçük Ekranlı Bilgisayarlar (992px ve altı) */
@media (max-width: 992px) {
    .main-dashboard {
        flex-direction: column;
        gap: 40px;
    }

    .center-stage {
        order: -1;
        width: 300px;
        height: 300px;
    }

    .outer-ring {
        width: 280px; 
        height: 280px;
    }

    .center-logo-box {
        width: 220px; 
        height: 220px;
    }

    .logo-icon-wrapper i {
        font-size: 4rem;
    }

    .side-column {
        width: 100%;
        max-width: 500px;
    }

    .wide-card {
        flex-direction: column !important;
        gap: 25px;
        padding: 25px;
        width: 100%;
    }

    .divider-line {
        width: 100%;
        height: 2px;
        margin: 10px 0;
    }
}

/* Telefonlar (768px ve altı) */
@media (max-width: 768px) {
    .top-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        padding: 0 10px;
    }

    .app-container {
        padding: 15px 10px;
        gap: 30px;
    }

    .center-stage {
        width: 250px;
        height: 250px;
    }

    .outer-ring {
        width: 230px; 
        height: 230px;
    }

    .center-logo-box {
        width: 180px; 
        height: 180px;
    }

    .logo-icon-wrapper i {
        font-size: 3rem;
    }

    .center-logo-box h2 {
        font-size: 1.1rem;
    }

    .info-section {
        width: 100%;
        gap: 15px;
    }

    .info-lines p {
        justify-content: space-between; /* Mobilde de temiz sol-sağ dengesi kurar */
        gap: 10px;
    }
    
    .info-lines .dots {
        display: none; /* Aşırı dar ekranlarda göz yormasın diye noktaları uçurduk */
    }

    .info-lines .label {
        min-width: auto; /* Sabit mesafeyi kaldırıyoruz ki esnek kutu rahat çalışsın */
    }

    .info-lines .value {
        text-align: right;
        max-width: 60%;
    }

    /* AYARLAR MODAL MOBİL UYUMU */
    .form-sub-split { grid-template-columns: 1fr; }
    .settings-actions { flex-direction: column; align-items: stretch; }
    .btn-aidat { max-width: none; }
}

/* Panel İçi WP Giriş Formu Tasarımı */
#panel-login-form p {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
}
#panel-login-form label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}
#panel-login-form input[type="text"],
#panel-login-form input[type="password"] {
    padding: 10px 15px;
    border: 1px solid rgba(166, 180, 200, 0.4);
    border-radius: 10px;
    width: 100%;
    background: #fff;
    font-size: 0.9rem;
    color: var(--text-dark, #1e293b);
    box-sizing: border-box;
}
#panel-login-form input[type="submit"] {
    background: linear-gradient(135deg, #ef4444, #dc2626); /* Kırmızı tonlarında gradient */
    color: #ffffff; /* Beyaz metin */
    padding: 12px 30px;
    border-radius: 10px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    transition: transform 0.2s;
}
#panel-login-form input[type="submit"]:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}
#panel-login-form input[type="submit"]:active {
    transform: scale(0.95);
}
.login-remember {
    flex-direction: row !important;
    align-items: center;
    gap: 10px !important;
}
.login-remember input {
    width: auto !important;
}

/* --- TEMA RENK YAPILANDIRMALARI --- */

/* 1. Kırmızı & Beyaz Tema Aktifken */
body.theme-red-white {
    --primary-gradient: linear-gradient(135deg, #ef4444, #dc2626);
    --accent-color: #ef4444;
}
body.theme-red-white .neu-card .line.blue, 
body.theme-red-white .neu-card .line.cyan,
body.theme-red-white .neu-card .line.dark-blue {
    background: #ef4444 !important; /* Kartların altındaki çizgileri kırmızı yapar */
}
body.theme-red-white .top-nav .neu-pill i,
body.theme-red-white .icon-circle i {
    color: #ef4444 !important; /* İkon renklerini kırmızıya çeker */
}
body.theme-red-white .btn-save {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

/* Ana halkanın çizgi rengini kırmızı yap */
body.theme-red-white .outer-ring {
    border-color: #ef4444 !important;
}

/* Halkanın etrafındaki 4 küçük noktanın çerçeve rengini kırmızı yap */
body.theme-red-white .dot {
    border-color: #ef4444 !important;
}

/* 2. Koyu Tema Aktifken */
body.theme-dark-mode {
    background-color: #0f172a !important;
    color: #f1f5f9 !important; /* Genel metin rengi açık renk oldu */
}

body.theme-dark-mode .app-background {
    background: #0f172a !important;
}

body.theme-dark-mode .app-container {
    color: #f1f5f9;
}

body.theme-dark-mode .neu-card,
body.theme-dark-mode .neu-pill {
    background: #1e293b !important;
    color: #f1f5f9 !important; /* Hatalı kod düzeltildi */
    box-shadow: 5px 5px 10px #0b0f19, -5px -5px 10px #1d293d !important; 
}

/* Panel içindeki başlıklar, paragraflar ve etiketlerin okunabilir olması için */
body.theme-dark-mode h1, 
body.theme-dark-mode h2, 
body.theme-dark-mode h3, 
body.theme-dark-mode h4,
body.theme-dark-mode p,
body.theme-dark-mode span,
body.theme-dark-mode label,
body.theme-dark-mode .card-text h3 {
    color: #33b7fb !important; 
}

body.theme-dark-mode .center-logo-box h2 {
    color: #33b7fb !important;
}

/* Form içindeki input ve textareaların koyu temaya uyumu */
body.theme-dark-mode input,
body.theme-dark-mode textarea {
    background: #0f172a !important;
    color: #f1f5f9 !important;
    border: 1px solid #334155 !important;
}

/* Ayarlar kısmındaki bilgi panellerinin alt çizgileri vb. */
body.theme-dark-mode .divider-line {
    background-color: #334155 !important;
}

.aidat-ayarlari-container {
    font-family: 'Inter', sans-serif; /* Modern bir font */
    background-color: #f8fbff; /* Görseldeki hafif mavimsi arkaplan */
    padding: 30px;
    min-height: 100vh;
}

.ayarlar-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.ayarlar-header h2 {
    color: #1b2559;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.btn-geri {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    color: #1b2559;
}

.ayarlar-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    padding: 24px;
}

.card-toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.btn-teal {
    background: #00b5ad; /* Görseldeki turkuaz/teal renk */
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-outline-red {
    background: transparent;
    color: #ff6b6b;
    border: 1px solid #ff6b6b;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.aidat-table {
    width: 100%;
    border-collapse: collapse;
}

.aidat-table th {
    color: #1b2559;
    font-weight: 600;
    text-align: left;
    padding: 15px;
    font-size: 14px;
    background: #f8fbff;
}

.aidat-table td {
    padding: 15px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.aktif-satir {
    background-color: #f0fdfa; /* Aktif satırın hafif yeşilimsi arkaplanı */
}

.form-input {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 12px;
    color: #475569;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

.input-group {
    display: flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0 10px;
    background: #fff;
}

.input-group i {
    color: #00b5ad;
    margin-right: 8px;
}

.input-group .form-input {
    border: none;
    padding-left: 0;
}

.input-group .form-input:focus {
    outline: none;
}

.islemler {
    display: flex;
    gap: 10px;
}

.btn-icon {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
}

.btn-edit { color: #3b82f6; }
.btn-delete { color: #ff6b6b; }

.card-footer {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.btn-teal-large {
    background: #00b5ad;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 40px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}