/** Shopify CDN: Minification failed

Line 608:0 Unexpected "500"
Line 608:46 Unterminated string token

**/
/* Fontlar sayfayla birlikte gelir, her biri TEK dosya (Google Fonts resmî deposundaki tam font): Türkçe harfler (ş, ç, ğ, İ) Latin harflerle aynı dosyadan çizilir. */
/* size-adjust: Figtree, PetLab'ın Inter'inden aynı pikselde ~%9 küçük görünür (küçük harf yüksekliği 0,50 / 0,546). Oran fontun kendisine verilir: PetLab'ın piksel ölçüleri ve satır aralıkları olduğu gibi kalır (Berk 24 Eki). */
/* Düzen: mobil tek sütun (galeri kenardan kenara) → 768 px iki eşit sütun → 1024 px galeri 1,3 : bilgi 1, arada 80 px.
   Ölçüler PetLab Co. ProBright Advanced'ten (24 Eki 2026), renk ve yazı Woofle tasarım sisteminden (sürüm 22).
   Tek tema bilinçli: mağaza açık zeminde yayınlanır. */
:root {
  color-scheme: light;
  --navy-900: #010d26; --text-muted: #4f5668; --grey-200: #e2e2e4; --grey-400: #858b95;
  --line: #e5e7eb; --line-strong: #d8dadf; --line-hover: #8d92a3;
  --surface-0: #ffffff; --surface-100: #f2f2f0; --surface-rail: #e7e6dd; --surface-ice: #eef2f8;
  --green-600: #008900; --green-700: #006b00; --green-100: #caf1c6; --green-50: #efffec; --gold-300: #ffd67a;
  --discount-bg: var(--green-100); --star: var(--green-600); --dot-idle: #b5b9c4;
  --todo-bg: #fff4cc; --todo-ink: #6b4e00;
  --scrim: rgba(1, 13, 38, 0.45);
  --ice-strong: #e3eaf6; --ice-line: #9fb1d1;
  --shadow-selected: 2px 2px 0 0 #008900;
  --shadow-float: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --radius-xs: 4px; --radius-box: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 9999px;
  --font-serif: "Young Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --hap-l: max(8px, env(safe-area-inset-left, 0px)); --hap-r: max(8px, env(safe-area-inset-right, 0px)); --hdr-ust: calc(8px + env(safe-area-inset-top, 0px)); --hap-b: 52px; --hdr-yuk: calc(var(--hdr-ust) + var(--hap-b) + 8px);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
body { display: flex; flex-direction: column; min-height: 100dvh; margin: 0; background: var(--surface-0); color: var(--navy-900); font: 400 14px/19.6px var(--font-sans); -webkit-font-smoothing: antialiased; }
main { flex: 1 0 auto; }
main:focus { outline: none; }
.atla { position: fixed; z-index: 40; top: var(--hdr-ust); left: var(--hap-l); padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill); background: var(--navy-900); color: var(--surface-0); font: 600 15px/20px var(--font-sans); transform: translateY(-200%); }
.atla:focus { transform: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--navy-900); outline-offset: 2px; }
.prob :focus-visible, .puan :focus-visible, .sy-panel :focus-visible { outline-color: var(--surface-0); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Üst menü */
/* Yüzen iki hap: solda logo ve menü, sağda arama ve sepet (Seed'in iki parçalı düzeni). Görünüm alt çubuktaki mat cam; telefon menüsü hapla aynı cam (Berk 1 Kas) */
.hdr { position: fixed; z-index: 25; top: var(--hdr-ust); left: var(--hap-l); right: var(--hap-r); display: flex; justify-content: space-between; gap: var(--space-2); pointer-events: none; transition: transform 0.3s var(--ease-out); }
.hdr.acik { z-index: 32; }
.hdr.gizli { transform: translateY(calc(-100% - var(--hdr-ust) - 8px)); }
.hdr-bos { height: var(--hdr-yuk); }
.hap { display: flex; align-items: center; height: var(--hap-b); padding: 0 6px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-pill); background: rgba(1, 13, 38, 0.68); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 8px 24px rgba(1, 13, 38, 0.12); color: var(--surface-0); pointer-events: auto; }
/* Üst menü Seed gibi koyu cam: beyaz logo, beyaz yazı ve ikon (Berk 5 Kas) */
.hap a, .hap .icon-btn { color: var(--surface-0); }
.hap :focus-visible { outline-color: var(--surface-0); }
.menu-ac .x, .menu-ac[aria-expanded="true"] .ac { display: none; }
.menu-ac[aria-expanded="true"] .x { display: block; }
.adet { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--green-600); color: var(--surface-0); font: 700 11px/18px var(--font-sans); text-align: center; }
.ust-nav { display: none; }
.ust-nav ul { display: flex; gap: 28px; margin: 0; padding: 0 20px 0 0; list-style: none; }
.ust-nav a { display: block; padding: var(--space-1) 0; border-bottom: 2px solid transparent; font: 500 16px/22px var(--font-sans); text-decoration: none; transition: border-color 0.2s var(--ease-out); }
.ust-nav a:hover, .ust-nav a[aria-current] { border-bottom-color: var(--surface-0); }
#menuSc { background: rgba(1, 13, 38, 0.28); }
.yan { position: fixed; z-index: 31; top: calc(var(--hdr-ust) + var(--hap-b) + var(--space-2)); left: var(--hap-l); right: var(--hap-r); max-height: calc(100dvh - var(--hdr-ust) - var(--hap-b) - 16px); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) 20px 20px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 1px 0 rgba(1, 13, 38, 0.08), 0 8px 24px rgba(1, 13, 38, 0.1); opacity: 0; transform: translateY(-12px); transition: opacity 0.25s ease, transform 0.35s var(--ease-out); }
.yan.open { opacity: 1; transform: none; }
.yan a { color: var(--navy-900); text-decoration: none; }
.yan-nav { margin: 0; padding: 0; list-style: none; }
.yan-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 60px; border-bottom: 1px solid rgba(1, 13, 38, 0.12); font: 400 24px/29px var(--font-serif); }
.yan-nav svg, .yan-urun > svg { color: var(--text-muted); }
.yan-urun { display: grid; grid-template-columns: 76px minmax(0, 1fr) 18px; align-items: center; gap: var(--space-4); margin-top: 20px; }
.yan-urun img { width: 76px; height: 76px; border-radius: var(--radius-box); object-fit: cover; }
.yan-urun b { display: block; font: 600 16px/22px var(--font-sans); }
.yan-urun span { display: flex; align-items: center; gap: var(--space-1); color: var(--text-muted); }
.yan-urun span svg { color: var(--green-600); }
.yan-urun em { display: block; font: 600 14px/19.6px var(--font-sans); font-style: normal; }
.yan-alt { margin: var(--space-4) 0 0; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .hdr, .yan, .buybar { transition: none; } }
@media (min-width: 768px) {
  .hap { padding: 0 var(--space-2); }
  .hap .logo img { height: 24px; }
  .yan { right: auto; width: 420px; }
}
@media (min-width: 1024px) {
  .hap { padding: 0 var(--space-3); }
  .icon-btn.menu-ac { display: none; }
  .hap .logo { padding: 0 28px 0 var(--space-3); }
  .ust-nav { display: block; }
}
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer; }
.logo { padding: 0 var(--space-3) 0 var(--space-1); }
.logo img { display: block; height: 20px; width: auto; }

/* Güven şeridi: koyu, kayan bant (PetLab: 63 px, iç boşluk 12/8) */

/* Yol (tablet ve masaüstü) */
.crumbs { display: none; margin: 0; padding: 0; list-style: none; font: 400 14px/19.6px var(--font-sans); color: var(--text-muted); }
.crumbs li { display: inline; }
.crumbs li + li::before { content: "/"; margin: 0 6px; }
.crumbs [aria-current] { color: var(--navy-900); font-weight: 600; }

/* Ürün alanı */
.pdp { padding-bottom: var(--space-10); }
.pdp-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.gal { position: relative; width: min(100%, 600px, 80svh); margin: 0 auto; aspect-ratio: 1; background: var(--surface-100); }
.gal-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.gal-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(255, 255, 255, 0.85); color: var(--navy-900); }
.gal-arrow.prev { left: var(--space-3); }
.gal-arrow.next { right: var(--space-3); }
.gal-arrow[disabled] { opacity: 0; pointer-events: none; }
.dots { position: absolute; left: 50%; bottom: var(--space-6); transform: translateX(-50%); display: flex; gap: var(--space-3); padding: 6px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.85); }
.dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--dot-idle); cursor: pointer; }
.dots button::after { content: ""; position: absolute; inset: -12px -6px; }
.dots button[aria-current="true"] { background: var(--navy-900); }
/* Satış sayacı: canlı sitedeki mantık aynen */
.proof { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; padding: 5px 8px; border-radius: var(--radius-box); background: var(--surface-0); box-shadow: var(--shadow-float); font: 400 10px/14px var(--font-sans); white-space: nowrap; opacity: 0; transition: opacity 0.5s ease; }
.proof.on { opacity: 1; }
.proof b { font-weight: 600; }
.proof svg { width: 13px; height: 13px; }
.proof-x::after { content: ""; position: absolute; inset: -11px; }
.proof-x { position: relative; display: grid; place-items: center; width: 22px; height: 22px; margin: -4px -6px -4px 4px; padding: 0; border: 0; background: transparent; cursor: pointer; }

