/* PDP renk/kumas katmani (#214).
 *
 * KAPSAM — 01.09.2026'da GENISLETILDI, cunku dosya zaten genislemisti.
 * Basligi 31.08'e kadar "yalniz `.pc-farbstreifen`, tek bir Woo veya Flatsome
 * sinifina dokunmaz" diyordu. Varyant pilotu sirasinda dosyaya Flatsome'in
 * gercek swatch izgarasi ve varyasyon aciklamasi da girdi; baslik ve testi
 * guncellenmedi, test dogru sekilde kirmizi kaldi. Kayit gercege uyduruldu:
 *
 *   1. `.pc-farbstreifen`      — BILGI seridi. Varyasyonsuz uruncte cizilir;
 *                                secici DEGIL, fiyat/stok/sepete yazmaz.
 *   2. `.single-product …`     — varyantli uruncte Flatsome'in KENDI swatch
 *                                izgarasi (`.ux-swatches-attribute-ux_image`)
 *                                ve varyasyon aciklamasi.
 *
 * Ikisi ayni anda gerekli: katalog gecis halinde. 01.09'da olculdu —
 * yayindaki 42 urunun 23'u `variable`, **19'u hala `simple`** ve seridi
 * onlar kullaniyor (`/produkt/vizyon-sofagarnitur/` canlida 69 alan).
 * Simple urun kalmayinca 1. blok olur; o gun SILINIR, oyle birakilmaz.
 *
 * DEGISMEYEN SINIR: her kural `.pc-farbstreifen` veya `.single-product`
 * kokunden baslar — sayfa disina tasmaz. `!important` kullanilmaz.
 * Testi: `tests/e2e/pdp-farbstreifen.spec.ts` bu iki sarti olcer.
 *
 * TOKEN: `--pc-*` degerleri canli `flatsome-child/style.css` icinde
 * `.single-product` kokune tasinmis durumda (30.08.2026'da olculdu), bu yuzden
 * burada yeniden tanimlanmiyor. Tanimsiz kalsa bile kurallar coker degil,
 * yalnizca tarayici varsayilanina duser.
 */

/* ---------------------------------------------------------------------------
 * YESIL YOK — 01.09.2026 (#233), `[M]`: *"bu kisimlardaki yesil rengi kaldir."*
 *
 * Canlida olculdu, uc yerde gorunuyordu:
 *   Farbe & Stoff seridinin kaydirma yolu  `--pc-surface-soft`  #EDF0EC
 *   Lieferzeit kutusu ve Montage satiri    `--pc-surface-soft`  #EDF0EC
 *   Lieferzeit kamyon ikonu, Lieferkosten linki  `--pc-mark`    #5F6F62
 *
 * Yeni renk ICAT EDILMEDI. Paletteki bes yuzeyden dordu yesile caliyor
 * (`soft` `review` `journal` `product`); tek notr olan `--pc-surface-split`
 * (#E9EAEA, R≈G≈B) secildi. Vurgu icin `--pc-mark` yerine `--pc-ink`.
 *
 * KAPSAM yalniz urun ozet kolonu. `--pc-mark` marka yesilidir ve sitede 64
 * yerde kullanilir (link hover, odak halkasi, eyebrow, SSS isareti); token'in
 * KENDISI degistirilmedi — degistirmek butun siteyi boyardi.
 * ------------------------------------------------------------------------- */

.pc-farbstreifen {
  margin: var(--pc-space-lg) 0 0;
}

.pc-farbstreifen__kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .6rem;
  margin-bottom: .6rem;
}

.pc-farbstreifen__titel {
  font-size: var(--pc-text-label);
  letter-spacing: var(--pc-tracking-label);
  text-transform: uppercase;
  font-weight: var(--pc-weight-semibold);
  color: var(--pc-ink);
}

.pc-farbstreifen__zahl {
  font-size: var(--pc-text-caption);
  color: var(--pc-quiet);
}

/* Tek satir, yatay kaydirma — tasarim sartnamesindeki desen
 * (`tasarim/sayfalar/urun-sablon.html`, "FARBE — TEK SATIR KAYDIRMALI SERIT").
 * 69 kare izgaraya yayilsa karar kolonunu tamamen yer, fiyat ekranin disina
 * duserdi; 21.08.2026'da olculup serit lehine karar verildi.
 *
 * `min-width: 0` pazarliksiz: serit Flatsome'in flex kolonunun icinde duruyor
 * ve o kolon varsayilan `min-width: auto` ile icerigi kadar genisler —
 * `overflow-x` devreye girmeden once sayfa yatayda tasardi. */
.pc-farbstreifen__band {
  display: flex;
  gap: var(--pc-rail-gap-swatch);
  margin: 0;
  padding: 0 0 .75rem;
  list-style: none;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--pc-quiet) var(--pc-surface-split);   /* Firefox */
}

/* CUBUK BILEREK GORUNUR VE KALICI.
 * Ilk surumde `height: 4px` ve tirnak rengi `--pc-surface-soft` (#EDF0EC)
 * secilmisti: neredeyse beyaz zeminde beyaz cubuk. Ustune macOS kaydirma
 * cubugunu varsayilan olarak gizliyor — 30.08.2026'da canlida olculdu,
 * `offsetHeight - clientHeight = 0`, yani hicbir yer kaplamiyordu.
 * Sonucu: 69 karenin 61'i erisilebilir ama gorunur tek bir isaret yok;
 * kullanici seridi "kaydirilamaz" sandi.
 * `::-webkit-scrollbar` bicimlendirmek cubugu klasik (yer kaplayan) hale
 * getirir; tirnak `--pc-quiet` ile metin grisinde, yani gercekten gorunur. */
