/* Ürünler sayfası — sayfaya özel stiller (yalnızca main.css token'larını kullanır) */

/* ---------- GİRİŞ (bottle dizisi) ---------- */
.pr-hero .seq__stage { background: var(--g-glacier); }
.pr-hero__intro, .pr-hero__index {
  position: relative;
  display: grid; align-content: end; justify-items: start;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(3rem, 9vh, 6rem);
  min-height: 100vh;
}
.seq--live .pr-hero__intro, .seq--live .pr-hero__index { min-height: 0; height: 100%; }
.pr-hero__intro > *, .pr-hero__index > * { max-width: min(100%, 44rem); }
.pr-hero__title { margin-top: 1.4rem; color: var(--c-ink); max-width: 9.5ch; }
.pr-hero__lead { margin-top: 1.75rem; max-width: 30em; }
.pr-hero__cue {
  display: flex; align-items: center; gap: .9rem; margin-top: 2.25rem;
  font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--c-royal);
}
.pr-hero__cue-line { position: relative; width: 1px; height: 46px; background: rgba(36, 73, 151, .2); overflow: hidden; }
.pr-hero__cue-line::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: var(--c-cyan); animation: pr-cue 2.2s var(--ease-liquid) infinite; }
@keyframes pr-cue { to { top: 100%; } }
.pr-hero .seq-meter { background: rgba(36, 73, 151, .14); }
.pr-hero .seq-meter::after { background: var(--c-cyan); }

.pr-hero__index-title { margin-top: 1.2rem; color: var(--c-ink); }
.pr-index { list-style: none; margin-top: clamp(1.5rem, 4vh, 2.75rem); width: min(100%, 40rem); border-top: 1px solid var(--c-line-strong); }
.pr-index li { border-bottom: 1px solid var(--c-line); }
.pr-index a {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: baseline; gap: 1rem;
  padding: clamp(.7rem, 1.8vh, 1.05rem) 0; text-decoration: none; color: var(--c-ink);
  transition: color .3s, padding-left .5s var(--ease-out);
}
.pr-index a:hover { color: var(--c-cyan); padding-left: .6rem; }
.pr-index__no { font-size: var(--fs-micro); color: var(--c-blue); letter-spacing: .1em; }
.pr-index__name { font-family: var(--f-display); font-size: clamp(1.45rem, 2.6vw, 2.2rem); line-height: 1.1; letter-spacing: -.02em; font-weight: 380; }
.pr-index__meta { font-size: .74rem; color: var(--c-muted); white-space: nowrap; }

/* Kareler (gerçek video) yüklendiğinde metin okunaklı kalsın */
.pr-hero[data-seq-mode="frames"] .pr-hero__intro::before,
.pr-hero[data-seq-mode="frames"] .pr-hero__index::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: min(100%, 60rem); z-index: -1;
  background: linear-gradient(90deg, rgba(246, 248, 251, .92), rgba(246, 248, 251, 0));
}
@media (max-width: 760px) {
  .pr-hero[data-seq-mode="frames"] .pr-hero__intro::before,
  .pr-hero[data-seq-mode="frames"] .pr-hero__index::before {
    width: 100%; background: linear-gradient(180deg, rgba(246, 248, 251, 0) 45%, rgba(246, 248, 251, .9) 68%, rgba(246, 248, 251, .97) 100%);
  }
}

@media (max-width: 760px) {
  .pr-hero__intro, .pr-hero__index { padding-bottom: 2.25rem; }
  .pr-hero__title { margin-top: 1rem; }
  .pr-hero__lead { margin-top: 1.1rem; font-size: 1rem; max-width: 22em; }
  .pr-hero__cue { margin-top: 1.25rem; }
  .pr-hero__cue-line { height: 30px; }
  .pr-hero__index-title { font-size: 1.85rem; margin-top: .8rem; }
  .pr-index { margin-top: 1.1rem; }
  .pr-index a { grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: .6rem; padding: .62rem 0; }
  .pr-index__name { font-size: 1.3rem; }
  .pr-index__meta { font-size: .66rem; }
}