.info { display: grid; gap: var(--space-6); width: min(100%, 600px); margin: 0 auto; padding-top: var(--space-8); padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.head { display: grid; gap: var(--space-4); justify-items: start; }
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); background: var(--green-50); color: var(--green-700); font: 600 12px/16.8px var(--font-sans); }
h1 { margin: 0; font: 400 24px/28.8px var(--font-serif); text-wrap: balance; }
.rating { display: grid; gap: var(--space-1); }
.rating-row { display: flex; align-items: center; gap: var(--space-2); font: 400 14px/19.6px var(--font-sans); }
.rating-row strong { font-weight: 600; }
.stars { position: relative; display: inline-block; width: 88px; height: 16px; }
.stars svg { position: absolute; inset: 0; }
.stars .fill { position: absolute; inset: 0; overflow: hidden; }
.read-rev { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-muted); text-decoration: none; }
.read-rev:hover { color: var(--navy-900); text-decoration: underline; }
.desc { margin: 0; max-width: 65ch; font: 400 16px/22.4px var(--font-sans); color: var(--text-muted); }

/* Hakkında bilgi al: 4 sekme (PetLab "Tell me about") */
.about h2 { margin: 0 0 var(--space-3); font: 600 16px/20px var(--font-sans); }
.tabs { display: flex; align-items: flex-end; }
.tab { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; position: relative; height: 52px; padding: var(--space-2) var(--space-1); border: 1px solid var(--line-strong); border-width: 1px 0; background: var(--surface-100); font: 400 12px/16.8px var(--font-sans); text-align: center; cursor: pointer; }
.tab span { display: block; max-width: 72px; }
.tab:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 18px; transform: translateY(-50%); background: var(--line-strong); }
.tab:first-child { border-left-width: 1px; border-top-left-radius: var(--radius-md); }
.tab:last-child { border-right-width: 1px; border-top-right-radius: var(--radius-md); }
.tab[aria-selected="true"] { z-index: 1; height: 64px; padding-top: var(--space-4); border-width: 1px; border-bottom-color: transparent; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--surface-0); font-weight: 600; }
.tab[aria-selected="true"]::after, .tab:has(+ .tab[aria-selected="true"])::after { display: none; }
.pane { padding: var(--space-4); border: 1px solid var(--line-strong); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--surface-0); }
.pane[hidden] { display: none; }
.pane-in { animation: paneIn 0.25s var(--ease-out); }
@keyframes paneIn { from { opacity: 0; transform: translateY(4px); } }
blockquote { margin: 0; font: 400 15px/21px var(--font-sans); }
.person { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.person img { width: 44px; height: 44px; border-radius: var(--radius-pill); object-fit: cover; }
.person b { display: block; font: 600 15px/18px var(--font-sans); }
.person span { display: block; font: 400 13px/18px var(--font-sans); color: var(--text-muted); }
.person .mini-stars { display: block; margin-bottom: var(--space-1); color: var(--star); }
.ings { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.ings li { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); align-items: start; }
.ings img { width: 40px; height: 40px; border-radius: var(--radius-pill); object-fit: cover; background: var(--surface-100); }
.ings b { font: 600 15px/18px var(--font-sans); }
.ings .dose { display: block; margin-top: 2px; font: 600 12px/16.8px var(--font-sans); color: var(--green-700); }
.ings p { margin: var(--space-1) 0 0; font: 400 13px/18px var(--font-sans); color: var(--text-muted); }
.dose-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dose-table th { padding: 0 0 var(--space-2); font: 600 12px/16.8px var(--font-sans); color: var(--text-muted); text-align: left; }
.dose-table td { padding: var(--space-3) 0; border-top: 1px solid var(--line); vertical-align: top; }
.dose-table td { font-size: 14px; }
.dose-table td:first-child b { display: block; font: 600 15px/18px var(--font-sans); }
.dose-table td:last-child { font-weight: 600; white-space: nowrap; }
.note { margin: var(--space-3) 0 0; font: 400 12px/16.8px var(--font-sans); color: var(--text-muted); }
.lead { margin: 0 0 var(--space-3); font: 600 15px/21px var(--font-sans); }
.checks { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.checks li { display: grid; grid-template-columns: 16px 1fr; gap: var(--space-2); }
.checks svg { margin-top: 2px; color: var(--green-700); }

/* Kargo geri sayacı: Wuffes düzeni + bizim teslimat kartı görünümü (yalnız panelde) */
.cd { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 20px; border: 2px solid var(--ice-line); border-radius: var(--radius-box); background: var(--ice-strong); color: var(--navy-900); }
.cd-side { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.cd-side svg, .cd-arrow { flex: none; }
.cd-k { display: block; font: 500 14px/20px var(--font-sans); color: var(--text-muted); }
.cd-v { display: block; font: 700 16px/22px var(--font-sans); color: var(--green-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-arrow { color: var(--navy-900); }
.sheet-scroll { overflow-x: hidden; }
@media (max-width: 400px) {
  .cd { gap: var(--space-2); padding: 14px var(--space-3); }
  .cd-side { gap: 6px; }
  .cd-v { font-size: 15px; }
  .cd-arrow { width: 22px; }
}
/* (eski teslimat kartı) */
.ship { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-box); background: var(--surface-ice); }
.ship svg { flex: none; }
.ship b { display: block; font: 600 14px/19.6px var(--font-sans); }
.ship span { display: block; margin-top: var(--space-1); font: 400 12px/16.8px var(--font-sans); }

/* Bölüm 2, sorun: koyu bant + yaşa göre grafik. Yapı ve animasyon Wuffes Hip & Joint'ten (pdp-stat, 24 Eki), görünüm Woofle tasarım sisteminden */
.prob { background: var(--navy-900); color: var(--surface-0); }
.prob-in { display: grid; gap: var(--space-8); max-width: 1280px; margin: 0 auto; padding: 64px var(--gutter-r) 64px var(--gutter-l); }
.prob-copy { display: grid; gap: var(--space-6); }
.prob h2 { margin: 0; font: 400 28px/33.6px var(--font-serif); font-variant-numeric: lining-nums; text-align: center; text-wrap: balance; }
.prob h2 em { font-style: normal; color: var(--green-100); }
.prob h2 .ast { font-size: 0.55em; vertical-align: 0.6em; line-height: 0; }
.prob-copy p { margin: 0; font: 400 16px/22.4px var(--font-sans); color: rgba(255, 255, 255, 0.85); }
.prob-chart { display: grid; gap: var(--space-3); }
.chart svg { display: block; width: 100%; height: auto; }
.chart .plot { fill: var(--surface-0); }
.chart .grid { stroke: var(--grey-400); stroke-width: .6; stroke-dasharray: 2 2; }
.chart .axis { fill: none; stroke: var(--surface-0); stroke-width: 1.6; }
.chart .tick { font: 400 11px var(--font-sans); fill: rgba(255, 255, 255, 0.8); }
.chart .ttl { font: 600 12px var(--font-sans); fill: var(--surface-0); }
.chart .val { font: 700 15px var(--font-sans); fill: var(--green-700); text-anchor: middle; }
.chart .line { fill: none; stroke: var(--green-700); stroke-width: 2.4; stroke-linejoin: round; }
.chart .pt { fill: var(--green-100); stroke: var(--green-700); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.prob-src { margin: 0; font: 400 11px/15.4px var(--font-sans); color: rgba(255, 255, 255, 0.7); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .chart[data-reveal="pending"] .line { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
  .chart[data-reveal="pending"] .area { clip-path: inset(0 100% 0 0); }
  .chart[data-reveal="pending"] .pt, .chart[data-reveal="pending"] .val { transform: scale(0); opacity: 0; }
  .chart[data-reveal="in"] .line { stroke-dasharray: var(--len, 1000); animation: chartDraw 1.4s cubic-bezier(.61, 1, .88, 1) both; }
  .chart[data-reveal="in"] .area { animation: chartUncover 1.4s cubic-bezier(.61, 1, .88, 1) both; }
  .chart[data-reveal="in"] .pt { animation: chartPop .36s cubic-bezier(.34, 1.56, .64, 1) var(--at) both; }
  .chart[data-reveal="in"] .val { animation: chartFade .3s ease-out calc(var(--at) + .15s) both; }
}
@keyframes chartDraw { from { stroke-dashoffset: var(--len, 1000); } to { stroke-dashoffset: 0; } }
@keyframes chartUncover { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes chartPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes chartFade { from { opacity: 0; } to { opacity: 1; } }

/* Bölüm 3, kanıt: dolan çubuklar. Yapı, ölçü ve animasyon Wuffes Hip & Joint'ten (pdp-dpa, wf-survey-stat, 24 Eki), görünüm Woofle tasarım sisteminden */
.kanit-in { display: grid; gap: var(--space-6); max-width: 900px; margin: 0 auto; padding: 64px var(--gutter-r) 64px var(--gutter-l); }
.kanit h2 { margin: 0; font: 400 28px/33.6px var(--font-serif); text-align: center; text-wrap: balance; }
.kanit ul { display: grid; gap: 36px; margin: 0; padding: 0; list-style: none; }
.stat { display: grid; gap: var(--space-3); }
.stat-fig { order: -1; display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.stat-pct { flex: none; font: 400 48px/36px var(--font-serif); font-variant-numeric: lining-nums; color: var(--green-700); }
.stat-lab { font: 400 16px/17.6px var(--font-sans); }
.stat-track { height: 34px; background: var(--surface-100); }
.stat-fill { height: 100%; background: var(--green-100); border-right: 3px solid var(--green-700); transform-origin: 0 50%; }
.stat-axis { display: flex; justify-content: space-between; margin-top: 6px; font: 400 11px/12px var(--font-sans); color: var(--text-muted); }
.kanit-src { max-width: 520px; margin: 0 auto; font: 400 11px/15.4px var(--font-sans); color: var(--text-muted); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .kanit ul[data-reveal="pending"] .stat-fill { transform: scaleX(0); }
  .kanit ul[data-reveal="in"] .stat-fill { animation: statGrow 1.2s cubic-bezier(.33, 1, .68, 1) var(--at, 0ms) both; }
}
@keyframes statGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (min-width: 768px) {
  .kanit-in { padding: 64px max(32px, env(safe-area-inset-right, 0px)) 64px max(32px, env(safe-area-inset-left, 0px)); }
  .kanit h2 { font-size: 32px; line-height: 38.4px; }
  .kanit ul { gap: var(--space-6); }
  .stat { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-2) 20px; }
  .stat-fig { order: 0; align-items: baseline; gap: 10px; }
  .stat-pct { font-size: 36px; line-height: 36px; }
  .stat-lab { font-size: 14px; line-height: 16.8px; color: var(--text-muted); }
}

/* Bölüm 4, faydalar: fotoğraf + numaralı açılır liste. Yapı ve ölçü Wuffes Hip & Joint'ten (pdp-benefits-band, 24 Eki), açılır liste tasarım sistemindeki .wf-acc */
.fayda { background: var(--surface-100); }
.fayda-in { display: grid; gap: var(--space-8); max-width: 1280px; margin: 0 auto; padding: 64px var(--gutter-r) 48px var(--gutter-l); }
.fayda h2 { margin: 0; font: 400 28px/33.6px var(--font-serif); text-align: center; text-wrap: balance; }
.fayda-cols { display: grid; gap: var(--space-6); }
.fayda-ph { display: grid; place-items: center; aspect-ratio: 5 / 4; padding: var(--space-4); border-radius: var(--radius-box); background: var(--todo-bg); color: var(--todo-ink); font: 600 14px/19.6px var(--font-sans); text-align: center; }
.fayda .wf-acc summary { justify-content: flex-start; font-size: 18px; line-height: 22px; }
.fayda .wf-acc summary::after { margin-left: auto; }
.fayda-no { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--green-700); color: var(--surface-0); font: 700 15px/1 var(--font-sans); }
.fayda .wf-acc p { padding-left: 40px; }
@media (min-width: 768px) {
  .fayda-in { padding: 64px max(32px, env(safe-area-inset-right, 0px)) 64px max(32px, env(safe-area-inset-left, 0px)); }
  .fayda h2 { font-size: 32px; line-height: 38.4px; }
  .fayda-cols { grid-template-columns: 1.22fr 1fr; align-items: center; gap: 64px; }
  .fayda-ph { order: 1; aspect-ratio: 1.09; }
}

/* Bölüm 5+7, müşteri sesi (Berk 24 Eki: kutular kalktı, PetLab gibi sade, videolarla desteklenir). Üst kısım PetLab ProBright Advanced "Reviews of"tan (küçük güven satırı + ortalı başlık + tek satır puan + kayan kısa yorum şeridi); video şeridi Wuffes Hip & Joint pdp-trusted-by'dan (sonsuz dönen kartlar, sessiz kendiliğinden oynar, arada 16, ortaya oturur); kartın altındaki alıntı PetLab "Real customers review"dan; görünüm Woofle tasarım sisteminden */
.puan { background: var(--navy-900); color: var(--surface-0); overflow: hidden; }
.puan-in { display: grid; justify-items: center; gap: var(--space-6); max-width: 1280px; margin: 0 auto; padding: 64px var(--gutter-r) 56px var(--gutter-l); text-align: center; }
.puan-ust { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: 600 14px/19.6px var(--font-sans); color: var(--green-100); }
.puan-ust svg { width: 16px; height: 16px; }
.puan h2 { margin: calc(-1 * var(--space-3)) 0 0; font: 400 28px/33.6px var(--font-serif); text-wrap: balance; }
.puan h2 em { font-style: normal; color: var(--green-100); }
.puan-skor { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); margin: calc(-1 * var(--space-2)) 0 0; font: 400 15px/20px var(--font-sans); color: rgba(255, 255, 255, 0.85); }
.puan-skor b { font-weight: 700; color: var(--surface-0); }
.puan-skor a { font-weight: 600; color: var(--surface-0); }
.puan .stars, .puan .stars svg { width: 110px; height: 20px; }
.soz { justify-self: start; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.soz-iz { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; }
.soz li { flex: none; padding: 0 var(--space-6); border-right: 1px solid rgba(255, 255, 255, 0.2); font: 400 15px/20px var(--font-sans); white-space: nowrap; }
.soz li span { margin-left: var(--space-2); font-weight: 600; color: var(--green-100); }
@media (prefers-reduced-motion: no-preference) {
  .soz-iz { animation: sozAk 60s linear infinite; }
  .soz:hover .soz-iz { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .soz { overflow-x: auto; } }
@keyframes sozAk { to { transform: translateX(-50%); } }
/* Akan güvence bandı: ürün üstü ile sonraki bölüm arası (Berk 1 Kas; yer aktif siteden). Kenarlar .soz gibi silinir, ayırıcı iç çizgi */
.kay { overflow: hidden; border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.kay-iz { display: flex; width: max-content; margin: 0; padding: var(--space-4) 0; list-style: none; }
.kay li { flex: none; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-8); border-right: 1px solid var(--line); font: 400 14px/20px var(--font-sans); color: var(--text-muted); white-space: nowrap; }
.kay b { font-weight: 600; color: var(--navy-900); }
.kay .ti { flex: none; width: 18px; height: 18px; color: var(--green-700); }
@media (prefers-reduced-motion: no-preference) {
  .kay-iz { animation: sozAk 70s linear infinite; }
  .kay:hover .kay-iz { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .kay { overflow-x: auto; } }
.ugc { justify-self: stretch; display: grid; gap: var(--space-4); }
.ugc-iz { justify-self: start; width: 100vw; margin-left: calc(50% - 50vw); display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 280px); gap: var(--space-4); padding: var(--space-4) 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; text-align: left; }
.ugc-iz::-webkit-scrollbar { display: none; }
.ugc-kart { display: grid; text-align: left; align-content: start; gap: var(--space-3); scroll-snap-align: center; transform: scale(0.94); opacity: 0.7; transform-origin: 50% 0; transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); }
.ugc-kart.aktif { transform: scale(1); opacity: 1; }
.ugc-v { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius-box); background: #1b2740; }
.ugc-v video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ugc-ad { position: absolute; left: var(--space-3); top: var(--space-3); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--surface-0); color: var(--navy-900); font: 700 13px/18px var(--font-sans); }
.ugc-ses { position: absolute; right: var(--space-3); top: var(--space-3); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-pill); background: rgba(1, 13, 38, 0.6); color: var(--surface-0); cursor: pointer; }
.ugc-ses svg { width: 20px; height: 20px; }
.ugc-ses .on, .ugc-ses[aria-pressed="true"] .off { display: none; }
.ugc-ses[aria-pressed="true"] .on { display: block; }
.ugc-soz { margin: 0; font: 600 15px/21px var(--font-sans); }
.ugc-not { margin: 0; font: 400 15px/21px var(--font-sans); color: rgba(255, 255, 255, 0.85); }
.ugc-ok { display: none; justify-content: center; gap: var(--space-2); }
.ugc-ok button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius-pill); background: transparent; color: var(--surface-0); cursor: pointer; }
.ugc-ok svg { width: 18px; height: 18px; }
@media (min-width: 768px) {
  .puan-in { padding: 64px max(32px, env(safe-area-inset-right, 0px)) 56px max(32px, env(safe-area-inset-left, 0px)); }
  .puan h2 { font-size: 32px; line-height: 38.4px; }
  .ugc-iz { grid-auto-columns: 280px; }
}
@media (min-width: 1024px) { .ugc-iz { grid-auto-columns: 300px; } .ugc-ok { display: flex; } }

/* Bölüm 6, ne beklenir: PetLab ağırlıklı karışım (Berk 24 Eki). İskelet ve ölçü PetLab ProBright Advanced "What to expect"ten (ortalı başlık + dipnotlu giriş, köşesi 24 px özet kartı ve tikli 4 madde, 3 fotoğraf sütunu 1,25 oranında köşe 16, telefonda alt alta ve 24 px içeriden, 768+ yan yana); ay etiketi + başlık + açıklama ve alt not Wuffes Hip & Joint pdp-results-timeline'dan; görünüm Woofle tasarım sisteminden */
.ay-in { display: grid; gap: var(--space-6); max-width: 1280px; margin: 0 auto; padding: 64px var(--gutter-r) 64px var(--gutter-l); }
.ay h2 { margin: 0; font: 400 28px/33.6px var(--font-serif); text-align: center; text-wrap: balance; }
.ay-lead { margin: calc(-1 * var(--space-2)) 0 0; font: 400 16px/22.4px var(--font-sans); color: var(--text-muted); text-align: center; text-wrap: balance; }
.ay-lead sup, .ay-not sup { font-size: 0.7em; line-height: 0; }
.ay-ozet { display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-ice); text-align: center; }
.ay-ozet p { margin: 0; font: 700 20px/24px var(--font-sans); text-wrap: balance; }
.ay-ozet ul { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.ay-ozet li { display: flex; align-items: center; gap: var(--space-2); font: 600 14px/19.6px var(--font-sans); }
.ay-ozet li svg { flex: none; width: 16px; height: 16px; }
.ay ol { display: grid; gap: var(--space-8); margin: var(--space-2) 0 0; padding: 0 var(--space-6); list-style: none; }
.ay-ph { display: grid; place-items: center; aspect-ratio: 1.25; padding: var(--space-4); border-radius: var(--radius-md); background: var(--todo-bg); color: var(--todo-ink); font: 600 13px/18px var(--font-sans); text-align: center; }
.ay h3 { display: grid; gap: var(--space-1); margin: var(--space-4) 0 0; }
.ay h3 small { font: 700 12px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-700); }
.ay h3 span { font: 700 18px/22px var(--font-sans); }
.ay li p { margin: var(--space-2) 0 0; font: 400 14px/19.6px var(--font-sans); color: var(--text-muted); }
.ay-not { max-width: 640px; margin: var(--space-2) auto 0; font: 400 11px/15.4px var(--font-sans); color: var(--text-muted); text-align: center; }
@media (min-width: 768px) {
  .ay-in { padding: 64px max(32px, env(safe-area-inset-right, 0px)) 64px max(32px, env(safe-area-inset-left, 0px)); }
  .ay h2 { font-size: 32px; line-height: 38.4px; }
  .ay-lead { font-size: 18px; line-height: 25.2px; }
  .ay-ozet ul { grid-auto-flow: column; justify-content: center; gap: var(--space-6); }
  .ay ol { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); padding: 0; }
}
@media (min-width: 1024px) {
  .ay h3 span { font-size: 20px; line-height: 24px; }
}

