/* ==========================================================================
   ALBIM — Ödeme akışı ve sipariş onayı
   ========================================================================== */

/* ------------------------------------------------------- sade üst bar */

.albim-ust--sade { position: static; }
.albim-ust--sade .albim-ust__in { gap: var(--a-5); }

.albim-adim-gostergesi {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  list-style: none;
  flex: 1;
}
.albim-adim-gostergesi li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-kalin);
  color: var(--renk-murekkep);
  white-space: nowrap;
}
/* adımlar arası çizgi */
.albim-adim-gostergesi li + li::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--cizgi);
  margin-right: var(--a-2);
}
.albim-adim-gostergesi__no {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--renk-murekkep);
  color: var(--uzeri-koyu);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
}
.albim-adim-gostergesi .aktif { color: var(--albim-kirmizi); }
.albim-adim-gostergesi .aktif .albim-adim-gostergesi__no {
  background: var(--albim-kirmizi);
  color: var(--uzeri-kirmizi);
}

.albim-ust__guvenli {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--renk-govde);
  white-space: nowrap;
}

@media (max-width: 820px) {
  .albim-adim-gostergesi li span:not(.albim-adim-gostergesi__no) { display: none; }
  .albim-adim-gostergesi li + li::before { width: 18px; }
  .albim-ust__guvenli span { display: none; }
}

/* --------------------------------------------------------------- düzen */

.albim-odeme {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-4);
  align-items: start;
  padding-block: var(--a-5);
}
@media (min-width: 980px) {
  .albim-odeme { grid-template-columns: minmax(0, 1.6fr) minmax(0, .85fr); gap: var(--a-5); }
}
.albim-odeme__sol { gap: var(--a-3); }

.albim-odeme__uye {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-2);
  background: var(--zemin-yuzey);
}

.albim-odeme__basi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a-2);
}

.albim-adim-no {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--zemin-serit);
  border: 1px solid var(--cizgi);
  color: var(--renk-govde);
  font-family: var(--yazi-govde);
  font-size: var(--fs-xs);
  font-weight: var(--fw-kalin);
  vertical-align: middle;
  margin-right: 6px;
}

/* --------------------------------------------------------------- form */

.albim-form-izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-3);
}
@media (min-width: 640px) {
  .albim-form-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .albim-alan--tam { grid-column: 1 / -1; }
  .albim-form-izgara--uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------- teslimat seçenekleri */

.albim-secenek {
  display: flex;
  align-items: flex-start;
  gap: var(--a-2);
  padding: var(--a-3);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  cursor: pointer;
  transition: border-color var(--gecis), background-color var(--gecis);
}
.albim-secenek:hover { border-color: var(--cizgi-belirgin); }
.albim-secenek input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--albim-kirmizi); flex: none; }
.albim-secenek.secili {
  border-color: var(--albim-kirmizi);
  background: var(--albim-kirmizi-soluk);
}
.albim-secenek__govde { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.albim-secenek__ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a-3);
}
.albim-secenek__alt { font-size: var(--fs-xs); color: var(--albim-bakir); }
.albim-fiyat-kucuk { font-weight: var(--fw-kalin); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------ ödeme sekmeleri */

.albim-odeme-sekme { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.albim-odeme-sekme__btn {
  min-height: var(--dokunma-min);
  padding-inline: var(--a-3);
  background: var(--zemin-yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  font-size: var(--fs-xs);
  font-weight: var(--fw-orta);
  color: var(--renk-govde);
}
.albim-odeme-sekme__btn[aria-selected="true"] {
  border-color: var(--renk-murekkep);
  color: var(--renk-murekkep);
  font-weight: var(--fw-kalin);
}

/* ------------------------------------------------- özetteki ürün satırı */

.albim-ozet__urunler {
  display: flex;
  flex-direction: column;
  gap: var(--a-2);
  padding-bottom: var(--a-3);
  border-bottom: 1px solid var(--cizgi);
}
.albim-ozet-satir {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--a-2);
  align-items: center;
}
.albim-ozet-satir strong { display: block; font-size: var(--fs-xs); }
.albim-ozet-satir .albim-rakam { font-weight: var(--fw-kalin); font-variant-numeric: tabular-nums; }
.albim-ozet__ayrac { padding-top: 8px; border-top: 1px solid var(--cizgi-ince); }

/* ======================================================= SİPARİŞ ONAYI */

.albim-siparis-onay {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-5);
  align-items: start;
  padding-block: var(--a-6);
}
@media (min-width: 980px) {
  .albim-siparis-onay { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--a-7); }
}
.albim-siparis-onay h1 { font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); }

.albim-rozet--buyuk { height: 32px; padding-inline: 12px; letter-spacing: var(--ls-etiket); text-transform: uppercase; }

/* zaman çizelgesi */
.albim-zaman { display: flex; flex-direction: column; list-style: none; }
.albim-zaman__adim {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--a-3);
  padding-bottom: var(--a-4);
}
.albim-zaman__adim:last-child { padding-bottom: 0; }
/* adımları birleştiren dikey çizgi */
.albim-zaman__adim:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 32px;
  bottom: 6px;
  width: 1px;
  background: var(--cizgi);
}
.albim-zaman__isaret {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--renk-murekkep);
  color: var(--uzeri-koyu);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-agir);
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
.albim-zaman__adim--tamam .albim-zaman__isaret { background: var(--renk-basari); }
.albim-zaman__adim--son .albim-zaman__isaret { background: var(--albim-kirmizi); }
.albim-zaman h3 { font-size: var(--fs-sm); font-family: var(--yazi-govde); font-weight: var(--fw-kalin); }
.albim-zaman p { font-size: var(--fs-xs); color: var(--albim-bakir); }
.albim-zaman__adim--son p { color: var(--renk-govde); }

.albim-siparis-onay__adres {
  padding-top: var(--a-3);
  border-top: 1px solid var(--cizgi);
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--renk-govde);
  line-height: 1.7;
}

/* Rozet dikey yığın içinde tam genişliğe uzamasın */
.albim-siparis-onay__sol > .albim-rozet { align-self: flex-start; }

/* ------------------------------------------------ ödeme yolları (iki kutu) */

.albim-odeme-yollar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-3);
  margin-bottom: var(--a-4);
}
@media (min-width: 720px) {
  .albim-odeme-yollar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.albim-odeme-yol {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--a-3);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
  background: var(--zemin-yuzey);
  min-width: 0;
}
.albim-odeme-yol--acik { border-color: var(--albim-kirmizi); }

/* Kapalı seçenek: soluk ama OKUNUR kalıyor — bilgi taşıyor, süs değil. */
.albim-odeme-yol--kapali { background: var(--zemin-serit); }
.albim-odeme-yol--kapali .albim-odeme-yol__ikon { color: var(--renk-soluk); }

.albim-odeme-yol__basi {
  display: flex;
  align-items: center;
  gap: var(--a-2);
  flex-wrap: wrap;
}
.albim-odeme-yol__basi h3 { margin: 0; }
.albim-odeme-yol__ikon { display: inline-flex; color: var(--albim-kirmizi); flex: none; }
.albim-odeme-yol p { margin: 0; }