/* =============================================================================
   FERASET: ANA MODÜLER STİL DOSYASI
   ============================================================================= */

/* Modüler CSS bileşenlerini projeye dahil et */
@import "variables.css"; /* Renk ve değişkenler */
@import "base.css";      /* Temel reset ayarları */
@import "nav.css";       /* Üst menü tasarımı */
@import "buttons.css";   /* Düğmeler ve formlar */
@import "tabs.css";      /* Sekme bileşenleri */
@import "cards.css";     /* Makale kartları */
@import "layout.css";    /* Sayfa yerleşimi */
@import "widgets.css";   /* Sağ panel kutuları */
@import "article.css";   /* Makale okuma alanı */
@import "components.css";/* Profil ve kütüphane */
@import "footer.css";    /* Alt bilgi ve responsive */

.gp-tab {
  position: relative;
  font: 600 0.95rem var(--ui);
  color: var(--mut);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.5rem 0.2rem;
  transition: color 0.15s ease;
}
.gp-tab:hover { color: var(--fg); }
.gp-tab.active { color: var(--ac); }
.gp-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--ac);
  border-radius: 3px 3px 0 0;
}

/* Profesyonel Üst Sağ Menü Elemanları */
/* İkonlu Buton Temel Stilleri */
.nav-pro-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--mut);
  font: 500 0.88rem var(--ui);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-pro-item:hover {
  background: var(--bg-soft);
  color: var(--fg);
  text-decoration: none;
}

/* Aktif Alt Çizgi Vurgusu */
.nav-pro-item.active {
  color: var(--ac);
  background: color-mix(in srgb, var(--ac) 6%, transparent);
  font-weight: 600;
}

.nav-pro-item.active::after {
  content: '';
  position: absolute;
  bottom: -0.65rem;
  left: 0.85rem;
  right: 0.85rem;
  height: 2.5px;
  background: var(--ac);
  border-radius: 2px 2px 0 0;
}

/* Dropdown Kapsayıcı & Açılır Menü */
.profile-dropdown-container {
  position: relative;
  display: inline-block;
}

.profile-dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 2px; /* Araya görünmez köprü kuruyoruz */
  width: 220px;
  background: var(--sf);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 1000;
}

/* Aradaki boşlukta fare kaybolmasın diye köprü alanı */
.profile-dropdown-container::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
}

/* Hem Hover hem de Tıklama (class="open") ile açılmasını sağlama */
.profile-dropdown-container:hover .profile-dropdown-menu,
.profile-dropdown-container.open .profile-dropdown-menu {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--fg);
  font: 500 0.86rem var(--ui);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-item:hover {
  background: var(--bg-soft);
  color: var(--ac);
  text-decoration: none;
}

.dropdown-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.logout-action {
  color: #b91c1c !important;
}

.logout-action:hover {
  background: rgba(185, 28, 28, 0.08) !important;
  color: #b91c1c !important;
}

.logout-action svg {
  stroke: #b91c1c;
}

/* --- Hesap Ayarları Sayfası ve Kompakt Şifre Kutusu Stilleri --- */
.settings-container { max-width: 950px; margin: 2rem auto; padding: 0 1rem; }
.settings-header { margin-bottom: 2rem; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.settings-header h1 { font-size: 1.8rem; margin: 0 0 0.4rem; }

.settings-grid { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; }

.settings-sidebar { display: flex; flex-direction: column; gap: 0.35rem; }
.s-tab-btn {
    display: flex; align-items: center; gap: 10px; padding: 0.75rem 1rem;
    border: none; border-radius: 8px; background: transparent; color: var(--mut);
    font: 600 0.9rem var(--ui); cursor: pointer; text-align: left; transition: all 0.15s ease;
}
.s-tab-btn:hover { background: var(--bg-soft); color: var(--fg); }
.s-tab-btn.active { background: var(--ac); color: #fff; }

.s-tab-content { display: none; }
.s-tab-content.active { display: block; animation: fadeIn 0.2s ease; }

.check-field { margin-bottom: 1rem; }
.check-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.92rem; }
.check-label input[type="checkbox"] { width: auto; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 768px) { .settings-grid { grid-template-columns: 1fr; } }

/* Kompakt ve Şık Şifre Kutusu Stilleri */
.security-card-wrapper {
    display: flex;
    justify-content: flex-start;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.security-box {
    background: var(--sf, #ffffff);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 2rem;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.security-box-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.4rem;
    color: var(--fg);
}

.security-box-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.security-desc {
    color: var(--mut);
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}

.compact-password-form .field {
    margin-bottom: 1rem;
}

.compact-password-form input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--bg-soft, #f9fafb);
    font-size: 0.92rem;
    transition: all 0.2s ease;
}

.compact-password-form input:focus {
    border-color: var(--ac);
    background: var(--sf);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 15%, transparent);
}

/* ==========================================================================
   GECE MODU (DARK THEME) - Gece Mavisi, Indigo ve Soft Bej Uyumlu
   ========================================================================== */

body.dark-theme {
  background-color: #0b1329 !important;  /* Kenar boşlukları ve sayfa arka planı: Derin Gece Mavisi */
  color: #f4ebd0 !important;             /* Soft bej ana metin */
}

/* 1. Tüm Kartlar, Paneller ve Kutular (Indigo Tonu) */
body.dark-theme main,
body.dark-theme .shell,
body.dark-theme .card,
body.dark-theme .ptile,
body.dark-theme .panel,
body.dark-theme .paper-card,
body.dark-theme .rail-card,
body.dark-theme .sidebar-box,
body.dark-theme .widget,
body.dark-theme .profile-dropdown-menu {
  background-color: #172247 !important;  /* Kartlar ve paneller: Indigo */
  color: #f4ebd0 !important;             /* Soft bej yazı */
  border-color: rgba(244, 235, 208, 0.15) !important;
}

/* 2. Kartların Alt Kısmı (Yazar ve Görüntülenme Alanı - .pmeta) */
body.dark-theme .pmeta,
body.dark-theme .pmeta b {
  background-color: transparent !important;
  color: #f4ebd0 !important;
}

/* 3. Başlıklar ve Metinler (Soft Bej / Beyaz Netlik) */
body.dark-theme h1, 
body.dark-theme h2, 
body.dark-theme h3, 
body.dark-theme h4, 
body.dark-theme h5, 
body.dark-theme h6,
body.dark-theme .card-title,
body.dark-theme .ptile b {
  color: #ffffff !important;
}

body.dark-theme p, 
body.dark-theme li, 
body.dark-theme span, 
body.dark-theme label,
body.dark-theme strong,
body.dark-theme div {
  color: #f4ebd0 !important;  /* Soft bej */
}

body.dark-theme .mut,
body.dark-theme small,
body.dark-theme .text-muted {
  color: #b8af96 !important;  /* Soluk bej */
}

/* 4. Arama Çubuğu ve Input Alanları */
body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea {
  background-color: #111a3a !important;
  color: #f4ebd0 !important;
  border-color: rgba(244, 235, 208, 0.2) !important;
}

/* 5. Üst Navigasyon Menüsü */
body.dark-theme nav {
  background-color: rgba(11, 19, 41, 0.92) !important;
  border-bottom: 1px solid rgba(244, 235, 208, 0.15) !important;
}