/* Bölüm 8, bileşenler: yapı ve ölçü PetLab ProBright Advanced "Research-backed active ingredients"tan (yatay kayan kartlar: telefonda 278×347, arada 8; 768'de 337, 1024+ üç kart, arada 16; köşe 16, ad 20/24, kart içinde "+" 40 px sağ alt, altta 54 px "tüm içerikler" butonu), doz satırı bizim (PetLab'da yok); görünüm Woofle tasarım sisteminden: buzlu bant, görselle aynı zeminde kart (--zemin görselin üst kenarından ölçüldü), açılınca mat cam katmanı (PetLab'daki siyah %60 + 12 px bulanıklık düzeni, Berk 30 Eki; bizde lacivert). Her boyutta kaydırılır: dokunmatikte parmak, masaüstünde fare sürükleme + oklar (Berk 30 Eki) */
.bil { background: var(--surface-ice); overflow: hidden; }
.bil-in { display: grid; gap: var(--space-6); max-width: 1280px; margin: 0 auto; padding: 64px var(--gutter-r) 64px var(--gutter-l); }
.bil h2 { margin: 0; font: 400 28px/33.6px var(--font-serif); text-align: center; text-wrap: balance; }
.bil-lead { max-width: 640px; margin: calc(-1 * var(--space-2)) auto 0; font: 400 16px/22.4px var(--font-sans); color: var(--text-muted); text-align: center; text-wrap: balance; }
.bil-iz { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100vw - 32px) * 0.8333 - 8px); gap: var(--space-2); margin: 0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter-l)); padding: 0 var(--gutter-r) 0 var(--gutter-l); scroll-padding: 0 var(--gutter-l); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; list-style: none; cursor: grab; }
.bil-iz::-webkit-scrollbar { display: none; }
.bil-iz.surukle { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.bil-k { position: relative; display: flex; flex-direction: column; aspect-ratio: 4 / 5; min-height: 0; overflow: hidden; padding: var(--space-4); border-radius: var(--radius-md); background: var(--zemin); scroll-snap-align: start; transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out); }
.bil-k h3 { margin: 0; font: 400 20px/24px var(--font-serif); text-wrap: balance; }
.bil-doz { margin: var(--space-1) 0 0; font: 600 14px/19.6px var(--font-sans); color: var(--green-700); transition: color 0.3s var(--ease-out); }
.bil-g { position: absolute; left: 0; bottom: -6%; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; -webkit-mask-image: linear-gradient(#0000, #000 14%); mask-image: linear-gradient(#0000, #000 14%); transition: opacity 0.3s var(--ease-out); }
.bil-d { flex: 1; min-height: 0; margin-top: var(--space-3); overflow-y: auto; opacity: 0; visibility: hidden; font: 400 14px/19.6px var(--font-sans); transition: opacity 0.3s var(--ease-out), visibility 0.3s; }
.bil-d p { margin: 0 0 var(--space-2); }
.bil-d .checks li:last-child { padding-right: 44px; }
.bil-d .checks svg { color: var(--green-100); }
.bil-k::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(1, 13, 38, 0.62); opacity: 0; transition: opacity 0.3s var(--ease-out); pointer-events: none; }
.bil-k h3, .bil-doz, .bil-d { position: relative; z-index: 2; }
.bil-k.acik { color: var(--surface-0); }
.bil-k.acik::before { opacity: 1; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.bil-k.acik .bil-doz { color: var(--green-100); }
.bil-k.acik .bil-d { opacity: 1; visibility: visible; }
.bil-ac { z-index: 2; position: absolute; right: var(--space-4); bottom: var(--space-4); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--green-600); color: var(--surface-0); cursor: pointer; transition: background-color 0.15s ease-out; }
.bil-ac:hover { background: var(--green-700); }
.bil-ac svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease-out); }
.bil-k.acik .bil-ac svg { transform: rotate(45deg); }
.bil-ok { display: none; justify-content: center; gap: var(--space-2); }
.bil-ok button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--green-600); border-radius: var(--radius-pill); background: var(--surface-0); color: var(--green-700); cursor: pointer; }
.bil-ok svg { width: 18px; height: 18px; }
.bil-tum { display: flex; align-items: center; justify-content: center; height: 54px; padding: var(--space-4) var(--space-6); border: 1px solid var(--green-600); border-radius: var(--radius-pill); background: var(--surface-0); color: var(--green-700); font: 600 16px/19.2px var(--font-sans); text-decoration: none; }
.bil-tum:hover { background: var(--green-50); }
button.bil-tum { width: 100%; cursor: pointer; }
/* Tüm içerikler paneli: PetLab "Full Ingredients" düzeni (telefonda alttan, 768+ sağdan 573 px, koyu başlık bandı, doz satırları, yardımcı bileşenler, saklama); kabuk satın alma panelinin .sheet'i */
.sheet.ic-panel { background: var(--surface-0); outline: none; }
.ic-bas { flex: none; margin: 0; padding: var(--space-1) var(--gutter-r) var(--space-3) var(--gutter-l); font: 600 16px/22px var(--font-sans); text-align: center; }
.ic-g { padding: var(--space-2) var(--gutter-r) var(--space-6) var(--gutter-l); }
.ic-g .ic-ust { margin: 0 0 var(--space-3); color: var(--navy-900); font: 600 18px/24px var(--font-sans); }
.ic-g .ic-bant { margin: 0; padding: var(--space-2) var(--space-3); background: var(--navy-900); color: var(--surface-0); font: 600 20px/26px var(--font-sans); }
.ic-alt { margin: var(--space-3) 0 var(--space-2); font: 600 15px/21px var(--font-sans); }
.ic-g .dose-table td:first-child b { font-weight: 400; }
.ic-g .dose-table td:first-child span { display: block; margin-top: 2px; font: 400 13px/18px var(--font-sans); color: var(--text-muted); }
.ic-g .dose-table td:last-child { padding-left: var(--space-3); text-align: right; }
.ic-g p { margin: var(--space-3) 0 0; font: 400 14px/20px var(--font-sans); color: var(--text-muted); }
.ic-g p b { color: var(--navy-900); }
/* Bileşen ayrıntısı: PetLab "More Information" düzeni (geri oku, yuvarlak görsel, açılır liste); "uzman" başlıkları yerine yayımlanmış çalışmalar (Berk 30 Eki) */
.ic-daha { display: block; margin-top: var(--space-1); padding: 0; border: 0; background: none; font: 400 13px/18px var(--font-sans); color: var(--navy-900); text-decoration: underline; cursor: pointer; }
.ic-dty { padding: 0 var(--gutter-r) var(--space-6) var(--gutter-l); }
.ic-geri { margin-left: -4px; outline-offset: -2px; }
.ic-dg { width: 176px; height: 176px; margin: 0 auto var(--space-3); border-radius: var(--radius-pill); }
.ic-dty h3 { margin: 0 0 var(--space-3); font: 600 18px/24px var(--font-sans); text-align: center; }
.ic-dty .wf-acc p b { color: var(--navy-900); }
.ic-kaynak { font: 400 12px/17px var(--font-sans); color: var(--text-muted); }
.ic-dty .wf-acc p.ic-kaynak { font-size: 12px; line-height: 17px; }
@media (min-width: 768px) {
  .bil-in { padding: 64px max(32px, env(safe-area-inset-right, 0px)) 64px max(32px, env(safe-area-inset-left, 0px)); }
  .bil h2 { font-size: 32px; line-height: 38.4px; }
  .bil-lead { font-size: 18px; line-height: 25.2px; }
  .bil-iz { grid-auto-columns: calc((100vw - 64px) / 2 - 16px); gap: var(--space-4); margin: 0 calc(-1 * max(32px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(32px, env(safe-area-inset-left, 0px))); padding: 0 max(32px, env(safe-area-inset-right, 0px)) 0 max(32px, env(safe-area-inset-left, 0px)); scroll-padding: 0 32px; }
  .bil-tum, button.bil-tum { justify-self: center; width: 195px; }
  .ic-bas { padding-left: var(--space-4); padding-right: var(--space-4); }
  .ic-g, .ic-dty { padding-left: var(--space-6); padding-right: var(--space-6); }
}
@media (min-width: 1024px) {
  .bil-in { padding-left: clamp(32px, 4.4vw, 64px); padding-right: clamp(32px, 4.4vw, 64px); }
  .bil-iz { --bil-kenar: max(clamp(32px, 4.4vw, 64px), calc(50vw - 576px)); grid-auto-columns: min(calc((100vw - 2 * clamp(32px, 4.4vw, 64px)) / 3 - 16px), 422px); width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 0 var(--bil-kenar); scroll-padding: 0 var(--bil-kenar); }
  .bil-ok { display: flex; }
}

/* Bölüm 10, uzmanlar ve üretim (Berk 30 Eki, sürüm 30: PetLab'a benzesin). Yapı ve ölçü PetLab ProBright Advanced "Cutting-edge science, unmatched quality"den: telefonda ortalı başlık + giriş, tikli liste, altta görsel 1,25; 768+ solda metin sola yaslı (480), sağda görsel 361×452 köşe 24, arada 40; satır: 24 px tik, arada 16, metin 16 üst-alt iç boşluk + altta 1 px çizgi, başlık 18/21,6 600, açıklama 14/19,6. Görünüm Woofle tasarım sisteminden: başlık Young Serif, tik yeşil */
.uz-in { display: grid; gap: var(--space-10); max-width: 945px; margin: 0 auto; padding: 64px var(--gutter-r) 64px var(--gutter-l); }
.uz-m { display: grid; gap: var(--space-6); min-width: 0; }
.uz-bas { display: grid; gap: var(--space-2); }
.uz h2 { margin: 0; font: 400 28px/33.6px var(--font-serif); text-align: center; text-wrap: balance; }
.uz-lead { margin: 0; font: 400 16px/22.4px var(--font-sans); color: var(--text-muted); text-align: center; text-wrap: pretty; }
.uz-l { display: grid; margin: 0; padding: 0; list-style: none; }
.uz-l li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: 0 var(--space-2); }
.uz-l svg { display: block; color: var(--green-700); }
.uz-l div { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.uz-l h3 { margin: 0; font: 600 18px/21.6px var(--font-sans); }
.uz-l p { margin: var(--space-1) 0 0; font: 400 14px/19.6px var(--font-sans); color: var(--text-muted); }
.uz-ph { display: grid; place-items: center; width: 100%; aspect-ratio: 1.25; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--todo-bg); color: var(--todo-ink); font: 600 13px/18px var(--font-sans); text-align: center; }
@media (min-width: 768px) {
  .uz-in { grid-template-columns: minmax(0, 1.33fr) minmax(0, 1fr); align-items: center; padding: 64px max(32px, env(safe-area-inset-right, 0px)) 64px max(32px, env(safe-area-inset-left, 0px)); }
  .uz h2 { font-size: 32px; line-height: 38.4px; text-align: left; }
  .uz-lead { text-align: left; }
  .uz-ph { aspect-ratio: 0.8; }
}

