/* ============================================================
   MODERN FORM ELEMANLARI (INPUT & SELECT) - ORANGE EDITION
   ============================================================ */

/* 1. Light Mode (Varsayılan) */
input,
textarea,
select:not([multiple]) {
    font-size: 16px !important; /* Mobil zoom engelleme */
    border-radius: 0.85rem; /* modern rounded-xl */
    color: #111827; /* gray-900 */
    border: 1px solid #e5e7eb; /* gray-200 (Daha yumuşak bir sınır) */
    background-color: #f9fafb; /* gray-50 (Daha temiz bir görünüm) */
    padding: 0.75rem 1rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    outline: none;
}

/* Select Özel (Modern Ok İkonu) */
select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
    /* Ok ikonunu biraz daha zarif ve ince yaptık */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234b5563'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem 1rem;
}

/* Focus & Hover Durumları (Orange-600 Temalı) */
input:focus,
textarea:focus,
select:not([multiple]):focus {
    border-color: #ea580c !important; /* orange-600 */
    background-color: #ffffff;
    /* Turuncu odak gölgesi */
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.1);
}

input:hover,
textarea:hover,
select:not([multiple]):hover {
    border-color: #d1d5db; /* gray-300 */
    background-color: #ffffff;
}

/* ============================================================
   DARK MODE (Karanlık Mod)
   ============================================================ */

.dark input,
.dark textarea,
.dark select:not([multiple]) {
    background-color: #111827 !important; /* gray-900 */
    color: #f9fafb; /* gray-50 */
    border-color: #374151; /* gray-700 */
}

/* Dark Mode Select Ok İkonu (Beyaz) */
.dark select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

/* Dark Mode Focus & Hover */
.dark input:focus,
.dark textarea:focus,
.dark select:not([multiple]):focus {
    border-color: #ea580c !important; /* orange-600 hala aktif */
    background-color: #1f2937 !important; /* gray-800 */
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.2);
}

.dark input:hover,
.dark textarea:hover,
.dark select:not([multiple]):hover {
    border-color: #4b5563; /* gray-600 */
}

/* ✅ Okunaklı tasarımı bozmadan Apple-like scrollbar */
.scrollbar-thin{
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(107,114,128,.28) transparent;
  overscroll-behavior: contain;
}

/* WebKit (Chrome/Safari/Edge) */
.scrollbar-thin::-webkit-scrollbar{
  width: 10px;
}

.scrollbar-thin::-webkit-scrollbar-track{
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb{
  background: rgba(107,114,128,.28);
  border-radius: 999px;
  border: 3px solid transparent;      /* ince thumb hissi */
  background-clip: content-box;       /* Apple tarzı */
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover{
  background: rgba(107,114,128,.40);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Dark mode */
.dark .scrollbar-thin{
  scrollbar-color: rgba(148,163,184,.26) transparent;
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.26);
  border: 3px solid transparent;
  background-clip: content-box;
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover{
  background: rgba(148,163,184,.38);
}

/* ✅ Opsiyonel: üst/alt fade (scroll olduğunu hissettirir, okuma bozmaz) */
.scrollbar-thin-fade{
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}