/* Sayfaya özgü düzenler. */

/* Sayfa başlık bandı — kategori, arama, sepet, ödeme ve içerik sayfaları. Noktalı zemin .band'den, süs
   .ornament'tan. Bu öğe .container değil (dıştaki main taşıyor), padding
   kısayolu güvenli. */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-8) var(--space-5) var(--space-5);
  border-radius: var(--radius-card);
}
.page-head.ornament::before { top: var(--space-4); left: var(--space-5); }
.page-head__text { min-width: 0; }
.page-head__title { margin: 0; font-size: var(--text-2xl); overflow-wrap: anywhere; }
.page-head__meta { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--ink-soft); }
/* Kategori slaytları başlık bandının altında; araya nefes payı. */
.page-head + .slider { margin-bottom: var(--space-6); }

.sort-form select {
  min-height: var(--tap);
  padding-inline: var(--space-4) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--brand-ink);
  font-weight: 600;
}

@media (min-width: 768px) {
  .page-head { padding: var(--space-8) var(--space-7) var(--space-6); }
  .page-head__title { font-size: var(--text-3xl); }
}

.product { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin: var(--space-5) 0; }
@media (min-width: 900px) { .product { grid-template-columns: 1fr 1fr; gap: var(--space-7); } }
/* 1fr/1fr geniş konteynerde galeri fotoğrafını dev boyuta büyütüyordu;
   görsel sütunu sabitleniyor, satın alma kutusu kalan alanı alıyor. */
@media (min-width: 1024px) { .product { grid-template-columns: 480px 1fr; } }

/* Ana görselin üst köşeleri kemerli — hero ile aynı dil. */
.product__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 6px solid var(--surface);
  border-radius: 240px 240px var(--radius-card) var(--radius-card);
  box-shadow: var(--shadow-lift);
  cursor: zoom-in;
}
.product__thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-4); overflow-x: auto; }
.product__thumb {
  flex: 0 0 72px; width: 72px; height: 72px; padding: 0;
  border: 2px solid var(--line); border-radius: var(--radius-input);
  background: var(--surface); cursor: pointer; overflow: hidden;
}
.product__thumb[aria-current="true"] { border-color: var(--brand-deep); }
.product__thumb img { width: 100%; height: 100%; object-fit: cover; }

.product__title { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-2xl); overflow-wrap: anywhere; }
.product__price { margin: 0 0 var(--space-4); font-size: var(--text-2xl); font-weight: 700; color: var(--accent); }

.product__panel {
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.product__stock { margin: 0 0 var(--space-3); font-weight: 600; }
.product__stock.is-in { color: var(--brand-deep); }
.product__stock.is-out { color: var(--danger); }

.product__buy { display: flex; gap: var(--space-3); margin: 0 0 var(--space-4); }
.product__buy input {
  width: 88px; min-height: var(--tap); padding-inline: var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-input);
  background: var(--surface);
}
.product__buy .btn { flex: 1; }

/* Güvence listesi — madde işareti yaprak süsü. */
.product__assurances {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.product__assurances li { display: flex; align-items: center; gap: var(--space-2); }
.product__assurances li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--ornament-leaf) center / contain no-repeat;
}

@media (min-width: 1024px) {
  .product__title { font-size: var(--text-3xl); }
}

/* Kısa açıklama zengin metin değil ama aynı okunabilirlik sorununu
   yaşıyor: 1024px+ satın alma kutusu 1fr olduğu için geniş ekranda
   700px'i aşan bir satır genişliğine ulaşabiliyor. .rte ile aynı ölçüye
   sabitleniyor; fiyat/stok/satın alma denetimleri bu kısıtlamadan muaf. */
.product__summary { max-width: 70ch; }

.rte img { border-radius: var(--radius-card); }

dialog.lightbox { max-width: 92vw; max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius-card); }
/* Yedek değer şart: Chrome 122, Safari 17.4 ve Firefox 120 öncesinde ::backdrop
   hiçbir şey miras almıyor, :root değişkenleri orada tanımsız ve örtü
   saydamlaşıyor — PayTR modalı iOS 17.4 öncesinde karartmasız açılırdı. */
dialog.lightbox::backdrop { background: var(--overlay-strong, rgba(28, 42, 18, .78)); }
dialog.lightbox img { max-width: 92vw; max-height: 92vh; }

/* Galeri lightbox'ının tek çocuğu <img>, kendi doğal genişliğiyle dialog'u
   biçimlendirir. PayTR modalının tek çocuğu ise width:100% verilmiş bir
   <iframe> — yüzdelik genişlik, belirsiz (fit-content) bir kapta çerçevenin
   300px'lik doğal genişliğine düşer. Modal telefonda da masaüstünde de
   300px kalmasın diye burada gerçek bir genişlik veriyoruz. */
#paymentModal { width: min(480px, 92vw); position: relative; }
#paymentModal .icon-btn {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 1;
  background: var(--surface); border-radius: var(--radius-pill);
}

.cart { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 900px) { .cart { grid-template-columns: minmax(0, 1fr) 320px; } }

/* Sepet satırı kart biçiminde. Mobilde iki sıra, 900px'te tek sıra. */
/* align-self: start — .cart ızgarasında satır listesi varsayılan olarak
   özet kutusunun yüksekliğine uzuyor; tek ürünlü sepette satır kartı boş,
   uzun bir kutuya dönüşüyordu (tarayıcıda görüldü). */
.cart__lines { display: grid; gap: var(--space-3); align-self: start; }
.cart-line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  grid-template-areas: "media info remove" "media qty total";
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.cart-line__media { grid-area: media; }
.cart-line__media img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-input); }
/* min-width: 0 olmadan bu 1fr hücre, kesme noktasız uzun bir ürün adı
   yüzünden satırı ve onunla birlikte sayfayı yatay taşırabiliyordu. */