/* Bölüm 11, kullanım (30 Eki). Yapı ve ölçü PetLab ProBright Advanced "Daily directions for use"tan: telefonda ortalı başlık + tablo, altta görsel 1,25 köşe 16, arada 40; 768+ görsel solda köşe 24, metin sola yaslı, arada 40; 1024+ görsel %41, metin %50; başlık altı 24; satır 16 üst-alt iç boşluk + 1 px çizgi, iki eşit sütun arada 16; solda ad 600 + kilo 400, sağda ölçek ikonları + doz 600. Kutu süresi PetLab'ın kutu boyu satırının karşılığı. Wuffes Hip & Joint'te bölüm yok, yalnız "Serving Guide" açılır başlığı. Görünüm Woofle tasarım sisteminden: gri bant, başlık Young Serif, ölçek yeşil */
.kul { background: var(--surface-100); }
.kul-in { display: grid; gap: var(--space-10); max-width: 1440px; margin: 0 auto; padding: 64px var(--gutter-r) 64px var(--gutter-l); }
.kul-m { display: grid; gap: var(--space-6); min-width: 0; }
.kul-bas { display: grid; gap: var(--space-2); }
.kul h2 { margin: 0; font: 400 28px/33.6px var(--font-serif); text-align: center; text-wrap: balance; }
.kul-lead { margin: 0; font: 400 16px/22.4px var(--font-sans); color: var(--text-muted); text-align: center; text-wrap: pretty; }
.kul-t { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.kul-t th, .kul-t td { padding: var(--space-4) 0; border-bottom: 1px solid var(--line-strong); text-align: left; vertical-align: top; }
.kul-t th { padding-top: 0; font: 400 16px/22.4px var(--font-sans); }
.kul-t th:first-child, .kul-t td:first-child { padding-right: var(--space-4); }
.kul-t b { display: block; font: 600 16px/22.4px var(--font-sans); }
.kul-t td span { display: block; font: 400 16px/22.4px var(--font-sans); color: var(--text-muted); }
.kul-t td .kul-kutu { font-size: 14px; line-height: 19.6px; }
.kul-olc { display: flex; gap: var(--space-1); margin-bottom: var(--space-1); color: var(--green-700); }
.kul-olc svg { display: block; width: 20px; height: 16px; }
.kul-ph { display: grid; place-items: center; width: 100%; aspect-ratio: 1.25; padding: var(--space-4); border-radius: var(--radius-md); background: var(--todo-bg); color: var(--todo-ink); font: 600 13px/18px var(--font-sans); text-align: center; }
@media (min-width: 768px) {
  .kul-in { grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); align-items: start; padding: 64px max(32px, env(safe-area-inset-right, 0px)) 64px max(32px, env(safe-area-inset-left, 0px)); }
  .kul h2 { font-size: 32px; line-height: 38.4px; text-align: left; }
  .kul-lead { text-align: left; }
  .kul-ph { order: -1; border-radius: var(--radius-lg); }
}
@media (min-width: 1024px) {
  .kul-in { grid-template-columns: 41% 50%; justify-content: space-between; padding-left: clamp(32px, 4.4vw, 64px); padding-right: clamp(32px, 4.4vw, 64px); }
}

