/* --- базовые страховки, чтобы не было белых полос и горизонтального скролла --- */
html, body{ background:#0b0a09; overflow-x:hidden; }
.page3-main{ padding-top:calc(var(--header-h) + 12px); }
.page3-title{ margin:0 0 8px; color:#e8ecff; font-weight:900; }

/* общий фон секций (совместим со страницами 1–2) */
.snap-hero, .route-stops, .flavor-bond{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(620px 340px at 14% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 86% 14%, rgba(14,107,168,.10), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
  color:#e8ecff;
  overflow:hidden;
}

/* ========== §1 Kaydırmalı Vitrin ========== */
.snap-row{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px, 2.6vw, 18px);
}
.snap-card{
  padding:10px; border-radius:16px;
  outline:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  transition:transform .22s ease, box-shadow .25s ease, outline-color .2s ease;
}
.snap-card img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.snap-card figcaption{ font-size:12px; color:var(--muted); text-align:center; padding-top:6px; }
.snap-card:hover{ transform:translateY(-4px); outline-color:rgba(255,179,0,.35); box-shadow:0 18px 46px rgba(0,0,0,.55); }
.snap-hint{ opacity:.85; }

@media (max-width: 860px){
  .snap-row{
    grid-auto-flow:column; grid-auto-columns:minmax(240px, 82%);
    overflow-x:auto; gap:12px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }
  .snap-row::-webkit-scrollbar{ display:none; }
  .snap-card{ scroll-snap-align:center; }
}

/* ========== §2 Rota İşaretleri (zigzag) ========== */
.route{
  list-style:none; margin:0; padding:0; display:grid; gap:16px; position:relative;
}
.route::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background: radial-gradient(circle 3px at 50% 6px, rgba(255,255,255,.65) 98%, transparent 101%) repeat-y;
  background-size:2px 16px; opacity:.45; z-index:0;
}
.stop{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:16px; position:relative; z-index:1; }
.stop.left  .stop-fig{ grid-column:1; } .stop.left  p{ grid-column:2; }
.stop.right .stop-fig{ grid-column:2; } .stop.right p{ grid-column:1; text-align:right; }

.stop-fig{
  padding:10px; border-radius:16px; outline:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  transition:transform .22s ease, outline-color .2s ease, box-shadow .25s ease;
}
.stop-fig img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.stop-fig figcaption{ font-size:12px; color:var(--muted); text-align:center; padding-top:6px; }
.stop-fig:hover{ transform:translateY(-4px); outline-color:rgba(255,179,0,.35); box-shadow:0 18px 46px rgba(0,0,0,.55); }

.pin{
  position:absolute; left:50%; top:50%; width:10px; height:10px; transform:translate(-50%,-50%);
  border-radius:50%; background:#fff; box-shadow:0 0 16px rgba(255,179,0,.7);
}

@media (max-width: 980px){
  .route::before{ left:16px; transform:none; opacity:.35; }
  .stop{ grid-template-columns:1fr; }
  .stop.right p{ text-align:left; }
}

/* ========== §3 Lezzet Bağı (üçgen) ========== */
.flavor-bond{ overflow:hidden; }
.tri{ position:relative; width:min(560px, 92%); aspect-ratio:1/1; margin:0 auto; }
.tri-lines{ position:absolute; inset:0; }
.edge{ fill:none; stroke:rgba(255,255,255,.28); stroke-width:1.4; stroke-dasharray:240; stroke-dashoffset:240; }

.node{
  position:absolute; width:min(92%, 360px); max-width:350px; padding:10px; border-radius:16px;
  outline:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  transition:transform .22s ease, box-shadow .25s ease, outline-color .2s ease, z-index 0s;
}
.node img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.node figcaption{ font-size:12px; color:var(--muted); text-align:center; padding-top:6px; }
.node:hover{ z-index:5; transform:translateY(-6px); outline-color:rgba(255,179,0,.35); box-shadow:0 22px 58px rgba(0,0,0,.55); }

/* позиции узлов для десктопа */
.na{ left:50%; top:12%; transform:translate(-50%,0); }
.nb{ left:16%; bottom:8%; }
.nc{ right:16%; bottom:8%; }

.tri-note{ max-width:78ch; margin-top:8px; }

@media (max-width: 700px){
  .tri{ width:min(440px, 92%); }
  .tri-lines{ display:none; }       /* без линий — чище на мобилке */
  .node{ position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none; margin-bottom:12px; }
}
/* --- Mobile fix for §1, §2, §3 images --- */

/* 1) §1: карточки в горизонтальный скролл с нормальной шириной */
@media (max-width: 860px){
  .snap-row{
    grid-template-columns: none !important;   /* было: repeat(3,1fr) */
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 88%);    /* ширина одной карточки */
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .snap-card{ min-width: 260px; }
}

/* 2) Картинкам не ограничиваем max-width 350px на очень узких экранах */
@media (max-width: 480px){
  .snap-card img,
  .stop-fig img,
  .node img{
    max-width: 100% !important;  /* иначе 350px иногда «жмёт» контейнер */
  }
}

/* 3) Общая страховка для всех изображений на page3 */
.snap-card img,
.stop-fig img,
.node img{
  width: 100%;
  height: auto;
  display: block;
}
/* ===== §4 Kemer Galerisi ===== */
.arch-gallery{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(620px 340px at 12% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 88% 16%, rgba(14,107,168,.10), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.arch-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(12px, 2.6vw, 18px); }
.arch-card{
  padding:10px; border-radius:16px; text-align:center;
  outline:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  transition:transform .22s ease, box-shadow .25s ease, outline-color .2s ease;
}
.arch-card:hover{ transform: translateY(-4px); outline-color: rgba(255,179,0,.35); box-shadow: 0 18px 46px rgba(0,0,0,.55); }
.arch-img{
  border-radius: 18px 18px 12px 12px; overflow: hidden; position: relative;
  background: radial-gradient(120px 90px at 50% -10px, rgba(255,255,255,.14), transparent 60%);
}
.arch-img img{ width:100%; max-width:350px; border-radius:12px; display:block; }
.arch-card figcaption{ font-size:12px; color:var(--muted); padding-top:6px; }

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

/* ===== §5 Vurgu Anahtarı (toggle) ===== */
.flavor-switch{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(620px 340px at 14% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 86% 14%, rgba(215,38,61,.10), transparent 60%),
    linear-gradient(180deg, rgba(20,17,15,.95), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.fs-controls{ display:inline-flex; gap:8px; flex-wrap: wrap; margin-bottom:10px; }
.fs-btn{
  padding:8px 12px; border-radius:999px; border:0; cursor:pointer; font-weight:800;
  color:#14110f; background: linear-gradient(90deg, var(--saffron-500), var(--pomegranate-500));
  outline:1px solid rgba(255,255,255,.10); box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition: transform .16s ease, outline-color .2s ease, box-shadow .25s ease, filter .2s ease;
}
.fs-btn.is-on{ outline-color: rgba(255,179,0,.35); }

.fs-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(12px, 2.6vw, 18px); }
.fs-item{
  padding:10px; border-radius:16px; text-align:center;
  outline:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  transition: transform .22s ease, box-shadow .25s ease, outline-color .2s ease, filter .2s ease;
}
.fs-item img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.fs-item figcaption{ font-size:12px; color:var(--muted); padding-top:6px; }

/* emphasis states */
.flavor-switch.is-left  .left{  transform: translateY(-4px); box-shadow: 0 18px 46px rgba(0,0,0,.45); outline-color: rgba(255,179,0,.35); }
.flavor-switch.is-left  .right{ filter: brightness(.92); }
.flavor-switch.is-right .right{ transform: translateY(-4px); box-shadow: 0 18px 46px rgba(0,0,0,.45); outline-color: rgba(255,179,0,.35); }
.flavor-switch.is-right .left{  filter: brightness(.92); }

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

/* ===== §6 Daire Merceği ===== */
.circle-lens{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(620px 340px at 16% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 84% 14%, rgba(14,107,168,.10), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
  overflow:hidden;
}
.cl-wrap{ position: relative; width:min(560px, 92%); aspect-ratio:1/1; margin:0 auto; }
.cl-ring{
  position:absolute; inset:0; border-radius:50%;
  outline:1px dashed rgba(255,255,255,.18);
  animation: clSpin 26s linear infinite;
}
@keyframes clSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .cl-ring{ animation:none; } }

.cl-card{
  position:absolute; left:50%; top:50%;
  width:min(92%, 360px); max-width:350px; padding:10px; border-radius:16px; text-align:center;
  outline:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  transform: translate(-50%,-50%);
  transition: transform .22s ease, box-shadow .25s ease, outline-color .2s ease, z-index 0s;
}
.c-a{ transform: translate(-50%,-50%) rotate(0deg)   translateY(-42%) rotate(0deg); }
.c-b{ transform: translate(-50%,-50%) rotate(120deg) translateY(-42%) rotate(-120deg); }
.c-c{ transform: translate(-50%,-50%) rotate(240deg) translateY(-42%) rotate(-240deg); }

.cl-card img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.cl-card figcaption{ font-size:12px; color:var(--muted); padding-top:6px; }
.cl-card:hover{ z-index:5; outline-color: rgba(255,179,0,.35); box-shadow: 0 22px 58px rgba(0,0,0,.55); }

@media (max-width: 860px){
  .cl-wrap{ width:min(440px, 92%); }
}
@media (max-width: 680px){
  .cl-wrap{ aspect-ratio:auto; display:grid; gap:12px; }
  .cl-ring{ display:none; }
  .cl-card{ position:relative; left:auto; top:auto; transform:none; }
}
/* ===== §7 Kavisli Rota ===== */
.curve-route{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(620px 340px at 12% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 88% 16%, rgba(14,107,168,.10), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.curve{ position: relative; width: min(880px, 96%); aspect-ratio: 16/9; margin: 0 auto; }
.curve-line{ position:absolute; inset:0; }
.curve-line path{
  fill:none; stroke: rgba(255,255,255,.35); stroke-width: 1.6;
  stroke-dasharray: 240; stroke-dashoffset: 240; transition: stroke-dashoffset 1.1s ease;
}
.curve-route.is-on .curve-line path{ stroke-dashoffset: 0; }

.curve-stop{
  position:absolute; width:min(92%, 360px); max-width:350px; padding:10px; border-radius:16px; text-align:center;
  outline:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
  transform: translate(-50%,-50%);
}
.curve-stop img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.curve-stop figcaption{ font-size:12px; color:var(--muted); padding-top:6px; }

/* позиции вдоль кривой */
.pos-a{ left: 12%; top: 72%; }
.pos-b{ left: 50%; top: 30%; }
.pos-c{ left: 86%; top: 68%; }

@media (max-width: 760px){
  .curve{ aspect-ratio:auto; display:grid; gap:12px; }
  .curve-line{ display:none; }
  .curve-stop{ position:relative; left:auto; top:auto; transform:none; }
}

/* ===== §8 Kart Seli (cascade deck) ===== */
.cascade-deck{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(620px 340px at 14% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 86% 14%, rgba(215,38,61,.10), transparent 60%),
    linear-gradient(180deg, rgba(20,17,15,.95), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
  overflow:hidden;
}
.deck{ position:relative; min-height: 360px; }
.deck-card{
  position:absolute; left:50%; top:50%; width:min(92%, 360px); max-width:350px;
  padding:10px; border-radius:16px; text-align:center; transform: translate(-50%,-50%);
  outline:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  transition: transform .22s ease, box-shadow .25s ease, outline-color .2s ease, z-index 0s;
}
.deck-card img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.deck-card figcaption{ font-size:12px; color:var(--muted); padding-top:6px; }
.d1{ transform: translate(-62%,-58%) rotate(-6deg); }
.d2{ transform: translate(-50%,-50%) rotate(0deg); z-index:2; }
.d3{ transform: translate(-38%,-42%) rotate(6deg); }
.deck-card:hover{ z-index:5; transform: translate(-50%,-50%) translateY(-6px) scale(1.02); outline-color: rgba(255,179,0,.35); box-shadow: 0 22px 58px rgba(0,0,0,.55); }

@media (max-width: 900px){
  .deck{ min-height: unset; display:grid; gap:12px; }
  .deck-card{ position:relative; left:auto; top:auto; transform:none; }
}

/* ===== §9 Tat Ekolayzır ===== */
.taste-eq{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(620px 340px at 16% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 84% 14%, rgba(14,107,168,.10), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
  overflow:hidden;
}
.eq-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(12px, 2.6vw, 18px); align-items:end; }
.eq-fig{
  padding:10px; border-radius:16px; text-align:center;
  outline:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  margin-bottom:8px;
}
.eq-fig img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.eq-fig figcaption{ font-size:12px; color:var(--muted); padding-top:6px; }

.bar{
  --h: 0%;
  height: 140px; border-radius: 14px; outline:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: inset 0 10px 18px rgba(0,0,0,.35);
  position: relative; overflow: hidden;
}
.fill{
  position:absolute; left:0; right:0; bottom:0; height: var(--h);
  background: linear-gradient(180deg, var(--saffron-500), var(--pomegranate-500));
  transition: height .9s ease;
}

@media (max-width: 980px){
  .eq-grid{ grid-template-columns: 1fr; }
}
/* ===== §10 Bal Peteği Üçlü ===== */
.honeycomb-trio{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(620px 340px at 12% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 88% 16%, rgba(14,107,168,.10), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.comb{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(12px, 2.6vw, 18px); }
.hex-card{
  padding:10px; border-radius:16px; text-align:center;
  outline:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, outline-color .2s ease, box-shadow .25s ease;
}
.hex-card:hover{ transform: translateY(-4px); outline-color: rgba(255,179,0,.35); box-shadow: 0 18px 46px rgba(0,0,0,.55); }
.hex-img{
  --w: 350px;
  width: 100%;
  max-width: var(--w);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  border-radius: 12px;
  overflow: hidden;
  outline: 1px solid rgba(255,255,255,.08);
}
.hex-img img{ width:100%; height:100%; object-fit: cover; display:block; }
.hex-card figcaption{ font-size:12px; color:var(--muted); padding-top:6px; }

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

/* ===== §11 Denge Terazisi ===== */
.balance-flavors{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(620px 340px at 14% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 86% 14%, rgba(215,38,61,.10), transparent 60%),
    linear-gradient(180deg, rgba(20,17,15,.95), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.balance{ position:relative; display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:center; }
.axis{
  position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background: radial-gradient(circle 3px at 50% 6px, rgba(255,255,255,.65) 98%, transparent 101%) repeat-y;
  background-size:2px 16px; opacity:.45;
}
.bside{
  padding:10px; border-radius:16px; text-align:center;
  outline:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, outline-color .2s ease, box-shadow .25s ease;
}
.bside img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.bside figcaption{ font-size:12px; color:var(--muted); padding-top:6px; }
.bside:hover{ transform:translateY(-4px); outline-color: rgba(255,179,0,.35); box-shadow: 0 18px 46px rgba(0,0,0,.55); }

.balance-notes{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; opacity:.9; }
.balance-notes li{ list-style: none; padding:8px 12px; border-radius:999px;
  outline:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

@media (max-width: 920px){
  .balance{ grid-template-columns: 1fr; }
  .axis{ left:16px; transform:none; opacity:.35; }
}

/* ===== §12 Kartpostal Panosu ===== */
.pinboard-postcards{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(620px 340px at 16% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 84% 14%, rgba(14,107,168,.10), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.pinboard{ position:relative; min-height: 300px; }
.pcard{
  position:absolute; width:min(92%, 360px); max-width:350px; padding:10px; border-radius:16px;
  outline:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
  transform-origin: center;
  transition: transform .22s ease, box-shadow .25s ease, outline-color .2s ease, z-index 0s;
}
.pcard::before{
  content:""; position:absolute; left:50%; top:10px; width:14px; height:14px; transform:translateX(-50%);
  border-radius:50%; background:#e8ecff; box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 0 4px rgba(0,0,0,.35);
}
.pcard img{ width:100%; max-width:350px; border-radius:12px; outline:1px solid rgba(255,255,255,.08); }
.pcard figcaption{ font-size:12px; color:var(--muted); text-align:center; padding-top:6px; }
.pcard:hover{ z-index:5; transform: translateY(-6px) rotate(0deg); outline-color: rgba(255,179,0,.35); box-shadow: 0 22px 58px rgba(0,0,0,.55); }

.p-a{ left: 14%; top: 18%; transform: rotate(-4deg); }
.p-b{ right: 14%; bottom: 10%; transform: rotate(5deg); }

.pin-note{ max-width:78ch; margin-top:8px; opacity:.9; }

@media (max-width: 920px){
  .pinboard{ min-height: unset; display:grid; gap:12px; }
  .pcard{ position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none; }
}
/* ===== §13 Rota Kontrolü (text-only) ===== */
.route-checklist{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(620px 340px at 12% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 88% 16%, rgba(14,107,168,.10), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
}
.check-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px, 2.6vw, 18px);
}
.check-card{
  padding:12px; border-radius:16px;
  outline:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, outline-color .2s ease, box-shadow .25s ease;
}
.check-card:hover{ transform: translateY(-3px); outline-color: rgba(255,179,0,.35); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.check-card.wide{ grid-column: 1 / -1; }

.ticks{ margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.ticks li{
  position:relative; padding-left:22px;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.4em; width:12px; height:12px; border-radius:3px;
  background: linear-gradient(135deg, var(--saffron-500), var(--pomegranate-500));
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}

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

/* ===== §14 Rota Şeritleri (text-only) ===== */
.route-stripes{
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(620px 340px at 16% 0%, rgba(255,179,0,.12), transparent 60%),
    radial-gradient(600px 320px at 84% 14%, rgba(14,107,168,.10), transparent 60%),
    linear-gradient(180deg, rgba(42,38,37,.92), rgba(20,17,15,.98));
  box-shadow: var(--shadow-deep);
  overflow:hidden;
}
.stripes{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(10px, 2.2vw, 16px);
  counter-reset: step;
}
.stripe{
  position:relative; padding:12px 12px 12px 14px; border-radius:16px;
  outline:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  transition: transform .18s ease, outline-color .2s ease, box-shadow .25s ease;
}
.stripe::before{
  /* номер шага */
  counter-increment: step;
  content: counter(step);
  position:absolute; left:12px; top:10px; font-weight:900; font-size:14px;
  color:#14110f; background: linear-gradient(135deg, var(--saffron-500), var(--pomegranate-500));
  width:24px; height:24px; display:grid; place-items:center; border-radius:8px;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.knot{
  position:absolute; right:-26px; top:50%; width:120px; height:2px; transform:translateY(-50%);
  background: radial-gradient(circle 2px at 0 50%, rgba(255,255,255,.6) 98%, transparent 101%) repeat-x;
  background-size: 12px 2px; opacity:.55;
}
.stripe:hover{ transform: translateY(-3px); outline-color: rgba(255,179,0,.35); box-shadow: 0 16px 40px rgba(0,0,0,.5); }

@media (max-width: 980px){
  .stripes{ grid-template-columns: 1fr; }
  .knot{ display:none; }
}