/* Tasarimdan gelen yardimci siniflar.
   Tailwind utility'leri sablonlarda duruyor; burada yalnizca utility ile
   ifade edilemeyenler var (animasyon, gizleme niteligi, buton bilesimleri).
   @apply YOK - Tailwind runtime JIT ile calisiyor, derleme adimi yok. */

/* Gizleme: class yerine NITELIK kullaniliyor ki Tailwind'in class listesiyle
   catismasin ve JS toggleAttribute ile tek satirda acilip kapansin. */
[x-hidden] { display: none !important; }

/* Yukleniyor/isleniyor nabzi */
@keyframes pulse-soft { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
.pulse-soft { animation: pulse-soft 1.6s ease-in-out infinite }

/* Devam eden ilerleme cubugu - hareket "duruyor mu?" sorusunu kapatiyor */
@keyframes stripe { from { background-position: 0 0 } to { background-position: 24px 0 } }
.stripe-anim {
  background-image: linear-gradient(45deg, rgba(255,255,255,.16) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.16) 75%,
    transparent 75%, transparent);
  background-size: 24px 24px;
  animation: stripe .8s linear infinite;
}

/* Gorsel yer tutucu (thumbnail gelmeden / yokken) */
.thumb-ph { background: linear-gradient(135deg, #17171a 0%, #1e1e21 50%, #17171a 100%) }

.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Butonlar --- */
.btn-primary { display:inline-flex; align-items:center; gap:.4rem; background:#b4b7bd;
  color:#0b0b0c; font-weight:600; font-size:12px; padding:.5rem .8rem;
  border-radius:.4rem; white-space:nowrap }
.btn-primary:hover { background:#ced0d5 }

.btn-ghost { display:inline-flex; align-items:center; gap:.4rem; background:#0b0b0c;
  color:#d4d4d8; font-size:12px; padding:.5rem .7rem; border-radius:.4rem;
  border:1px solid #2a2a2d; white-space:nowrap }
.btn-ghost:hover { background:#1e1e21; color:#f4f4f5 }

.btn-danger { display:inline-flex; align-items:center; gap:.4rem; background:#c25a52;
  color:#fff; font-weight:600; font-size:12px; padding:.5rem .8rem; border-radius:.4rem }
.btn-danger:hover { background:#cf7d76 }

.btn-sm { display:inline-flex; align-items:center; gap:.35rem; background:#1e1e21;
  color:#e4e4e7; font-size:12px; padding:.35rem .6rem; border-radius:.35rem;
  border:1px solid #3a3a3e; white-space:nowrap }
.btn-sm:hover { background:#2a2a2d }

.btn-sm-danger { display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(194,90,82,.12); color:#d9b3b0; font-size:12px;
  padding:.35rem .6rem; border-radius:.35rem; border:1px solid rgba(194,90,82,.3);
  white-space:nowrap }
.btn-sm-danger:hover { background:rgba(194,90,82,.2) }

.btn-primary:disabled, .btn-sm:disabled, .btn-danger:disabled { opacity:.5; cursor:default }

/* --- Modal --- */
.modal-card { position:relative; width:100%; max-width:30rem; background:#151517;
  border:1px solid #2a2a2d; border-radius:.75rem;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.7) }
.modal-head { padding:1rem 1.25rem; border-bottom:1px solid #2a2a2d }
.modal-title { font-size:15px; font-weight:600; color:#f4f4f5 }
.modal-body { padding:1.25rem; font-size:13px; color:#a1a1aa }
.modal-foot { display:flex; justify-content:flex-end; gap:.5rem; padding:.9rem 1.25rem;
  border-top:1px solid #2a2a2d }

/* Panel yuzeyi. Eski sablonlar bu sinifi kullaniyor; yeni palete baglandi. */
.card { background:#151517; border:1px solid #2a2a2d }

/* --- Form alanlari --- */
.field { width:100%; background:#0b0b0c; border:1px solid #2a2a2d; border-radius:.375rem;
  padding:.5rem .625rem; font-size:13px; color:#e4e4e7 }
.field:focus { outline:none; border-color:rgba(180,183,189,.6);
  box-shadow:0 0 0 1px rgba(180,183,189,.3) }
.field::placeholder { color:#52525b }

/* SELECT'te appearance SIFIRLANMAK ZORUNDA. macOS <select>'i "yerel denetim"
   olarak cizip arka plan ve kenarlik kurallarini yok sayiyor; filtre kutulari
   bu yuzden acik zeminli ve sistem oklu gorunuyordu. Ok isareti gomulu SVG -
   dis kaynak yok, sunucunun interneti kesilse de duruyor. */
select.field {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 1rem 1rem;
}
select.field:hover { border-color:#3a3a3e }
/* Acilan liste de koyu kalsin (Windows/Linux'ta beyaz dusuyordu) */
select.field option { background:#151517; color:#e4e4e7 }

/* Tarih girisinin takvim simgesi koyu zeminde gorunmez oluyor */
.field[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.6) }

/* --- Kaydirma cubugu --- */
::-webkit-scrollbar { width:10px; height:10px }
::-webkit-scrollbar-track { background:#0b0b0c }
::-webkit-scrollbar-thumb { background:#2a2a2d; border-radius:5px }
::-webkit-scrollbar-thumb:hover { background:#3a3a3e }

/* --- Bildirim --- */
#toast-root { position:fixed; bottom:1rem; right:1rem; z-index:80;
  display:flex; flex-direction:column; gap:.5rem }
.toast { background:#1e1e21; border:1px solid #3a3a3e; color:#e4e4e7;
  padding:.6rem .9rem; border-radius:.5rem; font-size:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); max-width:22rem }
.toast-ok { border-color:rgba(111,191,138,.4) }
.toast-error { border-color:rgba(207,125,118,.5) }