/* ====================================================================
   SVR ISI — Ortak bileşen stilleri (tüm sistemde TEK standart)
   Input ve butonlar her yerde aynı boyut/ebat olsun diye burada tanımlı.
   Renkler için layout'taki :root değişkenleri (--brand, --accent...) kullanılır.
   ==================================================================== */

/* ---------- Standart INPUT / SELECT ---------- */
.inp,
.sel {
    width: 100%;
    border: 1px solid #cbd5e1;            /* slate-300 */
    background-color: #f8fafc;            /* slate-50 */
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;           /* py-1.5 px-2.5 */
    font-size: 12px;
    line-height: 1.25rem;
    color: #475569;                       /* slate-600 */
    outline: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.inp::placeholder { color: #94a3b8; }     /* slate-400 */
.inp:focus,
.sel:focus {
    background-color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-light);
}

/* İkonlu input (soldan boşluk) */
.with-icon { padding-left: 2rem; }

/* Select: kendi okunu çiz */
.sel {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 14px;
    cursor: pointer;
}

/* Hatalı input */
.inp.hatali,
.sel.hatali { border-color: #fca5a5; }    /* red-300 */
.inp.hatali:focus,
.sel.hatali:focus { box-shadow: 0 0 0 2px #fee2e2; }

/* ---------- Standart BUTON ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;            /* py-1.5 px-3 */
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
}
.btn:disabled { opacity: .6; cursor: default; }

.btn-primary { background-color: var(--brand); color: #fff; }
.btn-primary:hover:not(:disabled) { background-color: var(--brand-dark); }

.btn-dark { background-color: #1e293b; color: #fff; }   /* slate-800 */
.btn-dark:hover:not(:disabled) { background-color: #0f172a; }

.btn-ghost { border-color: #e2e8f0; color: #64748b; background-color: #fff; }
.btn-ghost:hover:not(:disabled) { background-color: #f8fafc; }

/* İkon buton (sadece ikon) */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border-radius: 0.5rem;
    color: #94a3b8;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.btn-icon:hover { background-color: #f1f5f9; color: #475569; }

/* ---------- Yatay kaydırma (scrollbar gizli) ---------- */
.x-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
}
.x-scroll::-webkit-scrollbar { display: none; }   /* Chrome/Safari */

/* ---------- İnce, yumuşak scrollbar (tüm sistem) ---------- */
* {
    scrollbar-width: thin;                 /* Firefox */
    scrollbar-color: #cbd5e1 transparent;
}
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;              /* slate-300 */
    border-radius: 9999px;
    border: 3px solid transparent;         /* ince görünmesi için iç boşluk */
    background-clip: content-box;
    transition: background-color .2s;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;              /* slate-400 (hover'da belirginleşir) */
}
::-webkit-scrollbar-corner {
    background: transparent;
}