/* Bölüm 14, SSS (30 Eki). Yapı ve ölçü PetLab ProBright Advanced "Frequently asked questions"tan: telefonda başlık üstte, 1024+ solda başlık 427 px, sağda liste 758 px, satır arası 1 px çizgi, soru 16 px, masaüstünde 72 px satır. Sorular canlı sayfadan. Wuffes Hip & Joint'te başlıksız düz liste. Görünüm sürüm 37 dili: iki tonlu başlık, telefonda sola yaslı, açılır liste tasarım sistemindeki .wf-acc. Cevaplar HTML'de açık durur (SEO şartı) */
.sss-in { display: grid; gap: var(--space-6); max-width: 1440px; margin: 0 auto; padding: 64px var(--gutter-r) 64px var(--gutter-l); }
.sss h2 { margin: 0; font: 400 28px/33.6px var(--font-serif); text-wrap: balance; }
.sss-l { min-width: 0; }
.sss-l p { max-width: 72ch; }
.sss-l a { color: var(--navy-900); }
/* Bölüm 12 ve 13'ün yeri: 12 sözleşmeyi, 13 kurulumdaki Judge.me denemesini bekliyor (Berk 30 Eki); #yorumlar bağlantıları buraya iner */
.yer { padding: var(--space-8) var(--gutter-r) 0 var(--gutter-l); scroll-margin-top: var(--space-4); }
.yer p { max-width: 1312px; margin: 0 auto; padding: var(--space-4); border-radius: var(--radius-box); background: var(--todo-bg); color: var(--todo-ink); font: 600 13px/18px var(--font-sans); text-align: center; }
.yorum { scroll-margin-top: var(--space-4); }
.yorum > .shopify-app-block { max-width: 1280px; margin: 0 auto; padding: 48px var(--gutter-r) 48px var(--gutter-l); }
@media (min-width: 768px) {
  .sss-in { padding: 64px max(32px, env(safe-area-inset-right, 0px)) 64px max(32px, env(safe-area-inset-left, 0px)); }
  .sss h2 { font-size: 32px; line-height: 38.4px; }
  .yer { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
  .yorum > .shopify-app-block { padding: 64px max(32px, env(safe-area-inset-right, 0px)) 64px max(32px, env(safe-area-inset-left, 0px)); }
}
@media (min-width: 1024px) {
  .sss-in { grid-template-columns: minmax(0, 427fr) minmax(0, 758fr); justify-content: space-between; align-items: start; gap: 64px; padding: 80px clamp(32px, 4.4vw, 64px); }
  .sss .wf-acc summary { min-height: 72px; }
}

/* Bölüm 15, alt bilgi (30 Eki, Berk: Wuffes'e biraz benzesin). Düzen Wuffes Hip & Joint wf-footer'dan: telefonda önce bülten, sonra bağlantılar; 1024+ solda bağlantı sütunları, 1 px dikey çizgi, sağda bülten (1/3); yapışık giriş + kare ok butonu; en altta logo + slogan aynı satırda, telefonda da; altta yasal satır. Woofle'da: iç panel (sürüm 37), lacivert zemin, logo sönük (%32), slogan Young Serif açık yeşil. Bağlantılar canlı sitenin alt bilgisinden. Slogan ürüne bağlı değil (çoklu ürün) */
.ftr { margin: var(--space-2); border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-900); color: var(--surface-0); }
.ftr-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); max-width: 1440px; margin: 0 auto; padding: var(--space-10) var(--space-4) var(--space-6); }
.ftr :focus-visible { outline-color: var(--surface-0); }
.ftr-ust { min-width: 0; }
.ftr-bas { margin: 0 0 var(--space-3); font: 600 18px/21.6px var(--font-sans); }
.ftr-form { display: flex; gap: var(--space-1); }
.ftr-form input { flex: 1; min-width: 0; height: 46px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-box) 0 0 var(--radius-box); background: var(--surface-0); color: var(--navy-900); font: 400 16px/22px var(--font-sans); }
.ftr-form input::placeholder { color: var(--text-muted); }
.ftr-form button { flex: none; display: grid; place-items: center; width: 56px; height: 46px; padding: 0; border: 0; border-radius: 0 var(--radius-box) var(--radius-box) 0; background: var(--green-100); color: var(--navy-900); cursor: pointer; }
.ftr-form button:hover { background: var(--surface-0); }
.ftr-form svg { width: 20px; height: 20px; }
.ftr-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); min-width: 0; }
.ftr-nav h2 { margin: 0 0 var(--space-2); font: 600 18px/21.6px var(--font-sans); }
.ftr-nav ul { margin: 0; padding: 0; list-style: none; }
.ftr-nav a { display: block; padding: 6px 0; color: rgba(255, 255, 255, 0.85); font: 400 14px/19.6px var(--font-sans); text-decoration: none; }
.ftr-nav a:hover { color: var(--surface-0); text-decoration: underline; }
.ftr-imza { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.ftr-logo { display: block; width: 100%; height: auto; opacity: 0.32; }
.ftr-slogan { margin: 0; font: 400 clamp(24px, 6.4vw, 76px)/1.08 var(--font-serif); color: var(--green-100); }
.ftr-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: calc(-1 * var(--space-4)) 0 0; font: 400 13px/18px var(--font-sans); color: rgba(255, 255, 255, 0.75); }
.ftr-alt a { padding: var(--space-3) 0; color: var(--green-100); font-weight: 600; }
@media (min-width: 768px) {
  .ftr-in { padding: 56px var(--space-10) var(--space-8); gap: 56px; }
  .ftr-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr-imza { gap: var(--space-8); }
}
@media (min-width: 1024px) {
  .ftr-in { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 64px; padding: 64px clamp(40px, 4.4vw, 64px) var(--space-8); }
  .ftr-ust { order: 2; align-self: stretch; padding-left: clamp(32px, 4.4vw, 64px); border-left: 1px solid rgba(202, 241, 198, 0.35); }
  .ftr-imza, .ftr-alt { order: 3; grid-column: 1 / -1; }
}

