/*
 * burc.lol — UX iyileştirme paketi (v1)
 *
 * Kapsam (açık kaynak UX/UI araştırması, "hemen uygulanabilir" maddeleri):
 *   • madde 7 — odak halkası ve yer tutucu kontrastı (WCAG AA)
 *   • madde 8 — dokunmatik cihazlarda 44×44 px dokunma hedefi
 *   • madde 9 — okunabilirlik: satır uzunluğu, satır aralığı, başlık dengeleme
 *   • sonuç ekranı geri bildirimi (sonuç/hata bloğuna yumuşak kaydırma + vurgu)
 *
 * Hepsi geri alınabilir: dosyayı kaldırınca site eski hâline döner.
 * EN SON yüklenir (kontrast dosyasından da sonra) ki çakışma olmasın.
 */

/* ---- 9) Okunabilirlik: makale gövdesi ve uzun metinler ---- */
.tool-article,
.lead,
article p,
.icerik p {
    max-width: 68ch;               /* ideal satır uzunluğu (~68 karakter) */
}

.tool-article p,
.tool-article li {
    line-height: 1.72;
    font-size: clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
}

.tool-article h2,
.tool-article h3,
.calc-card h2,
.calc-card h3 {
    text-wrap: balance;            /* başlıklarda tek kelime artmasını engeller */
}

.tool-article p,
.tool-article blockquote {
    text-wrap: pretty;
}

.tool-article blockquote {
    line-height: 1.68;
}

/* ---- 7) Erişilebilirlik: görünür odak halkası ---- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.calc-util-btn:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--bs-primary, #0a7ba3);
    outline-offset: 2px;
    border-radius: .35rem;
}

/* Yer tutucu metin AA kontrastı (Bootstrap varsayılanı soluk kalıyor) */
.form-control::placeholder,
.form-select::placeholder {
    color: var(--bs-secondary-color, #6c757d);
    opacity: .85;
}

/* ---- 8) Dokunma hedefleri (yalnız dokunmatik cihazlar) ---- */
@media (pointer: coarse) {
    .btn,
    .btn-sm,
    .form-control,
    .form-select,
    .calc-util-btn,
    .form-check-input,
    .nav-link,
    .dropdown-item {
        min-height: 44px;
    }

    .btn,
    .calc-util-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .form-check-input {
        width: 1.35em;
        height: 1.35em;
        margin-top: .15em;
    }

    /* Form alanları arasında parmak dostu boşluk */
    .calc-form .row,
    form.row {
        row-gap: .35rem;
    }
}

/* ---- Sonuç / hata bloğu geri bildirimi ---- */
.ux-vurgu {
    animation: uxVurgu 1.4s ease-out 1;
}

@keyframes uxVurgu {
    0%   { background-color: rgba(10, 123, 163, .16); }
    100% { background-color: transparent; }
}

/* Gönderim sırasında buton durumu (çift tıklamayı ve belirsizliği azaltır) */
.btn.is-yukleniyor {
    opacity: .85;
    cursor: progress;
}

/* ---- Sonuç listesi (etiket/değer) mobil düzeni ----
   Ölçüm: satır başına 79 px yükseklik vardı (etiket ve değer alt alta kayıyordu).
   Sıkı satır aralığı + değeri sağa yaslama ile aynı bilgi ~48 px'te okunuyor. */
.calc-result__list li {
    padding-top: .4rem;
    padding-bottom: .4rem;
    gap: .15rem .75rem;
    line-height: 1.3;
}

.calc-result__list li > span,
.calc-result__list li > strong {
    line-height: 1.3;
}

.calc-result__list li > strong {
    margin-left: auto;
    text-align: right;
}

/* ---- Hata özeti (GOV.UK deseni) ----
   Ölçüm: hata yalnızca formun altında bir kutu olarak görünüyordu; kullanıcı
   hangi alanın sorunlu olduğunu göremiyordu. Özet kutunun içindeki bağlantılar
   ilgili alana gider, alan aria-invalid ile işaretlenir (JS). */
.hata-ozeti {
    border: 2px solid var(--bs-danger);
    border-radius: .5rem;
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
    background-color: rgba(var(--bs-danger-rgb), .08);
}

.hata-ozeti:focus-visible,
.hata-ozeti:focus {
    outline: 3px solid var(--bs-danger);
    outline-offset: 2px;
}

.hata-ozeti__baslik {
    font-weight: 700;
    margin-bottom: .5rem;
    color: var(--bs-danger);
}

.hata-ozeti__liste {
    margin-bottom: 0;
    padding-left: 1.15rem;
}

.hata-ozeti__liste a {
    color: var(--bs-danger);
    text-decoration: underline;
    font-weight: 500;
}

.hata-ozeti__ipucu {
    font-size: .8125rem;
    margin: .5rem 0 0;
    opacity: .9;
}

.hata-alani {
    color: var(--bs-danger);
    font-size: .8125rem;
    font-weight: 600;
    margin: .35rem 0 0;
}

.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"] {
    border-color: var(--bs-danger);
    border-width: 2px;
    background-image: none;
}

/* ---- Tarih/saat alanları (metin + sayı klavyesi, GOV.UK deseni) ---- */
.isg-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.isg-date__inp {
    max-width: 5.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.isg-date__inp--yil {
    max-width: 7rem;
}

.isg-date__ipucu {
    font-size: .8125rem;
    opacity: .85;
    margin: .4rem 0 0;
    flex-basis: 100%;
}

/* ---- Karanlık temada sabit renk sınıfları (kontrast hatası) ----
   Ölçüm: sonuç yorum panelinde <h4 class="text-dark"> karanlık zeminde
   rgb(33,37,41) ile yazılıyordu → okunmuyordu. Bootstrap'in sabit renk
   sınıfları tema duyarlı olmadığı için sonuç/makale alanlarında düzeltilir. */
[data-bs-theme="dark"] .calc-card .text-dark,
[data-bs-theme="dark"] .calc-result .text-dark,
[data-bs-theme="dark"] .tool-article .text-dark,
[data-bs-theme="dark"] .calc-card .text-black,
[data-bs-theme="dark"] .calc-result .text-black {
    color: var(--bs-body-color) !important;
}

.alert[role="alert"] {
    scroll-margin-top: 90px;       /* sabit başlık varsa altında kalmasın */
}

.calc-result,
.calc-card > hr {
    scroll-margin-top: 90px;
}

.calc-card table,
.tool-article table {
    scroll-margin-top: 90px;
}

/* Hareket azaltma tercihi olan kullanıcılar için animasyonu kapat */
@media (prefers-reduced-motion: reduce) {
    .ux-vurgu {
        animation: none;
    }

    html {
        scroll-behavior: auto !important;
    }
}