/* skortabelasi.com — mağaza stilleri.
 *
 * YALNIZCA /shop/, /checkout/ ve /order/ sayfalarına yüklenir
 * (src/site.config.mjs → PAGES[].styles). site-v9.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-v7.css → shop-v8.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ığı (20 Eki 2026: kısa bant) ----------
   Eski başlık + uzun alt başlık + not + güven satırı + "Hangisi sana uygun?" şeridi ilk ekranı
   dolduruyordu, ürünler ekranın altında başlıyordu. Şimdi: başlık + tek cümle + kategori çipleri +
   ikonlu güven etiketleri tek kısa bölümde; ürünler ilk ekranda. */

.section.shop-hero { padding: var(--s4) 0 var(--s3); }
.shop-hero .eyebrow { margin: 0 0 6px; }
.shop-hero h1 {
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -0.8px;
  margin: 0 0 6px;
}
.shop-hero .sub { max-width: 72ch; margin: 0; font-size: 16px; }

/* Kategori çipleri (build.mjs → shopNav): bölüm çapalarına (#cat-<id>) gider. */
.shop-catnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s3);
}
.shop-catnav-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.shop-catnav-item:hover { border-color: rgba(201, 229, 65, 0.5); background: rgba(201, 229, 65, 0.05); text-decoration: none; }
.shop-catnav-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(201, 229, 65, 0.12);
  color: var(--ball);
  flex: none;
}
.shop-catnav-icon svg { width: 18px; height: 18px; }
.shop-catnav-name { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.shop-catnav-from { color: var(--ball); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.shop-catnav-from.is-market { color: var(--text-3); font-weight: 600; }

/* Güven etiketleri: ikon + kısa metin, tek satır (dar ekranda kırılır). */
.shop-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: var(--s2) 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);
  font-size: 14px;
}
.shop-trust li { display: inline-flex; align-items: center; gap: 7px; }
.shop-trust svg { color: var(--ball); flex: none; }

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

/* Sepet geniş ekranda sağda yapışkan bir sütun, darda ürünlerin altına iner. */
/* İki sütun YALNIZCA sepet sütunu gerçekten basıldığında (SELL=true).
   SELL=false iken sepet hiç üretilmiyor; sabit 320px'lik ikinci sütun kalsaydı
   ürünlerin yanında boş bir delik açardı. :has() desteklemeyen eski tarayıcı
   tek sütuna düşer — bugünkü doğru görünüm zaten o. */
.shop-layout {
  display: grid;
  gap: var(--s4);
  align-items: start;
}
.shop-layout:has(.shop-cart) { grid-template-columns: minmax(0, 1fr) 320px; }
/* Ürün bölümünün üst dolgusu (64px) başlık bandından sonra fazla — ilk kart sırası ilk ekrana girsin. */
.section:has(> .shop-layout) { padding-top: var(--s4); }
/* Yalnız /shop/ (ödeme ve sipariş sayfalarında .shop-layout yok): kapsayıcı 1040 → 1320px. Sepet sütunu
   yanında 1040px'te iki kart sığıyordu; 1280px ve üstü ekranda üç kart yan yana. Üst menü ve alt bilgi
   de aynı kapsayıcıyı kullandığı için logo ile içerik hizalı kalır. :has() desteklemeyen tarayıcı eski
   genişlikte kalır (iki sütun) — bozulmaz. */
body:has(.shop-layout) .container { max-width: 1320px; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--s2);
}

/* Ürünler kategori grupları hâlinde alt alta; her grup kendi ızgarasını
   taşır. scroll-margin: #cat-<id> bölüm çapasıyla gelinince başlık yapışkan
   menünün altında ezik durmasın — .shop-cart ile aynı değerler (aşağıda
   760px altında 152px'e döner). */
/* 40px: site token'larında --s5 YOK (s4=32, s6=48). v9'a kadar burada
   var(--s5) yazıyordu ve tanımsız değişken boşluğu sıfırlıyordu — gruplar
   birbirine yapışıktı. */
.shop-main { display: grid; gap: var(--s4); }
/* "Biz satmıyoruz, öneriyoruz" notu — öneri ürünü olan bölümün başında (build.mjs → productCards). */
.shop-group-note { margin: calc(-1 * var(--s1)) 0 var(--s2); max-width: 72ch; font-size: 14px; color: var(--text-3); }
.shop-group { scroll-margin-top: calc(64px + var(--s3)); }
/* İki sınıflı seçici bilerek: site-v9'daki .section h2 (clamp'li, ekrana göre
   değişken boy) bunu ezmesin. Boy ve satır yüksekliği SABİT çünkü sepet
   paneli aşağıda bu yüksekliğe göre ilk kart sırasına hizalanıyor. */
