/* ========== Bölüm 1: Nar Yörüngesi ========== */
.section--orbit{
  /* Nar kabuğu dalga dokusu */
  background:
    radial-gradient(1400px 500px at 10% 20%, rgba(179,18,47,.15), transparent 55%),
    radial-gradient(900px 420px at 85% 15%, rgba(247,161,174,.1), transparent 60%);
  overflow: hidden;
}

.orbit{
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-2xl);
  padding: 1.25rem 1rem 1.6rem;
  background: linear-gradient(180deg, rgba(122,12,22,.32), rgba(18,16,20,.12));
  box-shadow: var(--shadow-elev);
}

.orbit__core{
  position: relative;
  display:grid; place-items:center;
  margin: 0 auto 1rem;
  width:min(100%, 560px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(247,161,174,.18), rgba(179,18,47,.14) 58%, transparent 60%),
    conic-gradient(from 0deg, rgba(179,18,47,.2), rgba(247,161,174,.08), rgba(179,18,47,.2));
  border: 1px dashed rgba(247,161,174,.25);
}

.core__label{
  font-weight:700; letter-spacing:.4px;
  background: linear-gradient(90deg, var(--nar-200), var(--beyaz));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 18px rgba(179,18,47,.45);
}
.core__date{
  position:absolute; top: 16%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-serif);
  color:#ffe1e7; font-size: clamp(1rem, .8rem + 1.5vw, 1.6rem);
}
.core__halo{
  position:absolute; inset: 6%; border-radius:50%; pointer-events:none;
  box-shadow: 0 0 0 10px rgba(247,161,174,.06), 0 0 80px 20px rgba(179,18,47,.22) inset;
  animation: haloPulse 6s ease-in-out infinite;
}
@keyframes haloPulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:.9; }
}

/* Yörünge pisti ve öğeler */
.orbit__track{
  --size: clamp(280px, 70vw, 740px);
  list-style: none; margin:0 auto; padding:0;
  width: var(--size); height: var(--size); position: relative;
  border-radius: 50%;
  animation: trackSpin 36s linear infinite;
}
@keyframes trackSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.orbit:hover .orbit__track{ animation-play-state: paused; }

.orbit__item{
  position:absolute; inset:0; display:grid; place-items:center;
}
.orbit__item:nth-child(1){ transform: rotate(10deg) translateX(calc(var(--size)/2.4)) rotate(-10deg); }
.orbit__item:nth-child(2){ transform: rotate(140deg) translateX(calc(var(--size)/2.4)) rotate(-140deg); }
.orbit__item:nth-child(3){ transform: rotate(260deg) translateX(calc(var(--size)/2.4)) rotate(-260deg); }

/* Baloncuk görünümleri */
.bubble{
  background: rgba(18,16,20,.55);
  border: 1px solid rgba(247,161,174,.22);
  padding: .5rem;
  border-radius: 1.25rem;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bubble:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 20px 60px rgba(179,18,47,.45);
}
.bubble__cap{
  margin: .45rem 0 0; text-align:center; color:#ffe6ea; font-size:.95rem;
}

/* Dekoratif taneler alanı (JS ile dolduruluyor) */
.seed-field{
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index: -1;
}

/* Duyarlılık */
@media (max-width: 920px){
  .orbit__track{ --size: clamp(280px, 80vw, 520px); }
}
@media (max-width: 640px){
  .orbit__track{ animation-duration: 28s; }
  .bubble img{ width: min(100%, 310px); }
}
@media (max-width: 420px){
  .orbit__track{ --size: 320px; }
  .bubble img{ width: min(100%, 280px); }
}
/* ========== Bölüm 1: Nar Şelalesi (orbit yok) ========== */
.section--cascade{
  background:
    radial-gradient(1400px 500px at 10% 20%, rgba(179,18,47,.15), transparent 55%),
    radial-gradient(900px 420px at 85% 15%, rgba(247,161,174,.1), transparent 60%);
  overflow: hidden;
}

.cascade{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1.25rem;
  align-items: start;
}

.cascade__copy{
  background: linear-gradient(180deg, rgba(122,12,22,.22), rgba(18,16,20,.08));
  border: 1px solid rgba(247,161,174,.2);
  border-radius: var(--radius-2xl);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-soft);
  color: #f7e9f0;
}

/* Sağ taraftaki kademeli şerit */
.cascade__rail{
  position: relative;
  display: grid;
  justify-items: end;
  gap: 1rem;
  padding-right: .5rem;
}

/* Merkezden aşağı inen ışıltılı çizgi */
.flowline{
  position: absolute;
  top: 0; bottom: 0; right: 12px; width: 3px;
  background:
    linear-gradient(180deg, rgba(247,161,174,.0), rgba(247,161,174,.85), rgba(179,18,47,.0));
  filter: blur(.2px);
  background-size: 100% 200%;
  animation: flowPulse 6s ease-in-out infinite;
}
@keyframes flowPulse{
  0%,100%{ background-position: 0% 0%; opacity:.5; }
  50%{ background-position: 0% 100%; opacity:1; }
}

