/* ================================================================
   accountSettings.css — Hesap Ayarları Ekranı Modern UI
   Kuaförüm Yanımda Admin Panel
================================================================ */

/* ── Sayfa arka planı ────────────────────────────────────────── */
body { background-color: #F1F5F9 !important; }
.page-wrapper { background: #F1F5F9 !important; }

/* ── Genel kart stili ────────────────────────────────────────── */
.card.block {
  border: none !important;
  border-radius: 16px !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.05),
    0 8px 24px rgba(0,0,0,0.06) !important;
  overflow: hidden;
  margin-bottom: 1.5rem !important;
  transition: box-shadow 0.2s;
}
.card.block:hover {
  box-shadow:
    0 4px 16px rgba(0,0,0,0.07),
    0 12px 32px rgba(0,0,0,0.08) !important;
}
.card.block .card-body { padding: 1.75rem !important; }

/* Kart başlığı & alt başlık */
.card-title {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #1E293B !important;
  margin-bottom: 0.2rem !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-subtitle {
  font-size: 0.8rem !important;
  color: #64748B !important;
  margin-bottom: 1.25rem !important;
}

/* ── Renkli sol border — section'lara göre ───────────────────── */
#form .card.block { border-left: 4px solid #4F46E5 !important; }
#iban-zone .card.block { border-left: 4px solid #0EA5E9 !important; }
#danger-zone .card.block { border-left: 4px solid #EF4444 !important; }
#kupon .card.block { border-left: 4px solid #F59E0B !important; }

/* Destek kartı */
.row:not([id]) .card.block { border-left: 4px solid #10B981 !important; }

/* Ödemeler */
#odemeler-zone .card.block { border-left: 4px solid #8B5CF6 !important; }

/* ── Form alanları ───────────────────────────────────────────── */
.form-group label {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  margin-bottom: 0.35rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-control {
  border-radius: 9px !important;
  border: 1.5px solid #E2E8F0 !important;
  font-size: 0.88rem !important;
  color: #1E293B !important;
  background: #F8FAFC !important;
  padding: 0.55rem 0.9rem !important;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
  box-shadow: none !important;
  height: auto !important;
}
.form-control:focus {
  border-color: #4F46E5 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3.5px rgba(79,70,229,0.1) !important;
  outline: none !important;
}
.form-control:disabled,
.form-control[disabled] {
  background: #F1F5F9 !important;
  color: #94A3B8 !important;
  border-color: #E2E8F0 !important;
  cursor: not-allowed;
}
.input-group .form-control { border-radius: 9px !important; }

/* ── Güncelle butonu ─────────────────────────────────────────── */
#update {
  border-radius: 9px !important;
  padding: 0.6rem 1.75rem !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(79,70,229,0.3) !important;
  transition: all 0.18s !important;
  letter-spacing: 0.02em;
}
#update:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(79,70,229,0.38) !important;
}
#update:active { transform: translateY(0); }

/* ── Checkbox'lar ────────────────────────────────────────────── */
.form-group .input-group {
  border: none !important;
  background: transparent !important;
  align-items: center;
  padding: 0 !important;
  gap: 0.6rem;
  flex-wrap: nowrap;
}
.form-group .input-group label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #374151 !important;
  cursor: pointer;
  margin: 0 !important;
}
/* Material checkbox overrides */
input.material-inputs[type="checkbox"] {
  position: relative !important;
  opacity: 1 !important;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  accent-color: #4F46E5;
}

/* Hatırlatma saati select */
#reminderHours {
  width: 110px !important;
  border-radius: 7px !important;
  font-size: 0.82rem !important;
  padding: 0.3rem 0.6rem !important;
  height: auto !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #F8FAFC !important;
  color: #374151 !important;
  cursor: pointer;
}
#reminderHours:focus {
  border-color: #4F46E5 !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1) !important;
  outline: none !important;
}
.d-flex.align-items-center label { white-space: nowrap; }

/* ── IBAN kartı ──────────────────────────────────────────────── */
#iban-zone .card-body p {
  font-size: 0.87rem;
  color: #374151;
  line-height: 1.65;
  margin-bottom: 0.6rem;
}
#iban-zone .card-body p b {
  color: #1E293B;
  font-weight: 600;
}
#copyIBAN {
  border-radius: 7px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 0.25rem 0.75rem !important;
  background: #10B981 !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(16,185,129,0.28) !important;
  transition: all 0.16s !important;
  vertical-align: middle;
  margin-left: 0.5rem;
}
#copyIBAN:hover {
  background: #059669 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16,185,129,0.35) !important;
}

/* IBAN bilgi kutusu */
#iban-zone .card-body {
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%) !important;
}
#iban-zone .card.block {
  background: transparent !important;
}

/* ── Tehlikeli bölge ─────────────────────────────────────────── */
#danger-zone .card-title { color: #DC2626 !important; }
#danger-zone .card-body { background: #FFF5F5 !important; }

#pasifButon {
  border-radius: 9px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 0.55rem 1.25rem !important;
  background: #EF4444 !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(239,68,68,0.28) !important;
  transition: all 0.16s !important;
  margin-right: 0.5rem;
}
#pasifButon:hover {
  background: #DC2626 !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(239,68,68,0.35) !important;
}