.shop-main .shop-group-title {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.4px;
}

/* ---------- Bölge seçici ---------- */

/* Yalnız TR dışı IP'de görünür; kabuk HTML'de hep var, shop.js hidden'ı
   kaldırır. Pill reçetesi dil değiştiriciyle (site-v9.css .lang-switch)
   aynı dilde: yüzey zemin, seçilide mavi CTA gradyanı. */
.shop-region {
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s3);
}
.shop-region h2 {
  margin: 0 0 var(--s1);
  font-size: 19px;
  letter-spacing: -0.3px;
}
.shop-region p {
  margin: 0 0 var(--s2);
  font-size: 14.5px;
  color: var(--text-2);
  max-width: 72ch;
}

.region-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.region-pill {
  padding: 8px 16px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--fill);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.region-pill:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }
.region-pill[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(30, 155, 240, 0.4);
}

/* ---------- Ü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(--s2);
  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ı ŞEFFAF zeminli (alfa kanallı webp) — koyu kartın üstünde
   doğrudan duruyorlar, beyaz vitrin kutusu yok. Zemin yerine yumuşak bir
   projektör hüzmesi: ürünü kartın içinde ayırıyor ama kenar çizgisi çizmiyor.
   Kumanda paketi kareleri (kumanda-*li-1) siyah zeminli TASARIM görselleri;
   kare oldukları için çerçeveyi tam doldurur, bu hüzme onlarda görünmez.
   Kare oran build'de üretiliyor (800×800). */
.shop-media {
  position: relative;
  background:
    radial-gradient(ellipse 72% 62% at 50% 38%, rgba(30, 155, 240, 0.13), transparent 72%),
    rgba(255, 255, 255, 0.035);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--s2);
}

.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; }

/* Başlık + durum rozeti. flex-wrap ŞART: "Bizde yok" gibi bir rozet dar bir
   kartta başlığa yer bırakmıyor, ürün adı kelime kelime alt alta iniyordu
   (üç sütunlu ızgarada dört satıra kadar). Sığmayınca rozet alta düşsün. */
.shop-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s2);
}
.shop-head h3 { min-width: 0; }

/* Piyasa önerisi rozeti kendi satırında (bkz. tools/build.mjs → productCard).
   Lime ton: "Önerimiz" olumlu bir etiket, soluk gri "tükendi" tonu değil. */
.shop-stock-line { margin: var(--s1) 0 0; }
.shop-stock.is-market { color: var(--ball); background: rgba(201, 229, 65, 0.12); }

.shop-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.25;
  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: 6px 0 0;
  color: var(--ball);
  font-size: 14px;
  line-height: 1.4;
}

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

.shop-specs { margin: 6px 0 var(--s2); }
.shop-specs summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-2);
  padding: 4px 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: 14px;
}
.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: 23px;
  letter-spacing: -0.5px;
}
.shop-price span {
  margin-left: 8px;
  font-size: 13.5px;
  color: var(--text-3);
}

/* Lansman fiyatı (build.mjs launchLine): rozet + "<tarih>'e kadar · sonra X ₺". Fiyat bloğunun üstünde;
   kartın dibine yaslanan grubu o başlatır. Tarih geçince shop.js [hidden] verir → fiyat yine dibe yaslanır. */
.shop-launch {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13.5px;
  color: var(--text-3);
}
.shop-launch[hidden] { display: none; }
.shop-launch:not([hidden]) + .shop-price { margin-top: 6px; }
.shop-launch-badge {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  color: var(--ball);
  background: rgba(201, 229, 65, 0.12);
}
body.shop-abroad .shop-launch { display: none; }

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

/* Ürün sepetteyken "Sepete ekle"nin yerinde: adet kontrolü + "Sepete git".
   Adet pill'i sepet satırındakiyle aynı reçete (.cart-qty), düğme boyunda. */
.shop-incart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  margin-top: var(--s2);
}
.shop-card .shop-incart .btn { margin-top: 0; width: 100%; padding-inline: var(--s2); }
.shop-incart .cart-qty { margin-top: 0; }
.shop-incart .cart-qty button { width: 40px; height: 44px; font-size: 19px; }
.shop-incart .cart-qty output { min-width: 3ch; font-size: 16px; }

/* "Satıcı bul" — iki hâli var (shop.config.mjs → PRODUCTS[].sell):
   - Sattığımız ürün: ikincil link, TR görünümünde HİÇ görünmez (satış zaten
     burada). TR dışı bölge seçilince shop.js .btn ekler, aşağıdaki kural açar.
   - Piyasa önerisi (data-market): üretimden .btn ile gelir, her ziyaretçide
     kartın ana düğmesi. Fiyat katmanı olmadığı için kartı alta itme görevini
     de o devralır (margin-top:auto). */
