/* İKİ TEMA — KOYU VARSAYILAN, BEYAZ İSTEYENE (sahip isteği 2026-10-05:
   "sitenin ana zemin rengi kurye ile aynı olacak tüm sayfalarda" ve
   "isteyen siteyi beyaz olarak kullanabilir, gece ve gündüz gibi").

   Koyu palet KURYEDEN ÖLÇÜLDÜ, uydurulmadı: `web/src/index.css` →
   `--surface: #0f172a` (slate-900), `--surface-1: #1e293b` (slate-800),
   `--border: #334155`.

   Seçim panelle AYNI ANAHTARDA durur (`gobiz.theme`, localStorage) —
   aynı kökenden servis edildikleri için ziyaretçi bir kez seçer, bütün
   yüzeylerde geçerli olur. İkinci bir anahtar, iki ayrı tercih demekti. */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;
  --ink: #e2e8f0;
  --muted: #94a3b8;
  /* Kart içindeki etiketler: ten bir kademe açık. */
  --label: #b8c5d6;
  --line: #334155;
  --bg: #0f172a;
  --card: #1e293b;
  /* Koyu zeminde logonun KENDİ yeşili hem yazı hem dolgu olarak geçiyor
     (kart zemininde 7,8:1, dolu düğmede koyu yazıyla 8,9:1). */
  --brand: #39d42e;
  --on-brand: #0f172a;
  --brand-bright: #39d42e;
  /* Kart içindeki YUMUŞAK yüzeyler (rozet, medya kutusu, marka seçimi).
     Sabit açık renklerdi; koyu temada yazı kayboluyordu — alternatör
     seçim kutusunda birebir yaşandı (sahip bildirdi 2026-10-05). */
  --soft: #16233c;
  --ok-soft: rgba(74, 222, 128, 0.16);
  --ok: #4ade80;
  --error: #f87171;
  --radius: 12px;
  /* SÜZGEÇ ÇİPLERİNİN HÂLESİ (sahip isteği 2026-10-07: "etrafında soluk
     ışık olsa, hareketli bir alan olduğu izlenimini verse").

     Renk tek yerden gelsin diye markanın RGB bileşenleri ayrı token:
     `box-shadow` alfa ister ve `color-mix` eski tarayıcılarda sessizce
     düşer — düşerse hâle hiç çizilmez ve kimse fark etmez. */
  --brand-rgb: 57, 212, 46;
}

:root[data-theme='white'] {
  color-scheme: light;
  --ink: #16202c;
  --muted: #5b6b7d;
  --label: #475a6e;
  --line: #dde4ea;
  --bg: #f6f8fb;
  --card: #fff;
  /* Beyaz zeminde logonun yeşili okunmuyor (1,98:1); aynı tondaki en
     açık geçerli ton kullanılır. */
  --brand: #23871c;
  --on-brand: #fff;
  --brand-bright: #39d42e;
  --soft: #eef3f8;
  --ok-soft: #e6f4ec;
  --ok: #1d7a44;
  --error: #b32020;
  --radius: 12px;
  /* Beyaz zeminde hâle `--brand`in koyu tonundan kurulur: logonun parlak
     yeşili beyazın üstünde ışık değil leke gibi duruyor. */
  --brand-rgb: 35, 135, 28;
}

* {
  box-sizing: border-box;
}

/* HAM ELEMAN KURALLARI KAPSAYICIYA BAĞLI (2026-10-08): vitrin artık
   sitenin sayfası içine de kuruluyor (`GobizShop.mount`). Ölçüldü:
   iki stylesheet arasında DEĞİŞKEN çakışması yok ve yalnız 2 sınıf adı
   ortak, ama `body/h1/h2/h3/label/select/textarea` kuralları sitenin o
   sayfasının tamamına sızıyordu (örneğin dil seçim kutusu). Hepsi
   `.gobiz-shop` altına alındı; kendi sayfasında sınıf `<body>`de,
   sitede kurulum kabında duruyor — yani tek stylesheet iki yerde de
   aynı sonucu veriyor. */
