/* Shared design for the "Diğer Hesaplamalar" pages. Loaded only by
   layouts/exam.njk and layouts/general.njk (body.calc-page); the YKS
   calculator is the reference design. GPA, grade and finance pages do not
   load this file. */
.calc-page {
  --calc-bg: #f1f1f1;
  --calc-surface: #fff;
  --calc-border: #e2e2e2;
  --calc-muted: #6c757d;
  --calc-accent: #337ab7;
  --calc-note: #e8f1f9;
  --calc-error: #a52121;
  --calc-control: 44px;
  --calc-radius: 8px;
  background: var(--calc-bg);
}

/* Page width: exam calculators with subject tables, simple calculators narrower. */
.calc-page .ayt-page, .calc-page .lgs-page, .calc-page .calc-main { max-width: 1100px; margin: auto; padding: 0 24px 48px; }
.calc-page .calc-main--narrow { max-width: 760px; }

/* Header: centred regular-weight title and a short muted introduction. */
.calc-page h1 { font-size: 40px; font-weight: 400; text-align: center; margin: 0 0 12px; }
.calc-page .calc-intro, .calc-page .ayt-intro, .calc-page .lgs-intro {
  color: var(--calc-muted); font-size: 17.5px; line-height: 1.6; text-align: center; max-width: 680px; margin: 0 auto 28px;
}

/* Information note (model year, data source caveats). */
.calc-page .calc-note, .calc-page .lgs-model-note {
  background: var(--calc-note); border-radius: var(--calc-radius); padding: 14px 18px; font-size: 14px; line-height: 1.7; margin: 0 0 24px;
}

/* Option selectors (exam year or period): muted label beside a 44px select. */
.calc-page .calc-option, .calc-page .ayt-year, .calc-page .tyt-year, .calc-page .lgs-year {
  display: flex; align-items: center; gap: 12px; margin: 0 0 28px !important;
}
.calc-page .calc-option label, .calc-page .ayt-year .form-label, .calc-page .tyt-year .form-label, .calc-page .lgs-year label {
  color: var(--calc-muted); font-weight: 400; margin: 0;
}
.calc-page .calc-option select, .calc-page .ayt-year .yks-year-select, .calc-page .tyt-year .yks-year-select, .calc-page .lgs-year select {
  width: 200px; min-height: var(--calc-control); margin: 0; font-size: 16px;
}

/* Controls and labels: one height; bold is reserved for section headings and results. */
.calc-page .form-control, .calc-page .form-select { min-height: var(--calc-control); font-size: 16px; border-radius: 6px; }
/* Bootstrap's .fw-bold is !important, so the override must be too. */
.calc-page form label, .calc-page form .fw-bold, .calc-page form .bold-label { font-weight: 400 !important; }
.calc-page .calc-help, .calc-page #lgs-input-help, .calc-page .ayt-section-note { color: var(--calc-muted); font-size: 14px; margin: 0 0 12px; }
.calc-page .calc-section-title { font-size: 18px; font-weight: 600; margin: 0 0 14px; }

