/* skortabelasi.com — mağaza stilleri.
 *
 * YALNIZCA /shop/, /checkout/ ve /order/ sayfalarına yüklenir
 * (src/site.config.mjs → PAGES[].styles). site-v8.css'in üstüne biner;
 * token'lar (--surface, --ball, --s3…) oradan gelir, burada yeniden
 * tanımlanmaz — tema tek yerden değişsin.
 *
 * ÖNBELLEK KURALI site CSS'iyle aynı: /css/ 7 gün önbellekli ve önde
 * Cloudflare var. Bu dosyayı DEĞİŞTİRME — yeni sürüm = yeni ad
 * (shop-v1.css → shop-v2.css) + site.config.mjs'teki SHOP_CSS satırı.
 */

/* [hidden] her şeyi yenmeli. Bu dosyadaki .cart-totals{display:grid} ve
 * .btn{display:inline-flex} gibi kurallar tarayıcının [hidden]{display:none}
 * kuralından daha spesifik; onlar olmadan boş sepette "Toplam 0,00 ₺" ve
 * "Ödemeye geç" düğmesi görünür kalıyordu. */
[hidden] { display: none !important; }

/* ---------- Vitrin başlığı ---------- */

.shop-hero { padding-bottom: 0; }
.shop-hero h1 {
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: -1px;
  margin: 0 0 var(--s2);
}
.shop-hero .sub { max-width: 60ch; }

/* ---------- Yerleşim: ürünler + sepet ---------- */

/* Sepet geniş ekranda sağda yapışkan bir sütun, darda ürünlerin altına iner. */
.shop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s4);
  align-items: start;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s3);
}

/* ---------- Ürün kartı ---------- */

.shop-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s3);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.shop-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--shadow-md);
}

/* Ürün fotoğrafları açık zeminli; koyu kartın üstünde aydınlık bir vitrin
   kutusu gibi duruyorlar. Kare oran build'de üretiliyor (800×800). */
.shop-media {
  position: relative;
  background: #f4f4f2;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--s3);
}

.shop-slide { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.shop-slide[hidden] { display: none; }

.shop-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #0a1832;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(10, 24, 50, 0.12);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.shop-arrow:hover { background: #fff; }
.shop-prev { left: 10px; }
.shop-next { right: 10px; }

.shop-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.shop-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(10, 24, 50, 0.25);
  cursor: pointer;
}
.shop-dot.is-on { background: #0a1832; }

.shop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}

.shop-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.3px;
}

.shop-stock {
  flex: none;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--text-2);
}
.shop-stock.is-in { color: var(--ball); background: rgba(201, 229, 65, 0.12); }
.shop-stock.is-out { color: var(--text-3); }

.shop-tagline {
  margin: var(--s1) 0 0;
  color: var(--ball);
  font-size: 15px;
}

.shop-desc {
  margin: var(--s1) 0 var(--s2);
  color: var(--text-2);
  font-size: 15.5px;
}

.shop-specs { margin-bottom: var(--s3); }
.shop-specs summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-2);
  padding: var(--s1) 0;
}
.shop-specs summary:hover { color: var(--text); }
.shop-specs ul {
  margin: 0 0 var(--s1);
  padding-left: 1.2em;
  color: var(--text-2);
  font-size: 15px;
}
.shop-specs li { margin: 4px 0; }

/* Fiyat ve buton kartın dibine yapışsın — farklı uzunluktaki açıklamalarda
   kartlar aynı hizada bitsin. */
.shop-price { margin-top: auto; }
.shop-price b {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.5px;
}
.shop-price span {
  margin-left: 8px;
  font-size: 13.5px;
  color: var(--text-3);
}

.shop-card .btn,
.shop-card .badge-soon { margin-top: var(--s2); width: 100%; }

.shop-note {
  margin: var(--s2) 0 0;
  font-size: 14px;
  color: var(--text-3);
}

/* ---------- Sepet ---------- */

.shop-cart {
  position: sticky;
  top: var(--s3);
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s3);
}

