/* nucleus: geçen yılın cevabı çizgi boyunca bugüne taşınır. Yatay (geniş) ve dikey (dar) düzen: kap sorgusu. */
.bolum-nucleus { background: linear-gradient(180deg, var(--gece-2), var(--gece) 40%, var(--gece-2)); border-block: 1px solid var(--cizgi-soluk); }
.bolum-nucleus .iki-sutun { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 960px) { .bolum-nucleus .iki-sutun { grid-template-columns: minmax(0, 1fr); } }
.nu-cerceve { margin: 0; container: nu / inline-size; background: var(--gece); }
.nu-sahne { --g: 16px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); row-gap: 14px; padding: clamp(22px, 2.4vw, 30px); }

.nu-et { font: 500 11px/22px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--metin-2); white-space: normal; }
.nu-et-1 { grid-column: 1 / 3; grid-row: 1; } .nu-et-2 { grid-column: 3; grid-row: 1; }
.nu-dugum { width: 11px; height: 11px; border-radius: 50%; background: var(--gece); border: 1.5px solid var(--altin); align-self: center; justify-self: start; grid-row: 2; z-index: 2; position: relative; }
.nu-d1 { grid-column: 1; } .nu-d2 { grid-column: 3; }
.nu-cizgi { grid-column: 1 / 4; grid-row: 2; align-self: center; height: 1px; margin-inline: 11px calc((100% - 2 * var(--g)) / 3 + 0px); background: linear-gradient(to right, var(--altin), var(--altin-acik)); transform-origin: left center; }
html[dir="rtl"] .nu-cizgi { transform-origin: right center; background: linear-gradient(to left, var(--altin), var(--altin-acik)); }
.nu-nokta { grid-column: 1; grid-row: 2; align-self: center; justify-self: start; width: 7px; height: 7px; margin: 2px; border-radius: 50%; background: var(--altin-acik); box-shadow: 0 0 12px 2px rgba(242,198,90,.55); opacity: 0; z-index: 3; }

.nu-yuva { grid-row: 3; position: relative; display: grid; border-radius: 6px; border: 1px dashed rgba(244,238,223,.07); }
.nu-yuva-sol { grid-column: 1; z-index: 3; } .nu-yuva-dock { grid-column: 2; border-color: var(--cizgi); }
.nu-bulgu { grid-column: 3; grid-row: 3; }
.nu-kart { position: relative; height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 6px; border: 1px solid var(--cizgi-soluk); background: var(--yuzey-2); }
.nu-cevap { background: var(--yuzey); border-color: var(--cizgi); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.nu-kart-et { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--altin); }
.nu-alinti { font-size: 16px; line-height: 1.4; color: var(--metin); text-wrap: pretty; }
.nu-kunye { margin-top: auto; display: grid; gap: 8px; justify-items: start; font: 400 12px var(--mono); color: var(--metin-3); }
.nu-kunye b { font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--altin); padding: 3px 8px; border: 1px solid var(--cizgi); border-radius: 4px; }
.nu-urun { display: grid; gap: 4px; font: 500 17px/1.25 var(--govde); color: var(--metin); }
.nu-urun span { font-weight: 400; font-size: 15px; color: var(--metin-2); }
.nu-ayni { margin-top: auto; display: grid; gap: 7px; font: 400 12px var(--mono); color: var(--metin-3); }
.nu-ayni li { position: relative; padding-inline-start: 18px; transition: color .5s; }
.nu-ayni li::before { content: ''; position: absolute; inset-inline-start: 0; top: .62em; width: 10px; height: 1px; background: var(--metin-3); transition: background .5s; }
.nu-son { grid-column: 1 / -1; grid-row: 4; margin-top: 10px; padding-top: 18px; position: relative; font: 500 clamp(24px, 2.3vw, 32px)/1.15 var(--govde); letter-spacing: -.02em; color: var(--altin); }
.nu-son::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 1px; background: var(--cizgi); transform-origin: left center; }
.nu-alt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(22px, 2.4vw, 30px); border-top: 1px solid var(--cizgi-soluk); font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--metin-3); }