/* Yapışkan alt çubuk: mobilde tam genişlik, 768 px üstünde yüzen hap */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; gap: var(--space-2); padding: var(--space-3) var(--gutter-r) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)) var(--gutter-l); background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-top: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 -1px 0 rgba(1, 13, 38, 0.08); transition: transform 0.3s var(--ease-out), visibility 0.3s; }
/* Altbilgi görününce çubuk iner: altbilgiyi örtmez, altında boşluk gerekmez */
.buybar.gizli { transform: translateY(100%); visibility: hidden; }
.buybar-msg { margin: 0; text-align: center; font: 400 14px/19.6px var(--font-sans); color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar-msg b { font-weight: 400; color: var(--green-700); }
.buybar-msg small { font: inherit; }
/* Chizy sohbet balonu telefonda alt çubuğun üstüne çıkar, Satın Al düğmesini kapatmasın (Berk 1 Kas: taşma sürerse düzeltilir). Balonun konumu uygulamanın satır içi stilinde, bu yüzden !important */
@media (max-width: 767px) {
  #chizy-v2-split-shell { transition: bottom 0.3s ease; }
  body:has(.buybar:not(.gizli)) #chizy-v2-split-shell { bottom: calc(116px + env(safe-area-inset-bottom, 0px)) !important; }
}
.cta { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; height: 54px; padding: var(--space-4) var(--space-6); border: 0; border-radius: var(--radius-pill); background: var(--green-600); color: var(--surface-0); font: 600 16px/19.2px var(--font-sans); white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease-out; }
.cta svg { width: 18px; height: 18px; }
.cta:hover, .cta:active { background: var(--green-700); }

/* Satın alma paneli: mobilde alttan, 768 px üstünde sağdan yüzen çekmece (PetLab: 573 px, kenardan 24 px) */
.scrim { position: fixed; inset: 0; z-index: 30; background: var(--scrim); opacity: 0; transition: opacity 0.3s ease; }
.scrim.open { opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; display: flex; flex-direction: column; max-height: calc(100% - 56px); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface-0); transform: translateY(100%); transition: transform 0.35s var(--ease-out); }
.sheet.open { transform: none; }
.sheet-handle { flex: none; width: 48px; height: 4px; margin: var(--space-2) auto; padding: 0; border: 0; border-radius: var(--radius-md); background: var(--grey-200); cursor: pointer; }
.sheet-scroll { overflow-y: auto; overscroll-behavior: contain; }
.sheet .wf-sheet-body { padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.sheet .wf-sheet-bar { flex: none; padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 768px) {
  .crumbs { display: block; padding: var(--space-4) 0; }
  .pdp { padding: 0 max(32px, env(safe-area-inset-right, 0px)) var(--space-10) max(32px, env(safe-area-inset-left, 0px)); max-width: 1440px; margin: 0 auto; }
  .pdp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
  .gal { position: sticky; top: var(--hdr-yuk); width: 100%; }
  .info { width: 100%; padding: var(--space-4) 0 0; }
  .tab { font-size: 13px; }
  .prob-in { max-width: 680px; padding: 64px max(32px, env(safe-area-inset-right, 0px)) 64px max(32px, env(safe-area-inset-left, 0px)); }
  .prob h2 { font-size: 32px; line-height: 38.4px; }
  .prob-copy p { font-size: 18px; line-height: 25.2px; }
  .buybar { left: 50%; right: auto; bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); width: min(573px, calc(100% - 32px)); transform: translateX(-50%); grid-template-columns: 1fr auto; align-items: center; gap: var(--space-6); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-8); border: 1px solid var(--green-600); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), var(--shadow-float); }
  .buybar.gizli { transform: translate(-50%, calc(100% + var(--space-6))); }
  .buybar-msg { text-align: center; white-space: normal; color: var(--navy-900); }
  .buybar-msg b { display: block; font: 600 18px/24px var(--font-sans); color: var(--navy-900); }
  .buybar-msg small { display: block; font: 400 15px/20px var(--font-sans); }
  .buybar .cta { width: auto; }
  .sheet { left: auto; top: var(--space-6); right: max(24px, env(safe-area-inset-right, 0px)); bottom: var(--space-6); width: min(573px, calc(100% - 48px)); max-height: none; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-100); transform: translateX(calc(100% + 32px)); }
  .sheet-handle { display: none; }
  .sheet .wf-sheet-body { padding-left: var(--space-4); padding-right: var(--space-4); }
  .sheet .wf-sheet-bar { padding-bottom: var(--space-3); }
  .sheet-close { display: grid !important; }
}
@media (min-width: 1024px) {
  .pdp { padding-left: clamp(32px, 4.4vw, 64px); padding-right: clamp(32px, 4.4vw, 64px); }
  .pdp-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(40px, 5.5vw, 80px); }
  .info { padding-top: var(--space-6); }
  h1 { font-size: 32px; line-height: 38.4px; }
  .dots button { width: 12px; height: 12px; }
  .dots { bottom: var(--space-2); gap: var(--space-2); }
  .about h2 { font-size: 18px; line-height: 22px; }
  blockquote { font-size: 16px; line-height: 22.4px; }
  .person img { width: 52px; height: 52px; }
  .pane { padding: var(--space-4) 20px 20px; }
  .proof { gap: var(--space-1); padding: var(--space-2); font-size: 14px; line-height: 19.6px; bottom: 70px; }
  .proof svg { width: 16px; height: 16px; }
  .prob-in { max-width: 1280px; grid-template-columns: 1.3fr 1fr; align-items: center; gap: clamp(40px, 8vw, 147px); padding: 80px clamp(32px, 4.4vw, 64px); }
  .prob h2 { text-align: left; }
}
/* Açılır liste: "Hakkında bilgi al"ın altında; başlıklar PetLab sırası, görünüm tasarım sistemindeki .wf-acc (Berk 24 Eki) */
.acc .acc-body { padding-bottom: var(--space-4); font: 400 15px/22px var(--font-sans); color: var(--text-muted); }
.acc .acc-body > :last-child { margin-bottom: 0; }
.acc h3 { margin: var(--space-4) 0 var(--space-2); font: 600 15px/21px var(--font-sans); color: var(--navy-900); }
.acc .facts { margin: 0 0 var(--space-4); }
.acc .facts div { display: grid; grid-template-columns: 104px 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.acc .facts dt { font-weight: 600; color: var(--navy-900); }
.acc .facts dd { margin: 0; }
.acc .dose-table { margin-bottom: var(--space-4); color: var(--navy-900); }
.acc .dose-table td + td { white-space: nowrap; padding-left: var(--space-3); }
.acc .dose-table th + th { padding-left: var(--space-3); }
.sheet-close { display: none; flex: none; align-self: flex-end; margin: var(--space-2) var(--space-2) 0 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Panelin iç bileşenleri: tasarım sistemindeki bundle.css (sürüm 22), değişmeden */
500;600;700&family=Young+Serif&display=swap');

/* Woofle bileşenleri. Mobil önce: önizlemeler 375 px çerçevede.
   Satın alma paneli ölçüleri PetLab Co. mobilden (20 Eki 2026); gölge yalnız seçili hâlde, sert 2 px. */
.wf-frame { max-width: 375px; margin: 0 auto; padding: var(--space-4); box-sizing: border-box; }
.wf-frame * { box-sizing: border-box; }
.wf-stack { display: grid; gap: var(--space-3); }
.wf-muted { color: var(--text-muted); }
.wf-todo { background: var(--todo-bg); color: var(--todo-ink); border-radius: var(--radius-xs); padding: 0 4px; font-weight: 600; }
.wf-label { font: 700 12px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.wf-block-title { margin: 0 0 var(--space-2); font: 400 14px/19.6px var(--font-sans); }

/* Odak */
.wf-cta:focus-visible, .wf-toggle button:focus-visible, .wf-tier:focus-visible, .wf-kilo button:focus-visible, .wf-acc summary:focus-visible { outline: 2px solid var(--navy-900); outline-offset: 2px; }
.prob :focus-visible, .puan :focus-visible, .sy-panel :focus-visible { outline-color: var(--surface-0); }

/* Sepete ekle butonu: 54 px yeşil hap, fiyat metnin içinde */
.wf-cta { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; height: 54px; padding: var(--space-4) var(--space-6); border: 0; border-radius: var(--radius-pill); background: var(--green-600); color: var(--surface-0); font: 600 16px/19.2px var(--font-sans); white-space: nowrap; cursor: pointer; }
.wf-cta:hover, .wf-cta:active { background: var(--green-700); }
.wf-cta svg { flex: none; }

/* Yapışkan alt çubuk: kampanya satırı + tam genişlik buton; gölge yok, üst çizgi var */
.wf-sticky { position: sticky; bottom: 0; display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--surface-100); border-top: 1px solid var(--line-strong); }
.wf-sticky-msg { margin: 0; text-align: center; font: 400 14px/19.6px var(--font-sans); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-sticky-msg b { font-weight: 400; color: var(--green-700); }

/* Kilo seçimi: 3 düğme yan yana, köşe 16 */
.wf-kilo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.wf-kilo button { min-height: 46px; padding: var(--space-3) var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-0); color: var(--navy-900); font: 600 14px/19.6px var(--font-sans); white-space: nowrap; cursor: pointer; }
.wf-kilo button[aria-pressed="true"] { background: var(--green-50); border-color: var(--green-600); box-shadow: var(--shadow-selected); }

/* Abonelik / Tek seferlik geçişi */
.wf-toggle { display: grid; grid-template-columns: 1fr 1fr; padding: var(--space-1); border-radius: var(--radius-pill); background: var(--surface-rail); }
.wf-toggle button { display: flex; align-items: center; justify-content: center; gap: var(--space-1); height: 36px; padding: var(--space-2); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font: 600 14px/19.6px var(--font-sans); white-space: nowrap; cursor: pointer; }
.wf-toggle button[aria-pressed="true"] { background: var(--surface-0); color: var(--green-700); }
.wf-toggle svg { flex: none; }
.wf-toggle-note { margin: var(--space-2) 0 0; font: 400 12px/16.8px var(--font-sans); color: var(--text-muted); }
.wf-toggle-note b { font-weight: 600; color: var(--green-700); }

/* Kademe kartı */
.wf-tiers { display: grid; gap: var(--space-3); }
.wf-tier { position: relative; display: flex; flex-direction: column; gap: var(--space-2); width: 100%; padding: var(--space-3) var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-0); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wf-tier:hover { border-color: var(--line-hover); }
.wf-tier[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.wf-tier[aria-disabled="true"]:hover { border-color: var(--line); }
.wf-tier[aria-checked="true"] { background: var(--green-50); border-color: var(--green-600); box-shadow: var(--shadow-selected); }
.wf-tier-row { display: flex; align-items: flex-start; gap: var(--space-3); padding-top: var(--space-1); }
.wf-radio { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-left: var(--space-1); border: 1px solid var(--navy-900); border-radius: var(--radius-pill); background: var(--surface-0); }
.wf-tier[aria-checked="true"] .wf-radio { background: var(--navy-900); }
.wf-tier[aria-checked="true"] .wf-radio::after { content: ""; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--surface-0); }
.wf-tier-main { flex: 1; min-width: 0; }
.wf-tier-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.wf-tier-name { margin-right: var(--space-1); font: 600 16px/19.2px var(--font-sans); white-space: nowrap; }
.wf-tier-sub { margin: 3px 0 0; font: 400 12px/16.8px var(--font-sans); color: var(--text-muted); }
.wf-price { flex: none; text-align: right; white-space: nowrap; }
.wf-price b { display: block; font: 600 14px/19.6px var(--font-sans); }
.wf-price s { display: block; font: 400 12px/18px var(--font-sans); color: var(--text-muted); }
.wf-perks { display: none; margin: var(--space-1) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid rgba(1, 13, 38, 0.15); list-style: none; }
.wf-tier[aria-checked="true"] .wf-perks { display: grid; gap: var(--space-2); }
.wf-perks li { display: flex; align-items: flex-start; gap: var(--space-2); padding-left: var(--space-1); font: 400 14px/19.6px var(--font-sans); }
.wf-perks svg { flex: none; margin-top: 2px; }

/* Kart çıkartması: canlı sitedeki konum (üst kenardan 7 px taşar, sağdan 21 px), PetLab'ın "Best Value" rengi */
.wf-tier--tagged { padding-top: 20px; }
.wf-sticker { position: absolute; top: -8px; right: 20px; padding: 5px 11px; border-radius: 0 0 var(--radius-xs) var(--radius-xs); background: var(--gold-300); color: var(--navy-900); font: 600 12px/16.8px var(--font-sans); white-space: nowrap; }

/* Teslimat kartı (PetLab ölçüsü) */
.wf-ship { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-box); background: var(--surface-ice); color: var(--navy-900); }
.wf-ship svg { flex: none; }
.wf-ship b { display: block; font: 600 14px/19.6px var(--font-sans); }
.wf-ship span { display: block; margin-top: var(--space-1); font: 400 12px/16.8px var(--font-sans); }

/* Ödeme yöntemleri: resmî Shopify ödeme ikonları, 38×24 */
.wf-pay { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); }
.wf-pay img { display: block; width: 42px; height: 24px; }

