/* etkiler: dört etki, kartlara inen altın işaret çizgisi, plan → fiili mini köprü */
.bolum-etkiler { background: radial-gradient(70% 45% at 50% 0%, rgba(227,179,65,.07), transparent 70%), linear-gradient(180deg, var(--gece), var(--gece-2)); }
.bolum-etkiler .bolum-bas { margin-bottom: clamp(72px, 10vh, 104px); }

.et-kartlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.et-kart { position: relative; container-type: inline-size; display: flex; flex-direction: column; padding: 28px 24px 30px; border-radius: 6px; border: 1px solid var(--cizgi-soluk); background: linear-gradient(180deg, var(--yuzey-2), var(--yuzey)); }
.et-ad { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--metin-3); }
.et-sayi { margin-top: 18px; font: 500 clamp(22px, 12.2cqi, 38px)/1.1 var(--mono); font-feature-settings: 'tnum' 1, 'zero' 0; letter-spacing: -.02em; white-space: nowrap; }
.et-eksi { color: var(--eksi); } .et-arti { color: var(--arti); }
.et-soru { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cizgi-soluk); color: var(--metin-2); font-size: 17px; line-height: 1.45; text-wrap: pretty; }

/* altın işaret: kartın üstüne düşen ince çizgi + kenarda kısa vurgu */
.et-isaret { position: absolute; bottom: calc(100% + 1px); inset-inline-start: 24px; width: 1px; height: 52px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(227,179,65,.55) 40%, var(--altin)); transform-origin: top; transform: scaleY(0); }
.et-isaret::after { content: ''; position: absolute; bottom: -2px; inset-inline-start: -2px; width: 5px; height: 5px; border-radius: 1px; background: var(--altin-acik); opacity: 0; }
.et-kart::before { content: ''; position: absolute; top: -1px; inset-inline-start: 12px; width: 26px; height: 2px; background: var(--altin); transform: scaleX(0); transition: transform .35s var(--yay) .38s; }

html.js .bolum-etkiler .et-kart { opacity: 0; transform: translateY(12px); }
html.js .bolum-etkiler .et-kart.gir { opacity: 1; transform: none; transition: opacity .6s var(--yay) .22s, transform .6s var(--yay) .22s; }
.et-kart.gir .et-isaret { animation: et-dus .55s cubic-bezier(.5, 0, .3, 1) forwards; }
.et-kart.gir .et-isaret::after { animation: et-uc .2s ease .5s forwards; }
.et-kart.gir::before { transform: none; }
@keyframes et-dus { to { transform: scaleY(1); } }
@keyframes et-uc { to { opacity: 1; } }

/* alt şerit */
.et-bant { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 5vw, 72px); align-items: end; margin-top: clamp(40px, 6vh, 64px); padding-top: clamp(28px, 4vh, 40px); border-top: 1px solid var(--cizgi-soluk); }
.et-kopru svg { width: 100%; height: 112px; overflow: visible; }
.ek-taban { stroke: var(--cizgi-soluk); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ek-bag line { stroke: rgba(244,238,223,.28); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ek-bar { transform-box: fill-box; }
.ek-bar[data-yon="alt"] { transform-origin: 50% 100%; } .ek-bar[data-yon="ust"] { transform-origin: 50% 0; }
.ek-plan { fill: rgba(244,238,223,.30); } .ek-fiili { fill: var(--altin); } .ek-arti { fill: var(--arti); } .ek-eksi { fill: var(--eksi); }
html.js .bolum-etkiler .ek-bar { transform: scaleY(0); }
html.js .bolum-etkiler .ek-bag { opacity: 0; }
html.js .bolum-etkiler .et-ozet { opacity: 0; transform: translateY(8px); }
html.js .bolum-etkiler .et-etiketler { opacity: 0; }
html.js .bolum-etkiler .et-bant.ciz .ek-bar { transform: none; transition: transform .5s var(--yay) calc(var(--s) * 150ms); }
html.js .bolum-etkiler .et-bant.ciz .ek-bag { opacity: 1; transition: opacity .5s ease .9s; }
html.js .bolum-etkiler .et-bant.ciz .et-ozet { opacity: 1; transform: none; transition: opacity .6s var(--yay) .5s, transform .6s var(--yay) .5s; }
html.js .bolum-etkiler .et-bant.ciz .et-etiketler { opacity: 1; transition: opacity .5s ease .3s; }
.et-etiketler { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 12px; }
.et-etiketler li { text-align: center; font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--metin-3); }
.et-ozet { display: grid; gap: 10px; justify-items: start; padding-bottom: 28px; }
.et-akis { font: 400 15px var(--mono); color: var(--metin-2); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.et-akis b { font-weight: 500; color: var(--metin); }
.et-akis i { font-style: normal; color: var(--altin); }
.et-fark { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.et-fark b { font: 500 clamp(26px, 2.6vw, 36px)/1.1 var(--mono); letter-spacing: -.02em; white-space: nowrap; }
.et-fark span { color: var(--metin-2); font-size: 18px; }
.et-veri { margin-top: 32px; font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--metin-3); }

.bolum-etkiler.hata .et-kart, .bolum-etkiler.hata .ek-bar, .bolum-etkiler.hata .ek-bag, .bolum-etkiler.hata .et-ozet, .bolum-etkiler.hata .et-etiketler { opacity: 1 !important; transform: none !important; }
@media (max-width: 1099px) { .et-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .et-isaret { height: 44px; } }
@media (max-width: 760px) { .et-bant { grid-template-columns: minmax(0, 1fr); } .et-ozet { padding-bottom: 0; } }
@media (max-width: 560px) { .et-kartlar { grid-template-columns: minmax(0, 1fr); gap: 28px; } .et-isaret { height: 32px; } }
@media (prefers-reduced-motion: reduce) {
  html.js .bolum-etkiler .et-kart, html.js .bolum-etkiler .ek-bar, html.js .bolum-etkiler .ek-bag, html.js .bolum-etkiler .et-ozet, html.js .bolum-etkiler .et-etiketler { opacity: 1 !important; transform: none !important; transition: none !important; }
  .et-isaret { transform: none; animation: none !important; } .et-isaret::after { opacity: 1; animation: none !important; } .et-kart::before { transform: none; transition: none; }
}
@media (max-width: 560px) { .et-akis { flex-direction: column; gap: 2px; } .et-akis i { display: none; } }