.pc-farbstreifen__band::-webkit-scrollbar {
  height: 8px;
}

.pc-farbstreifen__band::-webkit-scrollbar-track {
  background: var(--pc-surface-split);
  border-radius: var(--pc-radius-pill);
}

.pc-farbstreifen__band::-webkit-scrollbar-thumb {
  background: var(--pc-quiet);
  border-radius: var(--pc-radius-pill);
}

.pc-farbstreifen__band::-webkit-scrollbar-thumb:hover {
  background: var(--pc-ink);
}

/* Secici bilerek iki sinifli (0,2,0): Flatsome `.entry-summary ul li` ile
 * `margin-left: 1.3em` veriyor (`flatsome.css`) ve serit tam da o kapsamda
 * duruyor. Tek sinifli `.pc-farbstreifen__feld` (0,1,0) o kurala yeniliyordu —
 * 30.08.2026'da gercek canli markup uzerinde olculdu: kareler arasi bosluk
 * 14,4 px yerine 35,2 px cikti. `!important` ile degil, kendi kapsamimda
 * ozgullugu artirarak kazaniyoruz; kaynak sirasindan bagimsiz calisir. */
.pc-farbstreifen__band > .pc-farbstreifen__feld {
  flex: none;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

.pc-farbstreifen__kachel {
  position: relative;
  display: block;
  width: calc(var(--pc-touch) * 1.4);
  height: calc(var(--pc-touch) * 1.4);
  border-radius: var(--pc-radius-sm);
  overflow: hidden;
}

/* CERCEVE AYRI BIR KATMAN, cunku `inset` golge elemanin ARKA PLANINA cizilir
 * ve icindeki `<img>` %100 doldurup ustunu ortuyor. Ilk surumde cerceve
 * dogrudan karenin uzerindeydi: hesaplanan stil hover'da degisiyordu ama
 * gozle hicbir sey olmuyordu — 30.08.2026'da canlida yakinlastirilmis ekran
 * goruntusuyle dogrulandi, yalniz yuvarlatilmis kose piksellerinde iz vardi.
 * `::after` goruntuden SONRA boyanir, bu yuzden gorunur.
 * `pointer-events: none` — katman fareyi yutup `title` ipucunu bozmasin. */
.pc-farbstreifen__kachel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 var(--pc-border) var(--pc-line);
  transition: box-shadow var(--pc-dur-base) var(--pc-ease);
}

/* Kare tiklanabilir DEGIL. Hover cercevesi yine de var: `title` ipucu yalniz
 * uzerine gelince cikiyor, cerceve "uzerine gel, adi yazar" isaretidir. */
.pc-farbstreifen__kachel:hover::after {
  box-shadow: inset 0 0 0 var(--pc-focus-width) var(--pc-ink);
}

.pc-farbstreifen__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kartelasi henuz cekilmemis terim (30.08.2026: 69'da 1 tane). Bos kare
 * yerine adi yaziyor — musteri rengi kategori suzgecinde goruyor, urunde
 * yok sanmasin. */
.pc-farbstreifen__kachel--text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  text-align: center;
  font-size: var(--pc-text-hint);
  line-height: var(--pc-leading-snug);
  color: var(--pc-quiet);
}

.pc-farbstreifen__hilfe {
  margin: .6rem 0 0;
  font-size: var(--pc-text-caption);
  line-height: var(--pc-leading-relaxed);
  color: var(--pc-quiet);
}

/* Renk adi ekranda YOK, ekran okuyucuda VAR. Gorsel sadelesti,
 * erisilebilirlik sadelesmedi. */
.pc-farbstreifen__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Woo + Flatsome varyasyon secicisi — ayni tek satir kaydirmali desen.
 *
 * 69 varyasyon acilinca Flatsome `.ux-swatches`i 5 kolonlu grid olarak basip
 * karar kolonunu 1.440 px uzatiyor. Varyasyonsuz urundeki kanitlanmis serit
 * davranisini seciciye de tasiyoruz: tek satir, gorunur kaydirma cubugu,
 * 44 px'in ustunde dokunma hedefi ve sayfa yerine yalniz seritte yatay kayma.
 * Secim motoruna/HTML'e dokunulmaz; yalniz yerlesim degisir. */
.single-product .variations_form .ux-swatches-attribute-ux_image {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--pc-rail-gap-swatch);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: .125rem .125rem .75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--pc-quiet) var(--pc-surface-split);
}

.single-product .variations_form .ux-swatches-attribute-ux_image::-webkit-scrollbar {
  height: 8px;
}

.single-product .variations_form .ux-swatches-attribute-ux_image::-webkit-scrollbar-track {
  background: var(--pc-surface-split);
  border-radius: var(--pc-radius-pill);
}

.single-product .variations_form .ux-swatches-attribute-ux_image::-webkit-scrollbar-thumb {
  background: var(--pc-quiet);
  border-radius: var(--pc-radius-pill);
}

.single-product .variations_form .ux-swatches-attribute-ux_image::-webkit-scrollbar-thumb:hover {
  background: var(--pc-ink);
}

