/* saqrena.com v4 · Sense: yazı (5) + çerçevede 3B kum köprü (7). Köprü WebGL (v3 s3_kopru), etiketleri HTML (çerçevede ≥ 12 px).
   Çerçeve: üst şerit (örnek veri etiketi, yeniden oynat) · sahne · seviyenin başlığı (gerçek HTML). Altında beş adım. */
/* başlık iki cümle, iki satır: rakamlı cümle bölünmesin diye bu bölümde başlık bir kademe küçük */
.bolum-sense h2 { font-size: clamp(26px, min(7.6vw, 3.05vw + 14px), 44px); }
@media (min-width: 961px) { .bolum-sense h2 { font-size: clamp(28px, 3.05vw, 44px); } }
.sense-parca { display: grid; gap: 12px; min-width: 0; }
.sense-cerceve { display: grid; grid-template-columns: minmax(0, 1fr); }

.sense-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--cizgi-soluk); }
.sense-rozet { font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--metin-3); }
.sense-tekrar { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer;
  font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--metin-2); transition: color .2s, border-color .2s; }
.sense-tekrar svg { width: 14px; height: 14px; flex: none; }
.sense-tekrar:hover, .sense-tekrar:focus-visible { color: var(--altin-acik); border-color: var(--cizgi); }
html[lang="ar"] .sense-rozet, html[lang="ar"] .sense-tekrar, html[lang="ar"] .sense-alt-ust { text-transform: none; }

/* sahne */
.sense-sahne { position: relative; aspect-ratio: 16 / 10; background: #0D0907; overflow: hidden; }
.sense-afis { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.js .sense-afis { opacity: 0; transition: opacity .5s; }
html.js .bolum-sense.webgl-yok .sense-afis, html.js .bolum-sense.hata .sense-afis { opacity: 1; }
.sense-sahne .sahne-tuval, .sense-sahne .sahne-dom, .sense-sahne .sahne-kare { opacity: 0; transition: opacity .5s var(--yay); }
.sense-sahne.sahne-hazir .sahne-tuval, .sense-sahne.sahne-hazir .sahne-dom, .sense-sahne .sahne-kare { opacity: 1; }
/* uzak bir seviyeye geçerken kısa kararma (ara seviyeler hızla geçip yormasın) */
.sense-sahne.karart .sahne-tuval, .sense-sahne.karart .sahne-dom { opacity: 0; transition-duration: .13s; }

/* köprünün etiketleri (sahnenin HTML katmanı): çerçeveye göre boy */
.bolum-sense .s3-et { gap: 2px; }
.bolum-sense .s3-et-ad { font-size: 12.5px; }
.bolum-sense .s3-et-d { font-size: 13.5px; }
.bolum-sense .s3-et[data-tip="sifir"] .s3-et-d { font-size: 16px; }
.bolum-sense .s3-et[data-tip="ad"] .s3-et-ad { font-size: 12.5px; }
.bolum-sense .s3-et[data-tip="not"] .s3-et-ad { font-size: 12px; letter-spacing: .04em; }
.bolum-sense .s3-telefon .s3-et-ad { font-size: 12px; }
.bolum-sense .s3-telefon .s3-et-d { font-size: 12.5px; }
.bolum-sense .s3-telefon .s3-et[data-tip="sifir"] .s3-et-d { font-size: 14px; }

/* seviyenin başlığı */
.sense-altyazi { display: grid; gap: 4px; align-content: start; min-height: 112px; padding: 14px 16px 16px; border-top: 1px solid var(--cizgi-soluk); transition: opacity .16s; }
.sense-altyazi.degisiyor { opacity: 0; }
.sense-alt-ust { font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--altin); }
.sense-alt-baslik { font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; line-height: 1.25; letter-spacing: -.008em; color: var(--metin); text-wrap: balance; }
.sense-alt-metin { font-size: 14.5px; line-height: 1.4; color: var(--metin-2); }
.sense-altyazi .rakam { white-space: nowrap; }

/* adımlar */
.sense-adimlar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sense-adim { position: relative; display: grid; gap: 3px; justify-items: start; align-content: start; padding: 10px 12px 11px; border: 1px solid var(--cizgi-soluk); border-radius: 4px; background: rgba(21,16,11,.55);
  color: var(--metin-2); font: 500 14px/1.2 var(--govde); text-align: start; cursor: pointer; overflow: hidden; transition: color .2s, border-color .2s, background .2s; }
.sense-adim .mono { font-size: 10.5px; letter-spacing: .12em; color: var(--metin-3); transition: color .2s; }
.sense-adim::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 2px; background: var(--altin); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--yay); }
html[dir="rtl"] .sense-adim::before { transform-origin: right; }
.sense-adim:hover, .sense-adim:focus-visible { color: var(--metin); border-color: var(--cizgi); }
.sense-adim.gecildi .mono { color: var(--altin-koyu); }
.sense-adim[aria-selected="true"] { color: var(--metin); border-color: var(--cizgi); background: rgba(227,179,65,.07); }
.sense-adim[aria-selected="true"] .mono { color: var(--altin); }
.sense-adim[aria-selected="true"]::before { transform: scaleX(1); }

@media (max-width: 960px) {
  .sense-sahne { aspect-ratio: 3 / 2; }
}
@media (max-width: 560px) {
  .sense-sahne { aspect-ratio: 4 / 5; }
  .sense-altyazi { min-height: 142px; padding: 12px 14px 14px; }
  .sense-adimlar { gap: 4px; }
  .sense-adim { padding: 8px 6px 9px; font-size: 12px; letter-spacing: -.01em; justify-items: center; text-align: center; }
  .sense-adim .mono { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sense-tekrar { display: none; }
  .sense-ust { min-height: 40px; }
  .sense-sahne .sahne-tuval, .sense-sahne .sahne-dom, .sense-altyazi, .sense-adim::before { transition: none; }
}