/* Ücretsiz hesaplayıcı sayfaları (/tools, /araclar) — landing.css'in üstüne */

.tl-lang a, .tl-lang span { height: 34px; padding: 0 10px; display: inline-flex; align-items: center; font: 600 12px var(--font-body); color: rgb(var(--x-muted)); }
.tl-lang a:hover { color: rgb(var(--x-text)); background: rgb(var(--x-surface2)); }
.tl-lang span.active { background: rgb(var(--x-surface2)); color: rgb(var(--x-text)); }

.tl-hero { padding-top: 48px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 14px; }
.tl-hero h1 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.15; text-wrap: balance; }
.tl-hero .lp-lead { max-width: 760px; }
.tl-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: rgb(var(--x-muted2)); }
.tl-crumbs a { color: rgb(var(--x-muted)); }

/* Hesaplayıcı: solda form, sağda sonuçlar */
.tl-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.tl-form, .tl-results { background: rgb(var(--x-surface)); border: 1px solid rgb(var(--x-line)); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tl-card-h { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgb(var(--x-muted)); }

.tl-field { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.tl-field > label, .tl-field legend { font-size: 14px; font-weight: 500; color: rgb(var(--x-text2)); padding: 0; }
.tl-field small { font-size: 12px; color: rgb(var(--x-muted2)); line-height: 1.45; }
.tl-input { display: flex; align-items: stretch; border: 1px solid rgb(var(--x-line2)); border-radius: 8px; background: rgb(var(--x-bg2)); overflow: hidden; }
.tl-input:focus-within { border-color: rgb(var(--x-acc)); box-shadow: 0 0 0 3px rgb(var(--x-acc) / 0.18); }
.tl-input input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border: 0; background: transparent; color: rgb(var(--x-text)); font: 500 16px var(--font-mono); outline: none; }
.tl-unit { display: flex; align-items: center; padding: 0 12px; color: rgb(var(--x-muted)); font: 500 13px var(--font-mono); border-left: 1px solid rgb(var(--x-line)); background: rgb(var(--x-surface2)); }

.tl-dir { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.tl-dir legend { width: 100%; margin-bottom: 6px; }
.tl-dir label { flex: 1 1 0; position: relative; }
.tl-dir input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tl-dir span { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 8px; border: 1px solid rgb(var(--x-line2)); font-weight: 600; color: rgb(var(--x-muted)); }
.tl-dir label:first-of-type input:checked + span { background: rgb(var(--x-pos) / 0.14); border-color: rgb(var(--x-pos)); color: rgb(var(--x-pos-t)); }
.tl-dir label:last-of-type input:checked + span { background: rgb(var(--x-neg) / 0.14); border-color: rgb(var(--x-neg)); color: rgb(var(--x-neg-t)); }
.tl-dir input:focus-visible + span { outline: 2px solid rgb(var(--x-acc)); outline-offset: 2px; }

.tl-bigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.tl-big { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 10px; background: rgb(var(--x-bg2)); border: 1px solid rgb(var(--x-line)); min-width: 0; }
.tl-big span { font-size: 13px; color: rgb(var(--x-muted)); }
.tl-big b { font: 500 clamp(24px, 3vw, 30px) var(--font-mono); color: rgb(var(--x-text)); overflow-wrap: anywhere; }
.tl-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.tl-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgb(var(--x-line)); min-width: 0; }
.tl-list dt { font-size: 13px; color: rgb(var(--x-muted)); }
.tl-list dd { margin: 0; text-align: right; }
.tl-list b { font: 500 14px var(--font-mono); color: rgb(var(--x-text)); overflow-wrap: anywhere; }
.tl-results b.pos { color: rgb(var(--x-pos-t)); }
.tl-results b.neg { color: rgb(var(--x-neg-t)); }
.tl-results.is-empty .tl-bigs, .tl-results.is-empty .tl-list { opacity: 0.45; }

.tl-msg { margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 14px; border: 1px solid rgb(var(--x-line)); }
.tl-msg.warn { background: rgb(var(--x-warn) / 0.12); border-color: rgb(var(--x-warn) / 0.5); color: rgb(var(--x-warn-t)); }
.tl-msg.bad { background: rgb(var(--x-neg) / 0.12); border-color: rgb(var(--x-neg) / 0.5); color: rgb(var(--x-neg-t)); }

.tl-table-wrap { overflow-x: auto; }
.tl-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tl-table th { text-align: left; font-size: 12px; font-weight: 500; color: rgb(var(--x-muted)); padding: 8px 10px; border-bottom: 1px solid rgb(var(--x-line2)); white-space: nowrap; }
.tl-table td { padding: 8px 10px; border-bottom: 1px solid rgb(var(--x-line)); font-family: var(--font-mono); white-space: nowrap; }
.tl-table td:last-child { font-family: var(--font-body); }
.tl-table tr.ok td:last-child { color: rgb(var(--x-pos-t)); }
.tl-table tr.tight td:last-child { color: rgb(var(--x-warn-t)); }
.tl-table tr.bad td { color: rgb(var(--x-muted2)); }
.tl-table tr.bad td:last-child { color: rgb(var(--x-neg-t)); }

/* Açıklama metni */
.tl-text { max-width: 880px; padding-top: 56px; display: flex; flex-direction: column; gap: 14px; }
.tl-text h2 { font-size: 24px; margin-top: 12px; }
.tl-text p { color: rgb(var(--x-text2)); font-size: 16px; line-height: 1.65; }
.tl-text code { font: 500 14px var(--font-mono); background: rgb(var(--x-surface2)); padding: 2px 6px; border-radius: 4px; color: rgb(var(--x-text)); overflow-wrap: anywhere; }
.tl-text b { color: rgb(var(--x-text)); }
.tl-faq { padding-top: 48px; }

.tl-cta-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tl-more { padding-top: 56px; }
.tl-tool-card { color: rgb(var(--x-text)); transition: border-color 0.15s; }
.tl-tool-card:hover { border-color: rgb(var(--x-acc)); color: rgb(var(--x-text)); }
.tl-go { margin-top: auto; color: rgb(var(--x-acc-t)); font-weight: 600; font-size: 14px; }
.tl-index { padding-bottom: 64px; }
.tl-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tl-grid2 .lp-card { min-height: 150px; }

@media (max-width: 960px) {
    .tl-tool { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .tl-hero { padding-top: 28px; padding-bottom: 20px; }
    .tl-form, .tl-results { padding: 16px; }
    .tl-list { grid-template-columns: 1fr; }
    .tl-grid2 { grid-template-columns: 1fr; }
    .tl-cta-btn { width: 100%; }
    .tl-cta-btn .lp-btn { width: 100%; }
    .tl-text { padding-top: 40px; }
}

/* Açıklama ve SSS sayfanın sol kenarıyla hizalı kalsın (okuma genişliği sınırlı) */
.tl-text, .tl-faq { max-width: 1200px; }
.tl-text > *, .tl-faq > * { max-width: 860px; }
.tl-page .lp-signin { white-space: nowrap; }
@media (max-width: 400px) {
    .tl-page .lp-brand { gap: 8px; }
    .tl-page .lp-brand span:last-child { font-size: 15px; }
}