/* Serit sag kenardan YARIM kare keserek bitiyordu — kaza gibi duruyordu.
 * Cozum sabit kare degil, kaba TAM OTURAN kare: gorunur genislige tam
 * `--pc-serit-adet` kare sigar, artan piksel karelere paylastirilir. Yuzdeli
 * `flex-basis` kabin IC genisligine gore cozuldugu icin serit her ekranda
 * kesiksiz biter; medya sorgusu yalnizca ADEDI degistirir, olcuyu degil.
 *
 * Neden solma maskesi degil: bu kareler urunun GERCEK kumas renkleri.
 * Kenari soldurmak renk ornegini yanlis gosterir (`AGENTS.md`). Kesigi
 * gizlemek yerine kesik ortadan kaldirildi.
 *
 * Adetler 02.09.2026'da canlida olculerek secildi (#233). Kabin ic genisligi
 * 320px (850px ekran — ozet kolonu en dar) ile 554px (1440px) arasinda
 * degisiyor; uc kademe her olculen genislikte hem TAM oturuyor hem 44px
 * dokunma hedefinin ustunde kaliyor:
 *     1440px → 67px    1200px → 54px    1024px → 53px
 *      850px → 53px     390px → 60px     360px → 54px
 * Onceki sabit 61,6px kare hicbir genislikte tam oturmuyordu (7,44 kare).
 *
 * `aspect-ratio: 1` + `height: auto`: genislik akiskan oldugu icin yukseklik
 * artik sabit yazilamaz. Ic `img` yine `height: 100%` ile doluyor — canlida
 * olculdu, kare 67px iken img de 67px.
 *
 * `min-width` guvenlik agi: hesaplanan kare 44px'in altina duserse TAM
 * OTURMAKTAN vazgecilir, dokunma hedefinden vazgecilmez. */
.single-product .variations_form .ux-swatches-attribute-ux_image > .ux-swatch,
.pc-farbstreifen--waehlbar .pc-farbstreifen__band > .pc-farbstreifen__feld {
  --pc-serit-adet: 5;
  flex: 0 0 calc((100% - (var(--pc-serit-adet) - 1) * var(--pc-rail-gap-swatch)) / var(--pc-serit-adet));
  width: auto;
  height: auto;
  aspect-ratio: 1;
  min-width: var(--pc-touch);
  margin: 0;
  scroll-snap-align: start;
}

@media (min-width: 1024px) {
  .single-product .variations_form .ux-swatches-attribute-ux_image > .ux-swatch,
  .pc-farbstreifen--waehlbar .pc-farbstreifen__band > .pc-farbstreifen__feld {
    --pc-serit-adet: 6;
  }
}

@media (min-width: 1200px) {
  .single-product .variations_form .ux-swatches-attribute-ux_image > .ux-swatch,
  .pc-farbstreifen--waehlbar .pc-farbstreifen__band > .pc-farbstreifen__feld {
    --pc-serit-adet: 7;
  }
}

.single-product .variations_form .ux-swatches-attribute-ux_image > .ux-swatch > img,
.pc-farbstreifen--waehlbar .pc-farbstreifen__feld .pc-farbstreifen__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Secici seritte kutucuk `<label>`, kare olcusu `<li>`den geliyor: label ve
 * gorsel kabi doldurur. Boylece TAM OTURAN kare formulu ikisinde de ayni
 * calisir — 04.09.2026'da once sabit `5.5rem` denendi ve YANLISTI: Roma'nin
 * karesi sabit degil, raya gore hesaplanan bir oran (`--pc-serit-adet`). */
/* Kutucuk secici modda `<label>`dir (gizli radio'yu sarar, klavye ve ekran
 * okuyucu bedava gelir). Temanin `label` ALT MARJI bu yuzden iceri giriyor ve
 * kareyi bozuyordu: `aspect-ratio: 1` marjli icerige YENILIR, kap 61x76
 * oluyordu (04.09.2026, iPhone 14 Pro genisliginde Playwright ile olculdu;
 * ic gorsel 61x61 yani kareydi, bozulan disardaki kaptı).
 *
 * "Eskiden kareydi" tam olarak bu: serit bilgi seridiyken kutucuk `<span>`di
 * ve span'in varsayilan marji yok. */
.pc-farbstreifen--waehlbar .pc-farbstreifen__kachel {
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.pc-farbstreifen--waehlbar .pc-farbstreifen__band > .pc-farbstreifen__feld {
  min-block-size: 0;
}

.pc-farbstreifen--waehlbar .pc-farbstreifen__bild {
  border-radius: var(--pc-radius-sm, 4px);
}

/* Hover: Flatsome'in swatch'indaki ince gri halkanin aynisi. */
.pc-farbstreifen--waehlbar .pc-farbstreifen__kachel:hover .pc-farbstreifen__bild {
  box-shadow: 0 0 0 1px #999;
}

/* Secili ve klavye odagi: Roma'nin `[aria-checked="true"]` gorunumu. */
.pc-farbstreifen--waehlbar .pc-farbstreifen__radio:checked ~ .pc-farbstreifen__bild,
.pc-farbstreifen--waehlbar .pc-farbstreifen__radio:focus-visible ~ .pc-farbstreifen__bild {
  outline: calc(var(--pc-border, 1px) * 2) solid var(--pc-ink, #171817);
  outline-offset: var(--pc-border, 1px);
}

.pc-farbstreifen--waehlbar .pc-farbstreifen__kachel--katalog { outline: 0; }

/* Kartela gorseli olmayan secenekte Woo'nun "Platzhalter" gorselini basmak
 * yerine gercek secenek adini goster. Role=radio ve data-name Flatsome'de
 * kalir; metin hem gorunur hem erisilebilir olur. */
.single-product .variations_form .ux-swatches-attribute-ux_image > .ux-swatch > img.woocommerce-placeholder {
  display: none;
}

.single-product .variations_form .ux-swatches-attribute-ux_image > .ux-swatch > img.woocommerce-placeholder + .ux-swatch__text {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  text-align: center;
  font-size: var(--pc-text-hint);
  line-height: var(--pc-leading-snug);
  color: var(--pc-quiet);
  background: var(--pc-surface-split);
}

.pc-farbwahl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .65rem 1rem;
  margin: 0 0 .75rem;
}

.pc-farbwahl-status {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .45rem;
  margin: 0;
  font-size: .9375rem;
  line-height: var(--pc-leading-snug);
  color: var(--pc-quiet);
}

.pc-farbwahl-status strong {
  font-size: 1rem;
  font-weight: var(--pc-weight-semibold);
  color: var(--pc-ink);
}

.single-product .summary .variations_form .variations th.label > label {
  font-size: .875rem;
  line-height: 1.35;
  letter-spacing: .075em;
}

.pc-farbwahl-status--empty strong {
  font-weight: var(--pc-weight-medium);
  color: var(--pc-quiet);
}

.pc-farbwahl-nav {
  display: flex;
  gap: .4rem;
  margin-inline-start: auto;
}

.pc-farbwahl-nav__button {
  display: inline-flex;
  width: var(--pc-touch);
  height: var(--pc-touch);
  min-width: var(--pc-touch);
  min-height: var(--pc-touch);
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: var(--pc-border) solid var(--pc-line);
  border-radius: var(--pc-radius-pill);
  background: var(--pc-surface);
  color: var(--pc-ink);
  cursor: pointer;
  transition: border-color var(--pc-dur-base) var(--pc-ease),
              color var(--pc-dur-base) var(--pc-ease),
              opacity var(--pc-dur-base) var(--pc-ease);
}

.pc-farbwahl-nav__button:is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--pc-ink);
  color: var(--pc-ink);
}

