/* ================================================================
   main.css — BePanten Frontend
   Tailwind CDN + özel stiller
   ================================================================ */

/* ---- Form Elemanları ---- */
.form-input {
  width: 100%;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
  background: white;
  font-family: inherit;
}
.form-input:focus {
  outline: none;
  border-color: #E8540A;
  box-shadow: 0 0 0 3px rgba(232,84,10,.12);
}
.form-input.hata { border-color: #EF4444; }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 5px;
}
.form-hata { color: #EF4444; font-size: 12px; margin-top: 4px; }

/* ---- Butonlar ---- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #E8540A;
  color: white;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .1s;
  text-decoration: none;
}
.btn-primary:hover { background: #C94308; }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid #E5E7EB;
  color: #374151;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 14px;
  background: white;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-decoration: none;
}
.btn-outline:hover { background: #F9FAFB; border-color: #D1D5DB; }

.btn-ghost {
  background: transparent;
  border: none;
  color: #6B7280;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background .15s, color .15s;
  font-size: 14px;
}
.btn-ghost:hover { background: #F3F4F6; color: #E8540A; }

/* ---- Ürün Kartı ---- */
.urun-karti {
  background: white;
  border: 1px solid #F3F4F6;
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s, border-color .2s;
  position: relative;
}
.urun-karti:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,.1);
  transform: translateY(-2px);
  border-color: #E5E7EB;
}
.urun-karti .urun-resim-wrapper {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #FFFFFF;
}
.urun-karti .urun-resim-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .4s ease;
  background: #FFFFFF;
}
.urun-karti:hover .urun-resim-wrapper img { transform: scale(1.05); }