#aktifButon {
  border-radius: 9px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 0.55rem 1.25rem !important;
  background: #10B981 !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(16,185,129,0.28) !important;
  transition: all 0.16s !important;
}
#aktifButon:hover {
  background: #059669 !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(16,185,129,0.35) !important;
}

/* ── Kupon kartı ─────────────────────────────────────────────── */
#kupon .card-title { color: #D97706 !important; }
#kupon .card-body { background: #FFFBEB !important; }
#kupon .card-title::before { content: '🎟'; font-size: 1.1rem; }

#kupon .btn-primary {
  border-radius: 9px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 0.55rem 1.5rem !important;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(245,158,11,0.28) !important;
  transition: all 0.16s !important;
}
#kupon .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(245,158,11,0.35) !important;
}

/* ── Destek & linkler ────────────────────────────────────────── */
.row:not([id]) .card-title::before { content: '💬'; font-size: 1.1rem; }

.row:not([id]) section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.row:not([id]) section ul li a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #4F46E5 !important;
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: 7px;
  background: #EEF2FF;
  transition: all 0.15s;
}
.row:not([id]) section ul li a:hover {
  background: #4F46E5;
  color: #fff !important;
  transform: translateX(3px);
}
.row:not([id]) section ul li a.turquoise {
  color: #0EA5E9 !important;
  background: #E0F2FE;
}
.row:not([id]) section ul li a.turquoise:hover {
  background: #0EA5E9;
  color: #fff !important;
}

/* ── Çıkış Yap butonu ────────────────────────────────────────── */
.row .btn-danger[href][onClick*="logout"] {
  border-radius: 9px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 0.55rem 1.5rem !important;
  background: #EF4444 !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(239,68,68,0.25) !important;
  transition: all 0.16s !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.row .btn-danger[href][onClick*="logout"]:hover {
  background: #DC2626 !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(239,68,68,0.32) !important;
}

/* ── Modaller ────────────────────────────────────────────────── */
#passive-modal .modal-header,
#active-modal .modal-header {
  border-radius: 0 !important;
  padding: 1.1rem 1.5rem !important;
  border-bottom: none !important;
}
#passive-modal .modal-header {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
}
#active-modal .modal-header {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
}
#passive-modal .modal-title,
#active-modal .modal-title {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
}
#passive-modal .close,
#active-modal .close {
  color: rgba(255,255,255,0.8) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-size: 1.3rem !important;
}
#passive-modal .close:hover,
#active-modal .close:hover { color: #fff !important; }

#passive-modal .modal-content,
#active-modal .modal-content {
  border-radius: 14px !important;
  border: none !important;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}
#passive-modal .modal-body,
#active-modal .modal-body {
  font-size: 0.88rem !important;
  color: #374151 !important;
  line-height: 1.65 !important;
  padding: 1.25rem 1.5rem !important;
}
#passive-modal .modal-footer,
#active-modal .modal-footer {
  border-top: 1px solid #F1F5F9 !important;
  padding: 0.85rem 1.5rem !important;
  gap: 0.5rem;
  display: flex;
  justify-content: flex-end;
}
#passive-modal .btn-danger {
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 0.5rem 1.25rem !important;
  background: #EF4444 !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(239,68,68,0.25) !important;
}
#active-modal .btn-info {
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 0.5rem 1.25rem !important;
  background: #10B981 !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(16,185,129,0.25) !important;
}
#passive-modal .btn-default,
#active-modal .btn-default {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 0.5rem 1rem !important;
  background: #F1F5F9 !important;
  border: 1.5px solid #E2E8F0 !important;
  color: #475569 !important;
}
#passive-modal .btn-default:hover,
#active-modal .btn-default:hover {
  background: #E2E8F0 !important;
  color: #1E293B !important;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.page-titles {
  background: transparent !important;
  padding: 1rem 0 0.5rem !important;
}
.page-titles h3 {
  font-weight: 800 !important;
  color: #1E293B !important;
  font-size: 1.25rem !important;
}
.breadcrumb {
  background: transparent !important;
  font-size: 0.78rem !important;
}
.breadcrumb-item a { color: #4F46E5 !important; font-weight: 600 !important; }
.breadcrumb-item.active { color: #64748B !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #94A3B8 !important; }

/* ── FooTable (Ödemeler) ─────────────────────────────────────── */
#footable-odemeler thead th {
  background: #F1F5F9 !important;
  color: #475569 !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 2px solid #E2E8F0 !important;
  padding: 0.75rem 1rem !important;
}
#footable-odemeler tbody tr {
  transition: background 0.13s;
}
#footable-odemeler tbody tr:hover { background: #F8FAFC !important; }
#footable-odemeler tbody td {
  border-bottom: 1px solid #F1F5F9 !important;
  font-size: 0.85rem !important;
  color: #374151 !important;
  padding: 0.75rem 1rem !important;
  vertical-align: middle !important;
}

/* ── Footer ──────────────────────────────────────────────────── */
.footer {
  background: transparent !important;
  border-top: 1px solid #E2E8F0 !important;
  font-size: 0.8rem !important;
  color: #94A3B8 !important;
  text-align: center;
  padding: 1rem !important;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .card.block .card-body { padding: 1.25rem !important; }
  #pasifButon, #aktifButon {
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: 0.5rem !important;
  }
  .row:not([id]) section ul li a { width: 100%; }
  .d-flex.align-items-center { flex-wrap: wrap; gap: 0.4rem; }
}