.shop-sellers { display: none; }
.shop-card .shop-sellers.btn { display: block; margin-top: auto; width: 100%; }

/* ---------- TR dışı görünüm ---------- */

/* Bölge seçilince satın alma katmanı (fiyat, sepete ekle, sepet sütunu)
   gizlenir — gönderim yalnız Türkiye içi. Tek sütuna inilir ki boş sepet
   sütunu 320px'lik bir delik bırakmasın. Öneri kartı zaten bu katmanı
   taşımıyor; kurallar ona dokunmaz. */
body.shop-abroad .shop-cart,
body.shop-abroad .shop-add,
body.shop-abroad .shop-incart,
body.shop-abroad .shop-price { display: none; }
body.shop-abroad .shop-layout { grid-template-columns: 1fr; }

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

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

.shop-cart {
  position: sticky;
  /* Üst menü de sticky ve ~64px (site-v9.css .site-header) — ofset ona
     eklenmezse "Sepetim" başlığı menünün altında kalıyor. Dar ekranda sorun
     yok: 900px altında panel static'e düşüyor. */
  top: calc(64px + var(--s3));
  /* Panelin üst kenarı, "Kumanda Paketleri" başlığıyla değil İLK ÜRÜN KARTI
     sırasıyla hizalanır: grup başlığının satır yüksekliği (30px) + alt
     boşluğu (--s3) kadar aşağı iner. Dar ekranda sıfırlanır (aşağıdaki media). */
  margin-top: calc(30px + var(--s3));
  /* Başlıktaki sepet bağlantısı ve "Sepete git" buraya (#shop-cart) iner:
     yapışkan üst menünün altında kalmasın. */
  scroll-margin-top: calc(64px + var(--s3));
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s3);
}

/* Bağlantıyla gelinince panel bir kez parlar — "sepet burada" (shop.js). */
.shop-cart.is-flash { animation: cart-flash 1.1s var(--ease); }
@keyframes cart-flash {
  20% { border-color: var(--ball); box-shadow: 0 0 0 3px rgba(201, 229, 65, 0.25); }
}

/* Başlık + adet rozeti; altındaki ince çizgi paneli "kart" gibi toparlıyor. */
.shop-cart h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--separator);
  font-size: 19px;
  letter-spacing: -0.3px;
}

.cart-count {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  border-radius: var(--r-pill);
}

/* Boş durum: ikon + metin, ortalı — çıplak tek satırdan daha az "bozuk" durur.
   Ödeme sayfasındaki özet sade <p> kullanır, oradaki görünüm değişmez. */
div.cart-empty {
  display: grid;
  justify-items: center;
  gap: var(--s1);
  padding: var(--s3) 0 var(--s2);
  color: var(--text-3);
  font-size: 14.5px;
  text-align: center;
}
div.cart-empty svg { opacity: 0.5; }
div.cart-empty p { margin: 0; }
p.cart-empty { margin: 0; color: var(--text-3); font-size: 15px; }

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

/* Satır: görsel | ad + birim fiyat + adet | (× kaldır, satır toplamı) */
.cart-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--s2);
  align-items: stretch;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--separator);
}
.cart-line:last-child { border-bottom: 0; }

.cart-line img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.035);
  border-radius: var(--r-md);
  border: 1px solid var(--separator);
}

.cart-name { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.cart-line-price { margin-top: 2px; font-size: 13px; color: var(--text-3); }

/* Adet: tek parça pill — modern mağazaların standart kontrolü. */
.cart-qty {
  display: inline-flex;
  align-items: center;
  margin-top: var(--s1);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  background: var(--fill);
}
.cart-qty button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--text-2);
  background: none;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.cart-qty button:hover { color: var(--text); background: var(--surface-alt); }
.cart-qty button:disabled { color: var(--text-3); opacity: 0.45; cursor: not-allowed; background: none; }
.cart-qty output { min-width: 2.2ch; text-align: center; font-size: 14px; font-weight: 600; }

/* Sağ sütun: × üstte, satır toplamı altta. */
.cart-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.cart-remove {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  color: var(--text-3);
  background: none;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  padding: 0;
}
.cart-remove:hover { color: var(--text); background: var(--fill); }

.cart-line-total {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Kargo bedava eşiğine ilerleme çubuğu; dolunca top sarısına döner. */
.cart-progress {
  height: 6px;
  margin: var(--s2) 0 6px;
  background: var(--fill);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.cart-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blue-dark), var(--blue));
  border-radius: var(--r-pill);
  transition: width 0.35s var(--ease);
}
.cart-progress.is-done .cart-progress-bar { background: var(--ball); }

