/* Satın al sayfası (satin-al.html), 2026-10-08.
 *
 * Görünüm Tutorialzine'in "Payment" şablonundan (freebie-2-beautiful-
 * checkout-forms, Bootstrap 4): gri zemin, ortada mavi üst çizgili beyaz
 * kart, kartın üstünde açık mavi sipariş özeti, altında form. Şablon
 * Bootstrap'e dayanıyordu; burada yalnız kullanılan parçalar (form-control,
 * btn-primary, satır düzeni) aynı ölçülerle yazıldı, Bootstrap yüklenmiyor.
 * Kuralların hepsi .odeme altında; sitenin geri kalanını etkilemiyor.
 */

.odeme {
  --o-zemin: #f6f6f6;
  --o-kart: #ffffff;
  --o-urun: #f7fbff;
  --o-baslik: #3b99e0;
  --o-ust-cizgi: #5ea4f3;
  --o-yazi: #212529;
  --o-etiket: #353b42;
  --o-kenar: #ced4da;
  --o-odak: #80bdff;
  --o-odak-golge: rgba(0, 123, 255, 0.25);
  --o-dugme: #007bff;
  --o-dugme-ust: #0069d9;
  --o-ayrac: rgba(0, 0, 0, 0.1);

  background: var(--o-zemin);
  color: var(--o-yazi);
  font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
  padding: calc(var(--header-h) + 50px) 16px 64px;
}

/* Sitenin koyu teması: şablonun yapısı aynı, renkler koyu zemine taşındı. */
:root[data-tema="koyu"] .odeme {
  --o-zemin: #141518;
  --o-kart: #1d1f23;
  --o-urun: #1a2230;
  --o-baslik: #6db3ec;
  --o-ust-cizgi: #5ea4f3;
  --o-yazi: #e9ecef;
  --o-etiket: #a0a8b1;
  --o-kenar: #3d434b;
  --o-odak: #5ea4f3;
  --o-odak-golge: rgba(94, 164, 243, 0.3);
  --o-dugme: #2f8cf5;
  --o-dugme-ust: #1f78dd;
  --o-ayrac: rgba(255, 255, 255, 0.12);
}

.odeme__kap { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }

/* ---- başlık (şablonda .block-heading) ---- */
.odeme__bas { text-align: center; }
.odeme__bas h1 {
  font-family: inherit;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--o-baslik);
  margin: 0 0 1.2rem;
  text-transform: none;
  letter-spacing: 0;
}
.odeme__bas p { max-width: 420px; margin: 0 auto; opacity: 1; line-height: 1.6; font-size: 0.95rem; }

/* ---- kart (şablonda form) ---- */
.odeme__kart {
  border-top: 2px solid var(--o-ust-cizgi);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.075);
  background: var(--o-kart);
}
.odeme__kapali { padding: 25px; }

.odeme__baslik {
  font-family: inherit;
  font-size: 1em;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  border-bottom: 1px solid var(--o-ayrac);
  margin: 0 0 0.8em;
  padding-bottom: 8px;
}

/* ---- sipariş özeti (şablonda .products) ---- */
.odeme__urunler { background: var(--o-urun); padding: 25px; }
.odeme__kalem { margin-bottom: 1em; }
.odeme__kalem p { margin: 0 0 0.2em; }
.odeme__kalem-ad { font-weight: 600; font-size: 0.9em; }
.odeme__kalem-ac { font-size: 0.8em; opacity: 0.6; line-height: 1.5; }
.odeme__fiyat { float: right; font-weight: 600; font-size: 0.9em; margin-left: 1em; white-space: nowrap; }
.odeme__toplam {
  border-top: 1px solid var(--o-ayrac);
  margin-top: 10px;
  padding-top: 19px;
  font-weight: 600;
  line-height: 1;
}
.odeme__toplam::after { content: ""; display: block; clear: both; }

/* ---- bilgiler (şablonda .card-details) ---- */
.odeme__bilgi { padding: 25px 25px 15px; }
.odeme__satir { display: grid; grid-template-columns: 1fr; gap: 0 30px; }
.odeme__alan { margin-bottom: 1rem; min-width: 0; }
.odeme__alan label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--o-etiket);
  text-transform: uppercase;
  letter-spacing: 0;
}
.odeme__alan input,
.odeme__alan select {
  display: block;
  width: 100%;
  /* 16 pikselin altı iOS'ta odaklanınca sayfayı yakınlaştırıyor. */
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
  min-height: calc(2.25rem + 2px);
  color: var(--o-yazi);
  background: var(--o-kart);
  border: 1px solid var(--o-kenar);
  border-radius: 0.25rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.odeme__alan input::placeholder { color: var(--o-etiket); opacity: 1; }
.odeme__alan select:focus,
.odeme__alan input:focus { outline: 0; border-color: var(--o-odak); box-shadow: 0 0 0 0.2rem var(--o-odak-golge); }

.odeme__onay {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0.4rem 0 0.2rem;
  cursor: pointer;
}
.odeme__onay input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--o-dugme); }
.odeme__onay a,
.odeme__not a,
.odeme__sonra a { color: var(--o-baslik); text-decoration: underline; text-underline-offset: 3px; }

