/* ====== Page 2: KOLEKSIYON — уникальные секции и анимации ====== */

/* ---------- SECTION 1: kk-doors (трёхстворчатая «дверь») ---------- */
.kk-doors__grid{
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; align-items: center;
}
.kk-doors__gallery{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem;
  perspective: 900px;
}
.kk-door{
  background: #fff; border-radius: 18px; padding: .55rem .55rem .8rem; box-shadow: var(--pp-shadow);
  transform-style: preserve-3d;
  transform: rotateY(var(--tilt, 0deg)) translateZ(0);
  transition: transform .5s ease, box-shadow .35s ease;
  position: relative;
}
.kk-door::before{
  /* прошитая рамка */
  content:""; position:absolute; inset:8px; border-radius:14px; background: var(--pp-stitch); opacity:.45;
}
.kk-door:hover{
  --tilt: -6deg;
  box-shadow: 0 18px 32px rgba(0,0,0,.14);
}
.kk-door img{ width: 100%; max-width: 350px; display: block; }
.kk-door figcaption{ margin-top:.4rem; color: var(--pp-ink-soft); text-align: center; }

.kk-door--linen{ --tilt: -2deg; }
.kk-door--sateen{ --tilt: 0deg; }
.kk-door--percale{ --tilt: 2deg; }

/* входная «качка» при появлении */
.reveal.is-inview .kk-door:nth-child(1){ animation: kk-sway 1.2s ease-out .05s both; }
.reveal.is-inview .kk-door:nth-child(2){ animation: kk-sway 1.2s ease-out .15s both; }
.reveal.is-inview .kk-door:nth-child(3){ animation: kk-sway 1.2s ease-out .25s both; }
@keyframes kk-sway{
  0%{ transform: rotateY(-10deg) translateY(-8px); opacity: 0; }
  60%{ transform: rotateY(4deg) translateY(0); opacity: 1; }
  100%{ transform: rotateY(0deg); }
}

/* ---------- SECTION 2: kk-flow (цветовой поток по «рельсу») ---------- */
.kk-flow{ position: relative; }
.kk-flow__head{ margin-bottom: .6rem; }

.kk-flow__rail{
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  align-items: end; padding-bottom: .9rem;
}
.kk-flow__card{
  background:#fff; border-radius: 18px; padding: .6rem .6rem .85rem; box-shadow: var(--pp-shadow);
  position: relative; transition: transform .28s ease, box-shadow .28s ease;
}
.kk-flow__card:hover{ transform: translateY(-6px) rotateZ(-.6deg); box-shadow: 0 16px 28px rgba(0,0,0,.12); }
.kk-flow__card img{ width: 100%; max-width: 350px; display: block; }
.kk-flow__card figcaption{ margin-top:.35rem; color: var(--pp-ink-soft); text-align: center; }

.kk-flow__stitch{
  position:absolute; left:0; right:0; bottom:0; height:12px; pointer-events:none;
  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,.45), 0 -1px 0 rgba(0,0,0,.06);
}
.kk-flow__note{ margin:.6rem 0 0; color: var(--pp-ink-soft); }

/* ---------- SECTION 3: kk-path (дорожка с отметками) ---------- */
.kk-path{ position: relative; }
.kk-path__grid{
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 1rem; align-items: center;
}
.kk-path__copy p + p{ margin-top: .45rem; }
.kk-steps{ margin: .5rem 0 0; padding-left: 1.1rem; }
.kk-path__img{
  background:#fff; border-radius: 16px; padding:.55rem .55rem .8rem; box-shadow: var(--pp-shadow);
  text-align: center;
}
.kk-path__img img{ width: 100%; max-width: 350px; }
.kk-path__img figcaption{ margin-top:.3rem; color: var(--pp-ink-soft); }

