/* ============================================================================
   AYARLAR v2 — tam ekran, iki panelli, güven veren tasarım
   ----------------------------------------------------------------------------
   Bu dosya style.css'ten SONRA yüklenir; ayarlar yüzeyinin tamamını
   (menü, tüm detay sekmeleri ve şifre değiştirme akışı) yeniden giydirir.
   Amaç:
     • Pencere gerçekten tam ekran ve iki panelli olsun (masaüstünde sol menü
       sürekli görünür, telefonda menü → detay akışı),
     • Her sekme aynı dilde görünsün: beyaz kartlar, net başlıklar, ferah
       boşluklar, tutarlı form alanları,
     • "Güven veren" bir görünüm: güvenlik rozeti, net geri dönüş yolu,
       tehlike bölgesi ayrı bir kart.
   ========================================================================== */

/* ---------------------------------------------------------------- Kabuk --- */
.settings-modal {
    background: #f2f5fa !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

.settings-modal-content {
    background: #f2f5fa !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    box-shadow: none !important;
}

/* Üst çubuk: başlık artık görünür */
.settings-modal .modal-header {
    min-height: 62px !important;
    height: 62px;
    padding: 0 14px !important;
    gap: 10px;
    justify-content: flex-start !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid #e6eaf1 !important;
    backdrop-filter: saturate(180%) blur(12px);
    position: relative;
    z-index: 40;
    flex-shrink: 0;
}

.settings-modal .modal-header h3 {
    display: block !important;
    margin: 0 !important;
    flex: 1;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    color: #0f172a !important;
}

.settings-modal .settings-back-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e6eaf1 !important;
    flex-shrink: 0;
}

.settings-modal .settings-back-btn span {
    font-size: 20px !important;
    color: #0f172a !important;
    line-height: 1;
}

.settings-modal .settings-back-btn:hover {
    background: #e8f2ff !important;
    transform: none !important;
}

/* Menü görünümünde geri oku gereksiz */
.settings-modal.menu-only .settings-back-btn {
    display: none !important;
}

.settings-modal .modal-close-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e6eaf1 !important;
    color: #475569 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    margin-left: auto;
    flex-shrink: 0;
}

.settings-modal .modal-close-btn:hover {
    background: #ffe9e9 !important;
    border-color: #ffd5d5 !important;
    color: #dc2626 !important;
}

/* --------------------------------------------------------- Gövde / paneller */
.settings-modal .modal-body {
    background: #f2f5fa !important;
    flex-direction: column;
    min-height: 0;
}

