/**
 * Kat Planı - Canlı ve Derlemesiz Özelleştirme Stilleri (custom.css)
 * 
 * Bu dosya "dist/index.html" içerisine dahil edilmiştir.
 * Projeyi tekrar derlemeye (npm run build) gerek kalmadan,
 * doğrudan bu dosya üzerinden renkleri, butonları ve boyutları değiştirebilirsiniz.
 */

/* ==========================================================================
   1. GENEL TEMA VE RENK DEĞİŞKENLERİ
   ========================================================================== */
:root {
  /* Altın Paleti */
  --custom-gold-primary: #d4af37;
  --custom-gold-hover: #e5c055;
  --custom-gold-muted: rgba(212, 175, 55, 0.15);
  --custom-gold-border: rgba(212, 175, 55, 0.4);

  /* Bakır Paleti */
  --custom-copper-primary: #c87d55;
  --custom-copper-hover: #db9168;
  --custom-copper-muted: rgba(200, 125, 85, 0.15);
  --custom-copper-border: rgba(200, 125, 85, 0.4);

  /* Zemin ve Yüzey Renkleri */
  --custom-bg-dark: #101114;
  --custom-bg-card: #17181d;
  --custom-bg-input: #1f2026;
  --custom-border-dark: #2c2d35;

  /* Asimetrik Mimari Köşe Kuralı: 3 Köşe Sıfır, Tek Köşe Radiuslu */
  --custom-radius-btn: 8px 0 0 0;
  --custom-radius-input: 6px 0 0 0;
  --custom-radius-card: 12px 0 0 0;
  --custom-radius-modal: 16px 0 0 0;

  /* Sabit Buton Yüksekliği */
  --custom-btn-height: 38px;
}

/* ==========================================================================
   2. BUTON STİLLERİ VE BOYUTLARI
   ========================================================================== */

/* Birincil Altın Buton */
.btn-primary,
.admin-primary-btn,
.new-project-btn {
  height: var(--custom-btn-height) !important;
  min-height: var(--custom-btn-height) !important;
  border-radius: var(--custom-radius-btn) !important;
  background: linear-gradient(135deg, var(--custom-gold-primary), #b38f22) !important;
  color: #121316 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease !important;
  transform: none !important;
}

.btn-primary:hover,
.admin-primary-btn:hover,
.new-project-btn:hover {
  filter: brightness(1.1) !important;
  background: linear-gradient(135deg, var(--custom-gold-hover), #c9a028) !important;
  transform: none !important;
}

/* İkincil Bakır Buton */
.btn-secondary,
.btn-copper {
  height: var(--custom-btn-height) !important;
  min-height: var(--custom-btn-height) !important;
  border-radius: var(--custom-radius-btn) !important;
  background: linear-gradient(135deg, var(--custom-copper-primary), #a65e38) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease !important;
  transform: none !important;
}

.btn-secondary:hover,
.btn-copper:hover {
  filter: brightness(1.1) !important;
  background: linear-gradient(135deg, var(--custom-copper-hover), #be6e42) !important;
  transform: none !important;
}

/* Nötr ve İptal Butonları */
.btn-cancel,
.btn-outline {
  height: var(--custom-btn-height) !important;
  min-height: var(--custom-btn-height) !important;
  border-radius: var(--custom-radius-btn) !important;
  border: 1px solid var(--custom-border-dark) !important;
  font-size: 13px !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ==========================================================================
   3. SEÇİLİ ELEMANLAR VE LİSTELER
   ========================================================================== */

/* Seçili Proje veya Liste Öğesi (Şeritsiz, Modern Çerçeveli) */
.project-item.active,
.building-tab.active {
  border-left: none !important;
  border: 1px solid var(--custom-gold-border) !important;
  background: var(--custom-gold-muted) !important;
  border-radius: var(--custom-radius-input) !important;
  color: var(--custom-gold-hover) !important;
  transform: none !important;
}

/* ==========================================================================
   4. FORM GİRİŞLERİ VE KUTULARI
   ========================================================================== */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
select,
textarea {
  border-radius: var(--custom-radius-input) !important;
  border: 1px solid var(--custom-border-dark) !important;
  transition: border-color 0.2s ease !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--custom-gold-primary) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   5. KARTLAR VE MODALLAR
   ========================================================================== */
.card,
.modal-content,
.panel-box {
  border-radius: var(--custom-radius-card) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Daire Hücreleri Hover Efekti (Zıplama olmadan yumuşak renk değişimi) */
.apartment-cell,
.building-cell {
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
  transform: none !important;
}