.urun-karti .sepete-ekle-btn {
  width: 100%;
  background: #E8540A;
  color: white;
  padding: 9px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background .2s;
  margin-top: 8px;
  display: block;
}
.urun-karti .sepete-ekle-btn:hover { background: #C94308; }

/* ---- Rozet ---- */
.rozet {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
}
.rozet-yeni { background: #DCFCE7; color: #166534; }
.rozet-indirim { background: #FEE2E2; color: #991B1B; }
.rozet-cok-satan { background: #FEF3C7; color: #92400E; }
.rozet-ucretsiz-kargo { background: #DBEAFE; color: #1E40AF; }

/* ---- Yıldız Puanı ---- */
.puan-yildiz { color: #F59E0B; }
.puan-yildiz.bos { color: #E5E7EB; }

/* ---- Slider ---- */
.slider-container { position: relative; overflow: hidden; }
.slider-slide { display: block; transition: opacity 0.6s ease; }
@keyframes sliderFade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Breadcrumb ---- */
.breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.breadcrumb a { color: #6B7280; font-size: 13px; hover: color: #E8540A; }
.breadcrumb a:hover { color: #E8540A; }
.breadcrumb span { color: #D1D5DB; font-size: 12px; }

/* ---- Sayfalama ---- */
.sayfalama a, .sayfalama span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all .15s;
}
.sayfalama a { border: 1px solid #E5E7EB; color: #374151; }
.sayfalama a:hover { border-color: #E8540A; color: #E8540A; background: #FEF0E8; }
.sayfalama span.aktif { background: #E8540A; color: white; border: none; }

/* ---- Sepet Animasyonu ---- */
@keyframes sepetEkle { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }
.sepet-ekle-animasyon { animation: sepetEkle .3s ease; }

/* ---- Tab ---- */
.tab-btn { padding: 8px 16px; font-size: 14px; font-weight: 500; color: #6B7280; border-bottom: 2px solid transparent; transition: all .15s; cursor: pointer; }
.tab-btn.aktif { color: #E8540A; border-bottom-color: #E8540A; }

/* ---- Sekme (Ürün Detay) ---- */
.sekme-btn {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  border-bottom: 3px solid transparent;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.sekme-btn:hover { color: #E8540A; }
.sekme-btn.aktif { color: #E8540A; border-bottom-color: #E8540A; font-weight: 600; }
.tab-icerik { display: none; }
.tab-icerik.aktif { display: block; }

/* ---- Quantity Kontrolü ---- */
.qty-kontrol { display: flex; align-items: center; border: 1.5px solid #E5E7EB; border-radius: 10px; overflow: hidden; }
.qty-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #F9FAFB; cursor: pointer; transition: background .15s; border: none; font-size: 14px; color: #374151; }
.qty-btn:hover { background: #FEF0E8; color: #E8540A; }
.qty-input { width: 48px; text-align: center; border: none; outline: none; font-size: 15px; font-weight: 600; padding: 6px 0; font-family: inherit; }
.qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ---- Kalp (Favori) Animasyonu ---- */
@keyframes kalpCarp { 0%,100%{transform:scale(1)} 50%{transform:scale(1.4)} }
.kalp-animasyon { animation: kalpCarp .3s ease; }

/* ---- Varyant Seçimi ---- */
.varyant-btn {
  padding: 6px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  background: white;
}
.varyant-btn:hover { border-color: #E8540A; color: #E8540A; }
.varyant-btn.secili { border-color: #E8540A; background: #FEF0E8; color: #E8540A; font-weight: 600; }
.varyant-btn.stoksuz { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.renk-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s;
  position: relative;
}
.renk-btn:hover { transform: scale(1.1); }
.renk-btn.secili { border-color: #E8540A; box-shadow: 0 0 0 2px white, 0 0 0 4px #E8540A; }

/* ---- Ürün Galeri ---- */
.galeri-thumb { cursor: pointer; border: 2px solid transparent; border-radius: 10px; overflow: hidden; transition: border-color .15s; }
.galeri-thumb.aktif { border-color: #E8540A; }
.galeri-thumb:hover { border-color: #D1D5DB; }

/* ---- Üye Hesap Sidebar ---- */
.hesap-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: #374151;
  border-left: 3px solid transparent;
  transition: all .15s;
  text-decoration: none;
}
.hesap-nav-link:hover { background: #FEF0E8; color: #E8540A; border-left-color: #E8540A; }
.hesap-nav-link.aktif { background: #FEF0E8; color: #E8540A; border-left-color: #E8540A; font-weight: 600; }

/* ---- Durum Rozetleri (Sipariş) ---- */
.durum-rozet { display: inline-block; padding: 3px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
.durum-bekliyor          { background: #FEF3C7; color: #92400E; }
.durum-odeme_bekleniyor  { background: #EDE9FE; color: #5B21B6; }
.durum-onaylandi         { background: #D1FAE5; color: #065F46; }
.durum-hazirlaniyor      { background: #DBEAFE; color: #1E40AF; }
.durum-kargolandi        { background: #E0F2FE; color: #0C4A6E; }
.durum-teslim_edildi     { background: #D1FAE5; color: #065F46; }
.durum-iptal             { background: #FEE2E2; color: #991B1B; }
.durum-iade              { background: #F3F4F6; color: #4B5563; }

/* ---- Prosa (Ürün Açıklaması) ---- */
.prose h2 { font-size: 20px; font-weight: 700; margin: 20px 0 10px; color: #111827; }
.prose h3 { font-size: 17px; font-weight: 600; margin: 16px 0 8px; }
.prose p  { color: #4B5563; line-height: 1.7; margin-bottom: 12px; }
.prose ul { list-style: disc; padding-left: 20px; margin-bottom: 12px; }
.prose ol { list-style: decimal; padding-left: 20px; margin-bottom: 12px; }
.prose li { color: #4B5563; margin-bottom: 4px; line-height: 1.6; }
.prose img { max-width: 100%; border-radius: 12px; margin: 12px 0; }
.prose strong { color: #111827; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 14px; }
.prose th { background: #F9FAFB; padding: 10px 12px; text-align: left; font-weight: 600; border: 1px solid #E5E7EB; }
.prose td { padding: 10px 12px; border: 1px solid #E5E7EB; }

/* ---- Loading Spinner ---- */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Scrollbar Gizle ---- */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Container ---- */
.container { max-width: 1280px; margin: 0 auto; }

/* ---- Responsive Düzenlemeler ---- */
@media (max-width: 640px) {
  /* sepete-ekle-btn her zaman görünür */
}

/* ---- Ürün Detay Fiyat ---- */
.fiyat-ana {
  font-size: 2rem;
  font-weight: 900;
  color: #E8540A;
  line-height: 1;
}
.fiyat-eski {
  font-size: 1rem;
  color: #9CA3AF;
  text-decoration: line-through;
  font-weight: 400;
}
.fiyat-indirim {
  background: #EF4444;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 9999px;
}