/* ==========================================================================
   Locadent International — /deposit only

   Beşinci stylesheet, ve sitedeki tek sayfaya özel olan. Gerekçesi bütçe:
   tutar kartları ile sözleşme kutusu başka hiçbir sayfada geçmiyor, ve
   `sections.css` 18 KB tavanına dayanmış durumda. 21 sayfanın hiç
   kullanmayacağı 1 KB'ı indirmesinin sebebi yok. Yalnızca /deposit yüklüyor.

   Sayfada JavaScript yok — seçim, onay ve ödeme bağlantısının açılması
   `:checked` + `:has()` ile yürüyor. `@supports` bloğu şunun için: `:has()`
   tanımayan bir tarayıcıda kural takımı komple düşer ve altı ödeme bağlantısı
   da görünür kalır. Yani eski tarayıcı kapıyı geçemeyen değil, kapısı olmayan
   bir sayfa görür — ödeme yine yapılabilir, sözleşme yine ekranda.
   ========================================================================== */

.dp { margin-top: var(--space-6); max-width: var(--text-max); }

/* --- tutar kartları ---------------------------------------------------- */

.dp__amounts { border: 0; padding: 0; margin: 0; }
.dp__amounts legend { padding: 0; margin-bottom: var(--space-3); }

.dp__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
@media (min-width: 620px) { .dp__grid { grid-template-columns: repeat(3, 1fr); } }

/* Radio kasıtlı olarak görünür. Gizleyip kartı `:has()` ile boyamak daha
   şık dururdu, ama o zaman `:has()` yokken hangi tutarın seçili olduğu
   hiçbir yerden okunmazdı. Görünür radio her koşulda doğruyu söylüyor. */
.dp-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px var(--hairline);
  cursor: pointer;
}
.dp-card input { width: 20px; height: 20px; flex: none; accent-color: var(--gold); }
.dp-card__cur {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: var(--tr-caption);
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.dp-card__amt { display: block; font-size: var(--title); font-weight: var(--w-semibold); }

/* --- sözleşme kutusu --------------------------------------------------- */

.dp__contract { margin-top: var(--space-6); }

/* `tabindex="0"` şart: kaydırılabilir bir kutu klavyeyle de kaydırılabilmeli
   (WCAG 2.1.1). Odaklanabilir olmadan içeriğin yarısı klavyeye kapalı kalır. */
.dp__scroll {
  max-height: 260px;
  overflow-y: auto;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--ink-secondary);
}
.dp__scroll h3 {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  font-weight: var(--w-semibold);
  color: var(--ink);
}
.dp__scroll > :first-child { margin-top: 0; }
.dp__scroll p { margin-top: 0.5rem; }

.dp__agree { display: flex; gap: 0.75rem; margin-top: var(--space-3); font-size: 0.875rem; }
.dp__agree input { margin-top: 0.2rem; width: 20px; height: 20px; flex: none; accent-color: var(--gold); }

/* --- ödeme bağlantıları ------------------------------------------------ */

.dp__hint { margin-top: var(--space-4); font-size: 0.875rem; color: var(--ink-tertiary); }

.dp__go { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.dp__go a { justify-content: center; }

@supports selector(:has(*)) {
  .dp__go { display: none; }

  /* İkisi birden: tutar seçilmiş ve sözleşme onaylanmış. Kapı `pointer-events`
     ile değil `display` ile kapanıyor — gizlenen bağlantı klavyeyle de
     odaklanamaz, oysa tıklanamaz kılınan bir bağlantı Enter'la hâlâ açılır. */
  .dp:has(input[name='amount']:checked):has(#dpAgree:checked) .dp__go { display: grid; }
  .dp:has(input[name='amount']:checked):has(#dpAgree:checked) .dp__hint { display: none; }

  .dp__go a { display: none; }
  .dp:has(#amt-gbp-300:checked) .dp__go a[data-amt='gbp-300'],
  .dp:has(#amt-eur-300:checked) .dp__go a[data-amt='eur-300'],
  .dp:has(#amt-usd-300:checked) .dp__go a[data-amt='usd-300'],
  .dp:has(#amt-gbp-500:checked) .dp__go a[data-amt='gbp-500'],
  .dp:has(#amt-eur-500:checked) .dp__go a[data-amt='eur-500'],
  .dp:has(#amt-usd-500:checked) .dp__go a[data-amt='usd-500'] { display: inline-flex; }

  .dp-card:has(input:checked) { box-shadow: inset 0 0 0 2px var(--gold); }
}

.dp__notice {
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  color: var(--ink-tertiary);
}