/* ================================================================
   SALOON (Salon Bilgileri) — Modern UI
   Sadece görsel. Hiçbir JS/mantık kodu değiştirilmemiştir.
================================================================ */

/* ── SAYFA ARKA PLANI ────────────────────────────────────────── */
body          { background: #F1F5F9 !important; }
.page-wrapper { background: #F1F5F9; }

/* ── SECTION KARTLARI ────────────────────────────────────────── */
form#form .card.block {
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  margin-bottom: 1.5rem !important;
  overflow: hidden;
}

/* Sol renk aksanı */
form#form .card.block > .card-body {
  border-left: 4px solid #4F46E5;
  padding: 1.5rem 1.75rem !important;
}

/* Bölüme göre farklı aksanlar */
/* Salonunu Paylaş */
form#form > .col-12 > .card.block > .card-body,
form#form .card.block:first-child > .card-body              { border-left-color: #10B981; }
/* Logo + Yetkili satırı */
form#form .row .col-sm-3 .card.block > .card-body           { border-left-color: #3B82F6; }
form#form .row .col-sm-9 .card.block > .card-body           { border-left-color: #8B5CF6; }
/* Sosyal Medya */
#sosyalMedya > .card-body                                   { border-left-color: #EC4899; }

/* ── BÖLÜM BAŞLIKLARI ────────────────────────────────────────── */
form#form .card-title {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #1E293B !important;
  margin-bottom: 0.2rem !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
form#form .card-subtitle {
  font-size: 0.8rem !important;
  color: #94A3B8 !important;
  font-weight: 500 !important;
  margin-bottom: 1.2rem !important;
}

/* ── FORM ETİKETLERİ ─────────────────────────────────────────── */
form#form .form-group label {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  margin-bottom: 0.4rem !important;
  letter-spacing: 0.01em;
}

/* ── FORM KONTROLLERI ─────────────────────────────────────────── */
form#form .form-control {
  border-radius: 8px !important;
  border: 1.5px solid #E2E8F0 !important;
  font-size: 0.875rem !important;
  color: #374151 !important;
  background: #fff !important;
  padding: 0.475rem 0.85rem !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  box-shadow: none !important;
}
form#form .form-control:focus {
  border-color: #4F46E5 !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1) !important;
  outline: none !important;
}
form#form .form-control:disabled,
form#form .form-control[readonly] {
  background: #F8FAFC !important;
  color: #94A3B8 !important;
  border-color: #E2E8F0 !important;
  cursor: not-allowed;
}
form#form select.form-control {
  cursor: pointer;
  appearance: auto;
}
form#form textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

/* ── INPUT GROUP ──────────────────────────────────────────────── */
form#form .input-group .input-group-text {
  border-radius: 8px 0 0 8px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-right: none !important;
  background: #F8FAFC !important;
  color: #64748B !important;
  font-size: 0.82rem !important;
  font-weight: 600;
}
form#form .input-group .form-control {
  border-radius: 0 8px 8px 0 !important;
  border-left: none !important;
}
form#form .input-group:focus-within .input-group-text {
  border-color: #4F46E5 !important;
}
form#form .input-group:focus-within .form-control {
  border-color: #4F46E5 !important;
  border-left: none !important;
  box-shadow: none !important;
}

/* ── SALON LİNKİ ──────────────────────────────────────────────── */
form#form #salonLinki {
  font-size: 0.82rem;
  color: #4F46E5 !important;
  font-weight: 600;
  background: #EEF2FF !important;
}
form#form #salonLinkiButton,
form#form #salonPaylasButton {
  border-radius: 9px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 0.45rem 1.2rem !important;
  margin-right: 0.5rem;
  margin-top: 0.25rem;
  display: inline-block;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 3px 10px rgba(16,185,129,0.25) !important;
}
form#form #salonLinkiButton:hover,
form#form #salonPaylasButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(16,185,129,0.35) !important;
}

/* ── DOSYA YÜKLEME (Logo + Fotoğraf) ────────────────────────── */
form#form .custom-file { border-radius: 10px; overflow: hidden; }
form#form .plus-file-label {
  border-radius: 10px !important;
  border: 2px dashed #C7D2FE !important;
  background: #F8FAFC !important;
  transition: border-color 0.18s, background 0.18s;
  cursor: pointer;
}
form#form .plus-file-label:hover {
  border-color: #4F46E5 !important;
  background: #EEF2FF !important;
}

/* ── KAYDET BUTONU ────────────────────────────────────────────── */
#kaydetButton {
  border-radius: 10px !important;
  padding: 0.6rem 2.5rem !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  background: #4F46E5 !important;
  border-color: #4F46E5 !important;
  box-shadow: 0 4px 14px rgba(79,70,229,0.32) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background 0.18s ease !important;
  letter-spacing: 0.01em;
}
#kaydetButton:hover {
  background: #4338CA !important;
  border-color: #4338CA !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(79,70,229,0.38) !important;
}
#kaydetButton:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(79,70,229,0.3) !important;
}

/* ── HATA MESAJI ──────────────────────────────────────────────── */
form#form .err {
  font-size: 0.75rem;
  color: #EF4444;
  margin-top: 0.25rem;
}

/* ── ADRES SATIRI ─────────────────────────────────────────────── */
form#form a.float-right {
  font-size: 0.78rem;
  font-weight: 600;
  color: #4F46E5 !important;
  text-decoration: none;
  transition: opacity 0.18s;
}
form#form a.float-right:hover { opacity: 0.75; }

/* ── OTOMATİK DOLDUR BUTONU ──────────────────────────────────── */
form#form .btn-rounded.btn-success {
  border-radius: 99px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 0.4rem 1.1rem !important;
  box-shadow: 0 2px 8px rgba(16,185,129,0.25) !important;
  transition: transform 0.18s, box-shadow 0.18s;
}
form#form .btn-rounded.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16,185,129,0.35) !important;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  form#form .card.block > .card-body {
    padding: 1.2rem 1.25rem !important;
  }
}