/* Çekirdek biçimli çerçeve */
.seedframe{
  position: relative;
  padding: .55rem .55rem .65rem;
  border-radius: 16px 16px 26px 26px / 14px 14px 20px 20px; /* “seed” hissi */
  background: rgba(18,16,20,.55);
  border: 1px solid rgba(247,161,174,.22);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  max-width: 350px; /* güvenlik sınırı */
}
.seedframe img{
  border-radius: 12px 12px 18px 18px / 10px 10px 16px 16px;
  transition: transform .28s ease, filter .28s ease;
}
.seedframe:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 20px 60px rgba(179,18,47,.45);
}
.seedframe:hover img{ transform: translateY(-2px); }

/* Küçük parıltı */
.seedframe::after{
  content:""; position:absolute; inset: 6px 10px auto auto; height: 10px; width: 34%;
  background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  opacity:.35; filter: blur(4px); border-radius: 40px;
}

/* Kademeli yerleşim + hafif salınım */
.cascade__rail .seedframe:nth-of-type(1){ transform: translateX(-6%) rotate(-.6deg); animation: floatY 8s ease-in-out infinite; }
.cascade__rail .seedframe:nth-of-type(2){ transform: translateX(2%)  rotate(.4deg);  animation: floatY 9s ease-in-out infinite .2s; }
.cascade__rail .seedframe:nth-of-type(3){ transform: translateX(8%)  rotate(-.3deg); animation: floatY 7.5s ease-in-out infinite .1s; }
@keyframes floatY{
  0%,100%{ transform: translateY(0) translateX(var(--tx,0)) rotate(var(--rot,0)); }
  50%{ transform: translateY(-6px) translateX(var(--tx,0)) rotate(var(--rot,0)); }
}

/* Başlık şeridi */
.seedframe__cap{
  margin: .45rem 0 0; text-align:center; color:#ffe6ea; font-size:.95rem;
}

/* Dekoratif taneler alanı (JS dolduruyor) — bu kısım önceki dosyada varsa tekrar da olabilir, sorun değil */
.seed-field{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:-1; }

/* Duyarlılık */
@media (max-width: 1024px){
  .cascade{ grid-template-columns: 1fr; }
  .cascade__rail{ justify-items: start; padding-right: 0; }
  .flowline{ left: 12px; right: auto; }
  .cascade__rail .seedframe:nth-of-type(1),
  .cascade__rail .seedframe:nth-of-type(2),
  .cascade__rail .seedframe:nth-of-type(3){ transform: none; }
}
@media (max-width: 640px){
  .seedframe{ max-width: 330px; }
}
@media (max-width: 420px){
  .seedframe{ max-width: 300px; }
}
@media (max-width: 1024px){
  .cascade{ grid-template-columns: 1fr; gap: 1rem; }
  .cascade__rail{ justify-items: start; padding-right: 0; }
  .flowline{ left: 12px; right: auto; }
}
@media (max-width: 420px){
  .cascade__copy{ padding: .9rem; }
}
/* ========== Bölüm 2: Zaman Şeridi ========== */
.section--timeline{
  background:
    radial-gradient(1000px 380px at 10% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(800px 360px at 95% 10%, rgba(247,161,174,.08), transparent 60%);
}
.timeline{
  position: relative;
  border-radius: var(--radius-2xl);
  padding: 1rem 1rem 1.2rem;
  background: linear-gradient(180deg, rgba(122,12,22,.22), rgba(18,16,20,.08));
  border: 1px solid rgba(247,161,174,.18);
  box-shadow: var(--shadow-soft);
}
.timeline__line{
  position:absolute; top: 1.2rem; bottom: 1.2rem; left: clamp(14px, 3.5vw, 28px);
  width: 3px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(247,161,174,.25), rgba(179,18,47,.25));
}
.timeline__line::after{
  content:""; position:absolute; inset:0; transform: scaleY(0); transform-origin: top;
  background: linear-gradient(180deg, var(--nar-200), var(--nar-500));
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
  border-radius: 4px;
}
.reveal.in-view .timeline__line::after{ transform: scaleY(1); }