.pc-farbwahl-nav__button:focus-visible {
  outline: var(--pc-focus-width) solid var(--pc-focus-color);
  outline-offset: var(--pc-focus-offset-sm);
}

.pc-farbwahl-nav__button:disabled {
  opacity: .35;
  cursor: default;
}

.pc-farbwahl-nav__button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

/* Katalog rengi zaten varsayilan secimdir; Woo'nun genel amacli sifirlama
 * baglantisi burada secimi ve teslimat bilgisini bosaltmaktan baska bir ise
 * yaramaz. Gorunur, klavye ve erisilebilirlik agacindan birlikte kaldirilir. */
.single-product .summary .variations_form .variations .reset_variations {
  display: none;
}

/* Secilen varyasyona ait teslimat bilgisi. Veri Woo varyasyon aciklamasindan
 * gelir; bu katman yalniz sunumdur. Uc kolonlu kompozisyon sureyi taranabilir
 * tutar: ikon · etiket · deger. Emoji yerine tek renk cizgi ikon kullanilir. */
.single-product .summary .woocommerce-variation-description {
  margin: 1.25rem 0 0;
}

/* Woo ayni fiyatli varyasyonlarda bos fiyat/uygunluk yuvalarini DOM'da tutar.
 * Bos fiyat yuvasi 16 px satir yuksekligi alip Lieferzeit ile Lieferkosten
 * arasina gorunmez bir bosluk sokuyordu. Yalniz gercekten bos yuvalar duser. */
.single-product .summary .woocommerce-variation-price:empty,
.single-product .summary .woocommerce-variation-availability:empty {
  display: none;
}

/* Bu blogun yuksekligi AYNI ZAMANDA CLS icin ayrilan yerdir — asagidaki
 * `.pc-varyant-onsecili .woocommerce-variation` kurali ayni degiskeni kullanir.
 * Degeri degistirirsen ikisi birden degisir; ikinci bir sayi tutulmaz. */
.single-product .summary {
  --pc-varyant-aciklama-yer: 4rem;
}

.single-product .summary .woocommerce-variation-description .pc-lieferzeit {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  min-height: var(--pc-varyant-aciklama-yer);
  padding: .75rem 0;
  border-block-start: var(--pc-border) solid var(--pc-line);
  border-radius: 0;
  background: transparent;
  color: var(--pc-ink);
}