.gobiz-shop {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

/* KENAR BOŞLUĞU SIFIRLAMASI YALNIZ BODY'NİN (2026-10-08): `margin: 0`
   `.gobiz-shop`ta dururken, sitenin içine kurulan kabın `mx-auto`sunu
   EZİYORDU — bu stil dosyası siteninkinden sonra yükleniyor ve iki kural
   da tek sınıf özgüllüğünde. Sonuç ölçüldü: 1600 pxlik pencerede kap
   1200 px ve SOL KENARDA duruyordu (sağında 400 px boşluk), yani mağaza
   sitenin içinde sola yapışıktı. Sıfırlama tarayıcının body varsayılanı
   içindir, kurulum kabının değil. */
body.gobiz-shop {
  margin: 0;
}

.gobiz-shop .bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.gobiz-shop .brand {
  font-weight: 700;
}
.gobiz-shop .brand small {
  color: var(--muted);
  font-weight: 500;
  margin-left: 6px;
}

.gobiz-shop .rate,
.gobiz-shop .hint {
  color: var(--muted);
  font-size: 13.5px;
}

.gobiz-shop .view {
  /* SÜTUN TANITIM SİTESİYLE AYNI (sahip kararı 2026-10-07): aynı kart
     iki yüzeyde aynı boyda okunsun. 748 = 716 kart + 2×16 px yan pay;
     sayı sitede ekran görüntüleriyle oturtuldu, burada tekrarlanıyor. */
  max-width: 782px;
  margin: 0 auto;
  /* `--ust-bar`ı KURULDUĞU SAYFA verir: sitenin içindeyken barın ölçülen
     yüksekliği, kendi sayfasında tanımsız → 0. Bant VARSA pay
     bırakılmaz; bar bandın görselinin üstünde durur ve mağazanın üst
     kenarı ürün sayfalarındaki gibi görselle başlar. */
  padding: calc(18px + var(--ust-bar, 0px)) 16px 70px;
}

.gobiz-shop .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

.gobiz-shop h1 {
  font-size: 22px;
  margin: 0 0 6px;
}
/* BÖLÜM BAŞLIĞI SAKİN DURUR (sahip 2026-10-07: "teknik bilgiler yazısını
   küçültelim, kart alttaki çizgiye otursun"). 18 px/700 bir bölüm adı için
   iri kalıyordu ve kartın altındaki boşlukla birlikte iki blok arasını
   ayırıyordu; başlık küçülünce teknik satırlar kartın devamı gibi okunuyor. */
/* BÖLÜM BAŞLIĞI TEK ÖLÇÜDÜR (sahip 2026-10-07: "marka seçimi yazısını da
   teknik bilgiler yazısı ölçülerine getir").

   `h3` için vitrinde kural YOKTU ve tarayıcının varsayılanına düşüyordu:
   18,7 px, satır 29, üstte ve altta 18,7 pxlik boşluk — yani aynı ekranda
   iki farklı bölüm başlığı ölçüsü vardı. İkisi tek kurala bağlandı;
   ayrımı etiket değil, bölümün yerleşimi taşır. */
.gobiz-shop h2,
.gobiz-shop h3 {
  font-size: 15px;
  /* Satır yüksekliği 1,55'ten 1,25'e: tek satırlık bir bölüm adında
     mirastan gelen boşluk kutuyu 23 pxe çıkarıyordu (ölçüldü), yazının
     kendisi 20. Başlık tek satır olduğu için okunurluk etkilenmiyor. */
  line-height: 1.25;
  margin: 0 0 4px;
}

.gobiz-shop .filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* SÜZGEÇ DÜĞMESİ DE BİR DÜĞMEDİR (sahip 2026-10-06: "kenar köşe
   yarıçapları kareye benzesin, diğer düğmelerle görünümü aynı olsun").
   Yarıçap sayı olarak değil `--radius` belirtecinden gelir; hap biçimi
   onları ayrı bir bileşen gibi gösteriyordu. */
.gobiz-shop .filters button {
  font: inherit;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  min-height: 40px;
}

/* SEÇİLİ DURUM TEK RENKTİR: marka yeşili (sahip isteği 2026-10-05
   "düğmeler tutarlı gözüksün"). Önceden süzgeç kutusu ve görünüm
   anahtarı koyu laciverdi, panel satırı yeşili kullanıyordu — aynı
   bileşende yan yana duran iki ayrı "seçili" rengi. */
.gobiz-shop .filters button[aria-pressed='true'] {
  background: var(--brand-bright);
  color: #0f172a;
  border-color: var(--brand-bright);
}

.gobiz-shop .list {
  display: grid;
  /* ÜÇ SÜTUN, SİTEDEKİ GİBİ (sahip kararı 2026-10-07: iki yüzey aynı
     ölçüde okunsun). 260 px alt sınırıyla 716 px sütuna yalnız İKİ kart
     sığıyordu; site aynı genişlikte üç kart gösteriyor. Alt sınır 200
     px: üç kart 225 px'e oturuyor, dar ekranda ikiye, telefonda tek
     sütuna kendiliğinden iniyor. */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* Boşluk da sitedeki ölçü: 20 px ile üç kart 225 pxe oturuyor,
     12 px ile 231 çıkıyordu (sahip kuralı 2026-10-07: referans sitenin
     ürün kartı ölçüsüdür). */
  gap: 20px;
}

.gobiz-shop .product {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* İkinci satır (güç · fiyat · KDV) kartın ana satırıdır; eski dört
   satırdaki `.price`/`.vat` kuralları buraya indi. */
.gobiz-shop .product .model {
  font-size: 17px;
  font-weight: 700;
  /* SATIR YÜKSEKLİĞİ SIKIŞTI, PUNTO DEĞİL (sahip 2026-10-08: "kartın
     boyutunu uzatmadan bu boşluklara koyacağız döviz tutarını").
     Ölçüldü: 1,55 miras satır yüksekliği 17 pxlik sayıya 26,3 px
     veriyordu; 1,2'de 20,4 px ve açılan 6 px, üstüne eklenen döviz
     satırının payının bir parçası. Fiyatı küçültmek gerekmedi. */
  line-height: 1.2;
}

/* DÖVİZ TUTARI — FİYATIN ÜSTÜNDE, MARKA SATIRININ FONTUYLA (sahip
   2026-10-08: "döviz üstte tl altta olacak").

   Yan yana denendi ve ÖLÇÜMLE ELENDİ: ızgara kartının iç genişliği
   199 px, en pahalı üründe 17 pxlik TL + 13 pxlik döviz 233 px istiyor
   ve 185 ürünün 150'sinde taşıyordu. Kendi satırında genişlik sorun
   değil (en uzun "USD 104.056,57" = 95 px), yükseklik ise satır
   yüksekliklerinden çıktı.

   ÇEVRİM YOK: bu ürünün kendi kayıtlı fiyatı (`listPriceLine`), TL
   tarafı ondan türetiliyor. */
.gobiz-shop .product-body .listprice {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.gobiz-shop .product .spec {
  color: var(--muted);
  font-size: 13.5px;
}

.gobiz-shop .tag {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
}
.gobiz-shop .tag.card {
  background: var(--ok-soft);
  color: var(--ok);
}

.gobiz-shop label {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 4px;
}

/* `.gobiz-shop` İLE SINIRLI (sahip 2026-10-14: /magaza'ya uğrayınca sitenin
   arama kutusu uzuyordu): bu kurallar `.gobiz-shop` öneki OLMADAN global
   sızıyor ve shop CSS'i /magaza'da yüklenince (SPA'da kalıcı) sitenin
   `input[type=text]`ini `width:100%` yapıp eziyordu (özgüllük 0,1,1 >
   Tailwind sınıfının 0,1,0'ı). Prefix eklenince shop'un kendi inputları
   yine stillenir, siteye sızmaz. */
.gobiz-shop input[type='text'],
.gobiz-shop input[type='email'],
.gobiz-shop input[type='tel'],
.gobiz-shop input[type='number'],
.gobiz-shop select,
.gobiz-shop textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: var(--card);
  color: var(--ink);
}

/* DÜĞMEDE ODAK HALKASI YALNIZ KLAVYEDE (sahip 2026-10-08: "etrafındaki
   yeşil çerçeveyi kaldır").
   Kural `button:focus` idi ve FAREYLE tıklanan her düğmeye yeşil çerçeve
   çiziyordu — sahip bunu kampanya bandının ses simgesinde gördü ama kusur
   bütün vitrindeydi (ölçüldü: gerçek fare tıklamasından sonra
   `outline: rgb(57,212,46) solid 2px`, `:focus-visible` ise false).
   `:focus-visible` klavyeyle gezen ziyaretçiye halkayı VERİR, fareyle
   tıklayana vermez; projenin yeni kuralları (`.filter-head`,
   `.tema-dugmesi`) zaten böyle. METİN ALANLARI `:focus`TA KALIR: orada
   imlecin nerede olduğunu göstermek fareyle de gerekir. */
.gobiz-shop input:focus,
.gobiz-shop select:focus,
.gobiz-shop textarea:focus,
.gobiz-shop button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.gobiz-shop .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.gobiz-shop .row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.gobiz-shop button.primary,
.gobiz-shop button.ghost,
.gobiz-shop a.primary,
.gobiz-shop a.ghost {
  /* DÜĞMELER HER YERDE DERLİ TOPLU (sahip 2026-10-14: "tüm düğmeler tutarlı
     olsun", "site mağaza fark etmez her yerde uygula"): temel ölçü artık
     38px/8-12px/13px. Önceden 46px'lik tam boy + ayrı compact override
     vardı; base compact olunca override gereksizleşti ve kaldırıldı.
     Dokunmatikte 44px'e çıkar (altta). */
  font: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  min-height: 38px;
  border: 1px solid var(--line);
  background: var(--card);
  /* BAĞLANTI DA DÜĞME KUTUSU GİBİ (sahip 2026-10-14: "teklifi indir pdf
     yazı gibi duruyor, çerçeve kutuya alalım"): <a> satır içi olduğu için
     min-height/dolguyu göstermez, altı çizili link gibi durur. inline-flex
     + ortalama + text-decoration:none ile diğer düğmelerle aynı kutu olur. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

/* ANA DÜĞME LOGONUN KENDİ YEŞİLİDİR (sahip 2026-10-05: "beyaz ekrandaki
   yeşil dönüşmemiş marka rengine"). `--brand` beyaz temada koyulaştırılmış
   tondur çünkü ÜSTÜNE BEYAZ YAZI geliyor (logo yeşilinde 1,98:1, eşik
   4,5). Düğmede yazıyı koyultunca logonun kendisi kullanılabiliyor:
   #39d42e üstünde #0f172a → 8,3:1. Böylece marka rengi iki temada da
   AYNI ve okunur. */
.gobiz-shop button.primary,
.gobiz-shop a.primary {
  background: var(--brand-bright);
  border-color: var(--brand-bright);
  color: #0f172a;
  font-weight: 600;
}

.gobiz-shop button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ÖZGÜLLÜK `.gobiz-shop label`I YENER (sahip 2026-10-14: "yazıları tik
   kutularında az uzaklaştıralım, sıfır bitişik"). Genel `.gobiz-shop label
   { display:block }` (0-2-0) base `.checkbox { display:flex }` (0-1-0)
   kuralını eziyordu → opsiyon tiki block oluyor ve `gap` işlemiyordu
   (ölçüldü: display:block, gerçek boşluk 3px). `.gobiz-shop .checkbox`
   ile aynı özgüllük + sonra geldiği için flex geri döner, gap:10px işler. */
.gobiz-shop .checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink);
  font-size: 14.5px;
  margin: 10px 0;
}

.gobiz-shop .checkbox input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.gobiz-shop .total {
  /* Bir tık küçük (sahip 2026-10-14: "yazının fontunu bir tık küçültelim").
     Sepet ve ürün ekranı toplamı; 20 → 18. */
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0 4px;
}

.gobiz-shop .problems {
  color: var(--error);
  font-size: 14px;
  margin: 10px 0 0;
  padding-left: 18px;
}

.gobiz-shop .toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  /* Bildirim iki temada da koyu kalır: `--ink` koyu temada AÇIK renge
     döndüğü için beyaz yazı orada okunmazdı. */
  background: #0f172a;
  color: #e2e8f0;
  padding: 11px 18px;
  border-radius: 999px;
  max-width: 92vw;
  font-size: 14.5px;
}
.gobiz-shop .toast.error {
  background: var(--error);
}

/* NEON ÇERÇEVE (sahip 2026-10-14: "bu kartı da diğer kart tasarımı gibi
   yapalım"): teklif sonucu, ürün sohbet kartı / Teklif Al modalıyla aynı
   yeşil neon görünümü alır — tam kenar + yeşil hale + yuvarlak köşe. Eski
   sol-şerit (border-left) kaldırıldı. Renk var(--brand)'den gelir: koyu
   temada #39d42e (diğer kartla aynı), açık temada okunur koyu yeşil; zemin
   kartın kendi temasında kalır ki yazı iki temada da okunsun. */
.gobiz-shop .ok-box,
.gobiz-shop .quote-box {
  border: 1px solid var(--brand);
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(57, 212, 46, 0.35);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

/* SONUÇ KARTI DİĞER KARTLARIN ENİNDE (sahip 2026-10-14: "kartın enini
   kısaltalım, diğer kartlarla tutarlı olsun"): birkaç satırlık onay tam
   genişlikte iri duruyordu; modal/sohbet kartı gibi ~28rem'e indirilip
   ortalanır. Dar kart hint metnini de düzgün satırlara kırar. Teklif
   FORMU (.quote-box) hariç — çok alanlı ızgarası yer ister. */
.gobiz-shop .ok-box {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

/* SONUÇ KARTI EKRANDA DİKEY ORTALANIR (sahip 2026-10-14: "kartı ekranın
   ortasına taşı, çok yukarıda konumlanmış"): kısa onay kartı görünümün
   tepesinde duruyor ve altında boş alan kalıyordu. Yalnız sonuç ekranında
   (`:has(.ok-box)`) görünüm ekran boyunca uzatılıp kart ortalanır; katalog
   ve ürün ekranları etkilenmez. `--ust-bar` host sayfanın üst barıdır. */
.gobiz-shop .view:has(.ok-box) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100dvh - var(--ust-bar, 0px));
}

/* (EYLEM DÜĞMELERİ compact override'ı kaldırıldı: base düğme kuralı artık
   38px/8-12px/13px olduğu için sonuç kartı, .satin-alma ve teklif formu
   düğmeleri zaten bu ölçüde — ayrı kurala gerek kalmadı.) */

/* SAYFALAMA DÜĞMELERİ LİSTE ALTINDA ORTALI (sahip 2026-10-14: "mağazada
   ürünler sonsuz akıyor, ekle"). Dar ekranda alt alta sarar. */
.gobiz-shop .daha-kutu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.gobiz-shop .daha-kutu:empty {
  margin-top: 0;
}

/* TEKLİF FORMU DERLİ TOPLU (sahip 2026-10-14: "teklif iste kartını da
   küçültelim, kutular ve en gereksiz büyük, diğer teklif iste kartına
   benzet"). Arşiv'deki Teklif Al modalı gibi: dar kart (ızgara ikişerli
   sıraya düşer), küçük kutular, 14 px yazı. Mağazanın global kutu ölçüsü
   (10px/16px) diğer ekranlarda (ödeme, süzgeç) KALIR; yalnız bu form
   küçülür ve ortalanır. */
.gobiz-shop .quote-box {
  /* YATAY FAZLALIK DA KESİLDİ (sahip 2026-10-14: "yataydaki fazlalıkları da
     kes"): modalla aynı ene (28rem) indirildi. */
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  /* BOYDAN DA KÜÇÜLDÜ (sahip 2026-10-14: "kartı küçült enden boydan"):
     dolgu, etiket ve boşluklar sıkıştırıldı — yalnız bu form. Barın altına
     inme artık kart yamasıyla değil vitrinin --ust-bar payıyla çözülüyor. */
  padding: 14px;
}
.gobiz-shop .quote-box h1 {
  font-size: 17px;
  margin: 0 0 3px;
}
.gobiz-shop .quote-box p.hint {
  margin: 0 0 8px;
}
/* Dar ende de İKİŞERLİ kalsın (minmax 220→160); telefonda yine alt alta
   iner (160×2 sığmaz → tek sütun). */
.gobiz-shop .quote-box .grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.gobiz-shop .quote-box label {
  font-size: 12.5px;
  margin-bottom: 2px;
}
/* CHECKBOX HARİÇ: bu kural metin kutuları içindir; onay kutusuna padding/
   font uygulanınca native kutu bozuluyor ve yanındaki yazıyla arasındaki
   boşluk (gap) yok oluyordu (sahip 2026-10-14: "burası düzelmemiş"). */
.gobiz-shop .quote-box input:not([type='checkbox']),
.gobiz-shop .quote-box select {
  padding: 6px 9px;
  font-size: 14px;
}
/* Onay kutusu sabit ölçü + yazıdan net boşluk (flex gap bazı tarayıcılarda
   metin düğümüne uygulanmıyordu; kutuya margin kesin çalışır). */
.gobiz-shop .quote-box .checkbox input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 10px 0 0;
}
.gobiz-shop .quote-box .checkbox {
  margin: 2px 0;
  /* Boşluk kutunun margin-right'ından gelir (yukarıda); gap sıfırlanır ki
     ikisi toplanıp fazla açılmasın. */
  gap: 0;
  font-size: 13px;
}

@media (max-width: 520px) {
  .gobiz-shop .view {
    /* Band olmayan ekran telefonda da yüzen barın altına insin (--ust-bar).
       `kampanyali` iken üst pay 18px kuralı daha özgül olduğu için yine
       band'ı tepeye yaslar. */
    padding: calc(12px + var(--ust-bar, 0px)) 12px 70px;
  }

  /* MOBİLDE TEKNİK HÜCRELER TEK SIRA (sahip 2026-10-14: "voltaj ve amperi
     de üst sıraya taşıyıp tek sıraya alalım, kartın boyu kısalsın"). MOTOR
     hücresi düşer — zaten marka satırında ("GOMOTOR · GO-BM3") yazılı
     (ızgaradaki 4-hücre kuralının aynısı). Kalan hücreler eşit genişlikte
     TEK SIRADA; `minmax(0,1fr)` dar hücrede değeri sarar, kırpmaz. */
  /* ÖZGÜLLÜK `.product-body` İLE YÜKSELTİLDİ (2026-10-17): base
     `.gobiz-shop .specs{display:grid}` (846) bu override ile AYNI
     özgüllükte ve SONRA geldiği için kazanıyordu — mobilde specs grid'e
     düşüp AMPER alt satıra iniyordu (sahip bildirdi). `.product-body`
     ataası özgüllüğü 0,3,0'a çıkarır, base'i (0,2,0) sırasından bağımsız
     yener. (Eskiden base kapsamsız `.specs` 0,1,0 idi ve `.gobiz-shop`
     öneki tek başına yetiyordu; vitrin CSS'i sızıntıya karşı tümüyle
     kapsanınca base de 0,2,0 oldu.) */
  .gobiz-shop .product-body .specs {
    display: flex;
    gap: 6px;
  }
  .gobiz-shop .specs .spec-cell {
    flex: 1 1 0;
    min-width: 0;
  }
  .gobiz-shop .spec-cell[data-key='engine'] {
    display: none;
  }

  /* GÖRÜNÜM DÜĞMESİ MOBİLDE GİZLİ (sahip 2026-10-14: "ızgara görünüm
     düğmesi mobilde bir işe yaramıyor"): ızgara ve liste telefonda tek
     sütun olduğu için aynı görünüyor; toggle gereksiz ve toolbar'da yer
     kaplıyor. Kaldırılınca mobil çubuk da rahatlar. ÖZGÜLLÜK
     `.head-tools` İLE YÜKSELTİLDİ (2026-10-17): base
     `.gobiz-shop .view-switch{display:flex}` (669) aynı özgüllükte ve
     SONRA geldiği için bu gizlemeyi eziyordu; `.head-tools` ataası
     0,3,0'a çıkarıp base'i (0,2,0) yener. */
  .gobiz-shop .head-tools .view-switch {
    display: none;
  }
}

/* Phone number the customer can tap: a real touch target, not just text. */
.gobiz-shop a.call {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.gobiz-shop a.call:hover,
.gobiz-shop a.call:focus {
  text-decoration: underline;
}

/* The contract texts, read in place rather than behind a link. */
.gobiz-shop button.linklike {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--brand);
  text-decoration: underline;
  cursor: pointer;
}

.gobiz-shop .contract-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0 12px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card);
}

.gobiz-shop .contract-box h3 {
  margin: 12px 0 6px;
  font-size: 15px;
}

.gobiz-shop pre.contract-text {
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  margin: 0;
}

/* The contract texts, read in place rather than behind a link. */
.gobiz-shop button.linklike {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--brand);
  text-decoration: underline;
  cursor: pointer;
}

.gobiz-shop .contract-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0 12px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card);
}

.gobiz-shop .contract-box h3 {
  margin: 12px 0 6px;
  font-size: 15px;
}

.gobiz-shop pre.contract-text {
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  margin: 0;
}

/* ÜRÜN KARTI — sahip isteği 2026-10-05: liste ve kutu görünümü, resimli,
   bilgiler portal kartındaki gibi. Görsel dil kurye (FleetFlow)
   projesinden: 16px köşe, yumuşak gölge, 12px düğme köşesi. Renkler
   değişkenlerden gelir; sabit #fff/#000 yazılmaz. */
.gobiz-shop .view-switch {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.gobiz-shop .view-switch button {
  font: inherit;
  /* TOOLBAR'DA HER KUTU AYNI YÜKSEKLİKTE (sahip 2026-10-14: "tüm kutuların
     ölçüleri Ürünler başlığındaki ölçülerle tutarlı olsun"). Ürünler/Motor/
     Yakıt filtre düğmeleri 43px; görünüm ve sepet düğmeleri de 43px. */
  width: 38px;
  height: 34px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  line-height: 1;
}

.gobiz-shop .view-switch button[aria-pressed='true'] {
  background: var(--brand-bright);
  color: #0f172a;
  border-color: var(--brand-bright);
}

/* KART ZEMİNDEN ÖNE ÇIKAR, ÇERÇEVESİNDE NEON (sahip 2026-10-07: "mağaza
   kartlarında da ürünler kartında yaptığımız gibi kartı az zeminden ön
   tarafa ve çerçevesinde neon yeşil ışık olacak şekilde tasarlayalım,
   ayrıca birbiri ile tutarlı olsun").

   TUTARLILIK SÖZDEN DEĞİL AYNI DEĞERLERDEN gelir: çiplerdeki üç kademenin
   (duruyor → üstündesin → basılı) aynı `--brand-rgb` tokeni ve aynı alfa
   basamakları burada da kullanılır. Kart daha büyük bir yüzey olduğu için
   dinlenirken alfa biraz DÜŞÜK: çipteki değerler 300 px'lik bir kutuda
   ışık değil çerçeve gibi okunuyordu.

   "Öne çıkma" iki parçadır — altındaki koyu gölge derinliği, yeşil halka
   da kenarı verir; `transform` yerleşimi değiştirmediği için ızgara
   oynamaz (ölçüldü: sütun sayısı ve kart genişliği aynı). */
/* HÂLE TEK KAYNAKTA (2026-10-08): sepet satırı da aynı neon çerçeveyi
   taşıyor (sahip: "kart olsun, etrafı yeşil neon ışıklı"). Değerleri
   kopyalamak yerine iki yüzey aynı seçiciyi paylaşır — "tutarlılık
   sözden değil aynı değerlerden gelir" kuralının kendisi. */
.gobiz-shop .product,
.gobiz-shop .sepet-satir {
  border-radius: 16px;
  border-color: rgba(var(--brand-rgb), 0.18);
  box-shadow:
    0 2px 10px -4px rgb(0 0 0 / 35%),
    0 0 0 1px rgba(var(--brand-rgb), 0.1),
    0 0 18px -8px rgba(var(--brand-rgb), 0.55);
  transition:
    box-shadow 180ms ease,
    transform 180ms ease,
    border-color 180ms ease;
}

.gobiz-shop .product {
  padding: 0;
  overflow: hidden;
  transition:
    box-shadow 180ms ease,
    transform 180ms ease,
    border-color 180ms ease;
}

/* `:focus-within` DE SAYILIR: klavyeyle "Satın Al" düğmesine gelen
   ziyaretçi hangi kartın içinde olduğunu görmeli. */
.gobiz-shop .product:hover,
.gobiz-shop .product:focus-within,
.gobiz-shop .sepet-satir:hover,
.gobiz-shop .sepet-satir:focus-within {
  border-color: rgba(var(--brand-rgb), 0.55);
  box-shadow:
    0 10px 24px -10px rgb(0 0 0 / 55%),
    0 0 0 1px rgba(var(--brand-rgb), 0.4),
    0 0 30px -6px rgba(var(--brand-rgb), 0.75);
  transform: translateY(-2px);
}

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

  .gobiz-shop .product:hover,
  .gobiz-shop .product:focus-within {
    transform: none;
  }
}

/* FOTOĞRAF KUTUSUNUN DÖRT KÖŞESİ DE YUVARLAK (sahip 2026-10-07:
   "resimlerin kenar raddüslerini de yapalım, dört köşeli").

   Kutu kartın kenarına YAPIŞIKTI: üst iki köşesi kartın kendi kırpmasıyla
   yuvarlanıyordu, alt ikisi ise gövdeyle birleştiği için düz kalıyordu.
   İçeri alınca dördü de görünür oluyor ve fotoğraf kartın içinde kendi
   kutusu gibi duruyor. Kendi `overflow` kırpması gerekiyor: kartınki
   yalnız dış kenarı kesiyor, içeri alınmış kutunun köşesini değil. */
.gobiz-shop .product-media {
  position: relative;
  margin: 10px 10px 0;
  border-radius: 12px;
  overflow: hidden;
  /* PLAKA BEYAZ, TEMAYA UYMAZ — ve bu bilinçli (sahip 2026-10-07:
     "endüstriyellerin radüsü portatif kadar belli değil, neden farklı").

     ÖLÇÜLDÜ: portatif fotoğrafları 1,35 oranında ve 4/3 kutuyu %99
     dolduruyor, endüstriyel fotoğrafları 1,50-1,52 ve yalnız %88-89.
     Aradaki fark kutunun köşesinde değil FOTOĞRAFIN kendisinde: geniş
     fotoğrafın altında ve üstünde bant kalıyor, yuvarlak köşe o koyu
     bandın üstüne çiziliyor ve göz beyaz fotoğrafın düz köşesini
     görüyor. Plaka beyaz olunca bant da beyaz oluyor, köşe her iki
     oranda da aynı okunuyor.

     Fotoğraflar zaten beyaz fonda çekilmiş; koyu temada da beyaz
     kalması "fotoğraf kâğıdı" izlenimi verir, kartın zemini değildir. */
  background: #fff;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gobiz-shop .product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Video işareti: tıklayınca ürün sayfasında oynar. */
.gobiz-shop .product-media .play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgb(0 0 0 / 55%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.gobiz-shop .product-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  /* Künye satırları arasındaki boşluk 4 → 2: üç satır (döviz, fiyat,
     marka) aynı yükseklikte kalsın. */
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* İKİ SATIRLIK BAŞLIK (sahip 2026-10-05: "kartın boyu kısalacak, daha şık
   duracaktır"). Marka+model üstte küçük, güç+fiyat+KDV altta okunur
   puntoda. Eski dört satırın `.price`/`.vat` kuralları kalktı. */
.gobiz-shop .product-body .brand {
  /* MODEL ADI SİTEDEKİYLE AYNI RÜTBEDE (sahip 2026-10-07: "yazıların
     rakamların boyları farklı"). Ölçüldü: model sitede 17 px, vitrinde
     11 px yazılıyordu; punto değil RÜTBE farklıydı. Harf aralığı da
     daraltıldı, yoksa 17 px büyük harf dar kartta iki satıra iniyor. */
  font-size: 13px;
  margin-bottom: 0;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}

/* BİLGİ IZGARASI: portal kartındaki gibi etiket üstte, değer altta.
   Dar ekranda iki sütuna iner — üç sütun telefonda okunmuyor. */
.gobiz-shop .specs {
  display: grid;
  /* IZGARADA İKİ SÜTUN — BEŞ PİKSEL YÜZÜNDEN TEK SIRAYA DÜŞÜYORDU
     (sahip 2026-10-07 ekran görüntüsünü gönderdi: dört hücre alt alta).

     Ölçüldü: kartın hücre kutusu 189 px, en uzun değer (740 hücrenin
     hepsi tarandı) 230 monofaze = 91 px. İki sütun 182 px istiyor,
     12 pxlik yatay boşlukla toplam 194 oluyor ve tek sütuna düşüyordu.
     Boşluk 6 pxe inince 188 ile sığıyor; alt sınır 96 → 88 px, çünkü
     96 da kendi başına ikinci sütunu engelliyordu.

     Değer SIĞDIĞI İÇİN kırpılmıyor: 91 + 6 + 91 = 188 ≤ 189. Daha uzun
     bir değer gelirse sütun yine tek sıraya düşer — kırpmak yerine
     alt alta dizmek doğru taraf. */
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px 6px;
  /* ARADAKİ BOŞLUK ORANSIZDI (sahip 2026-10-07: "model adı ile
     altındaki çizgi arasında fazla boşluk var"). Ölçüldü: ad ile çizgi
     arası 14 px, çizgi ile hücreler arası 10 px daha. İkisi de yarıya
     indi; satır ve kart boyu bu kadar kısalıyor. */
  /* MARKA SATIRI ÇİZGİYE YAKLAŞTI (sahip 2026-10-08): ölçüldü, satırın
     altı ile çizgi arası 10 px idi (6 px dış boşluk + 2 px gövde
     aralığı + ...); 4 pxe indi ve aynı mesafe tanıtım sitesinde de
     uygulandı — şablonun yerleşimi iki yüzeyde tutarlı olmalı. */
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.gobiz-shop .spec-cell dt {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* ETİKET KENDİ TONUNU KULLANIR (sahip 2026-10-07: "yazılar okunamaz").
     Ölçüldü: `--muted` bu kartın lacivert zemininde 5,71:1 veriyordu,
     sitedeki aynı etiket 7,11. Punto aynı, eksik olan mürekkepti.
     `--muted` tokenine dokunulmadı — o ton başka yüzeylerde (ipucu
     satırı, ikincil metin) ayarlanmıştı, hepsini birden açmak oraları
     bozardı. */
  color: var(--label);
  margin: 0;
}

.gobiz-shop .spec-cell dd {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* STANDBY/PRIME ÜRÜN EKRANINDA: ORTALI + kW AYNI SATIRDA (sahip 2026-10-17).
   kVA'nın yanına kW gelince ("2,4 kVA 2,4 kW") değer 94 pxlik sütuna
   sığmayıp sarıyordu. İlk deneme (esnek ızgara + nowrap) dar genişlikte
   3. SIRA oluşturuyor, mobil tek-sıra flex'te ise rakamları ÜST ÜSTE
   bindiriyordu (sahip bildirdi). Çözüm: SABİT 5 SÜTUN — standby/prime
   GENİŞ (kW tek satıra sığar), diğerleri dar; 10 hücre tam 2 sıra, 3.
   sıra oluşmaz ve diğer hücreler sağa kayar. kW ayrı `.spec-kw` span'ı,
   mobilde gizlenir. Kartta (ızgara/liste) hücreler sola hizalı KALIR; bu
   kurallar yalnız `.product-detay`. Mobilde specs `display:flex` olduğu
   için `grid-template-columns` yok sayılır (tek sıra bozulmaz). */
.gobiz-shop .product-detay .specs {
  grid-template-columns: 1.6fr 1.6fr 1fr 1fr 1fr;
}
/* ÜRÜN EKRANINDA TÜM HÜCRELER ORTALI (sahip 2026-10-17: önce standby/prime,
   sonra "yakıtla alternatörü de ortala"). Hepsini ortalamak iki sütunu/5
   sütunu tutarlı yapar; yalnız bir kısmını ortalamak satırları zikzak
   yapardı. Yalnız `.product-detay` — KART (ızgara/liste) sola hizalı kalır. */
.gobiz-shop .product-detay .spec-cell {
  text-align: center;
}
/* MOBİLDE ÜRÜN EKRANI SPECS = 2 SÜTUN GRID (sahip 2026-10-17 "mobilde
   rakamlar üst üste girdi"). Mobil KART kuralı specs'i TEK SIRA flex yapıyor
   (4 hücrelik karta göre); ürün ekranının 10 hücresi o tek sırada eziliyordu.
   2 sütunda hücreler ~157px — "X kVA Y kW" tek satıra sığar, kW mobilde de
   görünür. Yalnız `.product-detay`; kart tek-sıra flex kalır. Bu @media,
   kartın flex kuralından (540. satır) SONRA geldiği için eşit özgüllükte
   onu yener. */
@media (max-width: 520px) {
  /* MOBİLDE 2 YATAY SIRA (sahip 2026-10-17 "2 sıra derken yataydan
     bahsettim"): 8 hücre (MOTOR gizli, FAZ kaldırıldı) 4 sütunda tam 2 satıra
     oturur. Yalnız mobil; masaüstü 5 sütun düzeni değişmez. */
  .gobiz-shop .product-detay .specs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px 6px;
  }
  /* MOBİLDE FAZ KALDIRILIR (sahip 2026-10-17 "mobilden fazı kaldıralım"):
     FAZ çıkınca AMPER VOLTAJ'ın yanına gelir ve grid tam 2 satır olur. Faz
     bilgisi gerilimden okunur (230 V ↔ 230/400 V). Masaüstünde FAZ durur. */
  .gobiz-shop .product-detay .spec-cell[data-key='phase'] {
    display: none;
  }
  /* MOBİLDE DEĞER BİR TIK KÜÇÜK (2026-10-17): 4 sütun dar telefonda
     (≤~390px) "10 kVA 8 kW"yi saramasın; değer 12px, kW ikincil 10px,
     aynı satırda kalır. Masaüstü 13px'te kalır. */
  .gobiz-shop .product-detay .spec-cell dd {
    font-size: 12px;
  }
  .gobiz-shop .product-detay .spec-kw {
    font-size: 10px;
  }
}

.gobiz-shop .product-foot {
  display: flex;
  /* IZGARADA YAN YANA, LİSTEDE ALT ALTA (sahip 2026-10-07: "ızgarada
     yan yana olması gerekir, listede üstüste demiştik" — ben tersini
     yapmıştım).

     Mantığı kartın şeklinden geliyor: ızgara kartı DAR ve UZUN, orada
     düğmeler satırın sonuna yan yana sığıyor ve bir satır kazandırıyor;
     liste satırı GENİŞ ve ALÇAK, orada sağdaki sütunda alt alta duruyorlar
     ve satırı uzatmıyorlar. */
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  /* Son teknik satır ile düğme arası 18 px idi ve fazla duruyordu
     (sahip 2026-10-07); 4 px ile araya 10 px kalıyor. */
  padding-top: 4px;
}

.gobiz-shop .product-foot .primary {
  margin-left: auto;
  border-radius: 12px;
}

/* Kart içindeki düğme: listedeki ritme uysun diye daha küçük. 38px, hâlâ
   parmakla rahat basılabilir bir dokunma hedefi. */
/* KART DÜĞMELERİ: ikisi de aynı ölçüde (sahip 2026-10-07: "detay ve
   satın al"). Ölçü yalnız ana düğmeye yazılıydı; ikincisi eklenince
   yanında bir kademe büyük duruyordu. */
.gobiz-shop button.primary.small,
.gobiz-shop button.ghost.small {
  /* ÖLÇÜ TANITIM SİTESİYLE AYNI (sahip 2026-10-07: "düğme büyüklükleri
     sitedekinden farklı oldu, küçüldü"). Ölçüldü: sitede ikisi de
     93×34 ve 14 px/600; vitrinde 79×34 ve 13 px/400 kalmıştı — yani
     yalnız küçük değil, SOLGUN da duruyordu.

     Eşit genişlik `min-width` ile: sitede iki etiket benzer uzunlukta
     olduğu için kendiliğinden eşitler, bizde "Satın Al" daha kısa ve
     çift dengesiz görünüyordu.

     `line-height` açıkça veriliyor: gövdeden miras alınan değerle düğme
     38 pxe çıkıyordu, sitede 34. */
  padding: 6px 8px;
  line-height: 20px;
  min-height: 34px;
  min-width: 93px;
  font-size: 14px;
  font-weight: 600;
}

/* Detay: dış çizgili ikincil düğme, simgesiyle tek hizada. */
.gobiz-shop .product-foot .detay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
  padding-right: 12px;
}

.gobiz-shop .product-foot .goz {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

/* MOBİLDE İKİ DÜĞME YAN YANA (sahip 2026-10-17: "mobil mağazada Sepete
   ekle düğmesini Satın Al'ın yanına taşı"). Base `.primary{margin-left:
   auto}` ikisini kartın iki ucuna itiyordu (Sepete ekle solda, Satın Al
   sağda); mobilde `auto` kaldırılınca `justify-content:flex-end` + `gap`
   ikisini sağda yan yana toplar. Blok base'den SONRA ve aynı özgüllükte
   olduğu için sırayla kazanır; yalnız <640 (dikey kart) — masaüstünde
   ızgara yan yana / liste alt alta düzeni değişmez. */
@media (max-width: 639px) {
  .gobiz-shop .product-foot .primary {
    margin-left: 0;
  }
}

/* LİSTE GÖRÜNÜMÜ: tek sütun, görsel solda. Portal ekranındaki satır
   düzeni. Dar ekranda kutu görünümüne döner — 110px görsel + metin
   telefonda sıkışıyor. */
.gobiz-shop .list-rows {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .gobiz-shop .list-rows .product {
    flex-direction: row;
  }

  /* LİSTEDE DÖRT KENARDAN DA İÇERİ (sahip 2026-10-07: "ızgara görünümde
     hepsinde radüs var ancak liste görünümde yok").

     Izgarada kutu kartın ÜSTÜNDE duruyor, altında gövde var, o yüzden
     alt kenar boşluğu gereksiz — `10px 10px 0` oradan geliyor. Satır
     yerleşiminde ise kutu SOLDA ve kartın altına kadar iniyor: alt
     boşluk olmayınca yuvarlak köşe kartın kenarına yapışıyor ve düz
     görünüyor. Yerleşim değişince kenar boşluğu da değişmeli. */
  /* KUTU LİSTEDE DE 4/3 KALIR. `auto` iken kutu kartın boyuna uzuyor,
     fotoğraf `contain` ile ortada küçük kalıyor ve çevresinde koyu bant
     oluşuyordu: yuvarlak köşe kutunun kendisindeydi ama göz FOTOĞRAFIN
     kendi düz köşesini görüyordu. Izgaradaki oranı koruyunca fotoğraf
     kutuyu dolduruyor ve köşe fotoğrafın köşesi gibi okunuyor. */
  /* SATIR YÜKSEKLİĞİ TANITIM SİTESİYLE AYNI (sahip 2026-10-07:
     "sitedeki liste görünümü yüksekliğine getirmek istiyorum").

     Satırın boyunu fotoğraf plakası belirliyor: 190×143 + 20 px kenar =
     163, yani satır 165 px oluyordu. Sitenin plakası 160×112; aynı ölçüyü
     alınca satır 134'e iniyor. Oran 10/7 — sitenin kendi oranı, 4/3
     değil. Fotoğraf KIRPILMIYOR, kutusu küçülüyor. */
  .gobiz-shop .list-rows .product-media {
    width: 160px;
    flex: 0 0 160px;
    aspect-ratio: 10 / 7;
    align-self: flex-start;
    margin: 10px;
  }
}

/* MARKA SEÇİMİ (sahip isteği 2026-10-05): müşteri Business yerine başka
   alternatör, ATS ya da TMŞ markası seçebilsin. Opsiyona bağlı kategori
   ancak o opsiyon seçiliyse belirir. */
.gobiz-shop .brand-pick {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

.gobiz-shop .brand-pick .brand-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.gobiz-shop .brand-pick .checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

/* Detaydaki toplam kutusu: ara toplam + KDV + genel toplam. KDV ayrı
   satırdır çünkü endüstriyel kart fiyatı KDV hariç gösteriyor. */
.gobiz-shop .sum-row {
  font-size: 14px;
  color: var(--muted);
}

.gobiz-shop .sum-grand {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

/* AÇILIR SÜZGEÇ KUTULARI (sahip isteği 2026-10-05). Üç çip sırası yerine
   tek sıra; her kutu kapalıyken seçimini yazar, tıklayınca listesi açılır.
   Panel kutunun içinde konumlanır, o yüzden sarmal `relative`. */
.gobiz-shop .filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}

.gobiz-shop .filter-drop {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.gobiz-shop .filter-head {
  /* TOOLBAR DÜĞMELERİ "SATIN AL" ÖLÇÜSÜNDE (sahip 2026-10-14): kart
     "Satın Al" düğmesi 34px / 6px dolgu / 14px yazı. Toolbar da o ölçüye
     indi (önce 40/16px idi). */
  font: inherit;
  font-size: 14px;
  /* "Satın Al" gibi 34px: line-height 20 olmadan varsayılan satır
     yüksekliği içeriği 24px'e çıkarıp düğmeyi 36'ya taşıyordu. */
  line-height: 20px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  min-height: 34px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  /* Diğer düğmelerle aynı köşe (sahip 2026-10-06); `--radius` tek kaynak. */
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
}

/* ÇUBUĞUN DÜĞMELERİ CANLI DURUR (sahip isteği 2026-10-07: "bir tık öne
   alsan, etrafına yeşil neon olsa, normal durumda da soluk ışık olsa" —
   ve ardından "aynı uygulamayı bu düğmelere de yapalım", görünüm/tema
   düğmelerini göstererek).

   TEK KURAL, ÜÇ DÜĞME: süzgeç çipleri, görünüm anahtarı ve tema düğmesi
   aynı satırda duruyor; ışığı yalnız birine vermek "şunlar tıklanır,
   bunlar süs" demekti. Seçici listesi AÇIK yazılı, `:is()` ile değil:
   tanımadığı bir seçici gören tarayıcı kuralın TAMAMINI atar ve hâle
   sessizce kaybolur — görünmeyen bir hâle, hiç olmayan hâleden kötü.

   Üç kademe aynı şeyi söyler: ışık arttıkça yakınlık artar — duruyor →
   üstündesin → açık/seçili. Hâle `box-shadow`, yükselme `transform`:
   ikisi de yerleşimi DEĞİŞTİRMEZ, yani 390 px'te zor kazanılan tek sıra
   bundan etkilenmiyor (ölçüldü, kap ve içerik birebir aynı). */
.gobiz-shop .filter-head,
.gobiz-shop .view-switch button,
.gobiz-shop .tema-dugmesi {
  box-shadow:
    0 0 0 1px rgba(var(--brand-rgb), 0.16),
    0 0 14px -6px rgba(var(--brand-rgb), 0.5);
  transition:
    box-shadow 160ms ease,
    transform 160ms ease,
    border-color 160ms ease;
}

.gobiz-shop .filter-head:hover,
.gobiz-shop .filter-head:focus-visible,
.gobiz-shop .view-switch button:hover,
.gobiz-shop .view-switch button:focus-visible,
.gobiz-shop .tema-dugmesi:hover,
.gobiz-shop .tema-dugmesi:focus-visible {
  border-color: rgba(var(--brand-rgb), 0.7);
  box-shadow:
    0 0 0 1px rgba(var(--brand-rgb), 0.45),
    0 0 22px -4px rgba(var(--brand-rgb), 0.75);
  transform: translateY(-1px);
}

/* AÇIKKEN IŞIK SÖNMEZ: panel kutunun altından çıkıyor, kutu da "şu an
   buradasın" demeye devam etmeli — yoksa açık liste sahipsiz görünür. */
.gobiz-shop .filter-head[aria-expanded='true'] {
  border-color: rgba(var(--brand-rgb), 0.7);
  box-shadow:
    0 0 0 1px rgba(var(--brand-rgb), 0.5),
    0 0 26px -4px rgba(var(--brand-rgb), 0.8);
}

/* Basılı an: düğme yerine oturur. Yükselmeyi bırakmak dokunuşun tek
   geri bildirimi — mobilde `:hover` yok, basma hissi buradan gelir. */
.gobiz-shop .filter-head:active,
.gobiz-shop .view-switch button:active,
.gobiz-shop .tema-dugmesi:active {
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(var(--brand-rgb), 0.5),
    0 0 10px -4px rgba(var(--brand-rgb), 0.6);
}

/* SEÇİLİ DÜĞME (dolu yeşil): hâle biraz daha açılır — zemin zaten parlak,
   aynı alfa kenarda kaybolup düğme sönük görünüyordu. Görünüm anahtarının
   seçili hâli de buraya girer: ikisi de "şu an bu geçerli" diyor. */
.gobiz-shop .filter-head.on,
.gobiz-shop .view-switch button[aria-pressed='true'] {
  box-shadow:
    0 0 0 1px rgba(var(--brand-rgb), 0.35),
    0 0 20px -4px rgba(var(--brand-rgb), 0.7);
}

.gobiz-shop .filter-head.on:hover,
.gobiz-shop .filter-head.on:focus-visible,
.gobiz-shop .filter-head.on[aria-expanded='true'],
.gobiz-shop .view-switch button[aria-pressed='true']:hover,
.gobiz-shop .view-switch button[aria-pressed='true']:focus-visible {
  box-shadow:
    0 0 0 1px rgba(var(--brand-rgb), 0.6),
    0 0 30px -4px rgba(var(--brand-rgb), 0.95);
}

/* HAREKETİ KAPATANA HAREKET GİTMEZ, IŞIK GİDER: `prefers-reduced-motion`
   bir ERİŞİLEBİLİRLİK tercihidir (baş dönmesi, vestibüler rahatsızlık) ve
   yükselme/geçiş onun kapsamında; hâle hareket değil, kalsın — yoksa o
   kullanıcı düğmenin tıklanabilir olduğunu gösteren tek işareti kaybeder. */
@media (prefers-reduced-motion: reduce) {
  .gobiz-shop .filter-head,
  .gobiz-shop .view-switch button,
  .gobiz-shop .tema-dugmesi {
    transition: none;
  }

  .gobiz-shop .filter-head:hover,
  .gobiz-shop .filter-head:focus-visible,
  .gobiz-shop .view-switch button:hover,
  .gobiz-shop .view-switch button:focus-visible,
  .gobiz-shop .tema-dugmesi:hover,
  .gobiz-shop .tema-dugmesi:focus-visible {
    transform: none;
  }
}

/* Panel listenin üstünde durur: ürün kartları onu kesmemeli. */
.gobiz-shop .filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 10px 30px rgba(22, 32, 44, 0.16);
}

.gobiz-shop .filter-panel button {
  font: inherit;
  text-align: left;
  padding: 9px 12px;
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.gobiz-shop .filter-panel button:hover {
  background: var(--bg);
}

.gobiz-shop .filter-panel button[aria-pressed='true'] {
  background: var(--brand-bright);
  color: #0f172a;
}

/* Dar ekranda panel kutuyu taşmasın. */
@media (max-width: 520px) {
  .gobiz-shop .filter-panel {
    min-width: 0;
    width: calc(100vw - 48px);
  }
}

/* Başlık ve görünüm anahtarı AYNI SIRADA (sahip isteği 2026-10-05).
   Anahtar kendi satırındayken başlıkla süzgeçler arasında yarı boş bir
   sıra kalıyordu. Dar ekranda alta sarar. */
.gobiz-shop .catalog-head {
  /* FİLTRELER SEPET'İN YANINDA (sahip 2026-10-14: "bunları sepet
     düğmesinin yanına taşı"): önce `space-between` ile filtreler solda,
     Sepet/görünüm sağda ve arada büyük boşluk vardı. `flex-start` ile
     hepsi bitişik: Güç sor · Ürünler · Motor · Yakıt · Sepet · görünüm. */
  display: flex;
  align-items: center;
  /* HEPSİ SAĞA (sahip 2026-10-14: "hepsini karşıya taşı"): grup soldan
     sağa alındı. */
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Başlık görünmez ama DOM'da ve ekran okuyucuda durur. */
.gobiz-shop .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Süzgeç çubuğu üst sırada: kendi alt boşluğunu taşımaz. */
.gobiz-shop .catalog-head .filter-bar {
  margin-bottom: 0;
}

/* Başlık sırasındaki araçlar: tema ve görünüm anahtarı yan yana. */
.gobiz-shop .head-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* SEPET DÜĞMESİ DE 43px (sahip 2026-10-14): toolbar'ın geri kalanıyla aynı
   yükseklik. `.small` kaldırıldı; base ghost 38px olduğu için min-height
   ile filtre düğmelerine (43px) eşitlenir. */
.gobiz-shop button.sepet-dugme {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
}

.gobiz-shop .tema-dugmesi {
  font: inherit;
  width: 40px;
  height: 40px;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

/* Onay kutusu ve radyo düğmesi temaya uyar: `color-scheme` kontrolün
   zeminini, `accent-color` seçili işaretini verir. İkisi olmadan koyu
   temada açık gri daireler çıkıyordu. */
.gobiz-shop input[type='checkbox'],
.gobiz-shop input[type='radio'] {
  accent-color: var(--brand);
}

/* DAR PENCEREDE TEK SIRA (sahip 2026-10-07: "tek sıraya sığması için
   düğmeleri küçültmemiz gereken px nedir").

   ÖLÇÜLDÜ — çubuğun ihtiyacı üç adımda düştü: ✕ ve ▾ dururken 426 px
   (520 px pencerede bile kırılıyordu), ✕ kalkınca 378, ▾ da kalkınca 332.
   Buradaki daraltma o 332'yi veren son parçadır: çip yan boşluğu 14→8,
   görünüm düğmeleri 40/36→32, boşluklar 8→6 (toplam ≈66 px).

   Sonuç: 390 px'e kadar altı kontrol aynı sırada. 360 px'te iki sıraya
   düşer ve orada bırakılıyor — daha ileri gitmek çiplerin yazısını atmak,
   yani ziyaretçinin neyi seçtiğini gizlemek olurdu. */
@media (max-width: 620px) {
  .gobiz-shop .filter-head {
    padding: 8px 8px;
    gap: 6px;
  }

  .gobiz-shop .filter-bar {
    gap: 6px;
  }

  .gobiz-shop .catalog-head {
    gap: 8px;
  }

  .gobiz-shop .head-tools {
    gap: 6px;
  }

  /* Dar ekranda yalnız İKON düğmeler (görünüm) küçülür; Sepet metin
     düğmesi ("Sepet (14)") içeriği kadar kalır — 32px'e sıkıştırmak onu
     keserdi. Tema düğmesi kaldırıldığı için artık burada da yok. */
  .gobiz-shop .head-tools .view-switch button {
    width: 34px;
    height: 34px;
  }
}

/* SATIN AL — DAVET NEFESİ (sahip 2026-10-07: "kuryede fotoğraf çek
   düğmesinde nefes alan neon ışık dalgası veren bir yapı kurmuştuk, onu
   buna uygular mısın").

   KAYNAK: kurye `web/src/index.css` → `fx-nefes` + `fx-nefes-halka`. Oradaki
   kural sadece görüntü değil bir KARAR: "animate-pulse KULLANILMADI, bu
   uygulamada nabız = ACİL okunur; nefes 2 kez atar ve durur". Aynısı burada
   da geçerli ve bir sebebi daha var — ekranda 185 kart var (ölçüldü), hepsi
   sürekli atsaydı sayfa yanıp sönerdi ve davet uyarıya dönerdi.

   Bu yüzden nefes SÜREKLİ DEĞİL: kart görüş alanına girince iki kez atar,
   sonra tamamen durur (sınıfı JS kaldırır). Davetin ne zaman geleceğine
   ziyaretçinin gözü karar verir.

   DALGA `scale` İLE DEĞİL `box-shadow` İLE: kurye'deki halka kare bir simge
   düğmesinin etrafındaydı; buradaki düğme geniş bir hap, onu büyütmek
   ışığı yanlardan taşırıp ortada eziyordu. Yayılan gölge şeklin kendi
   konturunu takip eder. */
@keyframes satin-al-nefes {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes satin-al-dalga {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0.75);
  }

  70% {
    box-shadow: 0 0 0 12px rgba(var(--brand-rgb), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0);
  }
}

/* Duran hâl: çiplerle aynı dil — soluk ışık "burası tıklanır" der. */
.gobiz-shop .satin-al {
  box-shadow: 0 0 16px -6px rgba(var(--brand-rgb), 0.85);
  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
}

.gobiz-shop .satin-al:hover,
.gobiz-shop .satin-al:focus-visible {
  box-shadow: 0 0 24px -4px rgba(var(--brand-rgb), 1);
  transform: translateY(-1px);
}

.gobiz-shop .satin-al:active {
  transform: translateY(0);
}

.gobiz-shop .satin-al.nefes {
  animation:
    satin-al-nefes 0.9s ease-in-out 2,
    satin-al-dalga 0.9s ease-out 2;
}

/* Hareket kısıtında davet HİÇ çalışmaz: nefes de dalga da harekettir ve
   duran ışık zaten yerinde duruyor. */
@media (prefers-reduced-motion: reduce) {
  .gobiz-shop .satin-al,
  .gobiz-shop .satin-al.nefes {
    animation: none;
    transition: none;
  }

  .gobiz-shop .satin-al:hover,
  .gobiz-shop .satin-al:focus-visible {
    transform: none;
  }
}

/* ÜRÜN EKRANININ ÜSTÜNDEKİ KART — ortada ve ölçülü (sahip 2026-10-07:
   "ortada, abartılı değil, küçük değil, tam okunabilir şık bir kart").

   Genişlik sınırı fotoğraf için: kart 4/3 oranını koruyor ve sınırsız
   bırakılınca 900 px'lik ekranda fotoğraf 860×645'e çıkıp sayfayı tek
   başına dolduruyordu. 520 px'te fotoğraf ~500×375 kalıyor — ürünü
   gösterecek kadar büyük, seçimleri ekrandan itmeyecek kadar küçük.
   Dar ekranda sınır zaten devreye girmez. */
.gobiz-shop .product-detay {
  max-width: 520px;
  /* Alt boşluk 16 → 4 (sahip 2026-10-07: "aralık yine de fazla kalmış").
     Kart ile teknik blok arasındaki toplam aralık üç yerden geliyordu —
     kartın payı, başlığın kutusu ve ızgaranın kendi üst dolgusu;
     ölçülüp üçü birden kısıldı (50 → 36 px). */
  margin: 0 auto 4px;
}

/* LİSTEDE HÜCRELER YANAŞIK, DÜĞME ONLARIN HİZASINDA (sahip 2026-10-07:
   "listede motor, yakıt, amper ve gerilimi yanaştır; Satın Al'ı şu anda
   gerilimin olduğu yere koy, kartın boyu kısalsın").

   Önceki yerleşimde gövde tek sütundu: başlık, hücre satırı, altında da
   kendi satırında düğme — yani kart üç kat yüksekti. Hücreler de
   `auto-fit` ile satıra YAYILIYORDU, aralarında gereksiz boşluk kalıyordu.

   Şimdi gövde iki sütunlu bir ızgara: marka ve güç satırı tam genişlikte,
   altındaki sırayı hücreler ile düğme PAYLAŞIYOR. Hücreler kendi
   genişliklerinde yan yana (yayılma yok), düğme sıranın sağ ucunda —
   yani gerilimin bittiği yerde.

   Yalnız SATIR yerleşiminde geçerli: ızgara kartında düğme kendi satırını
   korur, orada genişlik zaten dar. */
@media (min-width: 640px) {
  .gobiz-shop .list-rows .product-body {
    display: grid;
    grid-template-columns: 1fr auto;
    /* DÜĞME SÜTUNU SATIRIN TAMAMINI KAPLAR (sahip 2026-10-07: "burada
           gereksiz kartı uzatıyor").
    
           Alt alta dizilen iki düğme (34+8+34 = 76 px) yalnız hücre sırasını
           paylaşınca o sıra 76 pxe çıkıyor ve satır 136 → 170 oluyordu.
           Sütun üç sıranın hepsine yayılınca yığın zaten var olan boşluğa
           oturuyor: satırın boyunu fotoğraf (132 px) belirlemeye devam
           ediyor, düğmeler onu uzatmıyor. */
        grid-template-areas:
          'listprice foot'
          'model foot'
          'brand foot'
          'specs foot';
    align-items: end;
    column-gap: 14px;
  }

  .gobiz-shop .list-rows .product-body .brand {
    grid-area: brand;
  }

  .gobiz-shop .list-rows .product-body .model {
    grid-area: model;
  }

  /* LİSTE GÖRÜNÜMÜ AYNI ŞEKLİ TAŞIR (sahip 2026-10-08: "liste görünümde
     de bu şekli koruyacağız, birbiri ile tutarlı olacak"). */
  .gobiz-shop .list-rows .product-body .listprice {
    grid-area: listprice;
  }

  /* Hücreler YANAŞIK: `auto-fit` sütunları satırı dolduruyordu, burada
     her hücre kendi genişliği kadar yer kaplar. */
  .gobiz-shop .list-rows .specs {
    grid-area: specs;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 0;
  }

  .gobiz-shop .list-rows .product-foot {
    grid-area: foot;
    margin-top: 0;
    padding-top: 10px;
  }
  /* Satırda alt alta: sağdaki sütunda iki düğme, satır uzamıyor. */
  /* YIĞIN AŞAĞIYA HİZALI (sahip 2026-10-07: "gereksiz bir bozulma oldu").
     Dikeyde ortalayınca iki düğme çizginin iki yanına düşüyor, biri
     künyenin biri hücrelerin hizasında kalıyordu — satır ikiye bölünmüş
     gibi duruyor. Aşağı hizalanınca ikisi de çizginin altında, hücrelerle
     aynı bölgede duruyor ve satırın boyu yine fotoğraftan geliyor. */
  .gobiz-shop .list-rows .product-foot {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    /* KUTU ÜÇ SIRAYA YAYILMALI: gövde ızgarası `align-items: end` ile
       hizalandığı için düğme kutusu kendi boyunda kalıyor ve içindeki
       hizalama hiçbir şey yapmıyordu (ölçüldü: Detay 47 px, çizgi 77 px —
       yani yığın hâlâ çizginin üstündeydi). */
    align-self: stretch;
    gap: 8px;
    padding-top: 0;
  }

}

/* FARE KÜÇÜK, PARMAK BÜYÜK İSTER (sahip sorusu 2026-10-07: "düğmeyi
   küçültmek hatam mı oldu, çok mu küçülttük").

   32 px masaüstünde doğru ölçü — kartın yazısı 13, etiketi 10 px. Ama
   dokunmatikte önerilen hedef 44 px ve 32 pxlik bir düğmeye parmakla
   basmak ıskalamak demek. Ölçüyü ekrana göre ayırmak, ikisinden birini
   feda etmekten iyi: `hover: none` + `pointer: coarse` tam olarak
   "fare yok, parmak var" demektir. */
@media (hover: none) and (pointer: coarse) {
  .gobiz-shop button.primary,
  .gobiz-shop button.ghost,
  .gobiz-shop a.primary,
  .gobiz-shop a.ghost,
  .gobiz-shop button.primary.small,
  .gobiz-shop button.ghost.small {
    min-height: 44px;
    padding: 10px 14px;
  }
}

/* TEKNİK BİLGİLER — ürün ekranındaki ayrıntı listesi (sahip 2026-10-07:
   "detay demek ürün hakkında ayrıntılı bilgilerin olduğu yer demek").
   Kart hücreleriyle aynı dil: etiket üstte küçük, değer altında. Geniş
   ekranda üç sütun, dar ekranda kendiliğinden ikiye ve teke iner. */
/* TEKNİK BİLGİLER DE ORTALI (sahip 2026-10-17 "teknik bilgileri de aynı
   şekilde düzenleyelim"): üstteki teknik özellikler ızgarasıyla tutarlı.
   `.datasheet` `.product-detay`ın KARDEŞİdir (içinde değil), bu yüzden
   ortalama için ayrı kural gerekti. */
.gobiz-shop .datasheet .spec-cell {
  text-align: center;
}

.gobiz-shop .datasheet {
  display: grid;
  /* MASAÜSTÜNDE 4 SÜTUN, duyarlı: auto-fit ≥150px sütun verir (geniş
     ekranda 4), değere yetecek genişlikte olduğu için uzun değerler sarmaz.
     Sabit 4 sütun mobilde hücreyi ~80px'e düşürüp "dinlenme 6/1 saat" gibi
     değerleri ikinci satıra taşıyordu (sahip "bir yanlışlık var" dedi). */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 14px;
  /* Üst pay 8 → 4 ve çizginin altındaki dolgu 10 → 8: başlık, ayraç
     çizgisi ve ilk etiket arasındaki üç boşluk toplanınca blok kartın
     devamı değil ayrı bir ekran gibi başlıyordu. */
  margin: 4px 0 14px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
/* MOBİLDE KISA ETİKET (sahip 2026-10-17 "yakıt tüketimi yazısından tüketim
   kelimesini çıkartalım görüntüden" + "mobil için"): satır hem tam hem kısa
   etiketi taşır, masaüstünde TAM ("Yakıt tüketimi · %100 (L/sa)") görünür.
   labelMobil olmayan satırda hiç span yoktur, tek metin çizilir. */
.gobiz-shop .datasheet .ds-kisa {
  display: none;
}
/* MOBİLDE 3 SÜTUN (sahip 2026-10-17 "3 sıraya sığmıyor mu"): ~470px ve
   üstünde bütün DEĞERLER tek satıra sığar (yalnız uzun ETİKETLER iki satır).
   Çok dar telefonda (≤~430px) birkaç uzun değer sarar; orada 2 sütun daha
   rahattı ama sahip 3 istedi. Masaüstünde auto-fit 4 sütun verir. */
@media (max-width: 520px) {
  .gobiz-shop .datasheet {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Mobilde kısa etiket: "Yakıt · %100 (L/sa)" (tam metin gizlenir). */
  .gobiz-shop .datasheet .ds-tam {
    display: none;
  }
  .gobiz-shop .datasheet .ds-kisa {
    display: inline;
  }
}

/* KARTIN KAPISI — fotoğraf ve künye ürün ekranını açar ("Detay" düğmesi
   2026-10-07'de kalktı; iki düğme aynı ekranı açıyordu). İşaret imleçte
   ve odak halkasında: tıklanabilir olduğu görünmeli. */
.gobiz-shop .kapi {
  cursor: pointer;
}

.gobiz-shop .kapi:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* BELGELER — föy ve kılavuz bağlantıları (2026-10-07).

   SATIR DEĞİL ÇİP: ürüne göre bir ile beş arasında değişiyorlar ve alt
   alta liste hâlinde her biri tam satır kaplayıp ekranı uzatıyordu.
   Ölçü düğmelerle aynı (34 px, 14/600), dokunmatikte 44 — aynı ekranda
   iki farklı tıklama hedefi boyu olmasın. */
.gobiz-shop .belgeler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* ALT PAY TEKNİK IZGARAYLA AYNI (sahip 2026-10-07: "teknik föy kutusu
     eklentiler yazısına çok yakın, bitişik"). Kutunun alt payı HİÇ yoktu;
     ölçüldü: belgelerin altı ile "Eklentiler" başlığının üstü tam 0 pxte,
     yani değiyorlardı. 14, teknik ızgaranın kendi alt payı. */
  margin: 8px 0 14px;
}

.gobiz-shop .belge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.gobiz-shop .belge:hover,
.gobiz-shop .belge:focus-visible {
  border-color: rgba(var(--brand-rgb), 0.55);
}

@media (hover: none) and (pointer: coarse) {
  .gobiz-shop .belge {
    min-height: 44px;
  }
}

/* HIZLI ARAMA KUTUSU — süzgeç sırasının başında, kalan yeri doldurur.

   Ölçüldü (2026-10-08): süzgeçler 517 pxte bitiyor, tema ve görünüm
   düğmeleri 868'de başlıyordu; aradaki 351 px boştu. Kutu `flex: 1`
   olduğu için o boşluğu dolduruyor ve dar pencerede sıra kendiliğinden
   alt satıra geçiyor (`.filter-bar` zaten sarmalı). */
/* ARAMA KUTUSU MOTOR DÜĞMESİ ÇAPINDA (sahip 2026-10-14: "içerisine Güç sor
   yazalım, boyunu da motor düğmesi çapına getirelim"). Önce `flex:1` ile
   bütün boşluğu dolduruyordu; artık süzgeç düğmeleriyle aynı ailede
   kompakt bir kutu — aynı yükseklik (`.filter-head` padding + min-height)
   ve köşe, genişlik "Güç sor"a yetecek kadar. */
.gobiz-shop .filter-bar .arama {
  flex: 0 0 auto;
  /* "Güç kVA" YAZISINA GÖRE (sahip 2026-10-30: "kVA ekini ekleyelim"):
     kutu 72px, yan dolgu 8px ki "Güç kVA" sığsın (Kiralık/promo ile aynı).
     Yükseklik diğerleriyle aynı (34px). */
  width: 72px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
}

.gobiz-shop .filter-bar .arama::placeholder {
  color: var(--muted);
}

.gobiz-shop .filter-bar .arama:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* KUTUNUN CEVABI — listenin üstünde, marka renginde ince bir şerit.
   Boşken `hidden`, yani yer kaplamıyor. */
.gobiz-shop .arama-cevap {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid rgba(var(--brand-rgb), 0.4);
  border-radius: 10px;
  background: rgba(var(--brand-rgb), 0.06);
  font-size: 14px;
}

.gobiz-shop .arama-cevap p {
  margin: 0;
}

/* SEPET BALONU — tıklanan düğmenin yanında (sahip isteği 2026-10-08:
   "sepete eklenen tıklanan yerin yanında balon olarak çıksa, müşteri
   sepetini kontrol edebilse").

   Sayfaya göre konumlanır (`absolute` + sayfa koordinatı), çünkü düğme
   listenin içinde ve kaydırmayla birlikte hareket eder; kaydırma zaten
   balonu kapatıyor. Dar ekranda satır içi stil onu alt şeride çevirir. */
.gobiz-shop .sepet-balon {
  position: absolute;
  z-index: 60;
  width: 280px;
  max-width: calc(100vw - 16px);
  /* ZEMİN `--card`TAN GELİR (sahip 2026-10-08: "balonun kartı çok saydam,
     yazılar okunmuyor"). Ölçüldü: `--surface-1` diye bir değişken bu
     yüzeyde YOK — kural çözülmeyince zemin `rgba(0,0,0,0)` kalıyordu,
     yani kutu düpedüz camdı ve yazı listenin üstüne düşüyordu. Panelin
     token adı başka ("--surface-1" orada var), vitrininki `--card`. */
  background: var(--card);
  border: 1px solid var(--brand);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Harita balonundaki gölgenin aynısı: kart zemininden ayrışsın. */
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
}

.gobiz-shop .sepet-balon .balon-baslik {
  font-weight: 700;
  font-size: 14px;
}

.gobiz-shop .sepet-balon .balon-satir {
  font-size: 13px;
  font-weight: 600;
}

.gobiz-shop .sepet-balon .balon-ozet {
  font-size: 12px;
  color: var(--muted);
}

.gobiz-shop .sepet-balon .row {
  margin-top: 2px;
}

/* KAMPANYA BANDI — mağazanın tepesindeki görsel/video (sahip 2026-10-08).

   Oran SABİT, yükseklik serbest değil: kampanya görseli her ölçüde
   gelebiliyor ve bant her açılışta başka boyda olursa altındaki liste
   zıplıyor. 16/5 geniş bir duyuru şeridi; `cover` ile görsel kırpılır,
   `max-height` ile de büyük ekranda sayfanın yarısını kaplamaz. */
.gobiz-shop .kampanya {
  position: relative;
  /* BANT KARTIN TEPESİNE OTURUR (sahip 2026-10-08: "mağaza videosunu
     yukarıya taşırsak ilk sıra ürünler tek ekrana sığacak gibi").
     Ölçüldü: 1366×768'de ilk ürün sırası ekranın 8 px altında bitiyordu
     ve bandın üstünde 16 px kart dolgusu duruyordu. Eksi kenar boşluğu
     o dolguyu bandın altına veriyor; üst köşeler kartın yarıçapını alır
     ki bant kartın kendi tepesiymiş gibi dursun. */
  margin: -16px -16px 10px;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 12px 12px;
  overflow: hidden;
  background: var(--soft);
}

.gobiz-shop .kampanya-medya {
  display: block;
  width: 100%;
  /* ORAN 16/5 → 16/6 (sahip 2026-10-08: "video ekranını taşıyabildiğin
     kadar üst sınıra taşı, büyüt"). Kartın eni 748 pxte sabit, yani
     tavanı yükseltmek tek başına hiçbir şey yapmıyordu: bandın boyunu
     ORAN belirliyor (748×5/16 = 234). Daha yüksek oran 748×6/16 = 280
     veriyor; tavan da 320'ye çıkarıldı ki yeni oran hemen kırpılmasın.
     Kısa pencerede zaten ölçüm devreye girip bandı ilk ürün sırasına
     yer kalacak kadar kısaltıyor. */
  aspect-ratio: 16 / 6;
  /* TAVAN SABİT 260 px — ve bu bir GERİ DÖNÜŞ (sahip 2026-10-08: "sana
     önceki attığım resimdeki gibi yerleştirsen tam oturuyordu").
     Arada iki şey denendi ve ikisi de sahibin bakışıyla elendi: `22vh`
     ilk ürün sırasını sığdırıyor ama duyuruyu küçültüyordu, üst barın
     bandın üstüne binmesi ise bandın tepesini kesiyordu. Beğenilen hâl
     bu: bant kartın tepesine oturur ve bar onun üstünde değil üstündeki
     sırada durur.

     TAVAN TEK YERDE: ölçümü yapan kod da bu değişkeni okur. Sayıyı iki
     yere yazmak bir gün ikisinin ayrışması demekti — nitekim ayrıştı:
     CSS 320'ye çıkarıldığında koddaki 260 unutuldu ve bant geniş ekranda
     280 yerine 260'ta kaldı. */
  --bant-tavan: 320px;
  max-height: var(--bant-tavan);
  object-fit: cover;
}

.gobiz-shop .kampanya-sarmal {
  position: relative;
}

/* Ses düğmesi videonun ÜSTÜNDE: bant tıklanabilir olabildiği için
   (bağlantılı kampanya) kendi tıklamasını yutar. */
/* SES DÜĞMESİ: KUTUSUZ, YALNIZ SİMGE (sahip 2026-10-08: "yazıyı
   kaldıralım ikon yeter, ikonun etrafındaki siyah perdeyi de kaldır").
   Zemin yok; simge her görselin üstünde okunsun diye gölgelenir —
   kuryenin harita düğmelerindeki desenin aynısı. Dokunma hedefi 40 px
   kalır: görünen şey küçülürken basılacak alan küçülmemeli. */
.gobiz-shop .kampanya-ses {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 70%));
  cursor: pointer;
}

.gobiz-shop .kampanya-ses:hover {
  background: none;
  color: #fff;
}

.gobiz-shop .kampanya-ses:focus-visible {
  border-radius: 8px;
}

.gobiz-shop .kampanya-baglanti {
  display: block;
}

.gobiz-shop .kampanya-noktalar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.gobiz-shop .kampanya-noktalar .nokta {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 60%);
  background: rgb(0 0 0 / 35%);
  cursor: pointer;
}

.gobiz-shop .kampanya-noktalar .nokta.on {
  background: var(--brand);
  border-color: var(--brand);
}


/* SEPET SATIRI — LİSTE GÖRÜNÜMÜ (sahip 2026-10-08: "bunu da liste
   görünümle yapalım, kart olsun, etrafı yeşil neon ışıklı").

   Izgara hâli üç sütuna yayılıyor ve dar pencerede üçüncü kart sağdan
   kesiliyordu (sahip ekran görüntüsü). Satır hâlinde her ürün tam
   genişlikte: solda adı ve eklentileri, sağda adet, tutar ve çıkar. */
.gobiz-shop .sepet-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* SATIR TEK SIRADA KALIR (sahip 2026-10-14: "satırları tek sıraya
   çevirelim"). 28rem'lik dar kartta sarmaması için: nowrap + yalnız model
   adı esner ve gerekirse … ile kısalır (model kodları kısa, nadiren
   kısalır); Adet·input·tutar·Çıkar sabit genişlikte kalır. Dar kontroller
   + küçük boşlukla telefonda da sığar. */
.gobiz-shop .sepet-satir {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 12px;
  background: var(--card);
  border: 1px solid rgba(var(--brand-rgb), 0.18);
}

/* Model dışındaki her şey sabit; yalnız ad esner. */
.gobiz-shop .sepet-satir > * {
  flex: 0 0 auto;
}

.gobiz-shop .sepet-satir .sepet-ad {
  flex: 1 1 0;
  min-width: 0;
}

.gobiz-shop .sepet-satir .model {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tutar sağa yaslanır ve sayılar aynı hizada okunur. */
.gobiz-shop .sepet-satir .sepet-tutar {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* TELEFONDA YİNE SARAR: kart 28rem (448px); viewport bunun altına inince
   tek sıra kontrolleri sıkıştırıp model adını yutuyordu. ~480px altında
   satır sarar, ad tam görünür. Masaüstünde (kart tam 448px) tek sıra. */
@media (max-width: 479px) {
  .gobiz-shop .sepet-satir {
    flex-wrap: wrap;
  }
  .gobiz-shop .sepet-satir .model {
    white-space: normal;
    overflow: visible;
  }
}

/* ADET KUTUSU DÜĞMELERLE AYNI ÖLÇÜDE (sahip 2026-10-14: "buradakileri de
   aynı boyuta getirelim"): genel input dolgusu (10px) kutuyu ~41 pxe
   çıkarıyordu, Çıkar düğmesi ise 34/38. Hepsi 38 px'e indi; genişlik
   satır içi 72px kalır. */
.gobiz-shop .sepet-satir input[type='number'] {
  min-height: 38px;
  padding: 8px;
  font-size: 13px;
  border-radius: 10px;
}

/* SEPET KARTI DİĞER KARTLARLA AYNI ENDE (sahip 2026-10-14: "kartın enini de
   diğer kartlarla aynı tutarlı ölçülere getirelim"): sonuç (.ok-box) ve
   teklif (.quote-box) kartları 28rem; sepet tam genişlikte duruyordu.
   Ortalanır, alt payı `.card`tan gelir; dar satırlar `flex-wrap` ile
   kendiliğinden alt alta geçer. */
.gobiz-shop .sepet-ekran {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

/* BANTLI KART ÜST SINIRA YANAŞIR (sahip 2026-10-08: "taşıyabildiğin kadar
   üst sınıra taşı"). Sınır üst bardır: bandın üstünde kalan 18 pxlik
   sayfa payı bandın işine yaramıyor, çünkü kartın tepesi zaten görselin
   kendisi. 14'ü geri alınır, 4'ü kalır — sıfır yapmak kartı barın altına
   yapıştırmak olurdu.

   Yalnız BANTLI kartta: ürün ekranı ve ödeme formu aynı `.card`ı
   kullanıyor ve onların tepesinde görsel değil yazı var. */
.gobiz-shop .card:has(.kampanya) {
  margin-top: -14px;
}

/* Bant varsa bar payı bırakılmaz: görsel en tepeden başlar. */
.gobiz-shop.kampanyali .view {
  padding-top: 18px;
}

/* YÜZEN SEPET BALONU + AÇILIR KART (sahip 2026-10-14: "sepeti balon yapsak
   yüzer... tıklandığında açılır karttan kontrol edilir, boşa basınca kapanır,
   sepet boşaldığında kaybolur"). Sepet araç çubuğundan kalktı; mobilde yer
   açıldı. Balon sağ altta telefon/destek balonunun biraz üstünde durur,
   müşteri sürükleyip taşıyabilir. */
.gobiz-shop .sepet-balon-dugme {
  position: fixed;
  right: 20px;
  bottom: 90px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: none;
  background: var(--brand-bright);
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 6px 20px -4px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(var(--brand-rgb), 0.4);
  /* Sürükleme için: dokunurken sayfa kaymasın. */
  touch-action: none;
}
.gobiz-shop .sepet-balon-dugme[hidden] {
  display: none;
}
.gobiz-shop .sepet-balon-sayi {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Açılır sepet: perde (dışına tıkla = kapan) + ortalanmış kart. */
.gobiz-shop .sepet-acilir-katman {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  /* ÜSTTEN HİZALI, ORTALANMAZ (sahip 2026-10-14: "çıkart'a basınca alttaki
     ürün çıkarılanın koordinatına otursun"). Ortalıyken bir satır silinince
     kart küçülüp yeniden ortalanıyor ve AŞAĞI kayıyordu; üstten hizalı
     olunca kartın tepesi sabit kalır, alttaki satır silinenin yerine çıkar. */
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px 16px;
  box-sizing: border-box;
}
.gobiz-shop .sepet-acilir-kart {
  position: relative;
  width: 100%;
  max-width: 28rem;
  /* Üst pay (48px) + alt pay (16px) düşülür ki uzun sepet alta taşmasın. */
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  margin: 0;
}
.gobiz-shop .sepet-acilir-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}