.cart-freeship {
  margin: 0 0 var(--s2);
  font-size: 13px;
  color: var(--text-2);
}
.cart-freeship.is-done { color: var(--ball); }

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

.cart-go { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .cart-progress-bar { transition: none; }
}

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

/* Adım çubuğu: Sepet › Bilgiler › Ödeme (bkz. tools/build.mjs →
   checkoutSteps). Sayfanın eski "Ödeme" üst etiketinin yerinde. Bitmiş adım
   lime dolgu + tik ve sepete dönen bağlantı, bulunulan adım lime çerçeve,
   gelecek adım soluk. */
.checkout-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 var(--s2);
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-3);
}
.checkout-steps li { display: inline-flex; align-items: center; gap: 8px; }
.checkout-steps li + li::before {
  content: '';
  width: 22px;
  height: 1px;
  margin-right: 2px;
  background: rgba(255, 255, 255, 0.18);
}
.checkout-steps a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.checkout-steps a:hover { color: var(--text); text-decoration: none; }
.checkout-steps .is-current { color: var(--text); }

.step-n {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
}
.is-current .step-n { color: var(--ball); border-color: var(--ball); }
/* Bitmiş adım: rakam görünmez olur (ekran okuyucu yine okur), yerine tik. */
.is-done .step-n { font-size: 0; background: var(--ball); border-color: transparent; }
.is-done .step-n::after {
  content: '';
  width: 9px;
  height: 5px;
  margin-top: -2px;
  border-left: 2px solid #0a1832;
  border-bottom: 2px solid #0a1832;
  transform: rotate(-45deg);
}

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

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

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

/* Alanlar iki sütunlu ızgarada (bkz. build.mjs → checkoutForm): kısa alanlar
   yan yana, .wide tam satır. Dar ekranda tek sütun; .half olanlar (ad/soyad,
   il/ilçe) orada da yan yana kalır. Etiketler arası boşluk ızgaranın gap'i. */
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.field-grid > .wide { grid-column: 1 / -1; }
.field-grid + .shop-note { margin-top: 12px; }

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

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

/* v9'da 11×14 dolgu, 16px yazı, 12px köşe — alanlar ~46px'ti ve formu
   şişiriyordu. Şimdi ~40px: 9×12 dolgu, 15px yazı, 8px köşe. Dokunmatik
   ekranda yazı 16px'e döner (aşağıdaki media): altında iOS odakta sayfayı
   yakınlaştırıyor. */
.checkout input[type="text"],
.checkout input[type="email"],
.checkout input[type="tel"],
.checkout input:not([type]),
.checkout select,
.checkout textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 9px 12px;
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-sm);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.checkout input:hover,
.checkout select:hover:not(:disabled),
.checkout textarea:hover { border-color: rgba(255, 255, 255, 0.22); }

.checkout textarea { resize: vertical; min-height: 60px; }

/* İl/ilçe açılır listeleri. appearance:none olmadan Windows/Chrome yerleşik
   oku beyaz zeminli çiziyor ve koyu temada kutunun sağında beyaz bir blok
   kalıyor; ok kendi SVG'mizle çiziliyor. Renk kodu satır içi çünkü SVG
   data-URI'sinde CSS değişkeni çalışmaz. */
.checkout select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238FA3C0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 7px;
}

/* Açılan listenin kendisi işletim sistemi çizer; en azından koyu temaya
   yakın dursun diye seçenekler de boyanıyor. */
.checkout select option { color: var(--text); background: var(--surface); }

.checkout select:disabled {
  color: var(--text-3);
  cursor: not-allowed;
  opacity: 1; /* Safari pasif select'i soluklaştırıyor, okunmaz oluyor */
}

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

/* Alan altı açıklaması (TCKN, vergi no). Etiketin DIŞINDA, aria-describedby
   ile bağlı. Alan hatalıyken hata satırı onun yerini alır. */
.field-hint {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  /* --text-3 (.34) yüzey üstünde ~3,3:1 kalıyordu; bilgi taşıyan satır için
     AA (4,5:1) eşiğinin üstü. */
  color: rgba(255, 255, 255, 0.5);
}
.checkout .is-bad + .field-hint { display: none; }

/* 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 select,
.checkout .is-bad textarea { border-color: #ff6b6b; }
.checkout .field-err {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: #ff8f8f;
}

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

/* Fatura türü: iki seçenekli kart (radyo). Sitenin seçim dili: seçili kart
   lime çerçeve + köşede lime tik; seçili olmayan sade çerçeve. .is-on'u
   shop.js yönetiyor — :has() desteklemeyen tarayıcı da aynı görünsün. */
.invoice-type {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.checkout .choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}
.checkout .choice:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.24); }