/* Subject tables (YKS, LGS, ALES): white card, column header row, 44px inputs. */
.calc-page .calc-table { margin: 0 0 8px; }
.calc-page .calc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 140px 140px; gap: 16px; align-items: center;
  padding: 12px 24px; background: var(--calc-surface); border: 1px solid var(--calc-border); border-top: 0;
}
.calc-page .calc-row--head { border-top: 1px solid var(--calc-border); border-radius: var(--calc-radius) var(--calc-radius) 0 0; color: #90969b; font-size: 13px; }
.calc-page .calc-row:last-child { border-radius: 0 0 var(--calc-radius) var(--calc-radius); }
.calc-page .calc-row label { margin: 0; font-size: 16px; }
.calc-page .calc-row label small { display: block; color: #777; font-size: 14px; }
.calc-page .calc-row input { margin: 0; }
.calc-page .lgs-columns, .calc-page .lgs-subject { grid-template-columns: minmax(0, 1fr) 140px 140px 100px; gap: 16px; padding: 12px 24px; }
.calc-page .lgs-subject-name { font-size: 16px; }
.calc-page .lgs-subject-name small { font-size: 14px; color: #777; }
.calc-page .lgs-columns { color: #90969b; }

/* Simple calculators: each form is a white card. */
.calc-page .calc-card {
  background: var(--calc-surface); border: 1px solid var(--calc-border); border-radius: var(--calc-radius); padding: 20px 24px; margin: 0 0 16px;
}
.calc-page .calc-card .row { margin-bottom: 12px !important; align-items: center; }
.calc-page .calc-card .row:last-child { margin-bottom: 0 !important; }
.calc-page .calc-card .form-control { margin-bottom: 0 !important; }

/* Compact tool card: label above two inputs and its own button. */
.calc-page .calc-card-label { display: block; margin: 0 0 10px; font-size: 16px; }
.calc-page .calc-inline-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; }

/* Primary action: same size and placement everywhere. */
.calc-page .calc-actions, .calc-page .lgs-actions, .calc-page .calculator { display: flex; gap: 12px; justify-content: center; margin: 24px 0; }
.calc-page .btn-success.btn-lg, .calc-page .lgs-actions .btn { min-height: 56px; padding: 12px 36px; font-size: 20px; border-radius: var(--calc-radius); }
.calc-page .lgs-actions .btn-outline-secondary { font-size: 16px; }
.calc-page .calc-inline-fields .btn-success.btn-lg { min-height: var(--calc-control); padding: 8px 20px; font-size: 16px; }

/* Results: white card with an accent border, label/value lines. */
.calc-page .calc-result { background: var(--calc-surface); border: 1px solid var(--calc-accent); border-radius: var(--calc-radius); padding: 20px 24px; margin: 20px 0 28px; overflow-wrap: anywhere; }
.calc-page .calc-result h2 { font-size: 20px; font-weight: 500; margin: 0 0 12px; text-align: center; }
.calc-page .calc-result p { margin: 0; padding: 10px 0; border-top: 1px solid var(--calc-border); display: flex; justify-content: space-between; gap: 16px; }
.calc-page .calc-result p:first-of-type { border-top: 0; }
.calc-page .calc-result p > span:last-child { font-weight: 600; text-align: right; }
.calc-page .calc-result .calc-result-intro { display: block; color: var(--calc-muted); font-size: 14px; padding: 0 0 8px; }
.calc-page .calc-result--error { border-color: var(--calc-error); }
.calc-page .calc-result--error p { color: var(--calc-error); display: block; }

/* Legacy Bootstrap wrappers on the simple calculators become one centred column. */
.calc-page .row > .calc-main { flex: 0 0 100%; width: 100%; margin-left: auto; margin-right: auto; }
.calc-page .row > .col-sm-3:empty { display: none; }

/* Explanatory content below the calculator. Form section titles and result
   titles keep their own sizes (more specific rules below). */
.calc-page .calc-main h2, .calc-page h2.calc-content-title { font-size: 24px; font-weight: 500; text-align: left; margin: 32px 0 12px; }
.calc-page .calc-main h3, .calc-page .calc-content-title ~ h3 { font-size: 18px; font-weight: 600; margin: 20px 0 8px; }
.calc-page .calc-main h2.calc-section-title { font-size: 18px; font-weight: 600; margin: 28px 0 12px; }
.calc-page .calc-main .calc-result h2 { font-size: 20px; font-weight: 500; text-align: center; margin: 0 0 12px; }
.calc-page .calc-content, .calc-page .lgs-explanation { margin-top: 40px; line-height: 1.8; }
.calc-page .calc-content h2, .calc-page .lgs-explanation h2 { font-size: 24px; font-weight: 500; text-align: left; margin: 32px 0 12px; }
.calc-page .calc-content h3 { font-size: 18px; font-weight: 600; margin: 20px 0 8px; }

@media (max-width: 700px) {
  .calc-page .ayt-page, .calc-page .lgs-page, .calc-page .calc-main { padding: 0 16px 36px; }
  .calc-page h1 { font-size: 28px; }
  .calc-page .calc-intro, .calc-page .ayt-intro, .calc-page .lgs-intro { font-size: 16px; }
  .calc-page .calc-option select, .calc-page .ayt-year .yks-year-select, .calc-page .tyt-year .yks-year-select, .calc-page .lgs-year select { width: auto; flex: 1; max-width: 240px; font-size: 16px; }
  .calc-page .calc-row { grid-template-columns: minmax(0, 1fr) 72px 72px; gap: 8px; padding: 12px; }
  .calc-page .calc-row label { font-size: 14px; }
  .calc-page .calc-row label small { font-size: 13px; }
  /* LGS matches YKS on phones: one column header row instead of repeated labels. */
  .calc-page .lgs-columns { display: grid; }
  .calc-page .lgs-columns + .lgs-subject { border-top: 0; border-radius: 0; }
  .calc-page .lgs-answer label { display: none; }
  .calc-page .lgs-columns, .calc-page .lgs-subject { grid-template-columns: minmax(0, 1fr) 72px 72px 58px; gap: 8px; padding: 12px; }
  .calc-page .lgs-subject-name { font-size: 14px; }
  .calc-page .lgs-subject-name small { font-size: 13px; }
  .calc-page .calc-card { padding: 16px; }
  .calc-page .calc-inline-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .calc-page .calc-inline-fields .btn { grid-column: 1 / -1; }
  .calc-page .calc-inline-fields .btn-success.btn-lg { width: 100%; }
  .calc-page .calc-content h2, .calc-page .lgs-explanation h2, .calc-page .calc-main h2:not(.calc-section-title), .calc-page h2.calc-content-title { font-size: 21px; }
  .calc-page .calc-main .calc-result h2 { font-size: 18px; }
}