/* 2026-10-01: cart, checkout and order pages of the Form checkout (plan version 4, section 6). Built on the account
   page's vocabulary (account.css: eyebrow, action, text-button, form fields, dialog). The checkout follows the EkstreX
   checkout: amount on top, the card fields as one highlighted panel in the centre, the summary beside it. The legal
   texts in the checkout window keep the look of their own pages (legal.css, which builds on account.css). */
@import url('./legal.css');

.kasa-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter) 90px;
}
/* The space above belongs to the heading block, so the eyebrow does not touch the page header (as .member-heading). */
.kasa-baslik {
  padding-top: 48px;
}
.kasa-baslik h1 {
  font: 400 clamp(38px, 4.2vw, 60px) / 1.08 var(--display);
  letter-spacing: -0.035em;
  margin: 0 0 12px;
}
.kasa-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: 24px;
}
/* 2026-10-18 (operator): the summary stood sticky beside the form while the page scrolled on; it moves with the page,
   as the product page's columns since PR 423. */
.kasa-ozet {
  border: 1px solid var(--line);
  background: var(--light);
  padding: 22px;
}
.kasa-ozet h2 {
  font: 400 22px var(--display);
  margin: 0 0 8px;
}

/* Lines and totals (cart, checkout, order) */
.kasa-satir {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.kasa-satir img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #e4e1dc;
}
.kasa-satir h3 {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 4px;
}
.kasa-satir p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.kasa-satir .card-actions {
  margin-top: 6px;
  align-items: center;
}
/* FORM-32 (26.10.2026): the way to the five-piece price, its offer in ink like the free-shipping hint. */
.kasa-satir .kasa-besli {
  margin-top: 8px;
  line-height: 1.6;
}
.kasa-besli strong {
  font-weight: 500;
  color: var(--ink);
}
.kasa-tutar,
.kasa-toplamlar {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kasa-toplamlar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 0;
  margin: 14px 0 0;
}
.kasa-toplamlar dt {
  color: var(--muted);
}
.kasa-toplamlar dd {
  margin: 0;
  padding-left: 16px;
  text-align: right;
}
.kasa-toplamlar .kasa-genel {
  font: 400 20px var(--display);
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
/* FORM-44 part 4 (22.10.2026): the distance to free shipping with the campaign's period under the totals. */
.kasa-kargo {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.kasa-kargo strong {
  display: block;
  font-weight: 500;
  color: var(--ink);
}
.kasa-kargo progress {
  display: block;
  width: 100%;
  height: 6px;
  margin: 6px 0;
  accent-color: var(--accent);
}
.adet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.adet button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: var(--light);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.adet output {
  min-width: 24px;
  text-align: center;
}
.kasa-not {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

/* Checkout: amount, card panel, confirmations, pay button */
.odeme-baslik {
  margin: 36px 0 0;
}
.odeme-baslik h1 {
  font: 400 clamp(28px, 3vw, 38px) / 1.1 var(--display);
  letter-spacing: -0.02em;
  margin: 0;
}
.odeme-tutari {
  font: 400 clamp(30px, 3.2vw, 40px) / 1.1 var(--display);
  margin: 10px 0 2px;
  font-variant-numeric: tabular-nums;
}
.odeme-baslik .kasa-not {
  margin: 0;
}
.odeme-formu {
  max-width: 560px;
}
.kart-paneli {
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--line));
  background: color-mix(in oklab, var(--accent) 5%, var(--light));
  padding: 20px 22px 16px;
}
.kart-paneli__kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.kart-paneli h2 {
  font: 400 20px var(--display);
  margin: 0;
}
.kart-paneli label {
  margin: 14px 0 6px;
}
.kart-paneli input {
  background: #fff;
  padding: 12px 14px;
}
.kart-paneli input[aria-invalid='true'] {
  border-color: #a93340;
}
.kart-satir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kart-logolari {
  display: inline-flex;
  gap: 6px;
}
.kart-logolari img {
  display: block;
  width: 42px;
  height: 26px;
  padding: 4px 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.guven {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
}
.guven span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.guven svg,
.kasa-ode svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.onaylar {
  margin-top: 18px;
}
.kasa-onay {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
}
.kasa-onay input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: none;
  accent-color: var(--ink);
}
.metin-ac {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.kasa-ode {
  width: 100%;
  margin-top: 20px;
  gap: 10px;
}
.kasa-ode svg {
  width: 16px;
  height: 16px;
}
.kasa-not--orta {
  text-align: center;
  margin: 10px 0 0;
}
/* 2026-10-05: the payment obligation right above the button, in the text colour (MSY md. 8/1). */
.kasa-not--yukumluluk {
  font-size: 14px;
  color: var(--ink);
}
.saglayici {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.saglayici img {
  height: 22px;
  width: auto;
}
.ozet-adres {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 14px;
}
.ozet-adres h3 {
  font-weight: 400;
  font-size: 14px;
  margin: 0 0 6px;
}
.ozet-adres p {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.ozet-adres .text-button {
  min-height: 36px;
  padding: 6px 0;
  font-size: 12px;
}
.metin-penceresi {
  width: min(760px, calc(100% - 32px));
}
/* 2026-10-05: the texts at 12 points at least (MSY md. 6/1; Opus review: 14 px were about 10.5 points). */
.kasa-metin {
  max-height: calc(88vh - 120px);
  overflow: auto;
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
  font-size: 16px;
}
.kasa-metin h1 {
  font: 400 24px var(--display);
  margin: 0 0 8px;
}
.kasa-metin h2 {
  font: 400 18px var(--display);
  margin: 20px 0 8px;
}

/* Order page */
.kasa-adres p {
  margin: 0 0 6px;
  line-height: 1.6;
}
.test-isareti {
  display: inline-block;
  background: #a93340;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 4px 8px;
}
.durum-karti {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--light);
  padding: 24px 28px;
  margin: 26px 0;
}
.durum-karti[data-tur='hata'] {
  border-left-color: #a93340;
}
.durum-karti[data-tur='tamam'] {
  border-left-color: #2f7a4f;
}
.durum-karti h2 {
  margin: 0 0 8px;
}
.durum-karti p {
  margin: 0 0 6px;
}
/* The order documents on the order page, below the addresses. */
.siparis-belgeleri {
  margin-top: 32px;
}
.siparis-belgeleri h2 {
  margin: 0 0 6px;
}
/* The cart's existing order takes the card form's place until the customer chooses (odeme.js). */
.mevcut-siparis {
  margin-top: 0;
  max-width: 560px;
}
.mevcut-siparis .card-actions {
  margin-top: 16px;
  align-items: center;
}
/* 2026-10-05 (plan B): the tracking page, a number field and the parcel's steps, newest first (takip.js). */
.takip-formu {
  max-width: 560px;
}
.takip-satir {
  display: flex;
  gap: 12px;
}
.takip-satir .action {
  margin: 0;
}
.takip-sonuc {
  max-width: 560px;
}
.takip-adimlar {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.takip-adimlar li {
  position: relative;
  padding: 0 0 18px 24px;
  border-left: 1px solid var(--line);
}
.takip-adimlar li::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}
.takip-adimlar li:first-child::before {
  background: var(--accent);
}
.takip-adimlar strong {
  display: block;
  font-weight: 500;
}
.takip-adimlar span {
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 900px) {
  /* minmax(0, …): a long address or text must wrap instead of widening the column past the screen. */
  .kasa-duzen {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 2026-10-05: items, shipping and addresses stand before the pay button on a phone too (MSY md. 6/2). */
  .kasa-ozet {
    order: -1;
  }
  .odeme-formu {
    max-width: none;
  }
}

/* 2026-10-13 (FORM-19, Etappe 6a Teil 2): the defect request below a delivered order (ayip-formu.js). */
.ayip {
  margin-top: 56px;
  max-width: 620px;
}
/* 2026-10-19 (FORM-42): the review of each line (degerlendirme-formu.js), below the defect request. */
.degerlendirme {
  margin-top: 56px;
  max-width: 620px;
}
.degerlendirme-satir {
  border-top: 1px solid var(--line);
  padding: 24px 0 8px;
}
.degerlendirme-satir h3 {
  margin: 0 0 8px;
  font-weight: 400;
  font-size: 18px;
}
.degerlendirme-yildizlar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.degerlendirme-yildizlar legend {
  width: 100%;
}
.degerlendirme-yildizlar label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px 14px;
  min-height: 44px;
  border: 1px solid var(--line);
  cursor: pointer;
}
.degerlendirme-yildizlar label:has(input:checked) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
/* The radio stays in the label it names, one pixel and transparent; the global input width would carry it past the page. */
.degerlendirme-yildizlar input {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.degerlendirme-yildizlar label:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.ayip-talepleri {
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.ayip-satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 12px;
  align-items: center;
}
/* 2026-10-22 FORM-44: optional gift controls follow the checkout typography and fit the mobile column. */
.hediye-kutu fieldset {
  border: 0;
  padding: 0;
  margin: 1rem 0;
  min-width: 0;
}
.hediye-kutu legend {
  font-weight: 600;
}
.hediye-kutu p {
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0.75rem 0;
}
.hediye-kutu textarea,
.hediye-kutu select,
.hediye-kutu input[type='text'],
.hediye-kutu input[type='tel'],
.hediye-kutu #hediye-posta {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.6rem;
  margin: 0.4rem 0 0.8rem;
  border: 1px solid currentColor;
  border-radius: 0.3rem;
  color: inherit;
  background: transparent;
  font: inherit;
}