/* ---------- FİYAT NOTU ---------- */
.pr-price { background: var(--c-white); border-block: 1px solid var(--c-line); }
.pr-price__inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 1rem clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
}
.pr-price__label { display: flex; align-items: center; gap: .7rem; color: var(--c-indigo); }
.pr-price__label svg { width: 22px; height: 22px; color: var(--c-cyan); flex: none; }
.pr-price__label h2 { font-size: var(--fs-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.pr-price__text { color: var(--c-muted); font-size: var(--fs-small); max-width: 46em; }
.pr-price__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 980px) {
  .pr-price__inner { grid-template-columns: minmax(0, 1fr); }
  .pr-price__actions .btn { flex: 1 1 0; }
}

/* ---------- FİLTRE ÇUBUĞU (yapışkan) ---------- */
.pr-catalog { position: relative; }
.pr-filter {
  position: sticky; top: var(--header-h); z-index: 40;
  transition: top .5s var(--ease-out);
}
body:has(.site-header.is-hidden) .pr-filter { top: 0; }
.pr-filter::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(246, 248, 251, .86);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--c-line);
}
.pr-filter__inner { display: flex; align-items: stretch; gap: 1.5rem; min-height: 64px; }
.pr-filter__tabs {
  display: flex; gap: clamp(1.1rem, 2.6vw, 2.4rem); flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  padding-right: 28px;
}
.pr-filter__tabs::-webkit-scrollbar { display: none; }
.pr-tab {
  position: relative; display: inline-flex; align-items: center; gap: .45rem; flex: none;
  padding: 0; border: 0; background: none; white-space: nowrap;
  font-weight: 600; font-size: .95rem; color: var(--c-muted);
  transition: color .3s;
}
.pr-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 1;
  background: var(--c-cyan); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out);
}
.pr-tab:hover { color: var(--c-ink); }
.pr-tab[aria-pressed="true"] { color: var(--c-ink); }
.pr-tab[aria-pressed="true"]::after { transform: scaleX(1); }
.pr-tab__count {
  font-size: .68rem; min-width: 1.6rem; padding: .1rem .35rem; text-align: center;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-xs); color: var(--c-muted);
  transition: background-color .3s, color .3s, border-color .3s;
}
.pr-tab[aria-pressed="true"] .pr-tab__count { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.pr-tab:focus-visible { outline-offset: -2px; }

.pr-filter__cart {
  display: inline-flex; align-items: center; gap: .55rem; flex: none; align-self: center;
  height: 42px; padding: 0 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-ink);
  font-weight: 700; font-size: .88rem; transition: background-color .3s, color .3s, border-color .3s;
}
.pr-filter__cart:hover { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.pr-filter__cart svg { width: 18px; height: 18px; }
.pr-filter__cart-count { font-size: .78rem; padding-left: .55rem; border-left: 1px solid currentColor; }
@media (max-width: 760px) {
  .pr-filter__inner { min-height: 54px; gap: .75rem; }
  /* mobilde kompakt sepet: yalnızca ikon + adet */
  .pr-filter__cart { height: 38px; padding: 0 .7rem; gap: .4rem; }
  .pr-filter__cart-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pr-filter__cart-count { padding-left: .4rem; }
  .pr-tab { font-size: .9rem; }
}

/* ---------- KATALOG GRUPLARI ---------- */
.pr-groups { padding-block: clamp(3rem, 6vw, 5.5rem) var(--section-y); }
.pr-group + .pr-group { margin-top: clamp(4.5rem, 9vw, 8rem); }
.pr-catalog[data-filter]:not([data-filter="all"]) .pr-group { margin-top: 0; }
.pr-group { scroll-margin-top: calc(var(--header-h) + 80px); }
.pr-group__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end;
  gap: 1.25rem clamp(1.5rem, 4vw, 4rem); margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.pr-group__no {
  font-size: clamp(3.4rem, 8vw, 7.5rem); line-height: .8; font-weight: 300; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px var(--c-cyan);
  font-family: var(--f-display);
}
.pr-group__text { display: grid; gap: .9rem; }
.pr-group__text h2 { color: var(--c-ink); }
.pr-group__desc { color: var(--c-muted); max-width: 36em; text-wrap: pretty; }
.pr-group__facts {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(6.5rem, auto); margin: 0;
  border-top: 1px solid var(--c-line-strong);
}
.pr-group__facts > div { padding: .7rem 1.25rem .2rem 0; }
.pr-group__facts > div + div { padding-left: 1.25rem; border-left: 1px solid var(--c-line); }
.pr-group__facts dt { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue); }
.pr-group__facts dt.u-asis, .pr-analysis__list dt.u-asis { letter-spacing: .06em; }
.pr-group__facts dd { margin: .25rem 0 0; font-size: .92rem; color: var(--c-ink); white-space: nowrap; }
@media (max-width: 980px) {
  .pr-group__head { grid-template-columns: auto minmax(0, 1fr); }
  .pr-group__facts { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
  .pr-group__head { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .pr-group__no { font-size: 3rem; }
  .pr-group__facts { grid-auto-columns: minmax(0, auto); width: 100%; }
  .pr-group__facts > div { padding-right: .9rem; }
  .pr-group__facts > div + div { padding-left: .9rem; }
  .pr-group__facts dd { font-size: .82rem; }
}

.pr-noscript { padding: 1.5rem; background: var(--c-mineral); color: var(--c-muted); }

/* Hairline ızgara: eksik satırdaki boş hücreler gri kalmasın diye çizgiler kartlarda */
.pr-grid { gap: 0; background: none; border: 0; border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.pr-grid > .product-card { border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
@media (min-width: 1140px) { .pr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 561px) and (max-width: 1139px) { .pr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* etiket (Geri dönüşümlü / Dönüşümsüz) kapakla çakışmasın */
.pr-grid .product-card__media img { top: 19%; height: 72%; }

/* Bardak / Soda son satır dolgu paneli */
.pr-filler {
  position: relative; display: grid; align-content: space-between; justify-items: start; gap: 1.1rem;
  grid-column: 1 / -1; padding: clamp(1.25rem, 2.5vw, 2rem); overflow: hidden; isolation: isolate;
  background: var(--g-deep); color: var(--c-text-inv);
}
.pr-filler::before {
  content: ""; position: absolute; left: -20%; bottom: -60%; width: 80%; height: 140%; z-index: -1;
  background: radial-gradient(closest-side, rgba(21, 119, 192, .4), rgba(21, 119, 192, 0));
}
.pr-filler .eyebrow { color: var(--c-ice); }
.pr-filler__title { font-family: var(--f-display); font-weight: 350; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; color: var(--c-white); max-width: 14ch; }
.pr-filler__title em { color: var(--c-ice); }
.pr-filler__text { color: var(--c-text-inv); opacity: .86; max-width: 30em; font-size: var(--fs-small); }
@media (min-width: 1140px) { .pr-filler { grid-column: span 2; } }
@media (min-width: 561px) and (max-width: 1139px) { .pr-filler--bardak { grid-column: span 1; } }

@media (max-width: 560px) {
  .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-grid > .product-card { padding: .75rem; }
  .pr-analysis { grid-column: 1 / -1; }
}

/* Kart eklentileri */
.pr-grid .product-card__tag { background: rgba(255, 255, 255, .9); }
.pr-incart {
  position: absolute; right: .75rem; top: .75rem; z-index: 1;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: var(--r-xs); background: var(--c-cyan); color: var(--c-white);
}
.pr-incart[hidden] { display: none; }
.pr-grid .product-card { transition: background-color .4s, box-shadow .4s; }
.pr-grid .product-card.is-in-cart { box-shadow: inset 0 2px 0 var(--c-cyan); }
.pr-grid [data-add-to-cart].is-added { --btn-bg: var(--c-cyan); }

/* Pet ızgarasındaki analiz paneli (boş hücreleri doldurur) */
.pr-analysis {
  position: relative; display: grid; align-content: start; gap: 1.25rem;
  padding: clamp(1.25rem, 2.5vw, 2rem); overflow: hidden; isolation: isolate;
  background: var(--g-deep); border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.pr-analysis::before {
  content: ""; position: absolute; right: -15%; top: -40%; width: 70%; height: 120%; z-index: -1;
  background: radial-gradient(closest-side, rgba(21, 119, 192, .45), rgba(21, 119, 192, 0));
}
.pr-analysis__list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--c-line-inv); }
.pr-analysis__list > div { padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--c-line-inv); min-width: 0; }
.pr-analysis__list dt { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ice); }
.pr-analysis__list dd { margin: .2rem 0 0; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1; font-weight: 300; letter-spacing: -.03em; color: var(--c-white); white-space: nowrap; }
.pr-analysis__list small { font-size: .72rem; letter-spacing: 0; color: var(--c-muted-inv); }
.pr-analysis__note { color: var(--c-muted-inv); font-size: var(--fs-small); max-width: 34em; }
.pr-analysis .link-arrow { justify-self: start; color: var(--c-ice); }
@media (min-width: 1140px) {
  .pr-analysis { grid-column: span 3; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-content: stretch; column-gap: 2.5rem; }
  .pr-analysis .eyebrow { grid-column: 1 / -1; }
  .pr-analysis__list { grid-column: 1; grid-row: 2 / span 2; }
  .pr-analysis__note { grid-column: 2; align-self: start; padding-top: .9rem; }
  .pr-analysis .link-arrow { grid-column: 2; align-self: end; }
}

/* Filtre değişince kartlar sırayla belirir */
.pr-group.is-entering .product-card { animation: pr-in .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }
.pr-group.is-entering .pr-group__head { animation: pr-in .7s var(--ease-out) both; }
@keyframes pr-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }

.pr-missing {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 2rem;
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--c-line);
}
.pr-missing .link-arrow { color: var(--c-indigo); }

