/* ========== Pillow Path — Home page styles ========== */

/* Hero textile background + subtle weave motion */
.pp-hero {
  background:
    radial-gradient(1200px 200px at 50% -140px, rgba(255,255,255,.9), rgba(255,255,255,0)),
    repeating-linear-gradient(45deg, #ffffff80 0 6px, #0000 6px 18px),
    linear-gradient(180deg, #fff8 0 30%, #fff0 100%);
  overflow: clip;
}
.pp-hero .pp-wrap {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: min(3vw, 2rem);
  align-items: center;
}

/* Copy */
.pp-hero__copy p + p { margin-top: .5rem; }
.pp-hero__copy .pp-lead { margin-bottom: .75rem; }

/* Gallery — non-card unique frames with “stitch” and tilt */
.pp-hero__gallery {
  position: relative;
  display: grid;
  grid-template-areas:
    "stack macro"
    "bed   bed";
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  perspective: 900px;
}

.pp-frame {
  background: #fff;
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
  padding: .65rem .65rem 1rem;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease;
}
.pp-frame::before {
  /* stitched border */
  content: ""; position: absolute; inset: 8px;
  border-radius: calc(var(--pp-radius-lg) - 8px);
  background: var(--pp-stitch);
  mask: linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0);
  opacity: .55;
}
.pp-frame img { width: 100%; max-width: 350px; }

.pp-frame:hover {
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

.pp-frame--stack { grid-area: stack; }
.pp-frame--macro { grid-area: macro; }
.pp-frame--bed   { grid-area: bed; }

.pp-frame figcaption {
  margin-top: .5rem; font-size: .95rem; color: var(--pp-ink-soft);
}

/* Decorative loom threads moving slowly */
.pp-loom {
  position: absolute; inset: auto 0 0 0; height: 90px; pointer-events: none;
}
.pp-thread {
  position: absolute; left: 0; right: 0; height: 2px; opacity: .4;
  background: linear-gradient(90deg, var(--pp-accent-2), transparent 55%, var(--pp-accent-2));
  animation: pp-loom-move 9s linear infinite;
}
.pp-thread:nth-child(1) { top: 20px; animation-duration: 12s; }
.pp-thread:nth-child(2) { top: 44px; animation-duration: 10s; }
.pp-thread:nth-child(3) { top: 68px; animation-duration: 8s; }

@keyframes pp-loom-move {
  0% { background-position-x: -40%; }
  100% { background-position-x: 140%; }
}

/* Wood slat divider effect between header and hero (already in header) */

/* Responsive */
@media (max-width: 1024px) {
  .pp-hero .pp-wrap { grid-template-columns: 1fr; }
  .pp-hero__gallery { order: -1; }
}
@media (max-width: 720px) {
  .pp-hero__gallery {
    grid-template-areas:
      "stack"
      "macro"
      "bed";
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .pp-frame { padding: .5rem .5rem .75rem; border-radius: 16px; }
  .pp-frame::before { inset: 6px; border-radius: 10px; }
}
/* === Hero: перестановка колонок и областей === */
.pp-hero .pp-wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas: "gallery copy";
  gap: min(3vw, 2rem);
  align-items: center;
}

.pp-hero__copy { grid-area: copy; }
.pp-hero__gallery { grid-area: gallery; }

/* === Галерея: новая мозайка (Bed высокий слева) === */
.pp-hero__gallery {
  position: relative;
  display: grid;
  grid-template-areas:
    "bed stack"
    "bed macro";
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
  perspective: 900px;
}

.pp-frame--bed   { grid-area: bed;   align-self: stretch; }
.pp-frame--stack { grid-area: stack; }
.pp-frame--macro { grid-area: macro; }

/* === Адаптив: на планшете/мобилке стэк сверху-вниз === */
@media (max-width: 1024px) {
  .pp-hero .pp-wrap {
    grid-template-columns: 1fr;
    grid-template-areas:
      "gallery"
      "copy";
  }
}

@media (max-width: 720px) {
  .pp-hero__gallery {
    grid-template-areas:
      "bed"
      "stack"
      "macro";
    grid-template-columns: 1fr;
  }
}

/* Удалить/заменить старое правило:
   @media (max-width: 1024px) { .pp-hero .pp-wrap { grid-template-columns: 1fr; } .pp-hero__gallery { order: -1; } }
   — оно больше не нужно. */
/* === Mobile: önce metin, sonra görseller === */
@media (max-width: 720px) {
  .pp-hero .pp-wrap {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "gallery";
  }

  /* Галерея остаётся вертикальной: Bed → Stack → Macro */
  .pp-hero__gallery {
    grid-template-areas:
      "bed"
      "stack"
      "macro";
    grid-template-columns: 1fr;
  }
}
/* ===== SECTION 2: Koleksiyon — asılı numuneler ===== */
.pp-collection {
  background:
    linear-gradient(180deg, #fff8 0 20%, #fff0 60%),
    repeating-linear-gradient(90deg, #ffffff60 0 10px, #0000 10px 20px);
  position: relative;
}
.pp-collection__head { margin-bottom: 1rem; }

.pp-rail {
  position: absolute; left: 0; right: 0; height: 10px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(255,255,255,.6)),
    repeating-linear-gradient(90deg, #caa882 0 14px, #a77f57 14px 28px, #caa882 28px 42px);
  box-shadow: inset 0 1px rgba(255,255,255,.45), 0 2px 6px rgba(0,0,0,.05);
}
.pp-rail--top { top: 0; }
.pp-rail--bot { bottom: 0; }

.pp-swatches {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem; align-items: start;
}
.pp-swatch {
  position: relative;
  padding: .65rem .65rem .9rem;
  background: #fff; border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
  transform-origin: top center;
  transition: transform .35s ease, box-shadow .35s ease;
}
.pp-swatch::before {
  /* ip + kanca efekti */
  content: ""; position: absolute; top: -16px; left: 50%; width: 2px; height: 16px;
  background: linear-gradient(var(--pp-accent-2), transparent);
  transform: translateX(-50%);
}
.pp-swatch::after {
  content: ""; position: absolute; top: -6px; left: 50%; width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #bbb);
  box-shadow: 0 2px 3px rgba(0,0,0,.2) inset;
  transform: translateX(-50%);
}
.pp-swatch:hover { transform: rotateZ(-1.5deg) translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,.12); }
.pp-swatch img { width: 100%; max-width: 350px; }
.pp-swatch figcaption { margin-top: .5rem; color: var(--pp-ink-soft); }

/* girişte hafif sallanma */
.reveal.is-inview .pp-swatch:nth-child(1) { animation: pp-swing 1.6s ease-out .05s both; }
.reveal.is-inview .pp-swatch:nth-child(2) { animation: pp-swing 1.6s ease-out .15s both; }
.reveal.is-inview .pp-swatch:nth-child(3) { animation: pp-swing 1.6s ease-out .25s both; }

@keyframes pp-swing {
  0%   { transform: rotateZ(-5deg) translateY(-10px); opacity: .0; }
  60%  { transform: rotateZ(2.5deg) translateY(0); opacity: 1; }
  100% { transform: rotateZ(0deg); }
}

/* ===== SECTION 3: Doku Rehberi — zikzak yolu ===== */
.pp-texture-guide { position: relative; }
.pp-guide {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  margin-top: 1rem;
}
.pp-guide::before {
  /* zikzak dikiş yolu */
  content: ""; position: absolute; inset: 0 10%;
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(138,100,64,.5) 12px 14px),
    linear-gradient(#0000, #0000); /* только для маски */
  mask: conic-gradient(from 45deg at 0 0, #000 25%, #0000 0) 0 0/ 40px 40px repeat;
  -webkit-mask: conic-gradient(from 45deg at 0 0, #000 25%, #0000 0) 0 0/ 40px 40px repeat;
  opacity: .35;
  pointer-events: none;
}
.pp-node {
  background: #fff; border-radius: var(--pp-radius); padding: .9rem;
  box-shadow: var(--pp-shadow);
}
.pp-guide-img { align-self: center; justify-self: center; text-align: center; }
.pp-guide-img figcaption { margin-top: .4rem; color: var(--pp-ink-soft); }
.pp-guide-img--left  { grid-column: 1; }
.pp-guide-img--right { grid-column: 2; }

/* ===== SECTION 4: Atölye — pegboard + polaroid ===== */
.pp-atelier__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.pp-atelier__copy p + p { margin-top: .5rem; }

.pp-pegboard {
  position: relative;
  padding: 1rem;
  border-radius: var(--pp-radius-lg);
  background:
    radial-gradient(#0001 10%, #0000 11%) 0 0/16px 16px,
    linear-gradient(180deg, #f8efe6, #f1e3d6);
  box-shadow: inset 0 6px 18px rgba(0,0,0,.06), var(--pp-shadow);
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem;
}

.pp-polaroid {
  background: #fff; padding: .6rem .6rem .85rem;
  border-radius: 10px; box-shadow: 0 10px 18px rgba(0,0,0,.08);
  transform-origin: top center; transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
}
.pp-polaroid::before {
  /* kâğıt bant */
  content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 60px; height: 16px; border-radius: 2px;
  background: linear-gradient(180deg, #fff8, #fff3);
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.pp-polaroid:hover { transform: rotate(1.5deg) translateY(-6px); box-shadow: 0 18px 28px rgba(0,0,0,.14); }
.pp-polaroid img { width: 100%; max-width: 350px; }
.pp-polaroid figcaption { margin-top: .45rem; color: var(--pp-ink-soft); text-align: center; }

/* giriş animasyonu */
.reveal.is-inview .pp-polaroid:nth-child(1) { animation: pp-drop .5s ease-out .05s both; }
.reveal.is-inview .pp-polaroid:nth-child(2) { animation: pp-drop .6s ease-out .15s both; }
.reveal.is-inview .pp-polaroid:nth-child(3) { animation: pp-drop .7s ease-out .25s both; }
@keyframes pp-drop {
  from { transform: translateY(-14px) rotate(-3deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .pp-swatches { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pp-guide { grid-template-columns: 1fr; }
  .pp-guide-img--left, .pp-guide-img--right { grid-column: auto; }
  .pp-atelier__grid { grid-template-columns: 1fr; }
  .pp-pegboard { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .pp-swatches { grid-template-columns: 1fr; }
  .pp-pegboard { grid-template-columns: 1fr; }
}
/* === COMPACT MODE · Section 3: Doku Rehberi === */
.pp-texture-guide { padding: 1.6rem 0; }                 /* было больше */
.pp-texture-guide .pp-h2 { margin-bottom: .5rem; }
.pp-texture-guide .pp-lead { margin: 0 0 .6rem; }

/* плотная сетка + заполняем пустоты */
.pp-guide{
  gap: .6rem 1rem;                                       /* row-gap/col-gap меньше */
  grid-auto-flow: dense;                                 /* уплотнение */
  align-items: start;
}

/* карточки-узлы компактнее */
.pp-node{
  padding: .7rem .8rem;
  border-radius: 12px;
}
.pp-node .pp-h3{ margin: 0 0 .3rem; font-size: clamp(1rem,.45vw + .9rem,1.15rem); }
.pp-node p{ margin: 0; }

/* картинки без лишнего воздуха */
.pp-guide-img{ align-self: start; justify-self: start; }
.pp-guide-img img{ max-width: 320px; }
.pp-guide-img figcaption{ margin-top: .25rem; font-size: .9rem; }

/* зигзаг фоновый легче и ближе к контенту */
.pp-guide::before{ inset: 0 6%; opacity: .25; }

/* Tablet / Mobile ещё плотнее */
@media (max-width:1024px){
  .pp-texture-guide{ padding: 1.25rem 0; }
  .pp-guide{ gap: .6rem .8rem; }
}
@media (max-width:720px){
  .pp-guide{ grid-template-columns: 1fr; gap: .5rem; }
  .pp-guide-img img{ max-width: 300px; }
}
/* ===== SECTION 5: Palet — ahşap raf + rulolar ===== */
.pp-palette { position: relative; background: linear-gradient(180deg,#fff8 0 25%,#fff0 100%); }
.pp-palette__head { margin-bottom: .8rem; }

.pp-palette__shelf{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem; align-items: end;
  padding-bottom: .75rem;
}
.pp-wood-shelf{
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background:
    linear-gradient(90deg, rgba(138,100,64,.35), rgba(94,62,36,.35)),
    repeating-linear-gradient(90deg,#caa882 0 12px,#a77f57 12px 24px,#caa882 24px 36px);
  box-shadow: inset 0 1px rgba(255,255,255,.5), 0 -1px 0 rgba(0,0,0,.06), 0 6px 12px rgba(0,0,0,.06);
}
.pp-roll{
  background: #fff; border-radius: var(--pp-radius-lg);
  padding: .6rem .6rem .9rem; box-shadow: var(--pp-shadow);
  position: relative; transition: transform .3s ease, box-shadow .3s ease;
}
.pp-roll::before{
  /* rulo kağıt çekirdeği */
  content:""; position:absolute; left:10px; top:10px; width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #c9c1b6, #9f8f7f);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.pp-roll:hover{ transform: translateY(-6px) rotateZ(-1.2deg); box-shadow: 0 16px 30px rgba(0,0,0,.12); }
.pp-roll img{ width:100%; max-width:350px; }
.pp-roll figcaption{ margin-top:.45rem; color: var(--pp-ink-soft); }

/* ===== SECTION 6: Katman Reçetesi — dikiş hattı ===== */
.pp-layers__flow{
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.2rem;
  margin-top: .6rem;
}
.pp-layers__flow::before{
  /* dikey dikiş hattı */
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(138,100,64,.6) 0 8px, #0000 8px 14px);
  opacity:.5; pointer-events:none;
}
.pp-step{
  background:#fff; border-radius: 14px; padding:.8rem .9rem; box-shadow: var(--pp-shadow);
}
.pp-layer-img{ text-align:center; align-self:center; }
.pp-layer-img img{ width:100%; max-width:350px; }
.pp-layer-img figcaption{ margin-top:.3rem; color:var(--pp-ink-soft); }
/* ===== SECTION 7 (новая): Mozaik sahne ===== */
.pp-scenes--mosaic { position: relative; overflow: clip; }
.pp-scenes__head { margin-bottom: .75rem; }

/* волнистая «тканевая» подложка */
.pp-fabric-wave{
  position:absolute; left:0; right:0; bottom:-8px; height:120px; pointer-events:none;
  background:
    repeating-linear-gradient(135deg, #0001 0 10px, #0000 10px 20px),
    linear-gradient(180deg, #fff8, #fff0);
  /* волна маской */
  -webkit-mask: radial-gradient(120% 100% at 50% -10%, #000 55%, #0000 56%);
          mask: radial-gradient(120% 100% at 50% -10%, #000 55%, #0000 56%);
  box-shadow: 0 -8px 18px rgba(0,0,0,.06) inset;
}

.pp-mosaic{
  display:grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 1rem;
  align-items: start;
}

/* плитки: не карточки, а «подушки» с прошивкой */
.pp-tile{
  --tilt: 0deg;
  background:#fff;
  border-radius: 22px;
  padding:.6rem .6rem .9rem;
  box-shadow: var(--pp-shadow);
  transform: translateZ(0) rotate(var(--tilt));
  transition: transform .35s ease, box-shadow .35s ease;
  position: relative;
}
.pp-tile::before{
  content:""; position:absolute; inset:8px;
  border-radius: 16px;
  background: var(--pp-stitch);
  opacity:.45;
}
.pp-tile:hover{ transform: translateY(-6px) rotate(calc(var(--tilt) * 1 + 1deg)); box-shadow: 0 16px 28px rgba(0,0,0,.12); }

.pp-tile img{ width:100%; max-width:350px; }
.pp-tile figcaption{ margin-top:.45rem; color: var(--pp-ink-soft); }
.pp-tile h3{ margin:0 0 .25rem; }

/* уникальная компоновка */
.pp-tile--left   { grid-column: 1; --tilt: -0.8deg; transform: translateY(10px) rotate(var(--tilt)); }
.pp-tile--center { grid-column: 2; --tilt: 0.4deg;  transform: translateY(-6px) rotate(var(--tilt)); }
.pp-tile--right  { grid-column: 3; --tilt: 0.8deg;  transform: translateY(22px) rotate(var(--tilt)); }

/* компактность */
.pp-scenes__note{ margin:.6rem 0 0; color: var(--pp-ink-soft); font-size:.95rem; }

/* Responsive */
@media (max-width: 1024px){
  .pp-mosaic{ grid-template-columns: 1fr; }
  .pp-tile--left,.pp-tile--center,.pp-tile--right{
    grid-column:auto; transform: none;
  }
  .pp-scenes__note{ font-size:.93rem; }
}
@media (max-width: 720px){
  /* порядок: текст у каждой плитки читается сразу; ничего не прилипает */
  .pp-mosaic{ gap: .75rem; }
  .pp-fabric-wave{ height:90px; }
}
/* ===== SECTION 8: Bakım & Temizlik — askılı etiketler ===== */
.pp-careline { position: relative; }
.pp-cord{
  position:absolute; left:0; right:0; top:0; height:12px; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(255,255,255,.6)),
    repeating-linear-gradient(90deg, #caa882 0 14px, #a77f57 14px 28px, #caa882 28px 42px);
  box-shadow: inset 0 1px rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.05);
}
.pp-tags{
  margin-top:.5rem;
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem;
  align-items:start;
}
.pp-tag{
  background:#fff; border-radius: 16px; padding:.85rem .9rem; box-shadow: var(--pp-shadow);
  position:relative; transition: transform .3s ease, box-shadow .3s ease;
  /* kesik köşe — bilet efekti */
  background-image: linear-gradient(135deg, #fff 0 82%, #0000 82%);
}
.pp-tag::before{
  /* askı deliği */
  content:""; position:absolute; top:-10px; left:50%; width:16px; height:16px; transform:translateX(-50%);
  border-radius:50%; background: radial-gradient(circle at 30% 30%, #fff, #bbb);
  box-shadow: 0 2px 3px rgba(0,0,0,.2) inset;
}
.pp-tag:hover{ transform: translateY(-6px); box-shadow: 0 18px 32px rgba(0,0,0,.14); }
.pp-tag h3{ margin:.1rem 0 .35rem; }
.pp-tag p{ margin:.25rem 0; }
.pp-tag.pp-tag--img{ padding:.6rem .6rem .85rem; }
.pp-tag.pp-tag--img img{ width:100%; max-width:350px; }
.pp-tag.pp-tag--img figcaption{ margin-top:.35rem; color:var(--pp-ink-soft); text-align:center; }
.pp-careline__note{ margin:.6rem 0 0; color: var(--pp-ink-soft); }

/* ===== SECTION 9: Öyküler — zikzak timeline ===== */
.pp-stories{ position:relative; }
.pp-timeline{ list-style:none; margin:1rem 0 0; padding:0;
  display:grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.2rem; position:relative;
}
.pp-timeline::before{
  /* orta zikzak şerit */
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(138,100,64,.6) 0 10px, #0000 10px 18px);
  opacity:.45;
}
.pp-time{ display:grid; grid-template-columns: 1fr; gap:.5rem; position:relative; }
.pp-time:nth-child(odd){ grid-column: 1; padding-right: .5rem; }
.pp-time:nth-child(even){ grid-column: 2; padding-left:  .5rem; }
.pp-time::after{
  content:""; position:absolute; top:.5rem; width:8px; height:8px; border-radius:50%;
  background: var(--pp-wood-500); box-shadow: 0 0 0 6px #fff;
  left: calc(100% + .4rem);
}
.pp-time:nth-child(even)::after{ left: auto; right: calc(100% + .4rem); }

.pp-time__card{
  background:#fff; border-radius:16px; padding:.85rem .9rem; box-shadow: var(--pp-shadow);
}
.pp-time__img img{ width:100%; max-width:350px; }
.pp-time__img figcaption{ margin-top:.3rem; color: var(--pp-ink-soft); text-align:center; }

/* ===== SECTION 10 (новая): Ahşap çıtalı panolar ===== */
.pp-boards { position: relative; }
.pp-boards__grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  align-items: start; margin-top: .6rem;
}
.pp-board{
  position: relative;
  background:
    linear-gradient(180deg, #fff 0 70%, #fff8 70% 100%),
    radial-gradient(#0001 10%, #0000 11%) 0 0/16px 16px; /* легкая текстура */
  border-radius: 18px;
  box-shadow: var(--pp-shadow);
  padding: 1rem .95rem 1rem;
  outline: 2px dashed rgba(138,100,64,.28);
  outline-offset: -10px;                     /* «строчка» внутри */
  transition: transform .28s ease, box-shadow .28s ease;
}
.pp-board:hover{ transform: translateY(-6px); box-shadow: 0 16px 28px rgba(0,0,0,.12); }

/* верхний ярлык */
.pp-label{
  position: absolute; top: -10px; left: 16px;
  background: linear-gradient(180deg,#fff8,#fff3);
  padding: .2rem .55rem; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  font-size: .9rem; color: var(--pp-ink);
}
.pp-board h3{ margin: .4rem 0 .35rem; }
.pp-board p{ margin: .25rem 0; }
.pp-board ul{ margin: .2rem 0 .5rem; padding-left: 1.1rem; }
.pp-board__img{ margin: .35rem 0 .4rem; text-align: center; }
.pp-board__img img{ width: 100%; max-width: 350px; }
.pp-board__img figcaption{ margin-top: .25rem; color: var(--pp-ink-soft); }
.pp-board__note{ color: var(--pp-ink-soft); font-size: .95rem; }

/* декоративные «нити» между панелями */
.pp-warp{ position: absolute; inset: auto 0 0 0; height: 80px; pointer-events: none; }
.pp-warp i{
  position: absolute; left: 0; right: 0; height: 2px; opacity: .35;
  background: linear-gradient(90deg, var(--pp-accent-2), transparent 55%, var(--pp-accent-2));
  animation: pp-warp-move 10s linear infinite;
}
.pp-warp i:nth-child(1){ top: 18px; animation-duration: 12s; }
.pp-warp i:nth-child(2){ top: 42px; animation-duration: 10s; }
.pp-warp i:nth-child(3){ top: 66px; animation-duration: 8s; }
@keyframes pp-warp-move{ from{ background-position-x:-40%; } to{ background-position-x:140%; } }

/* Responsive */
@media (max-width: 1024px){
  .pp-boards__grid{ grid-template-columns: 1fr; }
  .pp-label{ left: 12px; }
}
/* === COMPACT MODE · Section 9 (Öyküler timeline) === */

/* меньше общие отступы секции */
.pp-stories { padding: 1.25rem 0; }

/* плотнее сетка таймлайна */
.pp-timeline{
  gap: .8rem 1rem;           /* row/col gap меньше */
  margin-top: .4rem;
}

/* каждый шаг: карточка + фото в один ряд */
.pp-time{
  display: grid;
  grid-template-columns: 1fr auto; /* текст тянется, фото фикс */
  align-items: center;
  gap: .6rem 1rem;
  padding: .35rem 0;
}

/* чередование колонок как раньше */
.pp-time:nth-child(odd){ grid-column: 1; }
.pp-time:nth-child(even){ grid-column: 2; }

/* точка на оси остаётся, но не «толстая» */
.pp-time::after{
  width: 6px; height: 6px;
  box-shadow: 0 0 0 5px #fff;
}

/* компактная карточка */
.pp-time__card{
  max-width: 520px;
  padding: .7rem .8rem;
  border-radius: 14px;
  box-shadow: var(--pp-shadow);
}
.pp-time__card h3{ margin: 0 0 .3rem; font-size: clamp(1rem,.45vw + .95rem,1.2rem); }
.pp-time__card p{ margin: .2rem 0 0; }

/* компактное изображение рядом с текстом */
.pp-time__img{ justify-self: end; text-align: center; }
.pp-time__img img{
  width: min(42vw, 260px);   /* не больше 260px и влезает в колонку */
  max-width: 260px;
}
.pp-time__img figcaption{
  margin-top: .2rem;
  font-size: .9rem;
  color: var(--pp-ink-soft);
}

/* центральная пунктирная линия деликатнее */
.pp-timeline::before{
  opacity: .35;
  background: repeating-linear-gradient(180deg, rgba(138,100,64,.5) 0 8px, #0000 8px 14px);
}

/* Tablet/Mobile — одна колонка, ещё плотнее */
@media (max-width: 1024px){
  .pp-timeline{ grid-template-columns: 1fr; }
  .pp-timeline::before{ left: 18px; width: 0; background: none; }
  .pp-time{ grid-template-columns: 1fr; gap: .4rem; }
  .pp-time__img{ justify-self: start; }
  .pp-time__img img{ width: min(90vw, 300px); max-width: 300px; }
}
/* === MOBILE FIX · Section 9 (Öyküler timeline) === */
@media (max-width: 820px) {
  /* одна колонка «железно» */
  .pp-timeline{
    grid-template-columns: 1fr !important;
    gap: .5rem !important;
    margin-top: .35rem;
  }

  /* сброс ручного раскладывания по колонкам */
  .pp-time,
  .pp-time:nth-child(odd),
  .pp-time:nth-child(even){
    grid-column: auto !important;
    padding: .35rem 0 !important;
  }

  /* карточка и фото — вертикально, без второй колонки внутри шага */
  .pp-time{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: .4rem !important;
  }

  /* делаем карточку адаптивной, не фикс ширины */
  .pp-time__card{ max-width: 100% !important; padding: .65rem .75rem; border-radius: 12px; }

  /* изображение не выпирает из .pp-wrap */
  .pp-time__img{ justify-self: start; }
  .pp-time__img img{
    width: min(100%, 280px) !important;  /* ≤ ширины контейнера */
    max-width: 280px !important;
  }
  .pp-time__img figcaption{ font-size: .9rem; margin-top: .2rem; }

  /* убираем центральную ось и маркеры — только на мобилке */
  .pp-timeline::before{ display: none !important; }
  .pp-time::after{ display: none !important; }
}
/* === MOBILE FIX · Section 8 (Bakım & Temizlik) === */
@media (max-width: 820px){
  .pp-careline{ padding: 1rem 0; }
  .pp-tags{
    grid-template-columns: 1fr !important; /* строго одна колонка */
    gap: .65rem !important;
    align-items: stretch;
  }
  .pp-tag{
    width: 100%;
    max-width: none;
    padding: .75rem .9rem;
    border-radius: 14px;
    background-image: none;              /* убираем «срезанный угол» в узком режиме */
    line-height: 1.5;
    word-break: break-word;
    hyphens: auto;
  }
  .pp-tag::before{                       /* отверстие поменьше */
    top: -8px; width: 12px; height: 12px;
  }
  .pp-tag h3{ margin: 0 0 .25rem; font-size: 1.05rem; }
  .pp-tag p{ margin: .25rem 0; }
  .pp-tag.pp-tag--img{ padding: .6rem; }
  .pp-tag.pp-tag--img img{
    width: 100%; max-width: 300px; height: auto; margin-inline: auto;
  }
  .pp-tag.pp-tag--img figcaption{
    margin-top: .25rem; text-align: center; font-size: .92rem; color: var(--pp-ink-soft);
  }
  .pp-cord{ height: 8px; }               /* тоньше «шнур» сверху */
  .pp-careline__note{ font-size: .92rem; margin-top: .5rem; }
}

/* отключаем «подпрыгивание» на сенсорных устройствах */
@media (hover: none) and (pointer: coarse){
  .pp-tag:hover{ transform: none; box-shadow: var(--pp-shadow); }
}
/* ===== SECTION 11: Ürün Haritası (ahşap çıtalı mozaik) ===== */
.pp-productmap { position: relative; }
.pp-productmap__head { margin-bottom: .8rem; }
.pp-slatgrid{
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 1rem; align-items: start;
  background:
    linear-gradient(180deg,#fff8 0 25%,#fff0 100%),
    repeating-linear-gradient(90deg,#caa88222 0 14px,#a77f5722 14px 28px,#caa88222 28px 42px);
  border-radius: 18px; padding: .9rem;
  box-shadow: var(--pp-shadow);
}
.pp-slat{
  background:#fff; border-radius: 16px; padding: .6rem .6rem .85rem;
  box-shadow: var(--pp-shadow); position: relative;
  transition: transform .28s ease, box-shadow .28s ease;
}
.pp-slat--tall{ grid-row: span 2; }
.pp-slat:hover{ transform: translateY(-6px); box-shadow: 0 16px 28px rgba(0,0,0,.12); }
.pp-slat img{ width: 100%; max-width: 350px; }
.pp-slat figcaption{ margin-top:.4rem; color: var(--pp-ink-soft); }
.pp-productmap__note{ margin-top:.6rem; color: var(--pp-ink-soft); }

/* ===== SECTION 12: Renk & Doku Laboratuvarı (şeritli maske) ===== */
.pp-lab__grid{
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; align-items: start; margin-top: .6rem;
}
.pp-lab__copy{
  grid-column: 1 / -1;
  background:#fff; border-radius: 16px; padding: .9rem; box-shadow: var(--pp-shadow);
}
.pp-lab__tile{
  position: relative; overflow: hidden;
  background:#fff; border-radius: 16px; padding: .6rem .6rem .85rem; box-shadow: var(--pp-shadow);
}
.pp-lab__tile img{ width: 100%; max-width: 350px; display: block; }
.pp-lab__tile figcaption{ margin-top:.35rem; color: var(--pp-ink-soft); text-align: center; }

/* üstte açılan şeritler */
.pp-lab__tile::after{
  content:""; position:absolute; inset: .6rem .6rem calc(1.2rem + 1.2em) .6rem; /* подпись не перекрываем */
  background:
    repeating-linear-gradient(135deg, #0002 0 10px, #0000 10px 20px);
  transform: translateX(0);
  transition: transform .9s ease;
}
.reveal.is-inview .pp-lab__tile::after{ transform: translateX(110%); }
.pp-lab__tile:hover::after{ transform: translateX(115%); }

/* ===== SECTION 13: Uyku Ritmi (gündüz/gece geçiş) ===== */
.pp-rhythm__grid{
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; align-items: center;
}
.pp-toggle{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.12);
  background: #fff; box-shadow: var(--pp-shadow); cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pp-toggle:hover{ transform: translateY(-2px); }
.pp-toggle__state{ font-weight: 600; color: var(--pp-accent); }

.pp-rhythm__scene{
  position: relative; width: 100%; max-width: 350px; margin: 0; text-align: center;
  background:#fff; padding:.6rem .6rem .85rem; border-radius: 16px; box-shadow: var(--pp-shadow);
}
.pp-rhythm__img{ position: absolute; inset: .6rem .6rem calc(1.4rem + 1.2em) .6rem; width: auto; height: auto; max-width: calc(100% - 1.2rem); border-radius: 12px; opacity: 0; transition: opacity .5s ease; }
.pp-rhythm__img--day{ opacity: 1; }
.pp-rhythm.is-night .pp-rhythm__img--day{ opacity: 0; }
.pp-rhythm.is-night .pp-rhythm__img--night{ opacity: 1; }
.pp-rhythm__caption{ margin-top: calc(240px + .4rem); color: var(--pp-ink-soft); } /* безопасная подпись */

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .pp-slatgrid{ grid-template-columns: 1fr 1fr; }
  .pp-rhythm__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .pp-slatgrid{ grid-template-columns: 1fr; }
  .pp-lab__grid{ grid-template-columns: 1fr; }
  .pp-rhythm__caption{ margin-top: .35rem; }
}
/* === OVERLAY FIX · Section 13: Uyku Ritmi (day/night) === */
.pp-rhythm__scene{
  position: relative;
  padding: .6rem;                 /* рамка вокруг изображения */
}

/* резервируем высоту под фото, чтобы фигура реально занимала место */
.pp-rhythm__scene::before{
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;            /* ~350×260; можно менять под свои фото */
  border-radius: 12px;
  background: #fff;               /* фон под изображение */
}

/* две картинки накладываются друг на друга внутри зарезервированной области */
.pp-rhythm__img{
  position: absolute;
  top: .6rem; left: .6rem; right: .6rem; bottom: .6rem;  /* заполняем окно */
  width: auto; height: auto; max-width: none;
  border-radius: 12px;
  object-fit: cover;
  opacity: 0; transition: opacity .45s ease;
}
.pp-rhythm__img--day{ opacity: 1; }
.pp-rhythm.is-night .pp-rhythm__img--day{ opacity: 0; }
.pp-rhythm.is-night .pp-rhythm__img--night{ opacity: 1; }

/* подпись — обычным потоком, без огромного отступа */
.pp-rhythm__caption{
  position: static;
  margin-top: .45rem !important;  /* перебиваем прежний calc(...) */
}

/* чуть компактнее на очень узких экранах */
@media (max-width: 420px){
  .pp-rhythm__scene::before{ aspect-ratio: 3 / 2; }
}
/* ===== SECTION 14: Sezon Renk Reçeteleri ===== */
.pp-season__grid{
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 1rem; align-items: center;
}
.pp-season__copy p + p { margin-top: .45rem; }

.pp-season__ribbon{
  position: relative;
  display: grid; gap: .8rem;
  padding: .8rem .6rem;
  border-radius: 20px;
  background:
    linear-gradient(180deg,#fff 0 70%,#fff8 70% 100%),
    repeating-linear-gradient(135deg,#0001 0 10px,#0000 10px 20px);
  /* dalga kesim — üst/alt */
  -webkit-mask: radial-gradient(120% 100% at 50% -20%, #000 60%, #0000 61%)
                 ,radial-gradient(120% 100% at 50% 120%, #000 60%, #0000 61%);
          mask: radial-gradient(120% 100% at 50% -20%, #000 60%, #0000 61%),
                radial-gradient(120% 100% at 50% 120%, #000 60%, #0000 61%);
  box-shadow: var(--pp-shadow);
}
.pp-season__card{
  background:#fff; border-radius: 16px; padding: .55rem .55rem .8rem;
  box-shadow: var(--pp-shadow); transition: transform .28s ease, box-shadow .28s ease;
}
.pp-season__card:hover{ transform: translateY(-6px) rotateZ(-.6deg); box-shadow: 0 16px 28px rgba(0,0,0,.12); }
.pp-season__card img{ width: 100%; max-width: 350px; display: block; }
.pp-season__card figcaption{ margin-top:.35rem; color: var(--pp-ink-soft); text-align: center; }
.pp-season__card--spring{ transform: translateY(-6px); }
.pp-season__card--autumn{ transform: translateY(6px); }

/* ===== SECTION 15: Mağaza Notları & İletişim ===== */
.pp-contact__grid{
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; align-items: start;
}
.pp-contact__manifest{
  position: relative;
  background:
    radial-gradient(#0001 10%,#0000 11%) 0 0/16px 16px,
    linear-gradient(180deg,#f8efe6,#f1e3d6);
  border-radius: 20px; padding: 1rem .95rem;
  box-shadow: inset 0 6px 18px rgba(0,0,0,.06), var(--pp-shadow);
  outline: 2px dashed rgba(138,100,64,.28);
  outline-offset: -10px;
}
.pp-contact__manifest p + p{ margin-top: .45rem; }

.pp-contact__photo{
  margin: .6rem 0 0; text-align: center;
  background:#fff; border-radius: 16px; padding: .55rem .55rem .8rem; box-shadow: var(--pp-shadow);
}
.pp-contact__photo img{ width: 100%; max-width: 350px; }
.pp-contact__photo figcaption{ margin-top:.3rem; color: var(--pp-ink-soft); }

.pp-contact__aside{
  display: grid; gap: .8rem;
}
.pp-contact__card{
  background:#fff; border-radius: 16px; padding: .75rem .85rem;
  box-shadow: var(--pp-shadow);
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .pp-season__grid{ grid-template-columns: 1fr; }
  .pp-contact__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .pp-season__ribbon{
    -webkit-mask: none; mask: none; border-radius: 16px;
  }
  .pp-season__card--spring,
  .pp-season__card--autumn{ transform: none; }
}