.settings-modal .settings-sidebar {
    background: #fbfcfe;
    border-bottom: 1px solid #e6eaf1;
    padding: 8px 10px 22px !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* --------------------------------------------------------------- İçerik --- */
/* Menü görünümünde içerik alanı gizli; yalnızca detay görünümünde açılır.
   (Aksi hâlde menü listesinin altında sekme içeriği de görünüyordu.) */
.settings-content-area,
.settings-content-area.ac-centered {
    display: none !important;
}

.settings-modal.detail-view .settings-content-area,
.settings-modal.detail-view .settings-content-area.ac-centered {
    display: block !important;
    flex: 1 1 auto;
    min-height: 0;
    background: #f2f5fa !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

/* İçerik alanının başlığı: nerede olduğunu her zaman gösterir */
.settings-pane-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
    position: sticky;
    top: 0;
    z-index: 25;
    background: linear-gradient(#f2f5fa 72%, rgba(242, 245, 250, 0));
}

.settings-pane-titles {
    min-width: 0;
    flex: 1;
}

.settings-pane-titles h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-pane-titles p {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #7b8798;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-pane-badge {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

/* Sekme içerikleri */
.settings-tab-content {
    display: none;
    width: 100%;
    max-width: 860px !important;
    margin: 0 auto !important;
    padding: 4px 16px 90px !important;
    animation: none;
}

.settings-tab-content.active {
    display: block;
}

.settings-tab-content .settings-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}

/* ------------------------------------------------------------ Menü satırı -- */
.settings-section-header {
    padding: 16px 12px 8px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em;
    color: #8a94a6 !important;
    text-transform: uppercase;
}

.settings-nav-item {
    background: #ffffff !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 14px !important;
    margin: 0 0 8px !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.settings-nav-item:hover {
    background: #ffffff !important;
    border-color: #cfe0ff !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}

.settings-nav-item.active {
    background: #f5faff !important;
    border-color: #0084ff !important;
    box-shadow: 0 8px 20px rgba(0, 132, 255, 0.12);
}

.settings-nav-item.active .settings-item-title {
    color: #0068cc !important;
}

.settings-item-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: #f4f7fb !important;
    border: 1px solid #e9eef5;
    font-size: 17px !important;
}

.settings-item-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.settings-item-subtitle {
    font-size: 12px !important;
    color: #7b8798 !important;
    line-height: 1.35;
}

.settings-item-arrow {
    color: #c3cbd8 !important;
    font-size: 20px !important;
}

/* --------------------------------------------------------- Güvenlik kartı -- */
.settings-security-card {
    margin: 4px 0 6px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(160deg, #f4f9ff, #ffffff);
    border: 1px solid #dbeafe;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.settings-security-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.settings-security-shield {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0efff;
    color: #0068cc;
    font-size: 16px;
}

.settings-security-head h4 {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
}

.settings-security-head p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

.settings-security-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-security-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e6eaf1;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.settings-security-row:first-child i:first-child { color: #ff9500; }
.settings-security-row:nth-child(2) i:first-child { color: #5a27ba; }

.settings-security-row span {
    flex: 1;
}

.settings-security-row i:last-child {
    color: #c3cbd8;
    font-size: 11px;
}

.settings-security-row:hover {
    border-color: #0084ff;
    background: #f5faff;
}

/* ------------------------------------------------------- Tehlike bölgesi --- */
.settings-footer-actions {
    display: flex;
    flex-direction: column;
    gap: 8px !important;
    padding: 16px 0 28px !important;
    margin: 10px 0 0;
    border-top: 1px solid #e6eaf1;
}

.settings-action-link {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 12px 14px !important;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e6eaf1;
    color: #334155 !important;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.settings-action-link.danger {
    color: #dc2626 !important;
    background: #fff7f7 !important;
    border-color: #ffe2e2 !important;
}

.settings-action-link.danger:hover {
    background: #ffecec !important;
    opacity: 1 !important;
    border-color: #ffd0d0 !important;
}

/* ----------------------------------------------------------- Kart / kutu --- */
.setting-item {
    background: #ffffff !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    margin: 0 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

.setting-item:hover {
    transform: none !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
}

.setting-item label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: 0;
    text-transform: none !important;
}

.setting-item label i {
    color: #0084ff;
    width: 18px;
    text-align: center;
    font-size: 15px;
}

.setting-description {
    font-size: 12.5px !important;
    line-height: 1.5;
    color: #7b8798 !important;
    margin: 0 0 14px !important;
}

/* Boş durum kutuları ("Engellenmiş kullanıcı yok." gibi) */
.setting-item > p {
    margin: 10px 0 0 !important;
    padding: 16px 14px !important;
    font-size: 13px !important;
    color: #64748b !important;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 12px;
    text-align: center;
}

.settings-tab-content h4 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 6px !important;
}

.settings-tab-content p {
    color: #64748b;
}

/* ------------------------------------------------------- Form elemanları --- */
.settings-tab-content .form-control,
.setting-item .form-control,
.setting-item select,
.setting-item textarea,
.setting-item input[type="text"],
.setting-item input[type="email"],
.setting-item input[type="password"],
.setting-item input[type="number"] {
    width: 100% !important;
    min-height: 44px;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    outline: none;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.settings-tab-content .form-control:focus,
.setting-item .form-control:focus,
.setting-item select:focus,
.setting-item textarea:focus,
.setting-item input:focus {
    background: #ffffff !important;
    border-color: #0084ff !important;
    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.14) !important;
}

.setting-item textarea.form-control {
    min-height: 110px !important;
    line-height: 1.55;
}

/* Anahtar (toggle) */
.setting-item .toggle-switch,
.toggle-switch {
    width: 48px;
    height: 28px;
}

.toggle-switch .slider,
.slider {
    background-color: #dbe2ea !important;
    border-radius: 999px !important;
}

.slider:before {
    width: 22px !important;
    height: 22px !important;
    left: 3px !important;
    bottom: 3px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
}

input:checked + .slider {
    background-color: #0084ff !important;
}

input:checked + .slider:before {
    transform: translateX(20px) !important;
}

/* ---------------------------------------------------------------- Butonlar - */
.settings-tab-content .btn,
.settings-tab-content .btn-primary {
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    margin-top: 16px !important;
    border: none !important;
}

.settings-tab-content .btn-primary {
    background: linear-gradient(135deg, #0084ff, #00a6ff) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(0, 132, 255, 0.22) !important;
}

.settings-tab-content .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 26px rgba(0, 132, 255, 0.28) !important;
    filter: none !important;
}

.settings-tab-content .btn-secondary,
.settings-tab-content .btn-success {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}

/* ------------------------------------------------- Şifre değiştirme akışı --- */
/* Eski hâli 500px genişliğinde SİYAH bir kutu (%43 doluluk) ve güven
   vermiyordu. Artık içerik alanını kullanan beyaz, ferah bir kart. */
.google-style-container {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
    padding: 22px 20px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 14px !important;
}

/* Eskiden koyu (#3c4043) çerçeveli bir balondu; artık açık tema çipi. */
.google-user-profile {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 5px !important;
    margin: 0 0 18px !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    cursor: default;
}

.google-user-profile img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    object-fit: cover;
}

.google-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.google-user-info span {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-arrow,
.google-user-info .dropdown-arrow {
    color: #9aa7b8 !important;
    font-size: 10px !important;
}

.google-welcome-text {
    margin: 0 0 8px !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em;
}

.google-subtitle {
    margin: 0 0 14px !important;
    font-size: 13px !important;
    line-height: 1.6;
    color: #64748b !important;
}

.google-input-group {
    display: block;
    margin-bottom: 14px;
    width: 100%;
}

.google-input {
    width: 100% !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    color: #0f172a !important;
    padding: 13px 15px !important;
    font-size: 14.5px !important;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.google-input::placeholder {
    color: #9aa7b8 !important;
}

.google-input:focus {
    background: #ffffff !important;
    border-color: #0084ff !important;
    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.14) !important;
}

.google-checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.google-checkbox-group input {
    width: 16px;
    height: 16px;
    accent-color: #0084ff;
}

.google-checkbox-group label {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 600;
    cursor: pointer;
}

.google-footer-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.google-link-btn {
    color: #0084ff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer;
    padding: 6px 2px;
}

.google-link-btn:hover {
    color: #0068cc !important;
    text-decoration: underline;
}

.google-next-btn {
    background: linear-gradient(135deg, #0084ff, #00a6ff) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 26px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0, 132, 255, 0.22) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.google-next-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(0, 132, 255, 0.28) !important;
}

.google-next-btn.secondary {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}

.google-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.google-option-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.google-option-item:hover {
    background: #f5faff !important;
    border-color: #0084ff !important;
}

.google-option-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f2ff;
    color: #0084ff !important;
    flex-shrink: 0;
}

.google-option-icon i {
    color: #0084ff !important;
    font-size: 14px !important;
}

/* Hesaplar Merkezi: içerik alanının içinde kart gibi dursun */
#settings-accounts-center {
    max-height: none !important;
    margin: 10px 16px 90px !important;
    max-width: none !important;
}

/* -------------------------------------------------------- Masaüstü düzeni -- */
@media screen and (min-width: 900px) {
    .settings-modal .modal-body {
        flex-direction: row !important;
    }

    /* Menü görünümü (henüz bölüm seçilmemiş): liste ortalanır, sağ taraf
       boş kalmaz. Bir bölüm seçilince iki panel yan yana gelir. */
    .settings-modal.menu-only .settings-sidebar {
        width: 100% !important;
        flex: 1 1 auto !important;
        max-width: 680px;
        margin: 0 auto;
        border-right: none;
        background: transparent;
        padding: 20px 16px 60px !important;
    }

    .settings-modal.menu-only .settings-footer-actions {
        padding-bottom: 60px !important;
    }

    /* Sol menü detay görünümünde de kalır */
    .settings-modal .settings-sidebar,
    .settings-modal.detail-view .settings-sidebar {
        display: block !important;
        width: 340px !important;
        flex: 0 0 340px !important;
        border-right: 1px solid #e6eaf1;
        border-bottom: none;
        background: #fbfcfe;
        padding: 14px 12px 30px !important;
    }

    .settings-modal.detail-view .settings-back-btn {
        display: none !important;
    }

    .settings-modal .modal-header {
        padding: 0 22px !important;
    }

    .settings-pane-header {
        padding: 22px 32px 12px;
    }

    .settings-pane-badge {
        display: inline-flex;
    }

    .settings-tab-content {
        padding: 4px 32px 60px !important;
    }

    .settings-tab-content .settings-grid {
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
        gap: 16px !important;
    }

    .setting-item.full-width {
        grid-column: 1 / -1;
    }

    #settings-accounts-center {
        margin: 10px 32px 60px !important;
    }
}

/* ------------------------------------------------------------ Telefon ------ */
@media screen and (max-width: 899px) {
    .settings-modal .settings-sidebar {
        max-height: none;
    }

    .settings-pane-header {
        padding: 14px 16px 10px;
    }

    .settings-pane-titles h2 {
        font-size: 17px;
    }

    .settings-tab-content {
        padding-bottom: 110px !important;
    }

    #settings-accounts-center {
        margin: 8px 12px 110px !important;
    }

    .settings-footer-actions {
        padding-bottom: 90px !important;
    }
}

/* Karanlık tema uyumu */
.dark-theme .settings-modal,
.dark-theme .settings-modal-content,
.dark-theme .settings-modal .modal-body,
.dark-theme .settings-content-area {
    background: #0f1116 !important;
}

.dark-theme .settings-modal .modal-header,
.dark-theme .setting-item,
.dark-theme .settings-nav-item,
.dark-theme .google-style-container {
    background: #171a21 !important;
    border-color: #262b35 !important;
    color: #f1f5f9 !important;
}

.dark-theme .settings-item-title,
.dark-theme .setting-item label,
.dark-theme .settings-pane-titles h2,
.dark-theme .settings-modal .modal-header h3,
.dark-theme .google-welcome-text,
.dark-theme .google-user-info span,
.dark-theme .google-option-item {
    color: #f1f5f9 !important;
}

.dark-theme .settings-content-area,
.dark-theme .settings-pane-header {
    background: #0f1116 !important;
}

.dark-theme .settings-tab-content .form-control,
.dark-theme .setting-item select,
.dark-theme .setting-item textarea,
.dark-theme .google-input,
.dark-theme .google-option-item {
    background: #1d2129 !important;
    border-color: #2b313c !important;
    color: #f1f5f9 !important;
}

/* ============================================================================
   HESAP BÖLÜMÜ — kimlik kartı, bölümler, kaydetme çubuğu
   (Eski hâli sade bir form listesiydi ve "güven vermiyor"du.)
   ========================================================================== */
.acc-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(140deg, #eef6ff, #ffffff 65%);
    border: 1px solid #dbeafe;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    margin-bottom: 14px;
}

.acc-hero-avatar { position: relative; flex-shrink: 0; }

.acc-hero-avatar img {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    object-fit: cover;
    border: 3px solid #fff;
    background: #e2e8f0;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
}

.acc-hero-shield {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #16a34a;
    color: #fff;
    font-size: 11px;
    border: 2px solid #fff;
}

.acc-hero-body { min-width: 0; flex: 1; }
.acc-hero-body h3 { margin: 0 0 3px; font-size: 17px; font-weight: 800; color: #0f172a; }
.acc-hero-body p { margin: 0 0 10px; font-size: 12.5px; color: #64748b; word-break: break-all; }
.acc-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.acc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.acc-chip-ok { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }

.acc-section {
    background: #fff;
    border: 1px solid #e6eaf1;
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.acc-section-head { margin-bottom: 14px; }
.acc-section-head h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}
.acc-section-head h4 i { color: #0084ff; font-size: 14px; }
.acc-section-head p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #7b8798; }

.acc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.acc-field { min-width: 0; }
.acc-field-full { grid-column: 1 / -1; }
.acc-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}

.acc-input {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    padding: 0 14px;
    min-height: 46px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.acc-input > i { color: #94a3b8; font-size: 14px; width: 16px; text-align: center; }
.acc-input input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 14.5px !important;
    color: #0f172a !important;
    outline: none;
}
.acc-input:focus-within {
    background: #fff;
    border-color: #0084ff;
    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.14);
}
.acc-prefix { color: #94a3b8; font-weight: 800; font-size: 15px; }
.acc-lock { color: #cbd5e1; font-size: 12px; }
.acc-help { margin-top: 6px; font-size: 11.5px; color: #94a3b8; }

.acc-textarea {
    width: 100%;
    min-height: 108px;
    resize: vertical;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    color: #0f172a;
    outline: none;
}
.acc-textarea:focus {
    background: #fff;
    border-color: #0084ff;
    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.14);
}
.acc-counter { margin-top: 6px; text-align: right; font-size: 11.5px; font-weight: 600; color: #94a3b8; }

.acc-section-safety { background: linear-gradient(150deg, #f7fbff, #fff); border-color: #dbeafe; }

.acc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e6eaf1;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    margin-bottom: 8px;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.acc-row:last-child { margin-bottom: 0; }
.acc-row:hover { border-color: #0084ff; background: #f5faff; transform: translateX(2px); }

.acc-row-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.acc-row-icon-key { background: #fff4e5; color: #d97706; }
.acc-row-icon-accounts { background: #f3ecff; color: #6d28d9; }
.acc-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-row-text strong { font-size: 14px; font-weight: 700; color: #0f172a; }
.acc-row-text small { font-size: 12px; color: #7b8798; }
.acc-row-arrow { color: #c3cbd8; font-size: 12px; }

.acc-savebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e6eaf1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.acc-savebar-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #7b8798; }
.acc-savebar-note i { color: #0084ff; }

.acc-save-btn {
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, #0084ff, #00a6ff);
    box-shadow: 0 12px 24px rgba(0, 132, 255, 0.26);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.acc-save-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(0, 132, 255, 0.3); }

/* ============================================================================
   ENGELLENENLER — kart listesi + arama (Hesap bölümünden farklı görünüm)
   ========================================================================== */
.blk-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff5f5, #fff 70%);
    border: 1px solid #fde0dd;
    margin-bottom: 14px;
}
.blk-banner-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffe9e7;
    color: #dc2626;
    font-size: 18px;
}
.blk-banner-body { flex: 1; min-width: 0; }
.blk-banner-body h4 { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; color: #7f1d1d; }
.blk-banner-body p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #9a6a68; }
.blk-count {
    flex-shrink: 0;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #fbd5d2;
    color: #dc2626;
    font-size: 16px;
    font-weight: 800;
}

.blk-add { display: flex; gap: 10px; margin-bottom: 16px; }
.blk-add-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0 14px;
    min-height: 48px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.blk-add-field:focus-within { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.blk-at { color: #94a3b8; font-weight: 800; font-size: 15px; }
.blk-add-field input {
    flex: 1;
    min-width: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 46px;
    font-size: 14.5px;
    color: #0f172a;
    outline: none;
}
.blk-add-btn {
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #f97316);
    box-shadow: 0 12px 24px rgba(239, 68, 68, 0.24);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.blk-add-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(239, 68, 68, 0.3); }

.blk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.blk-toolbar-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}
.blk-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 12px;
    height: 38px;
    min-width: 200px;
}
.blk-search i { color: #b6c0cf; font-size: 12px; }
.blk-search input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    outline: none;
    font-size: 13px;
    color: #0f172a;
    width: 100%;
}

.blk-list { display: flex; flex-direction: column; gap: 10px; }

.blk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #eceff4;
    border-left: 4px solid #fecaca;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.blk-row:hover { border-color: #fbd5d2; border-left-color: #ef4444; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07); }
.blk-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
    font-size: 17px;
    font-weight: 800;
}
.blk-info { flex: 1; min-width: 0; }
.blk-name {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blk-meta { margin-top: 2px; font-size: 11.5px; color: #94a3b8; display: flex; align-items: center; gap: 6px; }
.blk-unblock {
    flex-shrink: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 12px;
    color: #b91c1c;
    background: #fff5f5;
    border: 1px solid #fbd5d2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.blk-unblock:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

.blk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 34px 22px;
    border-radius: 18px;
    background: #fbfcfe;
    border: 1px dashed #dbe3ee;
}
.blk-empty-small { padding: 22px 18px; }
.blk-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef6ff;
    color: #0084ff;
    font-size: 20px;
    margin-bottom: 4px;
}
.blk-empty h5 { margin: 0; font-size: 15px; font-weight: 800; color: #0f172a; }
.blk-empty p { margin: 0; max-width: 420px; font-size: 12.5px; line-height: 1.6; color: #7b8798; }

.blk-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e8edf5;
    font-size: 12px;
    line-height: 1.55;
    color: #7b8798;
}
.blk-note i { color: #94a3b8; margin-top: 2px; }

/* ============================================================================
   SİTE TERCİHLERİ — gruplanmış ayar satırları
   ========================================================================== */
.site-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #effaf7, #ffffff 70%);
    border: 1px solid #ccf0e4;
    margin-bottom: 14px;
}
.site-hero-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d8f5ec;
    color: #0f766e;
    font-size: 19px;
}
.site-hero h4 { margin: 0 0 3px; font-size: 15.5px; font-weight: 800; color: #0f172a; }
.site-hero p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #6b7e87; }

.site-group {
    background: #fff;
    border: 1px solid #e6eaf1;
    border-radius: 18px;
    padding: 6px 18px;
    margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.site-group-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 0 10px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8a94a6;
    border-bottom: 1px solid #eef2f7;
}
.site-group-head i { color: #0f766e; font-size: 13px; }

.site-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}
.site-row:last-child { border-bottom: none; }
.site-row-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.site-row-text strong { font-size: 14px; font-weight: 700; color: #0f172a; }
.site-row-text small { font-size: 12px; line-height: 1.45; color: #7b8798; }

.site-select {
    flex-shrink: 0;
    max-width: 190px;
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 600;
    padding: 0 12px;
    outline: none;
    cursor: pointer;
}
.site-select:focus { border-color: #0084ff; box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.14); background: #fff; }

.site-switch { position: relative; display: inline-block; width: 50px; height: 30px; flex-shrink: 0; cursor: pointer; }
.site-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.site-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #dbe2ea;
    transition: background 0.2s ease;
}
.site-switch span::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform 0.2s ease;
}
.site-switch input:checked + span { background: #0d9488; }
.site-switch input:checked + span::before { transform: translateX(20px); }
.site-switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25); }

.site-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.site-save,
.site-reset {
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    padding: 13px 22px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.site-save {
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #0d9488, #10b981);
    box-shadow: 0 12px 24px rgba(13, 148, 136, 0.24);
}
.site-save:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(13, 148, 136, 0.3); }
.site-reset {
    background: #fff;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.site-reset:hover { background: #f8fafc; }
.site-foot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eef2f7;
    font-size: 11.5px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================================
   ŞİFRE DEĞİŞTİRME — hesap seçici (Hesaplar Merkezi hesapları)
   ========================================================================== */
.pw-account-bar { position: relative; margin-bottom: 14px; }

.pw-account-chip {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    padding: 12px 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e6eaf1;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.pw-account-chip:hover { border-color: #0084ff; box-shadow: 0 10px 24px rgba(0, 132, 255, 0.14); }
.pw-account-chip img {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    object-fit: cover;
    flex-shrink: 0;
    background: #e2e8f0;
}
.pw-account-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-account-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}
.pw-account-name {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pw-account-change {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 800;
    color: #0084ff;
    background: #eef6ff;
    border: 1px solid #d6e9ff;
    padding: 8px 12px;
    border-radius: 12px;
}
.pw-account-chip.open .pw-account-change i { transform: rotate(180deg); }
.pw-account-change i { transition: transform 0.2s ease; }

.pw-account-note {
    margin: 10px 2px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pw-account-note i { color: #16a34a; }
.pw-account-note b { color: #0f172a; }

.pw-account-picker {
    position: absolute;
    z-index: 30;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e6eaf1;
    border-radius: 18px;
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    animation: pwPickerIn 0.16s ease;
}
@keyframes pwPickerIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.pw-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #eef2f7;
    font-size: 12px;
    font-weight: 800;
    color: #475569;
}
.pw-picker-head i { color: #6d28d9; margin-right: 6px; }
.pw-picker-head button {
    border: none;
    background: #f1f5f9;
    color: #64748b;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
}
.pw-picker-head button:hover { background: #e2e8f0; }
.pw-account-list { max-height: 300px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pw-picker-loading { padding: 18px; text-align: center; font-size: 13px; color: #94a3b8; }
.pw-account-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    padding: 10px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #eef2f7;
    transition: border-color 0.16s ease, background 0.16s ease;
}
.pw-account-item:hover { background: #f5faff; border-color: #cfe4ff; }
.pw-account-item.selected { background: #f0f8ff; border-color: #0084ff; }
.pw-account-item img { width: 36px; height: 36px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: #e2e8f0; }
.pw-account-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-account-item-name { font-size: 14px; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-account-item-sub { font-size: 11.5px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-account-item-check { flex-shrink: 0; color: #0084ff; font-size: 13px; }
.pw-account-item.selected .pw-account-item-check { color: #16a34a; }
.pw-account-item-add { border-style: dashed; border-color: #d6e9ff; }
.pw-account-item-add-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef6ff;
    color: #0084ff;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}
.pw-picker-foot {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #eef2f7;
    background: #fbfcfe;
    font-size: 11.5px;
    line-height: 1.55;
    color: #7b8798;
}
.pw-picker-foot i { color: #16a34a; margin-top: 2px; }

.pw-summary {
    margin: 4px auto 0;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e8edf5;
    text-align: left;
}
.pw-summary-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #64748b; }
.pw-summary-row i { color: #0084ff; width: 14px; text-align: center; }
.pw-summary-row b { color: #0f172a; }

/* Masaüstünde Hesap bölümü iki kolon */
@media screen and (min-width: 900px) {
    .acc-grid { grid-template-columns: 1fr 1fr; }
    .acc-hero { padding: 20px 22px; }
    .acc-section { padding: 20px 22px; }
    .site-row { padding: 15px 0; }
}

/* Telefonda menü ile detay içeriği üst üste binmesin: detay görünümünde
   liste gizlenir, geri oku listeye döndürür. */
@media screen and (max-width: 899px) {
    .settings-modal.detail-view .settings-sidebar { display: none !important; }
    .settings-modal.detail-view .modal-close-btn { display: flex !important; }
    .blk-add { flex-direction: column; }
    .blk-add-btn { justify-content: center; min-height: 46px; }
    .blk-row { flex-wrap: wrap; }
    .blk-unblock { width: 100%; justify-content: center; }
    .pw-account-change { padding: 7px 10px; }
    .site-row { flex-wrap: wrap; }
    .site-select { max-width: 100%; width: 100%; }
}

/* Karanlık tema: yeni bölümler */
.dark-theme .acc-hero { background: linear-gradient(140deg, #16202e, #171a21 65%); border-color: #26374b; }
.dark-theme .acc-hero-avatar img { border-color: #171a21; }
.dark-theme .acc-hero-body h3,
.dark-theme .acc-section-head h4,
.dark-theme .acc-row-text strong,
.dark-theme .blk-empty h5,
.dark-theme .site-hero h4,
.dark-theme .site-row-text strong,
.dark-theme .pw-account-name,
.dark-theme .pw-account-item-name {
    color: #f1f5f9 !important;
}
.dark-theme .acc-section,
.dark-theme .acc-savebar,
.dark-theme .acc-row,
.dark-theme .site-group,
.dark-theme .blk-row,
.dark-theme .blk-add-field,
.dark-theme .blk-search,
.dark-theme .pw-account-chip,
.dark-theme .pw-account-picker,
.dark-theme .pw-account-item {
    background: #171a21 !important;
    border-color: #262b35 !important;
}
.dark-theme .acc-input,
.dark-theme .acc-textarea,
.dark-theme .site-select {
    background: #1d2129 !important;
    border-color: #2b313c !important;
    color: #f1f5f9 !important;
}
.dark-theme .blk-banner { background: linear-gradient(135deg, #2a1618, #171a21 70%); border-color: #4a2626; }
.dark-theme .blk-banner-body h4 { color: #fca5a5; }
.dark-theme .blk-banner-body p { color: #b08585; }
.dark-theme .blk-count { background: #221b1c; border-color: #4a2626; }
.dark-theme .blk-empty { background: #171a21; border-color: #2b313c; }
.dark-theme .blk-note,
.dark-theme .pw-summary,
.dark-theme .pw-picker-foot { background: #1d2129; border-color: #2b313c; color: #93a0b3; }
.dark-theme .site-hero { background: linear-gradient(135deg, #12211f, #171a21 70%); border-color: #1f3a35; }
.dark-theme .site-group-head { border-color: #232833; color: #8a94a6; }
.dark-theme .site-row { border-color: #232833; }
.dark-theme .site-reset { background: #171a21; border-color: #262b35; color: #cbd5e1; }
.dark-theme .pw-account-change { background: #16283c; border-color: #23425f; }
.dark-theme .pw-picker-head { border-color: #232833; color: #cbd5e1; }
.dark-theme .pw-picker-head button { background: #232833; color: #94a3b8; }
.dark-theme .pw-account-item:hover { background: #1d2a38; }
.dark-theme .pw-account-item.selected { background: #16324a; }
.dark-theme .acc-section-safety { background: linear-gradient(150deg, #141d2a, #171a21); border-color: #26374b; }

/* ============================================================================
   🧩 ORTAK AYAR BİLEŞENLERİ (.set-*)
   Tüm ayar sekmeleri aynı görsel dili kullanır: hero başlık, kart, liste
   satırı, boş durum ve aksiyon çubuğu. Böylece "Beğeniler", "Yorumlar",
   "Kaydedilenler" gibi sekmeler birbirinden kopuk görünmez.
   ========================================================================== */

/* --- Hero: sekmenin başlığı + açıklaması ---------------------------------- */
.set-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(150deg, #f2f7ff, #ffffff 72%);
    border: 1px solid #dbeafe;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
    margin-bottom: 16px;
}

.set-hero-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    background: #e0efff;
    color: #0068cc;
}

.set-hero-body { min-width: 0; }
.set-hero-body h4 {
    margin: 0 0 4px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}
.set-hero-body p {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.5;
    color: #64748b !important;
}

/* Renk varyantları */
.set-hero-heart .set-hero-icon { background: #ffe6ec; color: #e11d48; }
.set-hero-comment .set-hero-icon { background: #e8f1ff; color: #1d4ed8; }
.set-hero-save .set-hero-icon { background: #fff3d6; color: #b45309; }
.set-hero-archive .set-hero-icon { background: #f1ecff; color: #6d28d9; }
.set-hero-ads .set-hero-icon { background: #e6fbf0; color: #047857; }
.set-hero-help .set-hero-icon { background: #e9f7ff; color: #0369a1; }
.set-hero-about .set-hero-icon { background: #eef2f7; color: #475569; }
.set-hero-report .set-hero-icon { background: #ffeaea; color: #b91c1c; }
.set-hero-pay .set-hero-icon { background: #e8f6f3; color: #0f766e; }

/* --- Kart ----------------------------------------------------------------- */
.set-card {
    background: #ffffff;
    border: 1px solid #e6eaf1;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    margin-bottom: 14px;
}

.set-card:last-child { margin-bottom: 0; }

.set-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.set-card-head i { color: #0084ff; width: 18px; text-align: center; font-size: 15px; }
.set-card-head h4 {
    margin: 0 !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    flex: 1;
}

.set-card-desc {
    margin: 0 0 14px !important;
    font-size: 12.5px !important;
    line-height: 1.5;
    color: #7b8798 !important;
}

.set-card-desc:last-child { margin-bottom: 0 !important; }

.set-count-pill {
    min-width: 30px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    background: #eef4ff;
    color: #0068cc;
}

/* --- Liste ve satırlar ---------------------------------------------------- */
.set-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.set-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e6eaf1;
    border-radius: 14px;
    background: #ffffff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.set-item:hover {
    border-color: #cfe0ff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.set-item-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6C6CE8;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}

.set-item-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.set-item-body { flex: 1; min-width: 0; }

.set-item-top {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.set-item-name { font-size: 14px; font-weight: 700; color: #0f172a; }
.set-item-time { font-size: 12px; color: #8a94a6; }
.set-item-text {
    font-size: 13.5px;
    line-height: 1.55;
    color: #1f2937;
    word-break: break-word;
}

.set-item-quote {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    word-break: break-word;
}

.set-item-quote i { font-size: 10px; margin-right: 4px; color: #94a3b8; }

.set-item-metrics {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    font-size: 12.5px;
    color: #7b8798;
}

.set-item-metrics i.fa-heart { color: #ff2d55; }

.set-item-action {
    flex-shrink: 0;
    align-self: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
}

.set-item-action:hover { background: #eef4ff; border-color: #cfe0ff; color: #0068cc; }

/* --- Boş durum ------------------------------------------------------------ */
.set-empty {
    text-align: center;
    padding: 34px 20px;
    border: 1px dashed #dbe3ee;
    border-radius: 16px;
    background: #fbfcfe;
}

.set-empty-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: #eef4ff;
    color: #4b7cc4;
}

.set-empty strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}

.set-empty span { font-size: 12.5px; color: #7b8798; line-height: 1.5; }

/* --- Aksiyon çubuğu ------------------------------------------------------- */
.set-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.set-actions .btn { margin-top: 0 !important; }

/* --- "@ kullanıcıadı + Engelle" satırı -------------------------------------- */
.set-add {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.set-add .set-add-at {
    width: 38px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-weight: 800;
}

.set-add input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 14px;
    color: #0f172a;
    outline: none;
}

.set-add input:focus {
    background: #ffffff;
    border-color: #0084ff;
    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.14);
}

.set-add .btn { margin-top: 0 !important; white-space: nowrap; }

/* --- Kaydedilenler için medya ızgarası ------------------------------------ */
.set-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.set-media {
    position: relative;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid #e6eaf1;
    cursor: pointer;
}

.set-media video,
.set-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.set-media-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.set-media:hover .set-media-overlay { opacity: 1; }
.set-media-overlay i.fa-bookmark { position: absolute; top: 6px; right: 8px; color: #ff9f0a; }

/* --- Bilgi notu ----------------------------------------------------------- */
.set-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

.set-hint i { color: #94a3b8; margin-top: 2px; }

/* --- Anahtar/değer satırı (Hakkında, sürüm bilgisi) ----------------------- */
.set-kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13.5px;
}

.set-kv:last-child { border-bottom: none; }
.set-kv span { color: #64748b; }
.set-kv strong { color: #0f172a; font-weight: 700; }

/* --- Özet kutuları (Beğeniler/Yorumlar sayısı) ---------------------------- */
.set-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.set-stat {
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(150deg, #f7faff, #ffffff);
    border: 1px solid #e6eaf1;
    text-align: center;
}

.set-stat strong { display: block; font-size: 21px; font-weight: 800; color: #0068cc; }
.set-stat span { font-size: 11.5px; color: #7b8798; font-weight: 600; }

/* --- Karanlık tema -------------------------------------------------------- */
.dark-theme .set-hero {
    background: linear-gradient(150deg, #16233a, #171a21 72%);
    border-color: #26374b;
    box-shadow: none;
}
.dark-theme .set-hero-body h4 { color: #e5e9f0 !important; }
.dark-theme .set-hero-body p { color: #93a0b3 !important; }
.dark-theme .set-card { background: #171a21; border-color: #232833; box-shadow: none; }
.dark-theme .set-card-head h4 { color: #e5e9f0 !important; }
.dark-theme .set-card-desc { color: #93a0b3 !important; }
.dark-theme .set-count-pill { background: #16324a; color: #7cc0ff; }
.dark-theme .set-item { background: #171a21; border-color: #232833; }
.dark-theme .set-item:hover { border-color: #2f5d8a; box-shadow: none; }
.dark-theme .set-item-name { color: #e5e9f0; }
.dark-theme .set-item-time { color: #7b8798; }
.dark-theme .set-item-text { color: #cbd5e1; }
.dark-theme .set-item-quote { background: #1d2129; border-color: #2b313c; color: #93a0b3; }
.dark-theme .set-item-metrics { color: #93a0b3; }
.dark-theme .set-item-action { background: #1d2129; border-color: #2b313c; color: #94a3b8; }
.dark-theme .set-item-action:hover { background: #16324a; border-color: #2f5d8a; color: #7cc0ff; }
.dark-theme .set-empty { background: #171a21; border-color: #2b313c; }
.dark-theme .set-empty strong { color: #e5e9f0; }
.dark-theme .set-empty span { color: #93a0b3; }
.dark-theme .set-empty-icon { background: #1d2a38; color: #7cc0ff; }
.dark-theme .set-hint { background: #1d2129; border-color: #2b313c; color: #93a0b3; }
.dark-theme .set-kv { border-color: #232833; }
.dark-theme .set-kv strong { color: #e5e9f0; }
.dark-theme .set-stat { background: #1b1f27; border-color: #232833; }
.dark-theme .set-stat strong { color: #7cc0ff; }
.dark-theme .set-add .set-add-at { background: #1d2129; border-color: #2b313c; color: #93a0b3; }
.dark-theme .set-add input { background: #1d2129; border-color: #2b313c; color: #e5e9f0; }
.dark-theme .set-media { border-color: #232833; }

/* --- Mobil --------------------------------------------------------------- */
@media (max-width: 640px) {
    .set-hero { padding: 15px 16px; gap: 12px; }
    .set-hero-icon { width: 42px; height: 42px; font-size: 17px; }
    .set-item { padding: 11px 12px; gap: 10px; }
    .set-item-action { display: none; }
}