/* ---------- GEL AL / ADRESE TESLİM ---------- */
.pr-modes__lead { max-width: 26em; }
.pr-modes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--c-line); }
.pr-mode {
  position: relative; display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1.5rem, 3.5vw, 3.25rem); min-width: 0;
}
.pr-mode--pickup { background: var(--c-mineral); }
.pr-mode--delivery { background: linear-gradient(180deg, #1E67B2 0%, #244997 45%, #141B52 100%); overflow: hidden; isolation: isolate; }
.pr-mode--delivery::before { /* yüzeyden süzülen ışık */
  content: ""; position: absolute; inset: -30% -20% auto auto; width: 70%; height: 90%; z-index: -1;
  background: radial-gradient(closest-side, rgba(159, 212, 245, .35), rgba(159, 212, 245, 0));
}
.pr-mode__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: clamp(.5rem, 2vw, 1.5rem); }
.pr-mode__icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--c-line-strong); color: var(--c-cyan); background: var(--c-white);
}
.pr-mode__icon svg { width: 26px; height: 26px; }
.pr-mode--delivery .pr-mode__icon { border-color: var(--c-line-inv); color: var(--c-ice); background: rgba(255, 255, 255, .06); }
.pr-mode__tag { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue); }
.pr-mode--delivery .pr-mode__tag { color: var(--c-ice); font-weight: 500; }
.pr-mode h3 { font-size: clamp(2rem, 3.4vw, 3rem); color: var(--c-ink); }
.pr-mode--delivery h3 { color: var(--c-white); }
.pr-mode__lead { color: var(--c-muted); max-width: 32em; }
.pr-mode--delivery .pr-mode__lead { color: var(--c-text-inv); }
.pr-mode__specs { margin: .5rem 0 0; border-top: 1px solid var(--c-line); }
.pr-mode--delivery .pr-mode__specs { border-color: var(--c-line-inv); }
.pr-mode__specs > div {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .75rem 0;
  border-bottom: 1px solid var(--c-line);
}
.pr-mode--delivery .pr-mode__specs > div { border-color: var(--c-line-inv); }
.pr-mode__specs dt { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue); padding-top: .2rem; }
.pr-mode--delivery .pr-mode__specs dt { color: var(--c-ice); font-weight: 500; }
.pr-mode__specs dd { margin: 0; font-size: .95rem; }
.pr-mode__actions { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .6rem; }

