/* NEXOVA - ek stiller (Tailwind'i tamamlar) */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

/* Cok satirli metin kirpma */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =================================================================
   TOAST BILDIRIMLERI
   Ayni isaretleme hem PHP (includes/site-ust.php) hem JavaScript
   (assets/js/site.js) tarafindan uretilir. Bicim burada tanimlidir ki
   iki taraf ayni gorunsun.
   ================================================================= */
.bildirim {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  overflow: hidden;
  padding: .875rem 1rem;
  border-radius: 1rem;
  background: #0f172a;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, .45);
  animation: bildirimGir .35s cubic-bezier(.16, 1, .3, 1);
}

.bildirim-ikon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bildirim-ikon .material-symbols-outlined { font-size: 20px; }

.bildirim-metin {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  min-width: 0;
  word-break: break-word;
}

.bildirim-kapat {
  flex-shrink: 0;
  color: #64748b;
  background: none;
  border: 0;
  cursor: pointer;
  padding: .125rem;
  border-radius: .5rem;
  transition: color .15s;
}
.bildirim-kapat:hover { color: #fff; }
.bildirim-kapat .material-symbols-outlined { font-size: 18px; display: block; }

/* Kalan sureyi gosteren cizgi */
.bildirim-surec {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: left;
  animation: bildirimSurec 4.5s linear forwards;
}
/* Imlec uzerindeyken sayac durur */
.bildirim:hover .bildirim-surec { animation-play-state: paused; }

/* Turlere gore renk */
.bildirim-basari .bildirim-ikon { background: rgba(16, 185, 129, .12); color: #34d399; }
.bildirim-basari .bildirim-surec { background: #34d399; }
.bildirim-hata   .bildirim-ikon { background: rgba(244, 63, 94, .12);  color: #fb7185; }
.bildirim-hata   .bildirim-surec { background: #fb7185; }
.bildirim-uyari  .bildirim-ikon { background: rgba(245, 158, 11, .12); color: #fbbf24; }
.bildirim-uyari  .bildirim-surec { background: #fbbf24; }
.bildirim-bilgi  .bildirim-ikon { background: rgba(59, 130, 246, .12); color: #60a5fa; }
.bildirim-bilgi  .bildirim-surec { background: #60a5fa; }

@keyframes bildirimGir {
  from { transform: translateY(20px) scale(.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}
@keyframes bildirimSurec {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
.bildirim.cikis {
  animation: bildirimCik .28s ease forwards;
}
@keyframes bildirimCik {
  to { transform: translateY(10px) scale(.97); opacity: 0; }
}

/* Hareket azaltma tercihi olan kullanicilar icin */
@media (prefers-reduced-motion: reduce) {
  .bildirim, .bildirim.cikis { animation: none; }
  .bildirim-surec { animation-duration: 4.5s; }
}

/* =================================================================
   AJAX ISLEM DURUMLARI
   ================================================================= */
/* Guncellenmekte olan bolum */
[aria-busy="true"] {
  position: relative;
  opacity: .55;
  transition: opacity .15s;
  pointer-events: none;
}

/* Islemdeki butonun donen ikonu */
.donuyor {
  display: inline-block;
  animation: donme .8s linear infinite;
}
@keyframes donme { to { transform: rotate(360deg); } }

/* Sepete eklendi geri bildirimi */
@keyframes rozetZipla {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.35); }
}
.rozet-zipla { animation: rozetZipla .4s ease; }

/* Yonetici tarafindan girilen zengin metin (sayfa / urun aciklamasi) */
.icerik-metni { color: #334155; font-size: 14px; line-height: 1.8; }
.icerik-metni > * + * { margin-top: 1rem; }
.icerik-metni h2 { font-size: 20px; font-weight: 800; color: #0f172a; margin-top: 2rem; letter-spacing: -.01em; }
.icerik-metni h3 { font-size: 16px; font-weight: 800; color: #0f172a; margin-top: 1.75rem; }
.icerik-metni h4 { font-size: 14px; font-weight: 700; color: #0f172a; margin-top: 1.5rem; }
.icerik-metni p  { color: #475569; }
.icerik-metni strong { color: #0f172a; font-weight: 700; }
.icerik-metni ul { list-style: disc; padding-left: 1.25rem; }
.icerik-metni ol { list-style: decimal; padding-left: 1.25rem; }
.icerik-metni li { margin-top: .5rem; color: #475569; }
.icerik-metni a  { color: #e11d48; text-decoration: underline; text-underline-offset: 2px; }
.icerik-metni a:hover { color: #be123c; }
.icerik-metni blockquote {
  border-left: 3px solid #e2e8f0; padding-left: 1rem; color: #64748b; font-style: italic;
}
.icerik-metni img { max-width: 100%; height: auto; border-radius: 1rem; }
.icerik-metni table { width: 100%; border-collapse: collapse; font-size: 13px; }
.icerik-metni th, .icerik-metni td { border: 1px solid #e2e8f0; padding: .5rem .75rem; text-align: left; }
.icerik-metni th { background: #f8fafc; font-weight: 700; color: #0f172a; }
.icerik-metni hr { border: 0; border-top: 1px solid #e2e8f0; }

/* Urun galerisi kucuk gorsel aktif durumu */
.galeri-kucuk.aktif {
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, .08);
}

/* Sayi girisindeki artirma oklarini gizle */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Odeme adimlari */
.adim-cizgi::after {
  content: ''; position: absolute; top: 50%; left: 100%;
  width: 100%; height: 2px; background: #e2e8f0;
}

/* Yazdirma (siparis ciktisi) */
@media print {
  header, footer, .yazdirma-gizle { display: none !important; }
  body { background: #fff !important; }
  main { padding: 0 !important; }
}
