/* =====================================================================
   FATURANA — Ortak Tasarım Sistemi (Design System)
   Amaç: sitenin her alanında (public site, firma app, tenant, muhasebeci,
   auth) başlık (H1/H2/H3), paragraf/açıklama, label, input, select, textarea
   ve buton görünümünü tutarlı bir düzene almak.
   Her alanın kendi teması (Metronic / Bootstrap / pazarlama) korunur; burada
   yalnızca ortak öğeler token'lar üzerinden hizalanır.
   ===================================================================== */

:root {
    /* Renkler */
    --ds-heading: #0f172a;
    --ds-text: #334155;
    --ds-muted: #64748b;
    --ds-label: #334155;
    --ds-border: #e2e8f0;
    --ds-border-strong: #cbd5e1;
    --ds-primary: #4f46e5;
    --ds-primary-ring: rgba(79, 70, 229, 0.18);
    --ds-field-bg: #ffffff;
    --ds-field-disabled-bg: #f1f5f9;

    /* Tipografi ölçeği */
    --ds-h1: clamp(1.6rem, 2.2vw, 2.1rem);
    --ds-h2: clamp(1.35rem, 1.7vw, 1.65rem);
    --ds-h3: clamp(1.15rem, 1.35vw, 1.3rem);
    --ds-h4: 1.075rem;
    --ds-body: 0.95rem;
    --ds-small: 0.82rem;
    --ds-line: 1.55;

    /* Form / kontrol ölçüleri */
    --ds-radius: 0.625rem;
    --ds-radius-sm: 0.45rem;
    --ds-control-h: 2.7rem;
    --ds-control-pad-y: 0.55rem;
    --ds-control-pad-x: 0.85rem;
    --ds-gap: 1rem;
}

/* ---------------- Başlıklar ----------------
   Pazarlama (public) sayfalarında büyük hero başlıkları korunsun diye başlık
   kuralları `.ds-typography-off` ile devre dışı bırakılabilir. */
.ds-scope:not(.ds-typography-off) h1,
.ds-scope:not(.ds-typography-off) h2,
.ds-scope:not(.ds-typography-off) h3,
.ds-scope:not(.ds-typography-off) h4,
.ds-scope:not(.ds-typography-off) h5,
.ds-scope:not(.ds-typography-off) h6 {
    color: var(--ds-heading);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.ds-scope:not(.ds-typography-off) h1 { font-size: var(--ds-h1); margin-bottom: 0.6rem; }
.ds-scope:not(.ds-typography-off) h2 { font-size: var(--ds-h2); margin-bottom: 0.55rem; }
.ds-scope:not(.ds-typography-off) h3 { font-size: var(--ds-h3); font-weight: 650; margin-bottom: 0.5rem; }
.ds-scope:not(.ds-typography-off) h4 { font-size: var(--ds-h4); font-weight: 650; margin-bottom: 0.45rem; }

/* ---------------- Paragraf / açıklama ---------------- */
.ds-scope:not(.ds-typography-off) p {
    color: var(--ds-text);
    font-size: var(--ds-body);
    line-height: var(--ds-line);
}

.ds-scope .ds-description,
.ds-scope .form-text {
    color: var(--ds-muted);
    font-size: var(--ds-small);
    line-height: 1.45;
}

/* ---------------- Label ---------------- */
.ds-scope label,
.ds-scope .form-label {
    display: inline-block;
    margin-bottom: 0.4rem;
    color: var(--ds-label);
    font-size: 0.86rem;
    font-weight: 600;
}

    .ds-scope .form-label.required::after,
    .ds-scope label.required::after {
        content: " *";
        color: #ef4444;
    }

/* ---------------- Form kontrolleri (input / select / textarea) ---------------- */
.ds-scope .form-control,
.ds-scope .form-select,
.ds-scope input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.ds-scope select,
.ds-scope textarea {
    min-height: var(--ds-control-h);
    padding: var(--ds-control-pad-y) var(--ds-control-pad-x);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background-color: var(--ds-field-bg);
    color: var(--ds-heading);
    font-size: var(--ds-body);
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ds-scope textarea,
.ds-scope textarea.form-control {
    min-height: 6rem;
    height: auto;
}

.ds-scope .form-control:focus,
.ds-scope .form-select:focus,
.ds-scope input:focus,
.ds-scope select:focus,
.ds-scope textarea:focus {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 0.2rem var(--ds-primary-ring);
    outline: 0;
}

.ds-scope .form-control::placeholder,
.ds-scope input::placeholder,
.ds-scope textarea::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.ds-scope .form-control:disabled,
.ds-scope .form-select:disabled,
.ds-scope input:disabled,
.ds-scope select:disabled,
.ds-scope textarea:disabled,
.ds-scope .form-control[readonly] {
    background-color: var(--ds-field-disabled-bg);
    color: var(--ds-muted);
}

.ds-scope .form-select {
    padding-right: 2.25rem;
}

/* Küçük boyut varyantı tutarlılığı */
.ds-scope .form-control-sm,
.ds-scope .form-select-sm {
    min-height: 2.2rem;
    padding: 0.35rem 0.65rem;
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-small);
}

/* Girişler arası dikey ritim (Bootstrap dışı formlar için) */
.ds-scope .ds-field + .ds-field {
    margin-top: var(--ds-gap);
}

/* Mobilde iOS otomatik zoom engeli (font-size >= 16px) */
@media (max-width: 767.98px) {
    .ds-scope .form-control,
    .ds-scope .form-select,
    .ds-scope input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .ds-scope select,
    .ds-scope textarea {
        font-size: 16px;
    }
}