.timeline__list{ list-style:none; margin:0; padding:0; display:grid; gap: 1rem; }
.timeline__item{
  display:grid;
  grid-template-columns: clamp(90px, 18vw, 140px) 1fr auto;
  align-items: start; gap: .75rem 1rem;
  position: relative; padding-left: clamp(22px, 5vw, 40px);
}
.timeline__item::before{
  content:""; position:absolute; left: clamp(8px, 3vw, 22px); top: 18px;
  width: 11px; height: 11px; border-radius:50%;
  background: radial-gradient(circle at 40% 35%, #ffd3db 0 35%, #b3122f 60% 100%);
  box-shadow: 0 0 0 6px rgba(179,18,47,.18);
}
.tick{
  position:absolute; left: clamp(5px, 2.5vw, 18px); top: 13px; width: 20px; height: 20px; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(247,161,174,.28);
  animation: tickPulse 2.8s ease-in-out infinite;
}
@keyframes tickPulse{
  0%{ box-shadow: 0 0 0 0 rgba(247,161,174,.28); }
  70%{ box-shadow: 0 0 0 12px rgba(247,161,174,0); }
  100%{ box-shadow: 0 0 0 0 rgba(247,161,174,0); }
}

.time{ color:#ffe1e7; font-weight:700; margin-top:.15rem; }
.info .t{ margin:.15rem 0 .15rem; font-weight:700; }
.info .d{ margin:0; color:#f3e9ef; }
.timeline__media{
  margin:0; text-align:center;
  background: rgba(18,16,20,.5);
  border:1px solid rgba(247,161,174,.18);
  padding:.45rem .5rem .6rem; border-radius: 1rem;
}
.timeline__media img{ border-radius: .8rem; }
.timeline__media figcaption{ margin-top:.35rem; color:#ffe6ea; font-size:.9rem; }

/* responsive timeline */
@media (max-width: 860px){
  .timeline__item{ grid-template-columns: 1fr; padding-left: 36px; }
  .timeline__media{ justify-self: start; }
}

/* ========== Bölüm 3: Mini Harita ========== */
.section--minimap{
  background:
    radial-gradient(900px 360px at 0% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 100% 0%, rgba(247,161,174,.1), transparent 60%);
}
.minimap{
  border-radius: var(--radius-2xl);
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(122,12,22,.22), rgba(18,16,20,.08));
  border: 1px solid rgba(247,161,174,.18);
  box-shadow: var(--shadow-soft);
}
.minimap__stage{
  position: relative;
  border-radius: 1.2rem;
  aspect-ratio: 16 / 10;
  overflow:hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 44px),
    radial-gradient(120% 80% at 20% 10%, rgba(179,18,47,.18), transparent 60%);
  border: 1px dashed rgba(247,161,174,.25);
}
.minimap__pins{ list-style:none; margin:0; padding:0; }
.pin{ position:absolute; transform: translate(-50%, -50%); }
.pin__card{
  margin:0; padding:.45rem .5rem .6rem;
  border:1px solid rgba(247,161,174,.22); border-radius: 1rem;
  background: rgba(18,16,20,.55);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pin__card:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
}
.pin__card figcaption{ margin-top:.35rem; text-align:center; color:#ffe6ea; font-size:.92rem; }
.pin__pulse{
  position:absolute; left:50%; top:50%; width:10px; height:10px; border-radius:50%; transform:translate(-50%,-50%);
  background: radial-gradient(circle at 40% 35%, #ffd3db 0 35%, #b3122f 60% 100%);
  box-shadow: 0 0 0 0 rgba(247,161,174,.32);
  animation: pinPulse 3s ease-in-out infinite;
  z-index: -1;
}
@keyframes pinPulse{
  0%{ box-shadow: 0 0 0 0 rgba(247,161,174,.32); }
  70%{ box-shadow: 0 0 0 20px rgba(247,161,174,0); }
  100%{ box-shadow: 0 0 0 0 rgba(247,161,174,0); }
}

/* Pin konumları (inline yok) */
.pin--main { left:24%; top:38%; }
.pin--folk { left:68%; top:32%; }
.pin--kids { left:18%; top:68%; }
.pin--work { left:54%; top:62%; }
.pin--food { left:78%; top:68%; }
.pin--photo{ left:40%; top:24%; }

/* Mini harita — küçük ekranlarda liste görünümü */
@media (max-width: 700px){
  .minimap__stage{ aspect-ratio:auto; padding: .6rem; }
  .minimap__stage{ position: static; }
  .minimap__pins{ display:grid; grid-template-columns: 1fr 1fr; gap:.8rem; }
  .pin{ position: static; transform:none; }
}

/* ========== Bölüm 4: Tadım Sticker Şeridi ========== */
.section--tasting{
  background:
    radial-gradient(900px 360px at 25% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 90% 0%, rgba(247,161,174,.08), transparent 60%);
}
.taste{
  display:grid; gap: 1rem;
  grid-template-columns: repeat(5, minmax(0,1fr));
}
@media (max-width: 1024px){
  .taste{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .taste{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.sticker{
  margin:0; padding:.55rem .6rem .7rem;
  background: rgba(18,16,20,.55);
  border: 1px dashed rgba(247,161,174,.26);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  transform: rotate(var(--rot, -1deg)) translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sticker:nth-child(2){ --rot: 1.2deg; }
.sticker:nth-child(3){ --rot: -.6deg; }
.sticker:nth-child(4){ --rot: 1deg; }
.sticker:nth-child(5){ --rot: -.8deg; }
.sticker:hover{
  transform: rotate(0deg) translateY(-4px) scale(1.02);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
  border-color: rgba(247,161,174,.45);
}
.sticker figcaption{ margin-top:.4rem; text-align:center; color:#ffe6ea; }
/* Равномерная сетка под любое количество карточек */
.taste{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
/* ========== Bölüm 5: Rota Şeridi ========== */
.section--route{
  background:
    radial-gradient(900px 360px at 8% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 92% 0%, rgba(247,161,174,.08), transparent 60%);
}
.route{
  counter-reset: step;
  position: relative;
  display: grid; gap: .9rem;
  border-radius: var(--radius-2xl);
  padding: 1rem;
  background: linear-gradient(180deg, rgba(122,12,22,.22), rgba(18,16,20,.08));
  border: 1px solid rgba(247,161,174,.18);
  box-shadow: var(--shadow-soft);
}
.step{
  position: relative;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:start; gap:.8rem 1rem;
  padding-left: .2rem;
}
.step + .step::before{
  /* bağlayıcı hat */
  content:""; position:absolute; left: 18px; top: -10px; bottom: calc(100% - 22px);
  width: 2px; background:
    linear-gradient(180deg, rgba(247,161,174,.0), rgba(247,161,174,.8), rgba(179,18,47,.0));
  filter: blur(.2px);
}
.step__badge{
  width: 28px; height: 28px; border-radius: 10px;
  display:grid; place-items:center; font-weight:700;
  background: radial-gradient(circle at 40% 35%, #ffd3db 0 35%, #b3122f 60% 100%);
  color:#fff; box-shadow: 0 0 0 6px rgba(179,18,47,.18);
}
.step__text .t{ margin:.1rem 0 .2rem; font-weight:700; }
.step__text .d{ margin:0; color:#f3e9ef; }
.step__media{
  margin:0; text-align:center; align-self:center;
  background: rgba(18,16,20,.5);
  border:1px solid rgba(247,161,174,.18);
  padding:.45rem .5rem .6rem; border-radius: 1rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.step__media:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
}
.step__media figcaption{ margin-top:.35rem; color:#ffe6ea; font-size:.9rem; }

@media (max-width: 860px){
  .step{ grid-template-columns: auto 1fr; }
  .step__media{ grid-column: 1 / -1; justify-self: start; }
}

/* ========== Bölüm 6: Dalga Animasyonu ========== */
.section--wave{
  background:
    radial-gradient(900px 360px at 12% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 88% 0%, rgba(247,161,174,.08), transparent 60%);
}
.wavegrid{
  display:grid; gap: 1rem; align-items:center;
  grid-template-columns: 1.2fr .8fr;
  border-radius: var(--radius-2xl);
  padding: 1rem;
  background: linear-gradient(180deg, rgba(122,12,22,.22), rgba(18,16,20,.08));
  border: 1px solid rgba(247,161,174,.18);
  box-shadow: var(--shadow-soft);
}
.waves{
  position: relative; height: 160px; border-radius: 12px; overflow:hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 10px),
    linear-gradient(180deg, rgba(247,161,174,.08), rgba(179,18,47,.08));
}
.waves::before, .waves::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60px 160px at -20% 50%, rgba(247,161,174,.25), transparent 70%),
    radial-gradient(60px 160px at 120% 50%, rgba(247,161,174,.25), transparent 70%),
    repeating-linear-gradient(90deg, rgba(247,161,174,.35) 0 3px, rgba(247,161,174,0) 3px 12px);
  mix-blend-mode: screen;
  animation: waveRun 5.5s linear infinite;
}
.waves::after{ animation-duration: 7s; opacity:.6; }
@keyframes waveRun{
  from{ transform: translateX(-12%); }
  to{ transform: translateX(12%); }
}

.slots{
  list-style:none; margin:0; padding:0; font-size:.98rem; color:#ffe1e7;
}
.slots li{ display:flex; gap:.5rem; align-items:center; padding:.3rem 0; }
.slots time{ font-weight:700; min-width: 64px; }
.slots span{ color:#f3e9ef; opacity:.9; }
.focus{
  margin:0; text-align:center;
  background: rgba(18,16,20,.5);
  border:1px solid rgba(247,161,174,.18);
  padding:.45rem .5rem .6rem; border-radius: 1rem;
}
.focus figcaption{ margin-top:.35rem; color:#ffe6ea; font-size:.9rem; }

@media (max-width: 900px){
  .wavegrid{ grid-template-columns: 1fr; }
}

/* ========== Bölüm 7: Işık Sızıntılı Vitrin ========== */
.section--leak{
  background:
    radial-gradient(900px 360px at 20% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 80% 0%, rgba(247,161,174,.08), transparent 60%);
}
.leak-grid{
  display:grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 700px){
  .leak-grid{ grid-template-columns: 1fr; }
}
.leak-card{
  position: relative; margin:0; padding:.55rem .6rem .7rem;
  background: rgba(18,16,20,.55);
  border: 1px dashed rgba(247,161,174,.26);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  overflow:hidden; transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.leak-card::before{
  content:""; position:absolute; inset:-10% -30% auto auto; height: 60%; width: 60%;
  background: radial-gradient(ellipse at 30% 30%,
              rgba(255,220,230,.65) 0 25%, rgba(255,220,230,0) 60%),
              radial-gradient(ellipse at 70% 60%,
              rgba(247,161,174,.45) 0 20%, rgba(247,161,174,0) 55%);
  mix-blend-mode: screen; filter: blur(6px); opacity:.55;
  transform: rotate(8deg);
  transition: transform .6s ease, opacity .6s ease;
}
.leak-card:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
}
.leak-card:hover::before{ transform: rotate(0deg) translate(-6%, -4%); opacity:.9; }
.leak-card figcaption{ margin-top:.4rem; text-align:center; color:#ffe6ea; }
/* ========== Bölüm 8: Nar Mozaik ========== */
.section--mosaic{
  background:
    radial-gradient(900px 360px at 14% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 86% 0%, rgba(247,161,174,.08), transparent 60%);
}
.mosaic{
  display:grid; gap: 1rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
  transform: rotate(-1.5deg);
}
.mosaic .tile{
  margin:0; padding:.55rem .6rem .7rem;
  border:1px solid rgba(247,161,174,.22);
  background: rgba(18,16,20,.55);
  border-radius: 18px 18px 28px 28px / 16px 16px 22px 22px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mosaic .tile:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
}
.tile--a{ transform: rotate(1.5deg); }
.tile--b{ transform: rotate(-.5deg); }
.tile--c{ transform: rotate(1deg); }

.mosaic__text{
  grid-column: 1 / -1;
  background: linear-gradient(180deg, rgba(122,12,22,.22), rgba(18,16,20,.08));
  border: 1px solid rgba(247,161,174,.18);
  border-radius: var(--radius-2xl);
  padding: .9rem 1rem;
  box-shadow: var(--shadow-soft);
  transform: rotate(.6deg);
}
@media (max-width: 900px){
  .mosaic{ grid-template-columns: repeat(2, minmax(0,1fr)); transform:none; }
  .tile--a,.tile--b,.tile--c,.mosaic__text{ transform:none; }
}
@media (max-width: 560px){
  .mosaic{ grid-template-columns: 1fr; }
}

/* ========== Bölüm 9: Mini Rehber (gölge panosu) ========== */
.section--guide{
  background:
    radial-gradient(900px 360px at 8% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 92% 0%, rgba(247,161,174,.08), transparent 60%);
}
.guide{
  display:grid; gap: 1rem;
  grid-template-columns: 1.1fr .9fr .9fr;
  align-items:start;
}
.note{
  background: linear-gradient(180deg, rgba(122,12,22,.22), rgba(18,16,20,.08));
  border:1px solid rgba(247,161,174,.18);
  border-radius: var(--radius-2xl);
  padding: 1rem;
  box-shadow: var(--shadow-soft);
}
.note .t{ margin:.1rem 0 .4rem; font-weight:700; }
.bullets{ margin:.2rem 0 0; padding-left: 1rem; }
.bullets li{ margin:.25rem 0; }

.guide-card{
  margin:0; padding:.55rem .6rem .7rem;
  border:1px solid rgba(247,161,174,.22);
  background: rgba(18,16,20,.55);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.guide-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background: linear-gradient(180deg, var(--nar-200), var(--nar-500));
  opacity:.6;
}
.guide-card:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
}
.guide-card figcaption{ margin-top:.35rem; text-align:center; color:#ffe6ea; }

@media (max-width: 980px){
  .guide{ grid-template-columns: 1fr 1fr; }
  .note{ grid-column: 1 / -1; }
}
@media (max-width: 600px){
  .guide{ grid-template-columns: 1fr; }
}

/* ========== Bölüm 10: Afiş Rayı ========== */
.section--posters{
  background:
    radial-gradient(900px 360px at 18% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 82% 0%, rgba(247,161,174,.08), transparent 60%);
}
.poster-rail{
  position: relative;
  display:grid; gap: 1rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items:start;
  padding: 1rem 0;
}
.rail{
  position:absolute; left:50%; top:0; bottom:0; width:2px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(247,161,174,.35), rgba(179,18,47,.35));
  filter: blur(.3px);
}
.poster{
  margin:0; padding:.55rem .6rem .7rem;
  background: rgba(18,16,20,.55);
  border:1px dashed rgba(247,161,174,.26);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.poster::after{
  content:""; position:absolute; top:8px; left:50%; transform: translateX(-50%);
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 40% 35%, #ffd3db 0 35%, #b3122f 60% 100%);
  box-shadow: 0 0 0 10px rgba(247,161,174,.12);
}
.poster:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
}
.poster figcaption{ margin-top:.35rem; text-align:center; color:#ffe6ea; }

@media (max-width: 960px){
  .poster-rail{ grid-template-columns: 1fr; }
  .rail{ display:none; }
}
/* ========== Bölüm 8: Panorama Şeridi ========== */
.section--panorama{
  background:
    radial-gradient(900px 360px at 14% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 86% 0%, rgba(247,161,174,.08), transparent 60%);
}
.panorama{
  border-radius: var(--radius-2xl);
  padding: 1rem;
  background: linear-gradient(180deg, rgba(122,12,22,.22), rgba(18,16,20,.08));
  border: 1px solid rgba(247,161,174,.18);
  box-shadow: var(--shadow-soft);
}
.panorama__track{
  display: flex; gap: 1rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: .5rem;
}
.panorama__track::-webkit-scrollbar{ height: 8px; }
.panorama__track::-webkit-scrollbar-thumb{
  background: rgba(247,161,174,.28); border-radius: 8px;
}
.panel{
  margin:0; flex: 0 0 auto;
  scroll-snap-align: start;
  padding:.55rem .6rem .7rem;
  border:1px solid rgba(247,161,174,.22);
  background: rgba(18,16,20,.55);
  border-radius: 18px 18px 28px 28px / 16px 16px 22px 22px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.panel:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
}
.panel figcaption{ margin-top:.35rem; text-align:center; color:#ffe6ea; font-size:.92rem; }

.panorama__hint{
  margin-top: .5rem; text-align:center; color:#f4c9d0;
  font-size: .9rem; opacity:.85;
}
@media (max-width: 560px){
  .panel{ min-width: 260px; }
}

/* ========== Bölüm 10: Zigzag Afiş Şeridi ========== */
.section--banners{
  background:
    radial-gradient(900px 360px at 18% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 82% 0%, rgba(247,161,174,.08), transparent 60%);
}
.banners{
  position: relative;
  display:grid; gap: 1rem;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.banner{
  margin:0; padding:.55rem .6rem .7rem;
  background: rgba(18,16,20,.55);
  border:1px dashed rgba(247,161,174,.26);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.banner:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
}
.banner figcaption{ margin-top:.35rem; color:#ffe6ea; }
.banner--left{ grid-column: 1; }
.banner--right{ grid-column: 2; transform: translateY(12px); }
.zig{
  position:absolute; left: 0; right: 0; top: 22px; height: 2px;
  background: linear-gradient(90deg, rgba(247,161,174,.35), rgba(179,18,47,.35));
  box-shadow: 0 0 0 8px rgba(247,161,174,.08);
}
.banners::before, .banners::after{
  content:""; position:absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffd3db 0 35%, #b3122f 60% 100%);
  top: 14px;
}
.banners::before{ left: -6px; }
.banners::after { right: -6px; }

@media (max-width: 880px){
  .banners{ grid-template-columns: 1fr; }
  .banner--right{ transform: none; }
  .zig{ display:none; }
}
/* ========== Bölüm 8: Panorama Şeridi ========== */
.section--panorama{
  background:
    radial-gradient(900px 360px at 14% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 86% 0%, rgba(247,161,174,.08), transparent 60%);
}
.panorama{
  border-radius: var(--radius-2xl);
  padding: 1rem;
  background: linear-gradient(180deg, rgba(122,12,22,.22), rgba(18,16,20,.08));
  border: 1px solid rgba(247,161,174,.18);
  box-shadow: var(--shadow-soft);
}
.panorama__track{
  display: flex; gap: 1rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: .5rem;
}
.panorama__track::-webkit-scrollbar{ height: 8px; }
.panorama__track::-webkit-scrollbar-thumb{
  background: rgba(247,161,174,.28); border-radius: 8px;
}
.panel{
  margin:0; flex: 0 0 auto;
  scroll-snap-align: start;
  padding:.55rem .6rem .7rem;
  border:1px solid rgba(247,161,174,.22);
  background: rgba(18,16,20,.55);
  border-radius: 18px 18px 28px 28px / 16px 16px 22px 22px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.panel:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
}
.panel figcaption{ margin-top:.35rem; text-align:center; color:#ffe6ea; font-size:.92rem; }

.panorama__hint{
  margin-top: .5rem; text-align:center; color:#f4c9d0;
  font-size: .9rem; opacity:.85;
}
@media (max-width: 560px){
  .panel{ min-width: 260px; }
}

/* ========== Bölüm 10: Zigzag Afiş Şeridi ========== */
.section--banners{
  background:
    radial-gradient(900px 360px at 18% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 82% 0%, rgba(247,161,174,.08), transparent 60%);
}
.banners{
  position: relative;
  display:grid; gap: 1rem;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.banner{
  margin:0; padding:.55rem .6rem .7rem;
  background: rgba(18,16,20,.55);
  border:1px dashed rgba(247,161,174,.26);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.banner:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
}
.banner figcaption{ margin-top:.35rem; color:#ffe6ea; }
.banner--left{ grid-column: 1; }
.banner--right{ grid-column: 2; transform: translateY(12px); }
.zig{
  position:absolute; left: 0; right: 0; top: 22px; height: 2px;
  background: linear-gradient(90deg, rgba(247,161,174,.35), rgba(179,18,47,.35));
  box-shadow: 0 0 0 8px rgba(247,161,174,.08);
}
.banners::before, .banners::after{
  content:""; position:absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffd3db 0 35%, #b3122f 60% 100%);
  top: 14px;
}
.banners::before{ left: -6px; }
.banners::after { right: -6px; }

@media (max-width: 880px){
  .banners{ grid-template-columns: 1fr; }
  .banner--right{ transform: none; }
  .zig{ display:none; }
}
/* ========== Bölüm 11: Nar Lens ========== */
.section--lens{
  background:
    radial-gradient(900px 360px at 12% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 88% 0%, rgba(247,161,174,.08), transparent 60%);
}
.lens-grid{
  display:grid; gap: 1rem;
  grid-template-columns: 1fr 1.1fr 1fr;
  align-items:center;
  border-radius: var(--radius-2xl);
  padding: 1rem;
  background: linear-gradient(180deg, rgba(122,12,22,.22), rgba(18,16,20,.08));
  border: 1px solid rgba(247,161,174,.18);
  box-shadow: var(--shadow-soft);
}
.lens-card{
  position:relative; margin:0; padding:.6rem .6rem .75rem;
  border:1px solid rgba(247,161,174,.22);
  background: rgba(18,16,20,.55);
  border-radius: 1.2rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  text-align:center;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lens-card img{ border-radius: 50%; width: min(100%, 300px); margin-inline:auto; }
.lens-card .ring{
  position:absolute; inset: 10px; border-radius: 50%;
  border: 1px dashed rgba(247,161,174,.3);
  animation: spinRing 18s linear infinite;
}
@keyframes spinRing{ to{ transform: rotate(360deg); } }
.lens-card:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
}
.lens-card figcaption{ margin-top:.4rem; color:#ffe6ea; }
.lens-copy{
  background: rgba(18,16,20,.45);
  border: 1px solid rgba(247,161,174,.22);
  border-radius: 1rem;
  padding: .9rem 1rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
}
@media (max-width: 900px){
  .lens-grid{ grid-template-columns: 1fr; }
}

/* ========== Bölüm 12: Ritim Sayaç ========== */
.section--counter{
  background:
    radial-gradient(900px 360px at 18% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 82% 0%, rgba(247,161,174,.08), transparent 60%);
}
.counter-deck{
  display:grid; gap: 1rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-bottom: .6rem;
}
.seed-counter{
  display:grid; place-items:center;
  padding: .9rem;
  border-radius: 22px 22px 32px 32px / 18px 18px 26px 26px; /* çekirdek şekli */
  background: linear-gradient(180deg, rgba(122,12,22,.3), rgba(18,16,20,.1));
  border: 1px solid rgba(247,161,174,.22);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.seed-counter:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
}
.seed-counter .num{
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.2rem);
  color:#ffe1e7; font-weight:700;
}
.seed-counter .lbl{ margin: .2rem 0 0; color:#f4c9d0; }
@media (max-width: 720px){
  .counter-deck{ grid-template-columns: 1fr; }
}

.counter-photos{
  display:grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.counter-photos .cp{
  margin:0; padding:.55rem .6rem .7rem; text-align:center;
  background: rgba(18,16,20,.55);
  border:1px solid rgba(247,161,174,.22);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.counter-photos .cp figcaption{ margin-top:.35rem; color:#ffe6ea; }
@media (max-width: 640px){
  .counter-photos{ grid-template-columns: 1fr; }
}

/* ========== Bölüm 13: Gönüllü Panosu ========== */
.section--volunteer{
  background:
    radial-gradient(900px 360px at 20% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 80% 0%, rgba(247,161,174,.08), transparent 60%);
}
.board-grid{
  display:grid; gap: 1rem;
  grid-template-columns: 1.1fr .9fr .9fr;
  align-items:start;
}
.note{
  background: linear-gradient(180deg, rgba(122,12,22,.22), rgba(18,16,20,.08));
  border:1px dashed rgba(247,161,174,.26);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  position:relative;
}
.note::before{
  content:""; position:absolute; top:8px; left:50%; transform: translateX(-50%);
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 40% 35%, #ffd3db 0 35%, #b3122f 60% 100%);
  box-shadow: 0 0 0 10px rgba(247,161,174,.12);
}
.note .t{ margin:.1rem 0 .4rem; font-weight:700; }
.bul{ margin:.2rem 0 .6rem; padding-left: 1rem; }
.xtra{ margin:0; color:#f3e9ef; }

.photo-note{
  margin:0; padding:.55rem .6rem .7rem;
  background: rgba(18,16,20,.55);
  border:1px solid rgba(247,161,174,.22);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.photo-note:hover{
  transform: translateY(-4px) rotate(0deg) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
}
.photo-note figcaption{ margin-top:.35rem; text-align:center; color:#ffe6ea; }
.tilt-left{ transform: rotate(-1.2deg); }
.tilt-right{ transform: rotate(1.1deg); }

@media (max-width: 980px){
  .board-grid{ grid-template-columns: 1fr 1fr; }
  .note--tasks{ grid-column: 1 / -1; }
}
@media (max-width: 620px){
  .board-grid{ grid-template-columns: 1fr; }
  .tilt-left, .tilt-right{ transform:none; }
}
/* === MOBILE IMAGE FIXES (универсально) === */
@media (max-width: 880px){
  /* Универсально для карточек, чтобы избежать «ломки» и переполнения */
  .sticker img,
  .panel img,
  .guide-card img,
  .leak-card img,
  .seedframe img,
  .timeline__media img,
  .focus img,
  .cp img,
  .lens-card img,
  .poster img,
  .banner img{
    width: min(100%, 350px);
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;     /* стабильная высота на мобилке */
    object-fit: cover;         /* без искажений, обрезаем «по месту» */
    display: block;
    margin-inline: auto;       /* центрируем картинку в карточке */
    border-radius: .8rem;
  }
}

/* === Zigzag Afiş Şeridi — мобильная корректировка === */
@media (max-width: 880px){
  .banners{ grid-template-columns: 1fr; }
  .banner{ 
    transform: none !important;       /* убираем вертикальный сдвиг правых баннеров */
    display: grid;
    justify-items: center;            /* карточка и текст по центру */
    text-align: center;
    padding: .6rem .7rem .8rem;
  }
  .banner figcaption{ margin-top: .5rem; }
  .zig{ display:none; }               /* декоративную ленту скрываем на узких экранах */
}

/* === Подстраховка: убираем лишние переполнения на очень узких экранах === */
@media (max-width: 420px){
  .section { padding: 1rem 0; }
  .container { padding-inline: 10px; }
}
/* === Zigzag Afiş Şeridi: мобильный вид — строго один под другим === */
@media (max-width: 920px){
  .section--banners .banners{
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem;
  }
  .section--banners .banner{
    width: 100%;
    transform: none !important;
    text-align: center;
    display: grid;
    justify-items: center;
    padding: .6rem .7rem .8rem;
  }
  .section--banners .banner img{
    width: min(100%, 350px);
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    display: block;
    margin-inline: auto;
    border-radius: .8rem;
  }
  /* отключаем декоративную «ленту» и боковые точки */
  .section--banners .zig,
  .section--banners .banners::before,
  .section--banners .banners::after{
    display: none !important;
  }
}
/* ========== Bölüm 14: Nar Gölge Yolu (shadow path) ========== */
.section--shadowpath{
  background:
    radial-gradient(900px 360px at 10% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 90% 0%, rgba(247,161,174,.08), transparent 60%);
}
.shadowpath{
  position:relative;
  display:grid; gap:.9rem;
  border-radius: var(--radius-2xl);
  padding: 1rem;
  background: linear-gradient(180deg, rgba(122,12,22,.22), rgba(18,16,20,.08));
  border:1px solid rgba(247,161,174,.18);
  box-shadow: var(--shadow-soft);
}
.shadowpath::before{
  /* bağlayıcı parıltı çizgisi */
  content:""; position:absolute; left: 22px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, rgba(247,161,174,.0), rgba(247,161,174,.85), rgba(179,18,47,.0));
  filter: blur(.2px);
  background-size: 100% 200%;
  animation: pathRun 8s ease-in-out infinite;
}
@keyframes pathRun{
  0%,100%{ background-position: 0% 0%; opacity:.6; }
  50%{ background-position: 0% 100%; opacity:1; }
}
.shadowstep{
  position: relative;
  display:grid;
  grid-template-columns: 28px 1fr auto;
  align-items:start; gap:.6rem 1rem;
}
.shadowstep .dot{
  width: 12px; height:12px; border-radius:50%; margin-top: .4rem;
  background: radial-gradient(circle at 40% 35%, #ffd3db 0 35%, #b3122f 60% 100%);
  box-shadow: 0 0 0 10px rgba(247,161,174,.12);
}
.shadowstep .t{ margin:.05rem 0 .2rem; font-weight:700; }
.shadowstep .d{ margin:0; color:#f3e9ef; }
.shadowstep .media{
  margin:0; text-align:center;
  background: rgba(18,16,20,.5);
  border:1px solid rgba(247,161,174,.18);
  padding:.45rem .5rem .6rem; border-radius: 1rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.shadowstep .media:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
}
@media (max-width: 860px){
  .shadowstep{ grid-template-columns: 28px 1fr; }
  .shadowstep .media{ grid-column: 2 / -1; justify-self: start; }
}

/* ========== Bölüm 15: Kapanış Şeridi (stripe cards) ========== */
.section--closing{
  background:
    radial-gradient(900px 360px at 16% 0%, rgba(179,18,47,.12), transparent 60%),
    radial-gradient(900px 360px at 84% 0%, rgba(247,161,174,.08), transparent 60%);
}
.closing-strip{
  position:relative;
  display:grid; gap: 1rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items:start;
  padding-top: .6rem;
}
.closing-wave{
  position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, rgba(247,161,174,.35), rgba(179,18,47,.35));
  box-shadow: 0 0 0 8px rgba(247,161,174,.08);
}
.stripe-card{
  margin:0; padding:.55rem .6rem .7rem;
  background: rgba(18,16,20,.55);
  border:1px dashed rgba(247,161,174,.26);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.stripe-card::after{
  /* parlayan çizgi süpürgesi */
  content:""; position:absolute; top:-20%; left:-30%; width:60%; height:140%;
  background: linear-gradient(115deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); opacity:.25; transform: rotate(8deg);
  transition: transform .6s ease, opacity .6s ease;
}
.stripe-card:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(247,161,174,.45);
  box-shadow: 0 18px 60px rgba(179,18,47,.4);
}
.stripe-card:hover::after{ transform: rotate(0deg) translate(10%, 0); opacity:.55; }
.stripe-card figcaption{ margin-top:.35rem; text-align:center; color:#ffe6ea; }

.tilt-left{ transform: rotate(-1.1deg); }
.tilt-right{ transform: rotate(1.1deg); }

@media (max-width: 960px){
  .closing-strip{ grid-template-columns: 1fr; }
  .tilt-left,.tilt-right{ transform:none; }
}