/* Yerel radyo görünmez ama yerinde: klavyeyle (ok tuşları) seçilebilir,
   ekran okuyucu "radyo düğmesi, 2'nin 1'i" der. */
.checkout .choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.checkout .choice.is-on {
  color: var(--text);
  background: rgba(201, 229, 65, 0.06);
  border-color: var(--ball);
}
.checkout .choice.is-on::after {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--ball) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='none' stroke='%230A1832' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 4.2 3.8 7 9 1'/%3E%3C/svg%3E") center / 10px 8px no-repeat;
  box-shadow: 0 0 0 2px var(--surface);
}
/* Klavye odağı. AYRI kural: :has() bilmeyen tarayıcı yalnız bunu atar. */
.checkout .choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(30, 155, 240, 0.35); }

.checkout-side {
  position: sticky;
  /* .shop-cart ile aynı gerekçe: sticky üst menünün 64px'i ofsete dahil. */
  top: calc(64px + var(--s3));
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: 20px;
}

.checkout-side h2 {
  margin: 0 0 6px;
  font-size: 17px;
  letter-spacing: -0.3px;
}

/* Özet satırları sepet panelindekinden sıkı: 48px görsel. */
.checkout-side .cart-line { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; }
.checkout-side .cart-line img { width: 48px; height: 48px; }
.checkout-side .cart-name { font-size: 14px; }
.checkout-side .cart-totals { margin-top: 4px; }

.checkout-err {
  margin: 0 0 var(--s2);
  padding: 10px 14px;
  font-size: 14px;
  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%; margin-top: 4px; }
.checkout-pay svg { flex: none; margin-left: -4px; }
.checkout-pay[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Güven satırları: ücretsiz iade (iade sayfasına bağlı) + kargoya veriliş
   süresi. İkon lime, metin soluk — düğmenin altında dikkat çalmasın. */
.checkout-trust {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
}
.checkout-trust li { display: flex; align-items: center; gap: 8px; }
.checkout-trust svg { flex: none; color: var(--ball); }
.checkout-trust a {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 3px;
}
.checkout-trust a:hover { color: var(--text); }

/* Dokunmatik ekranda yazı 16px: altında iOS odakta sayfayı yakınlaştırıyor. */
@media (max-width: 760px), (pointer: coarse) {
  .checkout input[type="text"],
  .checkout input[type="email"],
  .checkout input[type="tel"],
  .checkout input:not([type]),
  .checkout select,
  .checkout textarea { font-size: 16px; }
}

@media (max-width: 560px) {
  .field-grid > * { grid-column: 1 / -1; }
  .field-grid > .half { grid-column: auto; }
  .checkout fieldset { padding: 12px 16px 16px; }
}

/* ---------- Kabul edilen kartlar ---------- */

/* iyzico'nun bayi logo bandı: iyzico ile öde + Mastercard + Visa + Troy +
   American Express, tek SVG. Koyu zemin için üretilmiş BEYAZ sürüm
   kullanılıyor — renkli banttaki Visa laciverti --bg üstünde okunmuyor.
   Marka renklerine dokunulmaz, bu yüzden filter/opacity yok. */
.pay-marks {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--separator);
}

.pay-marks p { margin: 0 0 var(--s2); font-size: 13px; color: var(--text-3); }

/* En/boy oranı 456:32; max-width dar ekranda taşmayı engelliyor. */
.pay-marks img { display: block; width: 100%; max-width: 300px; height: auto; }

/* ---------- 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; }
  /* :has() kuralı (0,2,0) yukarıdaki .shop-layout'u (0,1,0) yenerdi — dar
     ekranda tek sütuna inmesi için aynı özgüllükle tekrar yazılıyor.
     AYRI kural olarak: :has() desteklemeyen tarayıcı geçersiz seçiciyi içeren
     kuralın TAMAMINI atar, yukarıdaki .checkout satırı da düşerdi. */
  .shop-layout:has(.shop-cart) { grid-template-columns: 1fr; }
  .shop-cart,
  .checkout-side { position: static; }
  /* Tek sütunda hizalama boşluğu anlamsız — sepet ürünlerin altına iner. */
  .shop-cart { margin-top: 0; }
}

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

/* ---------- Ödeme modalı ---------- */

/* iyzico ödeme formu sayfadan AYRILMADAN, ortalanmış bir modal içinde açılır
 * (paymentPageUrl + &iframe=true). Kart alanları hâlâ iyzico'nun kendi alan
 * adında çalışıyor — kart verisi bize yine hiç uğramıyor, yalnızca görsel
 * olarak sitenin içinde duruyor.
 *
 * Örtü <body>'nin doğrudan çocuğu olarak eklenir: .checkout-side yapışkan bir
 * sütun ve modal onun içinde açılsaydı position:sticky yeni bir kapsayıcı blok
 * kurup position:fixed'i ona hapsederdi.
 *
 * Zemine tıklamak KAPATMAZ. Ödeme akışında yanlışlıkla kapatmak, 3D Secure'un
 * ortasında müşteriyi kaybetmek demek; kapatma bilinçli olmalı (× ya da Esc). */