.odeme .satis__hata { margin: 1rem 0 0; }

/* şablonda .btn.btn-primary.btn-block */
.odeme__dugme {
  display: block;
  width: 100%;
  margin-top: 1.4em;
  padding: 12px 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  background: var(--o-dugme);
  border: 1px solid var(--o-dugme);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.odeme__dugme:hover { background: var(--o-dugme-ust); border-color: var(--o-dugme-ust); }
.odeme__dugme:focus-visible { outline: 0; box-shadow: 0 0 0 0.2rem var(--o-odak-golge); }
.odeme__dugme[disabled] { opacity: 0.65; cursor: not-allowed; }

.odeme__not { font-size: 0.8rem; color: var(--o-etiket); line-height: 1.6; margin: 0.9rem 0 0.4rem; text-align: center; }
.odeme__not--ust { text-align: left; margin: 0 0 1rem; }

.odeme__cerceve .odeme__bilgi { padding-bottom: 25px; }

/* ---- ödemeden sonra ---- */
.odeme__sonra { padding: 0 4px; font-size: 0.9rem; line-height: 1.65; }
.odeme__sonra ul { margin: 0; padding-left: 1.2rem; list-style: disc; }
.odeme__sonra li { margin-bottom: 0.5rem; opacity: 0.85; }


/* Fiyat listesi gelene kadar sipariş kutusunun yeri ayrılıyor: form ilk
   karede görünüyor, kalem gelince boyu değişmiyor. Eskiden form fiyat
   gelene kadar gizliydi, sayfa kısa kalıyor ve alttaki siyah bilgi alanı
   bir an ekranın ortasına çıkıyordu. */
.odeme__liste:empty { min-height: 130px; }

.odeme__istege { text-transform: none; font-weight: 400; }

.odeme__kurumsal-sec { margin: 0.2rem 0 1rem; }
.odeme__kurumsal {
  border-left: 2px solid var(--o-ust-cizgi);
  padding-left: 16px;
  margin: 0 0 1rem;
}

/* ---- Tom Select (il listesi), şablonun kutularına uyduruluyor ---- */
.odeme .ts-wrapper { min-height: 0; }
.odeme .ts-control {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  min-height: calc(2.25rem + 2px);
  color: var(--o-yazi);
  background: var(--o-kart);
  border-color: var(--o-kenar);
  border-radius: 0.25rem;
}
.odeme .ts-wrapper .ts-control > input { font-size: 1rem; color: var(--o-yazi) !important; }
.odeme .ts-control input::placeholder { color: var(--o-etiket); opacity: 1; }
.odeme .ts-wrapper.focus .ts-control { border-color: var(--o-odak); box-shadow: 0 0 0 0.2rem var(--o-odak-golge); }
.odeme .ts-wrapper.single .ts-control { padding-right: 2rem; }
/* Seçimden sonra kutu odakta kalınca arama kutusu seçili ilin yanına
   sığmayıp alt satıra iniyor, kutu 38 pikselden 62 piksele uzuyordu.
   Altındaki her şey kayıyor, bir sonraki tıklama boşa gidiyordu. Kutu tek
   satırda tutuluyor. */
.odeme .ts-wrapper.single .ts-control { flex-wrap: nowrap; }
.odeme .ts-wrapper.single .ts-control > .item { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odeme .ts-wrapper.single .ts-control > input { flex: 1 1 0; min-width: 0 !important; width: 0 !important; }
.odeme .ts-dropdown {
  font-family: inherit;
  font-size: 1rem;
  color: var(--o-yazi);
  background: var(--o-kart);
  border-color: var(--o-kenar);
  border-radius: 0 0 0.25rem 0.25rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.odeme .ts-dropdown .ts-dropdown-content { max-height: 260px; }
.odeme .ts-dropdown .option { padding: 0.55rem 0.75rem; }
.odeme .ts-dropdown .active { background: var(--o-urun); color: var(--o-yazi); }
.odeme .ts-dropdown .no-results { padding: 0.55rem 0.75rem; color: var(--o-etiket); }

@media (min-width: 576px) {
  .odeme__baslik { font-size: 1.2em; }
  .odeme__urunler { padding: 40px; }
  .odeme__kalem-ad, .odeme__fiyat { font-size: 1em; }
  .odeme__bilgi { padding: 40px 40px 30px; }
  .odeme__cerceve .odeme__bilgi { padding-bottom: 40px; }
  .odeme__kapali { padding: 40px; }
  .odeme__satir { grid-template-columns: 7fr 5fr; }
  .odeme__satir--esit { grid-template-columns: 1fr 1fr; }
  .odeme__dugme { margin-top: 2em; }
}