/* dar kap: dikey zaman çizgisi */
@container nu (max-width: 559px) {
  .nu-sahne { grid-template-columns: 11px minmax(0, 1fr); column-gap: 14px; }
  .nu-et-1 { grid-column: 2; grid-row: 1; } .nu-et-2 { grid-column: 2; grid-row: 3; }
  .nu-d1 { grid-column: 1; grid-row: 1; justify-self: center; } .nu-d2 { grid-column: 1; grid-row: 3; justify-self: center; }
  .nu-nokta { grid-column: 1; grid-row: 1; justify-self: center; }
  .nu-cizgi { grid-column: 1; grid-row: 1 / 4; justify-self: center; align-self: stretch; width: 1px; height: auto; margin: 11px 0; transform-origin: center top; background: linear-gradient(to bottom, var(--altin), var(--altin-acik)); }
  .nu-yuva-sol { grid-column: 2; grid-row: 2; } .nu-yuva-dock { grid-column: 2; grid-row: 4; } .nu-bulgu { grid-column: 2; grid-row: 5; }
  .nu-son { grid-column: 1 / -1; grid-row: 6; }
}

/* başlangıç durumu (JS çalışırken); .hata ve azaltılmış harekette son hâl */
html.js .bolum-nucleus .nu-et-1, html.js .bolum-nucleus .nu-d1, html.js .bolum-nucleus .nu-yuva-sol, html.js .bolum-nucleus .nu-et-2, html.js .bolum-nucleus .nu-d2, html.js .bolum-nucleus .nu-bulgu, html.js .bolum-nucleus .nu-yuva-dock { opacity: 0; transition: opacity .55s var(--yay), transform .55s var(--yay); }
html.js .bolum-nucleus .nu-yuva-sol, html.js .bolum-nucleus .nu-bulgu { transform: translateY(10px); }
html.js .bolum-nucleus .nu-cizgi { transform: scaleX(0); }
html.js .bolum-nucleus .nu-son { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--yay), transform .6s var(--yay); }
html.js .bolum-nucleus .nu-son::before { transform: scaleX(0); transition: transform .8s var(--yay); }
@container nu (max-width: 559px) { html.js .bolum-nucleus .nu-cizgi { transform: scaleY(0); } }
.nu-sahne.a-sol .nu-et-1, .nu-sahne.a-sol .nu-d1 { opacity: 1 !important; }
.nu-sahne.a-sol .nu-yuva-sol { opacity: 1 !important; transform: none !important; }
.nu-sahne.a-cizgi .nu-cizgi { transform: none !important; transition: transform 1s cubic-bezier(.5, 0, .2, 1); }
.nu-sahne.a-bugun .nu-et-2, .nu-sahne.a-bugun .nu-d2, .nu-sahne.a-bugun .nu-yuva-dock { opacity: 1 !important; }
.nu-sahne.a-bugun .nu-bulgu { opacity: 1 !important; transform: none !important; }
.nu-sahne.a-bugun .nu-d2 { box-shadow: 0 0 0 5px rgba(227,179,65,.16); background: var(--altin); }
.nu-sahne.a-kondu .nu-yuva-dock { border-style: solid; border-color: var(--altin); }
.nu-sahne.a-kondu .nu-cevap { border-color: var(--altin); }
.nu-sahne.a-kondu .nu-bulgu { border-color: var(--cizgi); }
.nu-sahne.a-kondu .nu-ayni li { color: var(--metin); }
.nu-sahne.a-kondu .nu-ayni li::before { background: var(--altin); }
.nu-sahne.a-son .nu-son { opacity: 1 !important; transform: none !important; }
.nu-sahne.a-son .nu-son::before { transform: none !important; }
.nu-yuva-sol { transition: opacity .55s var(--yay), transform .55s var(--yay), border-color .4s; }
.bolum-nucleus.hata .nu-sahne > *, .bolum-nucleus.hata .nu-son::before { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.js .bolum-nucleus .nu-sahne > *, html.js .bolum-nucleus .nu-son::before { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .bolum-nucleus .nu-nokta { opacity: 0 !important; }
  .nu-tekrar { display: none; }
}