.pay-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s2);
  background: rgba(6, 16, 36, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: pay-fade 0.2s var(--ease);
}

.pay-modal {
  display: flex;
  flex-direction: column;
  /* Yükseklik iyzico formunun ihtiyacına göre: kart alanları + taksit tablosu
   * + 3D Secure kutusu + "Öde" düğmesi kaydırmadan sığsın. Sığmazsa çerçeve
   * kendi içinde kayar, akış yine çalışır. */
  width: min(520px, 100%);
  height: min(820px, 94vh);
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pay-rise 0.25s var(--ease);
}

.pay-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2);
  border-bottom: 1px solid var(--separator);
}

.pay-bar strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
}

.pay-amount {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-2);
}

.pay-close {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: var(--text-2);
  background: var(--fill);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.pay-close:hover {
  color: var(--text);
  background: var(--surface-alt);
}

/* Çerçeve ve "yükleniyor" ÜST ÜSTE durur, yan yana değil: iyzico sayfası
 * gelene kadar bir saniye boyunca boş beyaz kutu görünmesin. */
.pay-body {
  flex: 1;
  position: relative;
  background: var(--surface);
}

.pay-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s2);
  font-size: 14px;
  color: var(--text-2);
}

.pay-spin {
  width: 26px;
  height: 26px;
  border: 2px solid var(--separator);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: pay-spin 0.8s linear infinite;
}

.pay-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.pay-frame.is-on { opacity: 1; }

.pay-fallback {
  flex: none;
  margin: 0;
  padding: var(--s1) var(--s2);
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  border-top: 1px solid var(--separator);
}

.pay-fallback a { color: var(--text-2); }
.pay-fallback a:hover { color: var(--blue-light); }

/* Modal açıkken arkadaki sayfa kaymasın */
body.pay-open { overflow: hidden; }

@keyframes pay-fade {
  from { opacity: 0; }
}

@keyframes pay-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
}

@keyframes pay-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pay-overlay,
  .pay-modal { animation: none; }
  .pay-frame { transition: none; }
  .pay-spin { animation-duration: 2.4s; }
}

/* ---------- "Sepete eklendi" bildirimi ---------- */

/* "Sepete ekle"ye basınca başlığın hemen altında, sepet bağlantısının
 * hizasında açılır; ~4,5 sn sonra kendiliğinden kapanır (üstüne gelince ya da
 * odaklanınca bekler). Görsel + ürün adı + "Sepete git" / "Ödemeye geç".
 * Konumu (top) shop.js başlığın gerçek yüksekliğinden hesaplar: dar ekranda
 * başlık iki satır. Alt köşe yerine üst: çerez çubuğu altta sabit duruyor.
 * z-index çerez çubuğunun (50) üstünde, ödeme örtüsünün (200) altında. */
.cart-toast {
  position: fixed;
  z-index: 60;
  top: 76px;
  right: max(16px, calc((100vw - 1040px) / 2 + 24px));
  width: min(360px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 12px;
  padding: 14px;
  background: var(--surface-alt);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.25s var(--ease);
}
.cart-toast.is-out { animation: toast-out 0.2s var(--ease) forwards; }

/* Ekran okuyucu duyurusu ("Sepete eklendi: …") — görünmez, kalıcı canlı bölge. */
.sr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cart-toast img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
}

.cart-toast-text { min-width: 0; }
.cart-toast-text strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ball);
}
.cart-toast-text span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-toast-close {
  align-self: start;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--text-3);
  background: none;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.cart-toast-close:hover { color: var(--text); background: var(--fill); }

