/* Custom Cyber Theme Styles */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fadeIn {
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slideLeft {
  animation: slideLeft 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scaleUp {
  animation: scaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Ozel onay dialogunun kapanis animasyonu (native confirm() yerine) */
@keyframes scaleDown {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}
.animate-scaleDown {
  animation: scaleDown 0.15s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Onay dialogundaki ikonun hafif "pop" ile belirmesi */
@keyframes iconPop {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
.confirm-icon-pop {
  animation: iconPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s backwards;
}

/* Cyber Grid Background */
.cyber-grid-bg {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #0b0d17;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #252b45;
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #06b6d4;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Node Card Styles */
.node-card {
  position: relative;
  background: #11131e;
  border: 1px solid #20263b;
  border-radius: 1rem;
  padding: 1rem;
  transition: all 0.2s ease;
}
.node-card:hover {
  border-color: rgba(6, 182, 212, 0.4);
  background: #141724;
}
.node-card.node-1a {
  border-left: 3px solid #06b6d4;
}
.node-card.node-3a {
  border-left: 3px solid #10b981;
}

.stock-port-card.active-cyan {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.25);
}
.stock-port-card.active-cyan .port-radio-dot {
  background-color: #06b6d4 !important;
}

/* ─── Mobil Kullanılabilirlik Düzeltmeleri ───────────────────────────────────
 * Tasarımda form alanları (input/select/textarea) 12px gibi küçük yazı
 * boyutlarıyla geliyordu. iOS Safari, 16px'den küçük bir form alanına
 * dokunulduğunda sayfayı OTOMATİK YAKINLAŞTIRIYOR — bu da düzeni kaydırıp
 * "Kaydet"/"Onayla" gibi butonlara erişmeyi zorlaştırıyor, işlemi
 * tamamlamayı neredeyse imkansız hale getirebiliyor. Sadece mobil genişlikte
 * (768px altı) form alanlarını 16px'e büyütüyoruz — masaüstündeki kompakt
 * görünüm hiç değişmiyor. Ayrıca dokunma hedeflerini (buton/link) Apple'ın
 * önerdiği ~44px asgari boyuta yaklaştırıyoruz.
 */
@media (max-width: 767px) {
  input, select, textarea {
    font-size: 16px !important;
  }

  /* SORUN: "flex items-center justify-between" ile kurulmuş satırlarda (ürün
   * adı solda, tutar/buton sağda gibi) flex öğelerinin varsayılan min-width
   * değeri "auto"dur — yani uzun bir metin (ürün başlığı, e-posta, açıklama)
   * KÜÇÜLMEYİ REDDEDER ve kardeşini (tutar, buton) görünür alanın dışına
   * ittirir ya da kesip gizler. Bu, "yazılar tam görünmüyor" şikayetinin en
   * yaygın nedenidir. Çözüm: mobilde tüm flex satırları alt alta dizilsin
   * (dikey), her öğe tam genişliği kullansın — kesilme İMKANSIZ hale gelir.
   */
  .flex.items-center.justify-between,
  .flex.justify-between {
    flex-wrap: wrap;
    row-gap: 0.375rem;
  }
  .flex.items-center.justify-between > *,
  .flex.justify-between > * {
    min-width: 0;
  }

  /* SORUN: "ARAÇLAR" gibi açılır menüler (dropdown-panel) masaüstünde
   * "right-0" ile (düğmenin SAĞ kenarına hizalı, sola doğru açılan) konumlanıyordu.
   * Düğme mobilde ekranın sol tarafındayken bu, menünün SOL KENARDAN TAŞIP
   * KESİLMESİNE yol açıyordu (metnin bir kısmı hiç görünmüyordu). Mobilde
   * hepsi düğmenin SOL kenarına hizalanır ve ekran genişliğini aşamaz.
   */
  .dropdown-panel {
    left: 0 !important;
    right: auto !important;
    max-width: calc(100vw - 2rem);
  }

  /* NOT: Daha önce burada tüm sayfaya "overflow-wrap: anywhere" uygulanıyordu
   * ("uzun metinler taşmasın" diye) ama bu, dar tablo hücrelerinde METNİ TEK
   * TEK HARFE BÖLÜP ALT ALTA DİZİYORDU (gerçek cihazda görüldü, ciddi bir
   * hataydı) — kaldırıldı. Tablolar zaten kendi içinde güvenle yana
   * kaydırılıyor (overflow-x-auto), buna dokunmuyoruz.
   */

  /* SORUN: Modal pencereler (onay kutusu, gider ekle, manuel talep, stok
   * oluşturucu vb.) içeriği mobil ekran yüksekliğinden uzun olduğunda
   * kutunun kendisi kaydırılamıyordu — alttaki "Kaydet"/"Onayla" butonuna
   * ULAŞILAMIYORDU (işlemi tamamlayamama şikayetinin asıl nedeni budur).
   * Güvenlik ağı: TÜM tam-ekran modal katmanlarının (.fixed.inset-0) İÇ
   * kutusu artık ekran yüksekliğinin %92'sini asla aşmıyor ve gerekirse
   * kendi içinde dikey kaydırılıyor.
   */
  .fixed.inset-0 > div {
    max-height: 92vh;
    overflow-y: auto;
  }
}

/* Accordion Styling */
.faq-item-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s ease;
}
.faq-item-content.open {
  max-height: 500px;
  padding-top: 0.75rem;
}