/* Hallmark · shape: app screen · genre: editorial · theme: Grid (deal 2/3, seed hesaplama-ortalama-maliyet-sitesi-9fa4·67be1ac0·2026-11-10·r0)
 * nav: top bar, wordmark and one link to the full list · signature: the result figure set large on the ultramarine field beside the form · states: empty input, invalid input, computed, value without source
 * axes: light/grotesk-sans/cool · posture: full-palette · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, the pages are forms by nature; the result field and the 12-month table carry the visual weight */
/* Hallmark · waive 39b · the home search input at 64px · it is the page's one control, set at display size on the field */
@import url("./tokens.css");
@import url("./base.css");

:root { --text-figure: clamp(2.5rem, 6vw, 4.5rem); --text-page: clamp(2rem, 4.2vw, 3.25rem); --text-poster: clamp(3.5rem, 10.2vw, 9rem); }

/* Bar */
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 64px; }
.wordmark { display: inline-grid; grid-template-columns: auto auto; column-gap: var(--space-sm); align-items: center; font: var(--display-weight) var(--text-lg)/0.92 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; }
.wordmark::before { content: ""; grid-row: span 2; width: 1.84em; aspect-ratio: 1; background: var(--color-mark); }
.wordmark span + span { font-weight: 400; }
.bar a:not(.wordmark) { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); transition: color var(--dur-short) var(--ease-out); }
.bar a:hover, .footer a:hover, .liste a:hover .liste__ad { color: var(--color-mark); }

/* Page head */
.sayfa { padding-block: var(--space-2xl) var(--space-3xl); }
.sayfa h1 { font-size: var(--text-page); max-width: 22ch; line-height: 1; }
.sayfa .lead { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lg); }
.guncel { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* Calculator: form on paper, result on the field */
.hesap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); margin-top: var(--space-2xl); align-items: start; }
.girdi { display: grid; gap: var(--space-lg); align-content: start; }
.alan { display: grid; gap: var(--space-2xs); }
.alan > label, .alan > legend, .grup > legend { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); padding: 0; }
.alan input, .alan select { width: 100%; min-height: 48px; padding: 0 var(--space-2xs); border: 0; border-bottom: 1px solid var(--color-muted); border-radius: 0; background: transparent; color: var(--color-ink); font-size: var(--text-xl); font-variant-numeric: tabular-nums; outline: 2px solid transparent; outline-offset: 0; transition: border-color var(--dur-short) var(--ease-out); }
.alan input:hover, .alan select:hover { border-bottom-color: var(--color-ink); }
.alan input:focus-visible, .alan select:focus-visible { outline-color: var(--color-focus); }
.alan input[aria-invalid="true"] { border-bottom-color: var(--color-error); }
.alan input:disabled { opacity: 0.55; cursor: not-allowed; }
.yardim { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.yardim--hata { color: var(--color-error); }
.grup { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-xs); }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); background: var(--color-paper-2); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.seg label:hover { background: var(--color-paper-3); }
.seg input:checked + label { background: var(--color-ink); color: var(--color-paper); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.sonuc { background: var(--color-field); color: var(--color-field-ink); --color-focus: var(--color-field-ink); padding: var(--space-xl); display: grid; gap: var(--space-lg); align-content: start; position: sticky; top: var(--space-lg); }
.sonuc__etiket { font-size: var(--text-sm); font-weight: 500; }
.sonuc__deger { font: var(--display-weight) var(--text-figure)/0.95 var(--font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.sonuc__not { max-width: 46ch; }
.sonuc dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-lg); margin: 0; }
.sonuc dl > div { display: contents; }
.sonuc dl > div[hidden] { display: none; }
.sonuc dt { font-weight: 500; }
.sonuc dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.sonuc a { color: var(--color-field-ink); }
.paylas { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* Buttons */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: 0; background: var(--color-ink); color: var(--color-paper); font: 500 var(--text-md)/1 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.metin-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: currentColor; font: 500 var(--text-md)/1 var(--font-body); text-decoration: underline 1px; text-underline-offset: 0.32em; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.metin-btn:hover { color: var(--color-mark); }
.sonuc .metin-btn:hover { color: var(--color-field-ink); text-decoration-thickness: 2px; }
.metin-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Sections below the calculator */
.bolum { margin-top: var(--space-3xl); }
.bolum h2 { font-size: var(--text-2xl); margin-bottom: var(--space-lg); }
.bolum p + p, .bolum p + ul, .bolum ul + p { margin-top: var(--space-md); }
.bolum ul { margin: 0; padding-left: 1.2em; max-width: 65ch; }
.bolum li + li { margin-top: var(--space-2xs); }
.tablo-kutu { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-align: end; white-space: nowrap; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); }
td { text-align: end; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); white-space: nowrap; }
th:first-child, td:first-child { text-align: start; padding-left: 0; position: sticky; left: 0; background: var(--color-paper); }
tr.secili td { color: var(--color-mark); font-weight: 500; }

