/* =========================================================
   HD Lightbox Calc – Fason
   Tam CSS (yalnızca .fas-* sınıfları; diğer eklentilerle çakışmaz)
   Renkler ekran görüntünüzdeki palete göre ayarlanmıştır.
   ========================================================= */

/* --------- Renk Değişkenleri --------- */
:root{
  --hd-red: #ef4444;      /* ana kırmızı */
  --hd-red-dark: #dc2626; /* hover */
  --hd-green: #25D366;    /* WhatsApp yeşili */
  --hd-text: #111827;     /* başlık metni */
  --hd-muted: #6b7280;    /* açıklama/metin */
  --hd-border: #e5e7eb;   /* kenar çizgileri */
  --hd-bg: #f7f7f8;       /* açık gri arkaplan */
}

/* --------- Sekmeler --------- */
.fas-tabs{ margin:12px 0 0; }
.fas-tab-buttons{
  display:flex; gap:12px; margin:12px 0 16px; flex-wrap:wrap;
}
.fas-tab-btn{
  padding:10px 18px;
  border:2px solid var(--hd-red);
  border-radius:999px;
  background:#fff;
  color:var(--hd-red);
  font-weight:800;
  cursor:pointer;
  transition:background .15s, color .15s, transform .05s;
}
.fas-tab-btn:hover{ transform:translateY(-1px); }
.fas-tab-btn.active{
  background:var(--hd-red);
  color:#fff;
}

/* --------- Kartlar & Başlık --------- */
.fas-card{
  background:#fff;
  border:1px solid #f0f0f0;
  border-radius:14px;
  padding:18px;
  margin:16px 0;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.fas-title{
  margin:0 0 12px;
  font-size:24px;
  font-weight:800;
  color:var(--hd-text);
}

/* --------- Giriş Alanları --------- */
.fas-fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,260px));
  gap:14px;
  margin-bottom:12px;
}
.fas-fields label{
  display:flex; flex-direction:column; gap:6px;
  font-weight:700; color:var(--hd-text);
}
.fas-fields input{
  padding:12px 14px;
  border:1.5px solid #d1d5db;
  border-radius:12px;
  outline:none;
  background:#fff;
  color:var(--hd-text);
}
.fas-fields input::placeholder{ color:#9ca3af; }
.fas-fields input:focus{
  border-color:var(--hd-red);
  box-shadow:0 0 0 3px rgba(239,68,68,.12);
}

/* --------- Butonlar --------- */
.fas-btn{
  border-radius:12px;
  padding:12px 16px;
  font-weight:900;
  cursor:pointer;
  line-height:1;
  border:0;
  transition:transform .05s, box-shadow .15s, background .15s, color .15s, border-color .15s;
}
.fas-btn:active{ transform:translateY(0); }

/* Kırmızı dolgulu (HESAPLA vb.) */
.fas-btn:not(.ghost):not(.wa){
  background:var(--hd-red);
  color:#fff;
}
.fas-btn:not(.ghost):not(.wa):hover{
  background:var(--hd-red-dark);
}

/* Kırmızı kenarlı (EKLE / PDF / TÜMÜNÜ SİL) */
.fas-btn.ghost{
  background:#fff;
  color:var(--hd-red);
  border:2px solid var(--hd-red);
}
.fas-btn.ghost:hover{
  color:#fff;
  background:var(--hd-red);
}

/* WhatsApp yeşil dolgulu */
.fas-btn.wa{
  background:var(--hd-green);
  color:#fff;
}
.fas-btn.wa:hover{ filter:brightness(.95); }

/* Devre dışı durum (özellikle EKLE hesaplama öncesi) */
.fas-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  background:#fff;
  color:#9ca3af;
  border:2px solid var(--hd-border);
}

/* --------- Özet Satırı (Toplam + Ekle) --------- */
.summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--hd-bg);
  border:1px solid var(--hd-border);
  border-radius:12px;
  padding:12px 16px;
  font-weight:900;
}
.summary .summary-actions{ margin-left:auto; }

/* --------- Tablo --------- */
.tbl{ width:100%; border-collapse:collapse; }
.tbl thead th{ background:var(--hd-bg); }
.tbl th, .tbl td{
  text-align:left;
  padding:12px 14px;
  border-top:1px solid #eee;
}

/* --------- “Siparişlerim” Alt Satırı --------- */
.global-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}
.global-actions .grand{
  font-weight:900; color:var(--hd-text);
}
.global-actions .right{
  margin-left:auto;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

/* --------- Mobil Uyarlama --------- */
@media (max-width:900px){
  .fas-fields{ grid-template-columns:1fr; }
  .global-actions{ flex-direction:column; align-items:flex-start; }
  .global-actions .right{ width:100%; justify-content:flex-start; }
}