.cart-line__info { grid-area: info; min-width: 0; overflow-wrap: anywhere; }
.cart-line__info > a { font-family: var(--font-display); font-weight: 700; color: var(--brand-ink); }
.cart-line__qty { grid-area: qty; }
.cart-line__qty input {
  width: 80px; min-height: var(--tap); padding-inline: var(--space-2);
  border: 1px solid var(--line); border-radius: var(--radius-input);
}
.cart-line__total { grid-area: total; font-weight: 700; text-align: right; color: var(--accent); }
.cart-line .icon-btn { grid-area: remove; color: var(--ink-soft); border-radius: var(--radius-pill); }
.cart-line .icon-btn:hover { color: var(--danger); background: var(--danger-soft); }

@media (min-width: 900px) {
  .cart-line {
    grid-template-columns: 72px 1fr 120px 120px 44px;
    grid-template-areas: "media info qty total remove";
  }
}

/* Özet kutusu noktalı zeminde (.band). İçindeki fiyatlar --ink: --accent
   noktalı zeminde küçük metinde okunabilirlik oranını tutmuyor (spec §1). */
.cart__summary {
  align-self: start;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.cart__summary h2 { font-size: var(--text-xl); }
.cart__summary dl { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); margin: 0 0 var(--space-4); }
.cart__summary dd { margin: 0; text-align: right; }
.cart__summary .is-total {
  padding-top: var(--space-2);
  border-top: 1px dashed var(--line);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--brand-ink);
}
.cart__hint {
  padding: var(--space-3);
  border: 1px dashed var(--brand);
  border-radius: var(--radius-input);
  background: var(--surface);
  font-size: var(--text-sm);
}
/* top: masaüstünde yapışkan başlık + kategori şeridi ~126px; 96px'te özet
   kutusunun üstü başlığın altına kayıyordu. */
@media (min-width: 900px) { .cart__summary { position: sticky; top: calc(126px + var(--space-4)); } }

.checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 900px) { .checkout { grid-template-columns: minmax(0, 1fr) 340px; } }

.checkout__form {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.checkout__form h2 { font-size: var(--text-xl); }
.checkout__form h2:not(:first-child) { margin-top: var(--space-6); }

.pay-options { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.pay-option {
  display: flex; align-items: flex-start; gap: var(--space-3);
  min-height: var(--tap);
  padding: var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); cursor: pointer;
}
/* Seçili kart açık yeşil zeminde; metin --ink (11+:1), --accent kullanılmıyor. */
.pay-option:has(input:checked) { border-color: var(--brand-deep); background: var(--tint); }
.pay-option a { color: var(--brand-deep); text-decoration: underline; }
/* .field sınıfını taşımıyor: .field > label kuralı .pay-option'ın flex
   düzenini ezip metni küçük/soluk etiket tipografisine düşürüyordu. Yalnız
   .pay-options'ın verdiği alt boşluğu burada koruyoruz. */
.field-consent { margin-bottom: var(--space-5); }

.status { display: flex; justify-content: center; }
.status__card {
  max-width: 480px; width: 100%; text-align: center;
  padding: var(--space-8) var(--space-5) var(--space-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.status__card.ornament::before { top: var(--space-4); left: 50%; transform: translateX(-50%); }
.status__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin: 0 auto var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xl); font-weight: 700;
}
.status__icon--ok { background: var(--tint); color: var(--brand-deep); }
/* Genişlik otomatik: 404 sayfası simgede "404" yazıyor, "!" tek karakter. */
.status__icon--fail {
  min-width: 64px; width: auto; padding-inline: var(--space-3);
  background: var(--danger-soft); color: var(--danger);
}

/* loadingspin.gif yerine */
.status__spinner {
  width: 48px; height: 48px; margin: 0 auto var(--space-4);
  border: 4px solid var(--line); border-top-color: var(--brand-deep);
  border-radius: var(--radius-pill);
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .status__spinner { animation-duration: 3s; } }

/* Zengin metin: sayfa içerikleri, ürün açıklamaları ve sözleşme metinleri
   buradan geçiyor. Editör backoffice'te başlık, liste ve tablo kullanıyor;
   hiçbirinin kuralı yoksa tarayıcı varsayılanına düşüyor. */
/* Ölçü genişledikçe (bkz. tokens.css --container) içerik solda asılı
   kalmasın diye ortalanıyor. */
.rte { max-width: 70ch; margin-inline: auto; }
.rte h2 { margin-top: var(--space-6); font-size: var(--text-xl); }
.rte h3 { margin-top: var(--space-5); font-size: var(--text-lg); }
.rte ul, .rte ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.rte li { margin-bottom: var(--space-2); }
.rte a { color: var(--brand-deep); text-decoration: underline; }
.rte blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--brand);
  background: var(--tint);
}
/* Editör tabloyu istediği kadar sütun/uzun hücreyle yazabiliyor ve bu
   içerik Razor tarafında sarmalanamıyor (editörden geldiği gibi basılıyor);
   width: 100% böyle bir tabloyu 360px'te sayfanın kendisini yatay taşırırdı.
   Tablo kendi kaydırmasını taşısın diye blok kutuya çevrilip sarmalanıyor;
   width: max-content dar tabloları da 100%'e zorlamadan içeriğine göre
   küçük tutuyor. */
.rte table { display: block; max-width: 100%; width: max-content; border-collapse: collapse; overflow-x: auto; }
.rte table td, .rte table th { padding: var(--space-2); border: 1px solid var(--line); }