/* Komisyon hesaplayıcı (tr/komisyon-hesaplayici, en/commission-calculator).
   Renkler anasayfa.css değişkenlerinden: krem metin (--ink), altın vurgu (--gold),
   koyu paneller (--card / --card-2). Mobilde tek sütun. */

.calc { padding-block: 40px 64px; }
.calc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.calc__title { font-size: clamp(2rem, 8vw, 3.2rem); line-height: 1.08; }
.calc__sub { color: var(--soft); margin-block-start: 14px; font-size: 1.05rem; line-height: 1.6; max-width: 52ch; }
.calc__privacy { color: var(--muted); margin-block-start: 10px; font-size: .85rem; }

.calc__fields { display: grid; gap: 22px; margin-block-start: 30px; }
.calc-field { display: grid; gap: 8px; min-width: 0; }
.calc-field[hidden] { display: none; }
.calc-field__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calc-field__head label { font-weight: 600; font-size: .98rem; line-height: 1.35; }
.calc-field__num { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; }
.calc-field__num input { width: 6.2em; min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 0.5px solid var(--gold-line); background: var(--card); color: var(--ink); font: inherit; font-size: 1rem; font-weight: 600; text-align: end; }
.calc-field__num input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.calc-field__help { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.calc-field input[type="range"] { width: 100%; min-height: 32px; margin: 0; accent-color: var(--gold); cursor: pointer; background: transparent; }

.calc-mode { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.calc-mode legend { padding: 0; font-weight: 600; font-size: .98rem; margin-block-end: 10px; }
.calc-mode__tabs { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; padding: 4px; background: var(--card); border: 0.5px solid var(--gold-line); border-radius: 999px; }
.calc-mode__tabs input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.calc-mode__tabs label { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px; color: var(--soft); font-size: .9rem; font-weight: 600; cursor: pointer; }
.calc-mode__tabs input:checked + label { background: var(--gold); color: var(--charcoal); }
.calc-mode__tabs input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- Sonuç paneli ---- */
.calc-result { min-width: 0; background: var(--card); color: var(--ink); border: 1px solid var(--gold-line); border-radius: 22px; padding: 26px 20px 22px; box-shadow: var(--shadow); }
.calc-result__label { font-size: .78rem; font-weight: 600; letter-spacing: .16em; color: var(--gold); }
.calc-result__headline { margin-block-start: 10px; min-height: 5.5rem; }
.calc-result__big { font-family: var(--serif); font-weight: 600; font-size: clamp(2.3rem, 11vw, 4.2rem); line-height: 1.02; letter-spacing: -0.02em; white-space: nowrap; overflow-wrap: normal; color: var(--ink); }
.calc-result__big--long { font-size: clamp(1.8rem, 8.4vw, 3.3rem); }
.calc-result__monthly { margin-block-start: 8px; color: var(--soft); font-size: 1rem; }
.calc-result__msg { font-family: var(--serif); font-size: 1.2rem; line-height: 1.45; color: var(--ink); }
.calc-result__big[hidden], .calc-result__monthly[hidden], .calc-result__msg[hidden] { display: none; }
.calc-result__rule { border: 0; border-block-start: 0.5px solid var(--gold-line); margin-block: 20px; }
.calc-result__rows { display: grid; gap: 8px; margin: 0; }
.calc-result__rows div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.calc-result__rows dt { color: var(--soft); font-size: .92rem; }
.calc-result__rows dd { margin: 0; font-weight: 600; white-space: nowrap; }

.calc-bars { display: grid; gap: 10px; margin-block-start: 18px; }
.calc-bar { display: grid; gap: 4px; }
.calc-bar__label { font-size: .8rem; color: var(--muted); }
.calc-bar svg { display: block; width: 100%; height: 12px; border-radius: 6px; overflow: hidden; }
.calc-bar__track { fill: var(--card-2); }
.calc-bar__fill--platform { fill: var(--muted); }
.calc-bar__fill--sendly { fill: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .calc-bar__fill { transition: width .25s ease; }
}

.calc-result__actions { display: grid; gap: 10px; margin-block-start: 22px; }
.calc-result__cta { width: 100%; }
.calc-share { justify-self: center; min-height: 40px; padding: 6px 12px; border: 0; background: transparent; color: var(--soft); font: inherit; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.calc-share:hover { color: var(--gold); }
.calc-share__box { display: grid; gap: 6px; font-size: .8rem; color: var(--muted); }
.calc-share__box[hidden] { display: none; }
.calc-share__box input { width: 100%; min-height: 38px; padding: 6px 10px; border-radius: 10px; border: 0.5px solid var(--gold-line); background: var(--base); color: var(--ink); font: inherit; font-size: .85rem; }
.calc-share__hidden { position: fixed; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; opacity: 0; }

.calc-notes { display: grid; gap: 8px; margin-block-start: 18px; color: var(--muted); font-size: .8rem; line-height: 1.55; }

@media (min-width: 900px) {
  .calc { padding-block: 72px 96px; }
  .calc__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; }
  .calc__aside { position: sticky; inset-block-start: calc(var(--nav-h) + 24px); }
  .calc-result { padding: 34px 32px 28px; }
}