/* Rozet: köşe 4, normal yazım, kalın 12 px */
.wf-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); font: 600 12px/16.8px var(--font-sans); white-space: nowrap; }
.wf-badge--discount { background: var(--discount-bg); color: var(--green-700); }
.wf-badge--gold { background: var(--gold-300); color: var(--navy-900); }
.wf-badge--navy { background: var(--navy-900); color: var(--surface-0); }
.wf-badge--soft { background: var(--green-50); color: var(--green-700); }
.wf-badge--outline { background: var(--surface-0); color: var(--navy-900); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Satın alma paneli (alttan açılır) */
.wf-sheet { max-width: 375px; margin: 0 auto; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface-0); }
.wf-sheet-handle { width: 48px; height: 4px; margin: var(--space-2) auto; border-radius: var(--radius-md); background: var(--grey-200); }
.wf-sheet-body { display: grid; gap: var(--space-6); padding: var(--space-4) var(--space-4) var(--space-6); background: var(--surface-100); }
.wf-sheet-trust { display: grid; justify-items: center; gap: var(--space-3); }
.wf-secure { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: 400 12px/16.8px var(--font-sans); }
.wf-sheet-bar { padding: var(--space-3) var(--space-4); background: var(--surface-0); border-top: 1px solid var(--line-strong); }

/* İstatistik çubuğu */
.wf-stat { display: grid; gap: var(--space-2); }
.wf-stat-num { font: 400 48px/52px var(--font-serif); }
.wf-stat-track { height: 12px; border-radius: var(--radius-pill); background: var(--surface-ice); overflow: hidden; }
.wf-stat-fill { height: 100%; border-radius: var(--radius-pill); background: var(--green-600); }
.wf-foot { font-size: 12px; line-height: 16.8px; color: var(--text-muted); }

/* Yorum kartı (19 Eki taslağı; Berk 20 Eki: sayfa tasarlandıktan sonra ele alınacak) */
.wf-review { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-0); }
.wf-stars { color: var(--star); letter-spacing: 2px; font-size: 18px; }
.wf-quote { margin: var(--space-3) 0; font: 400 18px/26px var(--font-serif); }
.wf-who { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 14px; line-height: 20px; }

/* Açılır liste */
.wf-acc { border-top: 1px solid var(--line); }
.wf-acc details { border-bottom: 1px solid var(--line); }
.wf-acc summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3) 0; font: 600 16px/24px var(--font-sans); cursor: pointer; list-style: none; }
.wf-acc summary::-webkit-details-marker { display: none; }
.wf-acc summary::after { content: "+"; flex: none; font: 400 24px/24px var(--font-sans); }
.wf-acc details[open] summary::after { content: "−"; }
.wf-acc p { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: 15px; line-height: 22px; }

/* Zaman çizelgesi kartı */
.wf-tl { padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-0); border: 1px solid var(--line); }
.wf-tl .wf-label { color: var(--green-700); }
.wf-tl p { margin: var(--space-2) 0 0; }
.wf-ph { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: var(--space-3); border: 1px dashed var(--grey-400); border-radius: var(--radius-sm); background: var(--surface-ice); color: var(--text-muted); font-size: 13px; text-align: center; padding: var(--space-2); }

/* Geçiş ikonu: PetLab gibi her geçişte yarım tur döner, geri geçince geri döner (PetLab 0,3 sn; bizde 0,5 sn) */
.wf-toggle[data-mode="tek"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .wf-tier, .wf-kilo button, .wf-toggle button, .wf-cta { transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
  .wf-toggle svg { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
}


/* Özgünlük dokunuşları (sürüm 37, 30 Eki): renk, panel ve bölüm yerleşimi aynı. Bu blok silinirse sayfa görünümü sürüm 34'e döner.
   Kaynak: Seed ve Scandinavian Biolabs (iç panel, çizgili sekme, kutusuz özet, sola yaslı başlık), My Way Up ve Purewell (iki tonlu başlık). */
:root { --ton: var(--green-700); }
.ton { color: var(--ton); }

.prob, .puan { margin: var(--space-2); border-radius: var(--radius-lg); overflow: hidden; }

.tabs { align-items: stretch; border-bottom: 1px solid var(--line-strong); }
.tab, .tab:first-child, .tab:last-child, .tab[aria-selected="true"] { height: 44px; margin-bottom: -1px; padding: 0 var(--space-1); border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; font: 500 14px/19.6px var(--font-sans); color: var(--text-muted); }
.tab[aria-selected="true"] { border-bottom-color: var(--navy-900); font-weight: 600; color: var(--navy-900); }
.tab:not(:last-child)::after { display: none; }
.tab span { max-width: none; }
.pane { padding: var(--space-4) 0 0; border: 0; border-radius: 0; background: none; }

.ay-ozet { padding: var(--space-4) 0; border-block: 1px solid var(--line-strong); border-radius: 0; background: none; }
.ay-ozet p { font: 400 20px/24px var(--font-serif); }

.bil-yok { margin: 0; font: 500 13px/18px var(--font-sans); color: var(--text-muted); text-align: center; }
.bil-yok::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: var(--radius-pill); background: var(--green-600); vertical-align: 2px; }

@media (max-width: 767px) {
  .kanit h2, .fayda h2, .ay h2, .ay-lead, .bil h2, .bil-lead, .uz h2, .uz-lead, .kul h2, .kul-lead { text-align: left; }
  .kanit-src, .ay-not { margin-left: 0; text-align: left; }
  .ay-ozet { justify-items: stretch; text-align: left; }
  .ay-ozet ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
  .bil-yok { text-align: left; }
}

/* Anasayfa hero (31 Eki, ikinci sürüm). Yapı Wuffes ve Nutrafol anasayfalarından: kenardan kenara görsel, metin görselin üstünde, 430 px'te 720 px yükseklik; metin altta (Nutrafol), başlık 36 px sola yaslı ve tam genişlik buton (Wuffes). Köşe yok, bu yalnız hero denemesi (Berk 31 Eki). Özgünleştirme sonra */
.hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: min(100svh, 167.4vw); min-height: 560px; overflow: hidden; background: var(--navy-900); color: var(--surface-0); }
.hero-g { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(1, 13, 38, 0.94) 0%, rgba(1, 13, 38, 0.66) 55%, rgba(1, 13, 38, 0) 74%); }
.hero-in { position: relative; z-index: 1; display: grid; gap: var(--space-3); padding: var(--space-6) var(--gutter-r) var(--space-8) var(--gutter-l); }
.hero h1 { font: 400 36px/40px var(--font-serif); }
.hero-puan { justify-content: flex-start; margin: 0; }
.hero .stars, .hero .stars svg { width: 110px; height: 20px; }
.hero-alt { margin: 0; font: 400 16px/22.4px var(--font-sans); color: var(--surface-0); text-wrap: pretty; }
.hero-cta { display: flex; align-items: center; justify-content: center; height: 48px; margin-top: var(--space-1); background: var(--green-100); color: var(--navy-900); font: 700 16px/19.2px var(--font-sans); text-decoration: none; }
.hero-cta:hover { background: var(--surface-0); }
.hero :focus-visible { outline-color: var(--surface-0); }
.hero-indirim { margin: 0; font: 600 14px/19.6px var(--font-sans); color: var(--green-100); text-align: center; }