.kk-path__line{
  position:absolute; left: 5%; right: 5%; bottom: 10px; height: 2px; pointer-events:none;
  background: repeating-linear-gradient(90deg, rgba(138,100,64,.6) 0 8px, #0000 8px 14px);
  animation: kk-dash 10s linear infinite;
}
@keyframes kk-dash{
  from{ background-position-x: 0%; }
  to{ background-position-x: 100%; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .kk-doors__grid{ grid-template-columns: 1fr; }
  .kk-doors__gallery{ order: -1; }
  .kk-path__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .kk-doors__gallery{ grid-template-columns: 1fr 1fr; }
  .kk-doors__gallery .kk-door:nth-child(3){ grid-column: 1 / -1; }
  .kk-flow__rail{ grid-template-columns: 1fr; }
}
/* ========= SECTION 4: Tezgâh Düzeni (çözgü + mekikler) ========= */
.kk-loom__head{ margin-bottom: .6rem; }
.kk-loom__field{
  position: relative;
  border-radius: 20px;
  padding: 1rem .6rem;
  background:
    repeating-linear-gradient(90deg, #0001 0 12px, #0000 12px 24px), /* çözgü ipleri gölgesi */
    linear-gradient(180deg,#fff 0 70%,#fff8 70% 100%);
  box-shadow: var(--pp-shadow);
  overflow: hidden;
}
/* “mekik” görseller — kart DEĞİL: ipler arasında kayan kapsüller */
.kk-shuttle{
  --y: 0px;
  position: relative;
  margin: .4rem auto;
  width: min(92%, 360px);
  background: #fff;
  border-radius: 999px;
  padding: .35rem .5rem .6rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  transform: translateY(var(--y));
  transition: transform .6s ease, box-shadow .3s ease;
}
.kk-shuttle:hover{ box-shadow: 0 12px 24px rgba(0,0,0,.12); }
.kk-shuttle img{
  display:block; width: 100%; max-width: 350px; height: auto; border-radius: 999px;
}
.kk-shuttle figcaption{ margin-top:.35rem; text-align:center; color: var(--pp-ink-soft); }

/* farklı hat yüksekliği (asimetrik) */
.kk-shuttle--linen{ --y: -6px; }
.kk-shuttle--ivory{ --y: 6px; }
.kk-shuttle--earth{ --y: -2px; }

/* giriş animasyonu: ip üzerinde salınım */
.reveal.is-inview .kk-shuttle{ animation: kk-weave 1.2s ease-out both; }
.reveal.is-inview .kk-shuttle--linen{ animation-delay: .05s; }
.reveal.is-inview .kk-shuttle--ivory{ animation-delay: .15s; }
.reveal.is-inview .kk-shuttle--earth{ animation-delay: .25s; }
@keyframes kk-weave{
  from{ transform: translateY(-12px); opacity: .0; }
  60% { transform: translateY(4px);  opacity: 1; }
  to  { transform: translateY(var(--y)); }
}
.kk-loom__note{ margin-top:.6rem; color: var(--pp-ink-soft); }

/* ========= SECTION 5: Maskeli split-view ========= */
.kk-compare__frame{
  position: relative;
  background:#fff; border-radius: 18px; padding:.55rem; box-shadow: var(--pp-shadow);
  overflow: hidden; text-align: center;
}
.kk-compare__img{ width: 100%; max-width: 350px; display:block; margin: 0 auto; border-radius: 12px; }
.kk-compare__img--mask{
  position:absolute; inset: .55rem .55rem calc(.55rem + 1.4em) .55rem;
  /* diyagonal maske; girişte sağa doğru “açılır” */
  -webkit-mask: linear-gradient(90deg, #000 40%, #0000 41%);
          mask: linear-gradient(90deg, #000 40%, #0000 41%);
  transition: -webkit-mask-position 1s ease, mask-position 1s ease, transform .6s ease;
  -webkit-mask-size: 200% 100%;
          mask-size: 200% 100%;
  -webkit-mask-position: 0% 50%;
          mask-position: 0% 50%;
}
.reveal.is-inview .kk-compare__img--mask{
  -webkit-mask-position: 100% 50%;
          mask-position: 100% 50%;
}
.kk-compare__frame figcaption{ margin-top:.35rem; color: var(--pp-ink-soft); }

/* ========= SECTION 6: Doku SSS (detay blokları) ========= */
.kk-faq__grid{
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; align-items: start;
}
.kk-faq__item{
  background:#fff; border-radius: 16px; padding: .75rem .9rem; box-shadow: var(--pp-shadow);
  margin: .6rem 0;
  position: relative; overflow: hidden;
}
.kk-faq__item summary{
  cursor: pointer; list-style: none;
  font-weight: 600;
}
.kk-faq__item[open]{ outline: 2px dashed rgba(138,100,64,.28); outline-offset: -8px; }
.kk-faq__item summary::-webkit-details-marker{ display:none; }
.kk-faq__item summary::after{
  content: "＋"; float: right; font-weight: 700; opacity: .6; transition: transform .2s ease;
}
.kk-faq__item[open] summary::after{ content: "－"; transform: scale(1.05); }
.kk-faq__item p{ margin: .4rem 0 0; }

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

/* ========= Responsive ========= */
@media (max-width: 1024px){
  .kk-faq__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .kk-compare__img--mask{ -webkit-mask: linear-gradient(90deg, #000 55%, #0000 56%); mask: linear-gradient(90deg, #000 55%, #0000 56%); }
}
/* ===== SECTION 7: Seri Katları — dikey şerit ===== */
.kk-stacks__grid{
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; align-items: start;
}
.kk-stacks__bullets{ margin:.5rem 0 0; padding-left:1.1rem; }
.kk-stacks__lane{
  position: relative; list-style: none; margin: 0; padding: 0 0 0 1.2rem;
  border-left: 2px dashed rgba(138,100,64,.4);
}
.kk-stack{ margin: .6rem 0; position: relative; }
.kk-stack::before{
  content:""; position:absolute; left:-1.2rem; top:.3rem; width:10px; height:10px; border-radius:50%;
  background: var(--pp-wood-500, #8a6440); box-shadow: 0 0 0 6px #fff;
}
.kk-stack figure{ background:#fff; border-radius:16px; padding:.55rem .55rem .8rem; box-shadow: var(--pp-shadow); }
.kk-stack img{ width:100%; max-width:350px; display:block; }
.kk-stack figcaption{ margin-top:.3rem; color: var(--pp-ink-soft); text-align:center; }
.kk-stack p{ margin:.35rem 0 0; }

/* giriş animasyonu: çizgi üzerinde akış */
.reveal.is-inview .kk-stacks__lane{ animation: kk-spine-move 9s linear infinite; }
@keyframes kk-spine-move{
  from{ border-left-color: rgba(138,100,64,.25); }
  to  { border-left-color: rgba(138,100,64,.45); }
}

/* ===== SECTION 8: Rulo Rafı — kayış ===== */
.kk-belt{ position: relative; }
.kk-belt__head{ margin-bottom: .6rem; }
.kk-belt__track{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem; align-items: end; padding-bottom: .9rem;
}
.kk-card{
  background:#fff; border-radius:18px; padding:.6rem .6rem .85rem; box-shadow: var(--pp-shadow);
  transition: transform .28s ease, box-shadow .28s ease;
}
.kk-card:hover{ transform: translateY(-6px) rotateZ(-.6deg); box-shadow: 0 16px 28px rgba(0,0,0,.12); }
.kk-card img{ width:100%; max-width:350px; display:block; }
.kk-card figcaption{ margin-top:.35rem; color: var(--pp-ink-soft); text-align:center; }

.kk-belt__wood{
  position:absolute; left:0; right:0; bottom:0; height:14px; pointer-events:none;
  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,.45), 0 -1px 0 rgba(0,0,0,.06);
}
.kk-belt__track::after{
  /* yavaş hareket eden bant gölgesi */
  content:""; position:absolute; left:0; right:0; bottom:14px; height:8px; opacity:.25;
  background: repeating-linear-gradient(90deg, #0001 0 24px, #0000 24px 48px);
  animation: kk-belt-move 20s linear infinite;
}
@keyframes kk-belt-move{
  from{ background-position-x: 0; }
  to  { background-position-x: 100%; }
}
.kk-belt__note{ margin:.6rem 0 0; color: var(--pp-ink-soft); }

/* ===== SECTION 9: Oda Notları — pano ===== */
.kk-notes__grid{
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; align-items: start;
}
.kk-notes__board{
  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;
}
.kk-notes__media{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; }
.kk-note{
  background:#fff; border-radius:16px; padding:.55rem .55rem .8rem; box-shadow: var(--pp-shadow);
  text-align:center; transition: transform .28s ease, box-shadow .28s ease;
}
.kk-note:hover{ transform: translateY(-6px) rotateZ(-.6deg); box-shadow: 0 16px 28px rgba(0,0,0,.12); }
.kk-note img{ width:100%; max-width:350px; }
.kk-note figcaption{ margin-top:.3rem; color: var(--pp-ink-soft); }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .kk-stacks__grid{ grid-template-columns: 1fr; }
  .kk-belt__track{ grid-template-columns: 1fr; }
  .kk-notes__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .kk-notes__media{ grid-template-columns: 1fr; }
}
/* ========= SECTION 10: Seri Kartları — asimetrik grid ========= */
.kk-cards__grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; align-items:start;
}
.kk-cards__head{ grid-column: 1 / -1; margin-bottom: .2rem; }
.kk-card{
  position: relative; background:#fff; border-radius: 18px;
  padding: .9rem .95rem; box-shadow: var(--pp-shadow);
  outline: 2px dashed rgba(138,100,64,.28); outline-offset: -10px;
  transition: transform .28s ease, box-shadow .28s ease;
}
.kk-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 28px rgba(0,0,0,.12); }
.kk-card__list{ margin:.45rem 0 .5rem; padding-left: 1.1rem; }
.kk-card__img{ margin-top:.4rem; text-align:center; }
.kk-card__img img{ width:100%; max-width:350px; }
.kk-card__img figcaption{ margin-top:.3rem; color: var(--pp-ink-soft); }
.kk-card--daily::before,
.kk-card--guest::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:10px;
  background: linear-gradient(90deg, rgba(138,100,64,.35), rgba(94,62,36,.35));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 16px, #0000 16px 32px);
          mask: repeating-linear-gradient(90deg, #000 0 16px, #0000 16px 32px);
  opacity:.6;
}

/* ========= SECTION 11: Doku Atlası — kavisli yol ========= */
.kk-atlas{ position: relative; }
.kk-atlas__grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 1rem; align-items:start;
}
.kk-atlas__copy p + p{ margin-top: .45rem; }
.kk-atlas__stamp{
  background:#fff; border-radius: 16px; padding:.55rem .55rem .8rem; box-shadow: var(--pp-shadow);
  text-align: center;
}
.kk-atlas__stamp img{ width: 100%; max-width: 350px; }
.kk-atlas__stamp figcaption{ margin-top:.3rem; color: var(--pp-ink-soft); }

.kk-atlas__path{
  position:absolute; inset: auto 0 6px 0; height: 2px; pointer-events:none;
  background: radial-gradient(circle at 0 50%, rgba(138,100,64,.5) 2px, #0000 3px) left center / 36px 2px repeat-x;
  animation: kk-path-move 12s linear infinite;
  opacity:.6;
}
@keyframes kk-path-move{
  from{ background-position-x: 0%; }
  to  { background-position-x: 100%; }
}

/* ========= SECTION 12: Sezon Kutuları — çekmece efekti ========= */
.kk-boxes__grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items:start;
}
.kk-boxes__head{ grid-column: 1 / -1; margin-bottom: .2rem; }

.kk-box{
  position:relative; background:#fff; border-radius: 18px; box-shadow: var(--pp-shadow);
  overflow: hidden;
}
.kk-box__lid{
  position: relative; z-index: 2; height: 42px; display:flex; align-items:center;
  padding: 0 .9rem; background: linear-gradient(180deg,#fff,#fff8);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.kk-box__lid span{ font-weight: 600; }
.kk-box__content{
  position: relative; z-index: 1; padding: .8rem .95rem .9rem;
}
.kk-box__content figure{ margin:.35rem 0 0; text-align: center; }
.kk-box__content img{ width:100%; max-width:350px; }
.kk-box__content figcaption{ margin-top:.3rem; color: var(--pp-ink-soft); }

/* çekmece hareketi */
.kk-box:hover .kk-box__lid{ transform: translateY(-6px); transition: transform .25s ease; }
.kk-box:hover{ box-shadow: 0 16px 28px rgba(0,0,0,.12); }

/* ========= Responsive ========= */
@media (max-width: 1024px){
  .kk-cards__grid{ grid-template-columns: 1fr; }
  .kk-atlas__grid{ grid-template-columns: 1fr; }
  .kk-boxes__grid{ grid-template-columns: 1fr; }
}
/* ========= SECTION 13: Renk Kuyruğu — kapsül akışı ========= */
.kk-tail__grid{
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; align-items: start;
}
.kk-tail__track{
  position: relative; display: grid; gap: .85rem;
}
.kk-capsule{
  background:#fff; border-radius: 999px;
  padding: .4rem .5rem .7rem; text-align: center;
  box-shadow: var(--pp-shadow);
  transition: transform .28s ease, box-shadow .28s ease;
}
.kk-capsule:hover{ transform: translateY(-6px); box-shadow: 0 16px 28px rgba(0,0,0,.12); }
.kk-capsule img{ width: 100%; max-width: 350px; border-radius: 999px; display:block; }
.kk-capsule figcaption{ margin-top: .3rem; color: var(--pp-ink-soft); }
.kk-tail__ribbon{
  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,.45), 0 -1px 0 rgba(0,0,0,.06);
  margin-top: .4rem;
}

/* ========= SECTION 14: Bakım Püfleri — etiket listesi ========= */
.kk-tips__grid{
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; align-items: start;
}
.kk-tags{ list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .6rem; }
.kk-tag{
  position: relative; background:#fff; border-radius: 14px; padding: .75rem .9rem;
  box-shadow: var(--pp-shadow);
  outline: 2px dashed rgba(138,100,64,.28); outline-offset: -8px;
}
.kk-tag::before{
  content:""; position:absolute; top:-8px; left:20px; 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;
}
.kk-tips__note{ margin-top: .5rem; color: var(--pp-ink-soft); }
.kk-tips__media{ display: grid; gap: .8rem; }
.kk-tips__photo{
  background:#fff; border-radius: 16px; padding:.55rem .55rem .8rem; box-shadow: var(--pp-shadow);
  text-align: center;
}
.kk-tips__photo img{ width:100%; max-width:350px; }
.kk-tips__photo figcaption{ margin-top:.3rem; color: var(--pp-ink-soft); }

/* ========= SECTION 15: Stil Sahneleri II — kademeli mozaik ========= */
.kk-stepscene__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas:
    "head head"
    "tall text"
    "tall short";
  gap: 1rem; align-items: start;
}
.kk-stepscene__head{ grid-area: head; }
.kk-step{
  background:#fff; border-radius: 16px; padding:.55rem .55rem .8rem; box-shadow: var(--pp-shadow);
  text-align: center; transition: transform .28s ease, box-shadow .28s ease;
}
.kk-step:hover{ transform: translateY(-6px) rotateZ(-.6deg); box-shadow: 0 16px 28px rgba(0,0,0,.12); }
.kk-step img{ width:100%; max-width:350px; display:block; }
.kk-step figcaption{ margin-top:.3rem; color: var(--pp-ink-soft); }
.kk-step--tall{ grid-area: tall; }
.kk-step--short{ grid-area: short; }
.kk-stepscene__text{
  grid-area: text;
  background: #fff; border-radius: 16px; padding: .85rem .95rem; box-shadow: var(--pp-shadow);
}
.kk-stepscene__stitch{
  height: 12px; margin-top: .4rem; background:
    repeating-linear-gradient(90deg, rgba(138,100,64,.5) 0 10px, #0000 10px 18px);
  opacity: .5;
}

/* ========= Responsive ========= */
@media (max-width: 1024px){
  .kk-tail__grid,
  .kk-tips__grid{ grid-template-columns: 1fr; }
  .kk-stepscene__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "tall"
      "text"
      "short";
  }
}
@media (max-width: 720px){
  .kk-capsule img{ max-width: 320px; }
}
/* ========= SECTION 16: Mini Koleksiyon Çizelgesi ========= */
.kk-mini__grid{
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; align-items: start;
}
.kk-mini__rows{
  margin:.5rem 0 0; padding:0; list-style:none; display:grid; gap:.45rem;
}
.kk-mini__rows li{
  position: relative; background:#fff; border-radius:14px; padding:.6rem .8rem;
  box-shadow: var(--pp-shadow);
}
.kk-mini__rows li::before{
  content:""; position:absolute; left:10px; top:50%; width:8px; height:8px; border-radius:50%;
  transform:translateY(-50%); background: var(--pp-wood-500,#8a6440);
  box-shadow: 0 0 0 6px #fff;
}
.kk-mini__note{ margin-top:.5rem; color: var(--pp-ink-soft); }
.kk-mini__image{
  background:#fff; border-radius:16px; padding:.55rem .55rem .8rem; box-shadow: var(--pp-shadow);
  text-align:center; align-self: start;
}
.kk-mini__image img{ width:100%; max-width:350px; }
.kk-mini__image figcaption{ margin-top:.3rem; color: var(--pp-ink-soft); }

.kk-mini__spine{
  height: 12px; margin-top: .4rem; background:
    repeating-linear-gradient(90deg, rgba(138,100,64,.5) 0 10px, #0000 10px 18px);
  opacity:.5;
}

/* giriş animasyonu: satırlar sırayla belirir */
.reveal.is-inview .kk-mini__rows li{ animation: kk-fade-slide .5s ease both; }
.reveal.is-inview .kk-mini__rows li:nth-child(1){ animation-delay:.05s; }
.reveal.is-inview .kk-mini__rows li:nth-child(2){ animation-delay:.15s; }
.reveal.is-inview .kk-mini__rows li:nth-child(3){ animation-delay:.25s; }
.reveal.is-inview .kk-mini__rows li:nth-child(4){ animation-delay:.35s; }
@keyframes kk-fade-slide{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: translateY(0); }
}

/* ========= SECTION 17: Özet Vitrin ========= */
.kk-summary__grid{
  display:grid;
  grid-template-columns: .95fr 1.1fr .95fr;
  grid-template-areas:
    "head head head"
    "left text right";
  gap: 1rem; align-items: start;
}
.kk-summary__head{ grid-area: head; }

.kk-summary__scene{
  background:#fff; border-radius:16px; padding:.55rem .55rem .8rem; box-shadow: var(--pp-shadow);
  text-align:center; transition: transform .28s ease, box-shadow .28s ease;
  position: relative; overflow: hidden;
}
.kk-summary__scene img{ width:100%; max-width:350px; display:block; }
.kk-summary__scene figcaption{ margin-top:.3rem; color: var(--pp-ink-soft); }
.kk-summary__scene::before{
  /* diyagonal kesim — ince maske */
  content:""; position:absolute; inset:0 0 35% 0;
  -webkit-mask: linear-gradient(180deg,#000 0 70%,#0000 71%);
          mask: linear-gradient(180deg,#000 0 70%,#0000 71%);
  background: repeating-linear-gradient(135deg,#0001 0 10px,#0000 10px 20px);
  pointer-events:none;
}
.kk-summary__scene:hover{ transform: translateY(-6px) rotateZ(-.6deg); box-shadow: 0 16px 28px rgba(0,0,0,.12); }

.kk-summary__scene--left{ grid-area: left; }
.kk-summary__scene--right{ grid-area: right; }

.kk-summary__text{
  grid-area: text; background:#fff; border-radius:16px; padding:.85rem .95rem; box-shadow: var(--pp-shadow);
}
.kk-summary__check{ margin:.45rem 0 0; padding-left:1.1rem; }

.kk-summary__ribbon{
  height: 14px; margin-top:.4rem; 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,.45), 0 -1px 0 rgba(0,0,0,.06);
}

/* Responsive */
@media (max-width: 1024px){
  .kk-mini__grid{ grid-template-columns: 1fr; }
  .kk-summary__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "left"
      "text"
      "right";
  }
}
/* ===== Koleksiyon Notları — text-only essay ===== */
.kk-essay__wrap{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:1rem; align-items:start;
}
.kk-essay__head{ grid-column: 1 / -1; }
.kk-essay__content{
  background:#fff; border-radius:18px; padding:1rem 1.1rem; box-shadow: var(--pp-shadow);
}
.kk-dropcap::first-letter{
  float:left; font-size:2.6rem; line-height:1; margin:.15rem .42rem 0 0;
  font-weight:700; color: var(--pp-wood-500,#8a6440);
}
.kk-essay__list{ margin:.6rem 0 0 .95rem; }
.kk-essay__foot{ margin-top:.6rem; color: var(--pp-ink-soft); }

.kk-essay__aside{
  position:relative; background:#fff; border-radius:16px; padding:.8rem .9rem; box-shadow: var(--pp-shadow);
}
.kk-essay__aside::before{
  content:""; position:absolute; top:-10px; left:18px; width:44px; height:10px;
  background: linear-gradient(180deg,#fff,#fff0);
  border-top-left-radius:8px; border-top-right-radius:8px;
  box-shadow: 0 -2px 6px rgba(0,0,0,.06);
}

.kk-essay__stitch{
  height:12px; margin-top:.4rem;
  background: repeating-linear-gradient(90deg, rgba(138,100,64,.5) 0 10px, #0000 10px 18px);
  opacity:.5;
}

/* Responsive */
@media (max-width:1024px){
  .kk-essay__wrap{ grid-template-columns: 1fr; }
}