.cart-toast-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.cart-toast-actions .btn { width: 100%; padding: 9px 12px; font-size: 14px; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 760px) {
  .cart-toast { left: 16px; right: 16px; width: auto; }
  /* Başlık dar ekranda üç satır (logo / menü / sepet + diller): 360–390px
     genişlikte 137px ölçüldü. Sepete inen bağlantı paneli onun altında bıraksın. */
  .shop-cart { scroll-margin-top: 152px; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-toast,
  .cart-toast.is-out,
  .shop-cart.is-flash { animation: none; }
}

/* ---------- Telefon: bayraklı ülke seçici (intl-tel-input) ---------- */

/* Kütüphane CSS'i (/css/intl-tel-input-29.5.3.min.css) açık tema için;
 * renkler değişkenlerle koyuya çevrilir. Bayrak yolları da burada: bayraksız
 * ("no-assets") sürüm yükleniyor, görseller /assets/flags altında sürümlü. */
:root {
  --iti-path-flags-1x: url("/assets/flags/iti-flags-29.5.3.webp");
  --iti-path-flags-2x: url("/assets/flags/iti-flags@2x-29.5.3.webp");
  --iti-hover-color: rgba(255, 255, 255, 0.08);
  --iti-border-color: rgba(255, 255, 255, 0.14);
  --iti-country-selector-bg: #1d3059;
  --iti-icon-color: #8fa3c0;
  --iti-spacer-horizontal: 12px;
}

/* Kütüphane input'un margin'ini !important ile sıfırlıyor; boşluğu kap alır. */
.checkout .iti { display: block; width: 100%; margin-top: 5px; }
.checkout .iti__selected-country { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.checkout .iti__selected-dial-code { color: var(--text); font-size: 15px; }

/* overflow:hidden YOK: tam ekran kipindeki kapatma (×) düğmesi kutunun
   dışında (sağ üstte) duruyor, kesilirdi. Köşeler iç parçalardan yuvarlanır. */
.iti__country-selector {
  color: var(--text);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  color-scheme: dark;
}
.iti__search-input-wrapper { border-radius: var(--r-md) var(--r-md) 0 0; }
.iti__country-list { border-radius: 0 0 var(--r-md) var(--r-md); }
.iti--inline-country-selector .iti__country-selector { border-color: rgba(255, 255, 255, 0.14); }
.iti__search-input {
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: transparent;
  outline: none;
}
.iti__search-input::placeholder { color: var(--text-3); }
.iti__country { font-size: 14.5px; }
.iti__dial-code { color: var(--text-3); }
.iti__no-results { color: var(--text-2); }

/* ---------- Alan doğrulama durumları ---------- */

/* Geçerli (alan çıkışında denetlendi): lime ince çerçeve + sağda onay. */
.checkout .is-ok input,
.checkout .is-ok select { border-color: rgba(201, 229, 65, 0.45); }
.checkout .field.is-ok input[type="email"],
.checkout .field.is-ok input[type="tel"] {
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath fill='none' stroke='%23C9E541' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1.5 5.8 5.2 9.3 12.5 1.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 11px;
}
/* Kap .field olunca açıklama satırı hatanın yerini bırakır. */
.checkout .is-bad .field-hint { display: none; }

/* E-posta yazım önerisi: "Bunu mu demek istedin: ayse@gmail.com?" — adres
   mavi, dokununca alana yazılır (sitenin dili: mavi = dokunulur metin). */
.field-suggest {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.suggest-apply {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--blue-light);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.suggest-apply:hover { color: #fff; }

/* ---------- Ürün aileleri (4 Eki 2026): "Hangisi sana uygun?" + paket seçici ----------
   Tasarım: docs/superpowers/specs/2026-10-04-magaza-urun-aileleri-design.md */

/* Kumandanın nerede taşındığı ("Bileğinde") — eski şeridin bilgisi, artık aile kartının üstünde. */
.shop-fit-line {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Paket seçici kartın dibine yaslanır: açıklamalar farklı uzunlukta olsa da
   seçici, fiyat ve düğme yan yana kartlarda aynı hizada başlar. */
.shop-packs {
  border: 0;
  margin: 0 0 var(--s2);
  padding: var(--s2) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.shop-packs legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.shop-pack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px 7px;
  border: 1.5px solid var(--separator);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.shop-pack input { position: absolute; opacity: 0; pointer-events: none; }
.shop-pack:hover { border-color: rgba(255, 255, 255, 0.3); }
.shop-pack:has(input:checked) { border-color: var(--ball); background: rgba(201, 229, 65, 0.08); }
.shop-pack:has(input:focus-visible) { outline: 2px solid var(--ball); outline-offset: 2px; }
.shop-pack-name { font-size: 12px; font-weight: 700; color: var(--text-2); line-height: 1.2; }
.shop-pack-price { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.shop-pack-note { font-size: 10.5px; font-weight: 700; color: var(--ball); line-height: 1.25; }

/* :has() yedeği: desteklemeyen tarayıcıda yukarıdaki iki .shop-pack:has(...) kuralı
   hiç uygulanmaz (çerçeve/arka plan değişmez, odak halkası görünmez) — seçili paket
   ve klavye odağı görünür kalsın diye AYRI, :has() İÇERMEYEN kurallarla tekrarlanır.
   Kardeş seçici (~) yeter: input, adından önce geliyor. */
.shop-pack input:checked ~ .shop-pack-name { color: var(--ball); }
.shop-pack input:focus-visible ~ .shop-pack-name { text-decoration: underline; }

.shop-variant[hidden] { display: none; }
.shop-family .shop-price { margin-top: 0; }
.shop-family .shop-specs { margin: var(--s2) 0 0; }
.shop-specs li[hidden] { display: none; }

/* Yurtdışı ziyaretçi: satın alma katmanı gizli (mevcut kural) — seçici ve fiyatlı satırlar da. */
body.shop-abroad .shop-packs,
body.shop-abroad .shop-catnav-from:not(.is-market),
body.shop-abroad .shop-trust { display: none; }
/* Yurtdışında aile kartında paket/fiyat katmanı gidince .shop-specs'in sıfırlanmış alt
   boşluğu (yukarıdaki .shop-family .shop-specs) "Diğer satıcılarda ara" bağlantısını
   "Ürün özellikleri"nin dibine yapıştırıyordu — JBL kartındaki (aile olmayan, sıfırlanmamış)
   24px'lik boşlukla aynı hizaya getirilir. */
body.shop-abroad .shop-family .shop-specs { margin-bottom: var(--s3); }

/* Çapayla gelinince (#fam-<aile> şeritten, #<paket> paket bağlantısından — artık
   kartın başındaki görünmez .shop-anchor işaretine iner, bkz. aşağıdaki kural —,
   #cat-<id> bölüm başlığından) kartın/başlığın üstü yapışkan menünün altında
   kalmasın — .shop-cart ile aynı değerler. */
.shop-card[id],
.shop-anchor { scroll-margin-top: calc(64px + var(--s3)); }
@media (max-width: 760px) {
  .shop-group,
  .shop-card[id],
  .shop-anchor { scroll-margin-top: 152px; }
}

/* #<paket> ARTIK bu sıfır boyutlu işarete iner (data-variant'ı taşıyan .shop-variant
   değil) — tarayıcının kendi çapa gezinmesi kartın TEPESİNE iner, JS hiç kaydırmaz;
   böylece ikisi birbiriyle yarışmaz (bkz. shop.js packFromHash). display:none/hidden
   OLAMAZ — gizli öğeler geçerli bir kaydırma hedefi değildir. */
.shop-family { position: relative; }
.shop-anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; }

/* ---------- Izgara vitrin (20 Eki 2026) ----------
   4 Eki'deki yatay liste (632px ve üstü her kart tam satır) kaldırıldı: bir ekranda tek ürün
   görünüyordu. Kartlar artık dikey ve yan yana (.shop-grid auto-fill, en az 232px): sepet sütunu
   yanında iki, geniş ekranda üç sütun. Satın alma alanı (.shop-buy) kartın dibine yaslanır, yan
   yana kartlarda seçici, fiyat ve düğme aynı hizada başlar; uzun açıklama "Ürün özellikleri"
   içinde. Telefon: tek sütun, görsel kartın genişliğini aşmaz. */
.shop-buy { margin-top: auto; display: flex; flex-direction: column; }
/* .shop-buy dibe yaslıyor → içindeki eski "margin-top:auto"lar sıfır (yoksa fiyat bloğu kendi içinde kayardı) */
.shop-buy .shop-launch,
.shop-buy .shop-price { margin-top: 0; }
.shop-buy .shop-launch:not([hidden]) + .shop-price { margin-top: 4px; }
.shop-card .shop-buy .shop-sellers.btn { margin-top: var(--s2); }
.shop-buy .shop-note.shop-lead { margin: 2px 0 0; font-size: 13px; }
.shop-card .btn,
.shop-card .badge-soon { margin-top: 12px; }
.shop-incart { margin-top: 12px; }

@media (max-width: 560px) {
  .shop-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-media { max-width: 360px; width: 100%; margin-inline: auto; }
  /* Telefonda üst bant: çipler alt alta üç satır (~300px) yer kaplıyordu → tek satır, yatay kaydırılır */
  .section.shop-hero { padding: var(--s3) 0 var(--s2); }
  .shop-hero .sub { font-size: 15px; }
  .shop-catnav { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin-top: var(--s2); padding-bottom: 4px; scrollbar-width: none; }
  .shop-catnav::-webkit-scrollbar { display: none; }
  .shop-catnav-item { flex: none; gap: 8px; padding: 6px 12px 6px 6px; }
  .shop-catnav-icon { width: 28px; height: 28px; }
  .shop-catnav-name { font-size: 13.5px; }
  .shop-catnav-from { font-size: 12.5px; }
  .shop-trust { gap: 4px 14px; margin-top: 12px; font-size: 13px; }
  .section:has(> .shop-layout) { padding-top: var(--s3); }
}