/* Tema uyarlaması (sürüm 41 üstüne eklenenler) */
product-component { display: block; }
.wf-fill { width: 100%; height: 100%; object-fit: cover; }
.fayda-ph:has(.wf-fill), .ay-ph:has(.wf-fill), .uz-ph:has(.wf-fill), .kul-ph:has(.wf-fill), .arka-ph:has(.wf-fill) { padding: 0; overflow: hidden; background: none; }
.wf-err { margin: 0; padding: 0 var(--space-4) var(--space-2); color: #b00020; font: 600 13px/18px var(--font-sans); text-align: center; }
/* Yönetici önizleme çubuğu alttaki Satın Al'ı örtüyor; müşteri bu çubuğu görmez */
#PBarNextFrameWrapper { display: none !important; }
html { scroll-padding-top: var(--hdr-yuk); }
@media (min-width: 768px) {
  :root { --hap-l: max(16px, env(safe-area-inset-left, 0px)); --hap-r: max(16px, env(safe-area-inset-right, 0px)); --hdr-ust: calc(12px + env(safe-area-inset-top, 0px)); --hap-b: 56px; }
}
@media (min-width: 1024px) {
  :root { --hap-l: clamp(32px, 4.4vw, 64px); --hap-r: clamp(32px, 4.4vw, 64px); }
}

/* Sepet çekmecesi: yapı ve ölçü PetLab Co. sepetinden (1 Kas 2026, 393 ve 1440 px): telefonda alttan, üstten 56 px boşluk, boy içerikten bağımsız sabit; 768+ sağdan 573 px, kenardan 24 px; başlık ve ödeme butonu sabit, orta kısım kayar; fiyat 18 px yeşil, eski fiyat üstü çizili 14 px; adet kutusu köşe 8. Kabuk satın alma panelinin .sheet'i, geçiş aynı 0,35 sn; ücretsiz kargo çubuğu, hediye ve öneri ürün yok (Berk). z-index paneli de örter */
#spSc { z-index: 32; }
.sheet.sp { z-index: 33; height: calc(100% - 56px); background: var(--surface-0); outline: none; will-change: transform; }
.sheet.sp[hidden] { display: none; }
.sp-ic { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.sp-ic .sheet-scroll { flex: 1; }
.sp-bas { flex: none; margin: 0; padding: var(--space-1) var(--gutter-r) var(--space-3) var(--gutter-l); border-bottom: 1px solid var(--line); font: 600 16px/24px var(--font-sans); text-align: center; }
.sp-liste { margin: 0; padding: 0; list-style: none; }
.sp-sat { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-4) var(--gutter-r) var(--space-4) var(--gutter-l); border-bottom: 1px solid var(--line); }
.sp-sat[hidden] { display: none; }
.sp-g img { display: block; width: 72px; height: 72px; border-radius: var(--radius-box); object-fit: cover; background: var(--surface-100); }
.sp-bilgi { display: grid; justify-items: start; align-content: start; gap: 2px; min-width: 0; }
.sp-ad { font: 600 16px/22px var(--font-sans); text-decoration: none; }
.sp-alt { margin: 0; font: 400 14px/19.6px var(--font-sans); color: var(--text-muted); }
.sp-fiyat { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity 0.15s ease; }
.sp-fiyat s { display: block; font: 400 14px/19.6px var(--font-sans); color: var(--text-muted); }
.sp-fiyat b { display: block; font: 600 18px/24px var(--font-sans); color: var(--green-700); }
.sp-adet { display: inline-flex; align-items: center; margin-top: var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-box); }
.sp-adet button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.sp-adet svg { display: block; width: 18px; height: 18px; }
.sp-adet .cop, .sp-sat[data-n="1"] .eksi { display: none; }
.sp-sat[data-n="1"] .cop { display: block; }
.sp-adet output { min-width: 28px; font: 600 15px/20px var(--font-sans); text-align: center; font-variant-numeric: tabular-nums; }
.sp-guven { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-4) var(--gutter-r) var(--space-4) var(--gutter-l); list-style: none; }
.sp-guven li { display: flex; align-items: center; gap: var(--space-2); font: 400 14px/19.6px var(--font-sans); color: var(--text-muted); }
.sp-guven svg { display: block; flex: none; width: 18px; height: 18px; fill: currentColor; color: var(--green-700); }
.sp-bos { display: grid; flex: 1; align-content: center; justify-items: center; gap: var(--space-4); padding: var(--space-6) var(--gutter-r) var(--space-6) var(--gutter-l); overflow-y: auto; }
.sp-bos > p { margin: 0; font: 400 20px/24px var(--font-serif); }
.sp-bos-ik { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--surface-100); }
.sp-bos .yan-urun { justify-self: stretch; margin: var(--space-2) 0 0; color: var(--navy-900); text-decoration: none; }
.sp-ic .wf-cta { text-decoration: none; }
.sp-ic .wf-pay { margin-top: var(--space-3); }
.sp-hata { margin: 0 0 var(--space-3); color: var(--todo-ink); font: 600 14px/19.6px var(--font-sans); text-align: center; }
.sp-hata[hidden] { display: none; }
.sp-kod { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-4) var(--gutter-r) 0 var(--gutter-l); }
.sp-kod-btn { min-height: 24px; padding: 0; border: 0; background: none; color: var(--navy-900); font: 500 14px/19.6px var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sp-kod-var { display: flex; align-items: center; gap: var(--space-3); width: 100%; margin: 0; font: 400 14px/19.6px var(--font-sans); }
.sp-kod-var b { font-weight: 600; }
.sp-kod-tut { margin-left: auto; color: var(--green-700); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-kod-var .sp-kod-btn { margin-left: auto; }
.sp-kod-tut + .sp-kod-btn { margin-left: 0; }
.sp-kod-form { width: 100%; }
.sp-kod-form[hidden] { display: none; }
.sp-kod-form label { display: grid; gap: var(--space-2); font: 500 14px/19.6px var(--font-sans); }
.sp-kod-kutu { display: flex; align-items: center; gap: var(--space-2); padding: 8px 16px; border: 1px solid var(--navy-900); border-radius: 8px; background: var(--surface-0); }
.sp-kod-kutu:focus-within { outline: 2px solid var(--green-600); outline-offset: 2px; }
.sp-kod-kutu input { flex: 1; min-width: 0; height: 35px; padding: 0; border: 0; background: transparent; color: var(--navy-900); font: 400 16px/35px var(--font-sans); outline: none; }
.sp-kod-hata { margin: var(--space-2) 0 0; color: var(--todo-ink); font: 600 14px/19.6px var(--font-sans); }
.sp-kod-hata[hidden] { display: none; }
.sp-ic[aria-busy="true"] .sp-kod-kutu { opacity: 0.6; }
.sp-ic[aria-busy="true"] .sp-fiyat { opacity: 0.45; }
.sp-ic[aria-busy="true"] .wf-cta { opacity: 0.7; }
@media (min-width: 768px) {
  .sheet.sp { height: auto; }
  .sp .sheet-close { position: absolute; top: var(--space-3); right: var(--space-3); margin: 0; }
  .sp-bas { padding: 20px 56px; }
  .sp-sat, .sp-guven, .sp-bos, .sp-kod { padding-left: var(--space-6); padding-right: var(--space-6); }
  .sp-ic .wf-sheet-bar { padding-left: var(--space-6); padding-right: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) { .sheet.sp { transition: none; } }
/* Fiyat: menü ve küçük kartta eski fiyat üstü çizili */
.yan-urun em s { margin-left: var(--space-1); font: 400 13px/18px var(--font-sans); color: var(--text-muted); }
.ftr-tamam { margin: 0; color: var(--green-100); font: 600 15px/21px var(--font-sans); }
.ftr-hata { margin: var(--space-2) 0 0; color: var(--gold-300); font: 400 14px/19.6px var(--font-sans); }
.ftr .wf-pay { justify-content: flex-start; margin-top: var(--space-4); }