.pc-lieferzeit__icon {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pc-lieferzeit__icon::before {
  content: "";
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  background: var(--pc-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 10h4l3 3v3h-7zM3 16h2m4 0h7'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 10h4l3 3v3h-7zM3 16h2m4 0h7'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pc-lieferzeit__label,
.pc-lieferkosten__kopf h2 {
  font-family: var(--pc-font-heading);
  font-size: 1rem;
  line-height: var(--pc-leading-snug);
  font-weight: var(--pc-weight-semibold);
  letter-spacing: normal;
  color: var(--pc-ink);
}

.pc-lieferzeit__wert {
  font-size: 1.125rem;
  line-height: var(--pc-leading-snug);
  font-weight: var(--pc-weight-semibold);
  color: var(--pc-ink);
  white-space: nowrap;
}

/* Roma pilotu: canlida onceden tanimli Woo flat-rate ucretlerini, secilen
 * rengin teslimat suresinin hemen altinda taranabilir bir fiyat listesi olarak
 * goster. Bu blok ucret HESAPLAMAZ; checkout'taki Woo yontemlerini aciklar. */
.pc-lieferkosten {
  margin: 0;
  min-height: 4rem;
  padding: 0;
  border-block: var(--pc-border) solid var(--pc-line);
  border-radius: 0;
  background: transparent;
  color: var(--pc-ink);
}

/* Baslik artik <summary> — blok katlanir (eklenti 1.14.0).
 * Isaret dili SSS akordeonuyla ayni: sagda '+', acilinca 45° donup '×' olur. */
.pc-lieferkosten__kopf {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: .75rem;
  min-height: calc(4rem - 2px);
  margin: 0;
  padding: 0;
  cursor: pointer;
  list-style: none;
}

.pc-lieferkosten__kopf::-webkit-details-marker { display: none; }

.pc-lieferkosten__kopf::after {
  content: '+';
  flex: none;
  align-self: center;
  width: 1.5rem;
  font-size: 1.375rem;
  line-height: 1;
  text-align: center;
  color: var(--pc-ink);
  transition: transform .18s ease;
}

.pc-lieferkosten[open] > .pc-lieferkosten__kopf::after { transform: rotate(45deg); }

/* Acikken govde basligin altinda nefes alsin — kapaliyken bu bosluk olusmaz. */
.pc-lieferkosten[open] > .pc-lieferkosten__kopf { margin-block-end: .7rem; }

.pc-lieferkosten__icon {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pc-lieferkosten__icon::before {
  content: "";
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  background: var(--pc-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.121 2.121 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.121 2.121 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pc-lieferkosten__kopf:focus-visible {
  outline: var(--pc-focus-width) solid var(--pc-ink);
  outline-offset: 2px;
}

@media (hover: hover) {
  .pc-lieferkosten__kopf:hover h2 { color: var(--pc-quiet); }
}

.pc-lieferkosten__kopf h2 {
  margin: 0;
}

.pc-lieferkosten__liste {
  margin: 0;
}

.pc-lieferkosten__liste > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .62rem 0;
  border-top: var(--pc-border) solid var(--pc-line);
}

.pc-lieferkosten__liste dt {
  display: flex;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .15rem .45rem;
  font-size: .875rem;
  line-height: var(--pc-leading-snug);
}

.pc-lieferkosten__liste dt strong {
  font-weight: var(--pc-weight-semibold);
  color: var(--pc-ink);
}

.pc-lieferkosten__liste dt span {
  color: var(--pc-quiet);
}

.pc-lieferkosten__liste dd {
  margin: 0;
  font-size: 1rem;
  line-height: var(--pc-leading-snug);
  font-weight: var(--pc-weight-semibold);
  color: var(--pc-ink);
  white-space: nowrap;
}

.pc-lieferkosten__montage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: .25rem 0 0;
  padding: .75rem .8rem;
  border-radius: var(--pc-radius-sm);
  background: var(--pc-surface-split);
  font-size: .875rem;
  line-height: var(--pc-leading-snug);
}

.pc-lieferkosten__montage strong {
  font-size: .9375rem;
  font-weight: var(--pc-weight-semibold);
  white-space: nowrap;
}

.pc-lieferkosten__hinweis {
  margin: .55rem 0 0;
  font-size: var(--pc-text-caption);
  line-height: var(--pc-leading-relaxed);
  color: var(--pc-quiet);
}

.pc-lieferkosten__link {
  display: inline-flex;
  min-height: var(--pc-touch);
  align-items: center;
  gap: .4rem;
  margin-top: .3rem;
  color: var(--pc-ink);
  font-size: .875rem;
  font-weight: var(--pc-weight-semibold);
  text-decoration: none;
}

.pc-lieferkosten__link:is(:hover, :focus-visible) {
  color: var(--pc-ink);
}

.pc-lieferkosten__link:focus-visible {
  outline: var(--pc-focus-width) solid var(--pc-focus-color);
  outline-offset: var(--pc-focus-offset-sm);
}

@media (prefers-reduced-motion: reduce) {
  .pc-farbstreifen__kachel::after,
  .pc-farbwahl-nav__button {
    transition: none;
  }
}


/* ---------------------------------------------------------------------------
 * CLS — varyasyon aciklamasi icin PESIN yer
 *
 * `.woocommerce-variation` sunucudan bos gelir; Woo varsayilan varyasyonu
 * ~1,8 sn'de cozup icine `pc-lieferzeit` blogunu koyar ve kutu 0 -> 64 px
 * sicrar. Olculen bedel: masaustu CLS 0,102 (esik 0,1), mobil 0,0899 — ve
 * sayfanin TEK kayma kaynagi buydu.
 *
 * `pc-varyant-onsecili` sinifini eklenti koyar, YALNIZCA urunun varsayilan
 * varyasyonu varsa. Yani secim gelmeyecek bir uruncte bos serit olusmaz.
 * ------------------------------------------------------------------------- */
/* Child theme bu dosyadan sonra, ayni elemanda `(0,3,0)` ozgullukle
 * `min-block-size: 0` basiyor. Yatay yazimda o bildirim `min-height` ile ayni
 * ekseni yonettigi icin onceki rezervasyonu eziyordu. Iki body sinifini birlikte
 * istemek hem durumu tam tarif eder hem normal oncelikte `(0,4,0)` ile kazanir. */
.single-product.pc-varyant-onsecili .single_variation_wrap > .woocommerce-variation {
  min-block-size: var(--pc-varyant-aciklama-yer);
}

/* Woo blockUI formu kilitlerken inline `position: relative` yazar, acarken eski
 * degeri (`static`) geri yazar. Formun kendi konumu yoksa bu geri yazma, ikinci
 * variation change'in unblock fade-out'uyla yarisir: absolute overlay sayfa
 * kabuguna sicrar ve CLS uretir. Kural formu bastan `relative` yaptigi icin
 * blockUI konuma HIC dokunmaz — geri yazacagi bir deger olusmaz.
 *
 * `!important` YOK, bilerek: 02.09.2026'da canlida A/B ile olculdu (#233).
 *   kural var, !important'li : CLS 0,0068 · blockUI inline position yazmadi
 *   kural var, !important'siz: CLS 0,0067 · blockUI inline position yazmadi
 *   kural yok                : CLS 0,0987 · relative@482ms -> static@1182ms
 * Yani isi yapan kuralin kendisi; `!important` olcumde hicbir sey degistirmiyor.
 * Ezecegi rakip de yok: ne temada ne burada `.variations_form`'a `position`
 * atayan baska bir kural var. Bu dosyanin "!important kullanmaz" sozlesmesi
 * (`pdp-farbstreifen.spec.ts`) bu yuzden gevsetilmedi. */
.single-product.pc-varyant-onsecili form.variations_form {
  position: relative;
}

/* Serit SECICI modda: kutucuk tiklanabilir, secili olan isaretli.
   Katalog rengi ayrica cerceveli — 14 gunluk teslim ondan geliyor. */
.pc-farbstreifen--waehlbar .pc-farbstreifen__kachel { cursor: pointer; }
.pc-farbstreifen__radio {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pc-farbstreifen__kachel--katalog { outline: 2px solid currentColor; outline-offset: 2px; }
.pc-farbstreifen__kachel.is-gewaehlt { box-shadow: 0 0 0 3px #111; }
.pc-farbstreifen__radio:focus-visible + * { outline: 2px solid #111; outline-offset: 2px; }

/* SECICI modda da RAY kalir — sarilan izgara YAPILMAZ.
   04.09.2026'da once izgaraya cevrildi, canlida bakilinca yanlis oldugu
   gorundu: 75 kutucuk 11 satira yayilip sayfayi sisiriyordu. Roma'da renk
   kontrolu tek satirlik kaydirmali ray (ustunde "Ausgewählt: ...", saginda
   ok tuslari) — PDP tek iskelet oldugu icin bazada da oyle durur. */

/* ── Varyasyon fiyati: Lieferzeit satiriyla ayni sutuna otursun ──────────────
 *
 * `Lieferzeit ......... 14 Tage` iki sutunlu bir satir: etiket solda, deger
 * sagda. Fiyat ise sola yaslı duruyordu ve blok dagilmis gorunuyordu
 * (`[M]`, 04.09.2026 — canlida bakildi). Fiyat da saga alinip ayni goz
 * cizgisine getirildi; boylece teslim suresi ve fiyat alt alta ayni sutunda
 * okunuyor. Kural Woo'nun kendi dugumune yaziliyor ve `.single_variation`
 * icinde kaliyor — baska hicbir fiyat gosterimini etkilemez. */
.single_variation .woocommerce-variation-price {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  margin-block-start: var(--pc-space-xs, .5rem);
}

/* Stok satiri: stok TAKIP EDILMIYOR, dolayisiyla adet de vaat edilmez.
 * Veri tarafinda `manage_stock=false` yapildi (04.09.2026) — bu kural yalnizca
 * eski kayitlardan artakalan bir metin sizarsa diye emniyet. */
.single_variation .woocommerce-variation-availability:empty { display: none; }


/* ── Kompozisyon: parca basina adet ─────────────────────────────────────────
 * Parcalar ALT ALTA, her satirin saginda adet secici (`[M]`, 04.09.2026).
 * Renk tek secimdir ve hepsine ayni gider, o yuzden satirda renk YOK.
 *
 * Bicim TEMANIN kendi satir desenidir — `.pc-lieferkosten__liste > div` ve
 * `.pc-lieferzeit` ile ayni: kutu YOK, ustten ince ayirici cizgi, solda ad,
 * sagda deger. Ilk surumde her satir cerceveli bir kutuydu ve sayfanin geri
 * kalanina uymuyordu (`[M]`: "tema ile uyumsuz"). */
.pc-kompo {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Uc sutun: ad + birim fiyat · adet · satir tutari.
 * Ilk surumde fiyat adin yanindaydi ve adet en sagdaydi; satir tutari hic
 * yoktu. `[M]`, 04.09.2026: "fiyat en sonda olmasi daha mantikli, ara toplam
 * gostersin". Konfiguratorlerin standart dizilimi budur — okuma yonu
 * ne aliyorum → kac tane → ne tutuyor. */
.pc-kompo__satir {
  display: grid;
  /* UC sutun: ad + birim fiyat · adet · tutar.
   *
   * Birim fiyat kendi sutununa alinmisti (fiyatlar alt alta hizalansin diye);
   * `[M]` geri aldirdi (04.09.2026): fiyat adin YANINDA kalir. Karsiligi,
   * koltukta adlar farkli genislikte oldugu icin fiyatlarin hizalanmamasi.
   *
   * Tutar sutunu SABIT: esnek birakilinca genis bir tutar (2.158,00 €)
   * adet kontrolunu sola itiyor ve satirlar arasinda kayiyordu. */
  grid-template-columns: minmax(0, 1fr) auto 7rem;
  align-items: center;
  gap: .3rem .8rem;
  padding: .3rem 0;
}

/* Satir arasi AYIRICI CIZGI YOK (`[M]`, 04.09.2026: "cizgiye gerek yok").
 * Zaten hic cizilmiyordu: kural `var(--pc-line)` kullaniyordu ve o degisken
 * temada TANIMSIZ; tanimsiz degiskenli kisayol bastan gecersiz oluyor ve
 * `border` hic uygulanmiyordu. Olu kural kaldirildi ki ileride "cizgi neden
 * gorunmuyor" diye aranmasin. Listeyi yalniz Zwischensumme'nin ustundeki
 * cizgi kapatir — o `--pc-ink-rgb` kullaniyor ve gercekten ciziliyor. */

/* Ad ve birim fiyat AYNI satirda. Alt alta iken her satir ~57px'ti ve
 * bazanin yedi bedeni ~400px yer kapliyordu (`[M]`, 04.09.2026: "bazalarda
 * beden varyantlari cok uzun duruyor"). Yan yana ~40px'e iniyor ve hicbir
 * beden gizlenmiyor — acilir kapak once bunu denemeden eklenmez, cunku
 * gizlenen bedenler tam da en cok satan buyuk olculer olurdu. */
.pc-kompo__ad {
  display: flex;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .05rem .5rem;
  font-size: 1.0625rem;
  line-height: var(--pc-leading-snug);
}

/* `min-width` SARMAYI DETERMINISTIK YAPAR — hizalama yan urun, asil is bu.
 * Yukaridaki duzen `flex-wrap: wrap`e dayaniyor ve sarma karari satir basina
 * veriliyordu: etiket + fiyat kutuya sigiyorsa yan yana, sigmiyorsa alt alta.
 * Etiketler bir–iki karakter farkliysa ayni listede bazi satirlar sariyor,
 * bazilari sarmiyordu. 05.09.2026'da tarayicida olculdu (`[K]` bildirdi):
 *     1180px  tekli baza  1/3 sarmis  — "90 × 190 cm" yan yana kalmis,
 *                                       "100 × 200 cm" ve "120 × 200 cm" altta
 *     1180px  7 bedenli baza  3/7 sarmis
 *     1024px  koltuk  2/3 sarmis — "Sessel" yanda, "2-/3-Sitzer" altta
 * Iki kutuya da taban genislik verilince etiket + fiyat toplami HER satirda
 * ayni olur; liste ya tumuyle yan yana ya tumuyle alt alta gecer. Olculdu:
 * `strong` 7.25rem ile tekli ve 7 bedenli bazada karisik sarma sifirlandi ve
 * fiyat sutunu hizalandi. Koltukta fiyat metinleri de farkli genislikte
 * ("434,00 €" ↔ "1.079,00 €"), o yuzden `__birim`e de taban veriliyor.
 * [M]'in 04.09 karari (ad ve fiyat ayni satirda, yukseklik icin) BOZULMUYOR:
 * genis ekranda satir yine 38px, degisen yalniz sarmanin ne zaman OLDUGU. */
.pc-kompo__ad strong {
  color: var(--pc-ink);
  font-weight: var(--pc-weight-semibold);
  min-width: 7.25rem;
}

.pc-kompo__birim {
  color: var(--pc-quiet);
  font-size: .8125rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 7rem;
}

/* Satir tutari: adet 0 iken BOS kalir. Sifir yazmak "0,00 €" gibi bir fiyat
 * gibi okunuyordu; bos hucre "henuz secilmedi" demenin en sessiz yolu. */
.pc-kompo__tutar {
  color: var(--pc-ink);
  font-size: 1rem;
  font-weight: var(--pc-weight-semibold);
  line-height: var(--pc-leading-snug);
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Adet secici: KUTU YOK, DAIRE YOK.
 *
 * Ilk surum cerceveli bir kapsuldu; tema hicbir yerde boyle bir kutu
 * kullanmiyor ve satirin en agir ogesi haline geliyordu (`[M]`, 04.09.2026:
 * "asiri buyuk, cirkin, alakasiz"). Ikinci surumde dugmeler daire yapildi —
 * o da tutmadi, sayfada hicbir yerde daire yok (`[M]`). Kalan bicim sayfanin
 * geri kalani gibi: iki sessiz gri glif, arada sayi; uzerine gelinince
 * yalnizca cok hafif bir zemin, secili satirda sayi koyulasip kalinlasiyor.
 *
 * SECICILER `.pc-kompo__adet` ile nitelenmis durumda. Sebep ozgulluk:
 * temanin `input[type=number]` kurali (0,1,1) tek basina `.pc-kompo__giris`i
 * (0,1,0) yeniyor ve cerceveyi geri getiriyordu (1.42.0'da canlida
 * gorulmustu). `!important` yerine seciciyi (0,2,0) yapmak dogru yol.
 *
 * Yukseklik ACIKCA veriliyor: temanin `input` yuksekligi kalitilirsa sayi
 * gliflerin altina dusuyor (1.41.0'da canlida gorulmustu). */
.pc-kompo__adet {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: .1rem;
}

/* Uc hucre de AYNI mekanizmayla ortalanir: 1.75rem satir kutusu.
 * Dugmeler `place-items: center`, sayi ise `line-height` ile ortalaninca
 * rakam gliflerin birkac piksel altina dusuyordu (`[M]`, 04.09.2026). */
.pc-kompo__adet .pc-kompo__dugme {
  display: block;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  /* `min-block-size` sifirlanmadan yukseklik tutmuyor: temanin
   * `button { min-height: 40px }` kurali `height`i EZMEZ, altina koyar.
   * Kutu 40px kalinca glif sayidan 8px yukarida duruyordu (canlida olculdu,
   * 04.09.2026): dugme kutusu 330.9-370.9, sayi kutusu 344.9-372.9. */
  min-block-size: 0;
  min-height: 0;
  /* Marj SIFIRLANMALI: tema dugmeye `margin-bottom: 16px`, `input`e
   * `margin: 8px 0` veriyor. Grid `align-items: center` MARJ KUTUSUNU
   * ortaliyor, bu yuzden ikisi 8px kaymis duruyordu (canlida olculdu). */
  margin: 0;
  line-height: 1.75rem;
  text-align: center;
  padding: 0;
  color: var(--pc-quiet);
  background: none;
  border: 0;
  border-radius: var(--pc-radius-sm);
  cursor: pointer;
  font-size: 1rem;
  transition: color .15s ease, background-color .15s ease;
}

.pc-kompo__adet .pc-kompo__dugme:hover {
  color: var(--pc-ink);
  background: rgba(var(--pc-ink-rgb), .06);
}

.pc-kompo__adet .pc-kompo__dugme:focus-visible {
  outline: calc(var(--pc-border) * 2) solid var(--pc-ink);
  outline-offset: 1px;
}

.pc-kompo__adet .pc-kompo__giris {
  inline-size: 1.875rem;
  block-size: 1.75rem;
  height: 1.75rem;
  min-block-size: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: var(--pc-quiet);
  text-align: center;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1.75rem;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.pc-kompo__adet .pc-kompo__giris:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}

.pc-kompo__adet .pc-kompo__giris::-webkit-outer-spin-button,
.pc-kompo__adet .pc-kompo__giris::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }

/* Adedi sifirdan buyuk satir: sayi koyulasir ve kalinlasir. Baska bir vurgu
 * yok — cerceve/zemin eklemek tema desenini bozuyordu. */
.pc-kompo__satir.is-secili .pc-kompo__adet .pc-kompo__giris {
  color: var(--pc-ink);
  font-weight: var(--pc-weight-semibold);
}

/* Ara toplam: listeyi kapatan satir. Ayirici cizgisi satir cizgilerinden
 * koyu ki liste burada bittigi anlasilsin. */
.pc-kompo__toplam {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .9rem;
  margin: 0;
  padding: .8rem 0 1.1rem;
  border-block-start: var(--pc-border) solid rgba(var(--pc-ink-rgb), .28);
  color: var(--pc-ink);
  font-size: .9375rem;
  line-height: var(--pc-leading-snug);
}

.pc-kompo__toplam-deger {
  font-size: 1.0625rem;
  font-weight: var(--pc-weight-semibold);
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Hicbir parca secilmemisken toplam soluklasir: 0,00 € bir FIYAT gibi degil,
 * "henuz secilmedi" gibi okunmali. Yer tutucu olarak uzun tire denendi,
 * tek basina bir eksi isareti gibi duruyordu. */
.pc-kompo__toplam.is-bos,
.pc-kompo__toplam.is-bos .pc-kompo__toplam-deger,
.pc-kompo-gesamt.is-bos,
.pc-kompo-gesamt.is-bos .pc-kompo-gesamt__deger { color: var(--pc-quiet); }

/* Sepet dugmesinin ustundeki toplam. Woo'nun kendi fiyat kutusu kompozisyonlu
 * uruncte sunucuda bosaltiliyor; artakalan bos kutu gizlenir. */
.woocommerce-variation-price:empty { display: none; }

.pc-kompo-gesamt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .9rem;
  inline-size: 100%;
  margin: 0 0 .9rem;
  color: var(--pc-ink);
  font-size: .9375rem;
  line-height: var(--pc-leading-snug);
}

.pc-kompo-gesamt__deger {
  font-size: 1.375rem;
  font-weight: var(--pc-weight-semibold);
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pc-kompo-gesamt__deger .woocommerce-Price-currencySymbol { font-weight: inherit; }


/* Telefon: uc sutun HALA sigar, yalniz tutar sutunu sabit 7rem'i birakir ve
 * ad iki satira sarar. 393px'te olculdu (iPhone 14 Pro): ad ~100px +
 * adet 89px + tutar ~85px + bosluklar = ~300px, kullanilabilir 344px.
 *
 * Once kirilma noktasi 25rem'di ve satiri ikiye boluyordu; adet kontrolu
 * ikinci satirin ortasinda bosta asili kaliyordu (`[M]`, 04.09.2026:
 * "seciciler duzgun durmuyor"). Kirilma noktasi gercekten gerektigi yere,
 * uc sutunun sigmadigi genislige indirildi. */
@media (max-width: 30rem) {
  /* Tutar sutunu telefonda da SABIT. Degisken birakilinca tutari olan satirda
   * ad sariyor, bos satirda sarmiyordu ve satir yukseklikleri zipliyordu
   * (04.09.2026, 393px'te olculdu). */
  .pc-kompo__satir {
    grid-template-columns: minmax(0, 1fr) auto 4.75rem;
    gap: .25rem .55rem;
    padding: .25rem 0;
  }

  /* 393px'te ad + birim fiyat + adet + tutar tek satira GERCEKTEN sigmiyor:
   * ad ~88px, fiyat ~105px, adet 89px, tutar 76px = 358px > 344px. Sarmayi
   * sansa birakmak yerine ad ile fiyat bilerek alt alta aliniyor; boylece
   * butun satirlar ayni yukseklikte. */
  .pc-kompo__ad {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font-size: 1rem;
    line-height: 1.25;
  }
  /* Sutun duzeninde ad ve fiyat zaten alt alta — taban genislik burada bir sey
   * cozmez, dar ekranda yalniz gereksiz yer kaplar. Sifirlaniyor. */
  .pc-kompo__ad strong { min-width: 0; }
  .pc-kompo__birim { font-size: .78125rem; line-height: 1.25; min-width: 0; }
}

/* Cok dar ekran (<=320px): burada gercekten sigmiyor. Ad ustte tam genislik,
 * altta adet solda, tutar sagda. */
@media (max-width: 20rem) {
  .pc-kompo__satir {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .pc-kompo__ad { grid-column: 1 / -1; }
}