.shop-cart h2 {
  margin: 0 0 var(--s2);
  font-size: 19px;
  letter-spacing: -0.3px;
}

.cart-empty { margin: 0; color: var(--text-3); font-size: 15px; }

.cart-lines { list-style: none; margin: 0 0 var(--s2); padding: 0; }

.cart-line {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--s2);
  align-items: center;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--separator);
}

.cart-line img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: #f4f4f2;
  border-radius: var(--r-sm);
}

.cart-name { font-size: 14.5px; line-height: 1.35; }
.cart-line-price { font-size: 13.5px; color: var(--text-3); }

.cart-qty { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cart-qty button {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  color: var(--text);
  background: var(--fill);
  border: 1px solid var(--separator);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.cart-qty button:hover { border-color: rgba(255, 255, 255, 0.3); }
.cart-qty output { min-width: 2ch; text-align: center; font-size: 14.5px; }

.cart-remove {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 13.5px;
  cursor: pointer;
  padding: 0;
  text-align: right;
}
.cart-remove:hover { color: var(--text-2); text-decoration: underline; }

.cart-totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px var(--s2);
  margin: var(--s2) 0;
  font-size: 15px;
}
.cart-totals dt { color: var(--text-2); }
.cart-totals dd { margin: 0; text-align: right; color: var(--text-2); }
.cart-totals .is-total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  padding-top: var(--s1);
  border-top: 1px solid var(--separator);
}

.cart-freeship {
  margin: 0 0 var(--s2);
  font-size: 13.5px;
  color: var(--ball);
}

.cart-go { width: 100%; }

/* ---------- Ödeme formu ---------- */

.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s4);
  align-items: start;
  margin-top: var(--s4);
}

.checkout fieldset {
  margin: 0 0 var(--s3);
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
}

.checkout legend {
  padding: 0 var(--s1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--ball);
  text-transform: uppercase;
}

.checkout label {
  display: block;
  margin-bottom: var(--s2);
  font-size: 14.5px;
  color: var(--text-2);
}

.checkout .opt { color: var(--text-3); }

.checkout input[type="text"],
.checkout input[type="email"],
.checkout input[type="tel"],
.checkout input:not([type]),
.checkout textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px; /* 16px altı iOS'ta odaklanınca sayfayı yakınlaştırıyor */
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
}

.checkout textarea { resize: vertical; }

.checkout input:focus,
.checkout textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30, 155, 240, 0.2);
}

/* Doğrulama sırasında JS ekliyor — tarayıcının :invalid'i yazarken de
   kırmızıya boyadığı için kullanılmıyor. */
.checkout .is-bad input,
.checkout .is-bad textarea { border-color: #ff6b6b; }
.checkout .field-err {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #ff8f8f;
}

.checkout .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--s2);
  font-size: 14.5px;
  cursor: pointer;
}
.checkout .check input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--blue); }

.checkout-corporate { margin-top: var(--s2); }

.checkout-side {
  position: sticky;
  top: var(--s3);
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s3);
}

.checkout-side h2 {
  margin: 0 0 var(--s2);
  font-size: 19px;
  letter-spacing: -0.3px;
}

.checkout-err {
  margin: 0 0 var(--s2);
  padding: 10px 14px;
  font-size: 14.5px;
  color: #ff8f8f;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: var(--r-md);
}

.checkout-pay { width: 100%; }
.checkout-pay[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* PayTR iFrame'i buraya yerleşir (Faz 2). Yükseklik iframe'in kendi
   resizer'ıyla ayarlanıyor; burada yalnız yer açılıyor. */
#paytr-slot { margin-top: var(--s3); }
#paytr-slot iframe { width: 100%; border: none; }

/* ---------- Sipariş sonucu ---------- */

.order-ok h1 { color: var(--ball); }
#order-result .btn { margin-top: var(--s2); }

/* ---------- Dar ekran ---------- */

@media (max-width: 900px) {
  .shop-layout,
  .checkout { grid-template-columns: 1fr; }
  .shop-cart,
  .checkout-side { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-card { transition: none; }
}