/* Cost items */
.kalemler { display: grid; gap: var(--space-md); }
.kalem { display: grid; gap: var(--space-2xs); }
.kalem--miktar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-md); align-items: end; }
.kalem .alan input { font-size: var(--text-lg); }
.kalem__tutar { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.toplam-cubuk { display: none; }

.kaynak { margin-top: var(--space-3xl); padding: var(--space-xl); background: var(--color-paper-2); }
.kaynak h2 { font-size: var(--text-xl); margin-bottom: var(--space-md); }
.kaynak ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-xs); max-width: 80ch; }
.kaynak p { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }

/* Home */
.giris { padding-block: var(--space-2xl) var(--space-2xl); }
.giris h1 { font-size: var(--text-poster); line-height: 0.9; letter-spacing: -0.045em; max-width: none; }
.giris .lead { margin-top: var(--space-lg); font-size: var(--text-lg); color: var(--color-ink-2); }
.liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--space-lg) var(--gap-columns); }
.liste a { display: grid; gap: var(--space-2xs); text-decoration: none; padding-block: var(--space-sm); }
.liste__ad { font: var(--display-weight) var(--text-xl)/1.1 var(--font-display); letter-spacing: var(--tracking-display); transition: color var(--dur-short) var(--ease-out); }
.liste__aciklama { font-size: var(--text-sm); color: var(--color-muted); }
.oneriler { margin-top: var(--space-xl); }
.oneriler .liste__ad { font-size: var(--text-3xl); }
.ara { background: var(--color-field); color: var(--color-field-ink); --color-focus: var(--color-field-ink); padding-block: var(--space-2xl); margin-top: var(--space-3xl); }
.ara label { display: block; font: var(--display-weight) var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.ara input { width: 100%; max-width: 40rem; min-height: 64px; margin-top: var(--space-md); padding: 0 var(--space-2xs); border: 0; border-bottom: 1px solid color-mix(in oklab, var(--color-field-ink) 60%, transparent); border-radius: 0; background: transparent; color: var(--color-field-ink); font-size: var(--text-3xl); outline: 2px solid transparent; }
.ara input::placeholder { color: color-mix(in oklab, var(--color-field-ink) 70%, transparent); }
.ara input:focus-visible { outline-color: var(--color-focus); }
.ara .liste { margin-top: var(--space-xl); }
.ara .liste__aciklama { color: var(--color-field-ink); }
.ara a:hover .liste__ad { color: var(--color-field-ink); text-decoration: underline 2px; text-underline-offset: 0.18em; }
.ara__bos { margin-top: var(--space-lg); min-height: 1lh; }

/* Footer */
.footer { margin-top: var(--space-4xl); padding-block: var(--space-2xl); background: var(--color-paper-2); font-size: var(--text-sm); }
.footer__ic { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.footer ul { list-style: none; margin: 0; padding: 0; columns: 2 14rem; column-gap: var(--gap-columns); }
.footer li { break-inside: avoid; padding-block: var(--space-2xs); }
.footer p { color: var(--color-ink-2); max-width: 45ch; }
.footer p + p { margin-top: var(--space-sm); }

@media (max-width: 60rem) {
  .hesap { grid-template-columns: minmax(0, 1fr); }
  .toplam-cubuk { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); position: sticky; bottom: 0; z-index: var(--z-sticky); margin-inline: calc(-1 * var(--gutter)); padding: var(--space-sm) var(--gutter); background: var(--color-ink); color: var(--color-paper); font-weight: 500; }
  .toplam-cubuk span:last-child { font: var(--display-weight) var(--text-xl)/1 var(--font-display); }
  .sonuc { padding: var(--space-lg); position: static; }
  .footer__ic { grid-template-columns: minmax(0, 1fr); }
  .kaynak { padding: var(--space-lg); }
}
@media (max-width: 40rem) {
  .ara input { font-size: var(--text-2xl); }
}