.pr-status { display: inline-flex; align-items: center; gap: .5rem; }
.pr-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-muted); flex: none; }
.pr-status[data-state="open"]::before { background: var(--c-cyan); box-shadow: 0 0 0 3px rgba(21, 119, 192, .18); }
.pr-status[data-state="open"] { color: var(--c-indigo); font-weight: 600; }

.pr-steps {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--c-line-strong);
}
.pr-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; padding: 1.6rem 1.75rem 0 0; }
.pr-steps li + li { padding-left: 1.75rem; border-left: 1px solid var(--c-line); }
.pr-steps__no { min-width: 1.7rem; font-size: 2.6rem; line-height: .9; font-weight: 300; color: var(--c-cyan); }
.pr-steps h3 { font-family: var(--f-sans); font-weight: 700; font-size: 1.02rem; color: var(--c-ink); }
.pr-steps p { margin-top: .35rem; color: var(--c-muted); font-size: var(--fs-small); }

@media (max-width: 900px) {
  .pr-modes__grid { grid-template-columns: minmax(0, 1fr); }
  .pr-steps { grid-template-columns: minmax(0, 1fr); }
  .pr-steps li, .pr-steps li + li { padding: 1.25rem 0; border-left: 0; border-bottom: 1px solid var(--c-line); }
}
@media (max-width: 560px) {
  .pr-mode__specs > div { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; }
  .pr-mode__actions .btn { flex: 1 1 100%; }
}

/* Telefonda Pet ızgarasının 5. kartı tek kalmasın: tam satır, yatay görsel */
@media (max-width: 560px) {
  [data-pr-grid="pet"] > .product-card:nth-child(5) { grid-column: 1 / -1; }
  [data-pr-grid="pet"] > .product-card:nth-child(5) .product-card__media { aspect-ratio: 16 / 9; }
}