

.m-satir { display: block; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.m-satir__ic { display: block; will-change: transform; }

.odo { display: inline-flex; font-variant-numeric: tabular-nums; line-height: 1; }
.odo__sutun { display: inline-block; height: 1em; overflow: hidden; position: relative; }
.odo__serit { display: flex; flex-direction: column; transition: transform 900ms var(--ease-out); }
.odo__serit span { height: 1em; line-height: 1; }
.odo__sabit { overflow: visible; }

.konsol { --k-yuk: 470px; background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: var(--r-32); overflow: hidden;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: var(--k-yuk); color: var(--metin); text-align: left; }
.konsol__ust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--cizgi); }
.konsol__durum { margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--mono); font-size: var(--fs-12);
  color: var(--metin-2); transition: color var(--d-base) var(--ease-out); }
.konsol__durum::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--kor); transition: background-color var(--d-base), transform var(--d-base) var(--ease-out); }
.konsol__durum.is-onayli { color: var(--metin); }
.konsol__durum.is-onayli::before { background: var(--vurgu); transform: rotate(45deg); }
.konsol__sekmeler { position: relative; display: flex; gap: var(--s-1); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--cizgi); overflow-x: auto; scrollbar-width: none; }
.konsol__gosterge { position: absolute; top: var(--s-2); left: 0; height: 40px; width: var(--gw, 0); transform: translateX(var(--gx, 0));
  background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 14px; pointer-events: none;
  transition: transform 420ms var(--ease-in-out), width 420ms var(--ease-in-out); }
.konsol__sekme { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-3);
  border: 0; border-radius: 14px; background: transparent; cursor: pointer; font-weight: 500; font-size: var(--fs-14); color: var(--metin-2);
  white-space: nowrap; transition: color var(--d-base) var(--ease-out); }
.konsol__sekme[aria-selected="true"] { color: var(--metin); }
.konsol__sekme .mono { color: var(--metin-2); font-size: var(--fs-12); }
.no-gosterge .konsol__sekme[aria-selected="true"] { background: var(--zemin); }
.konsol__paneller { position: relative; padding: var(--s-5); display: grid; min-width: 0; }
.konsol__panel { grid-area: 1 / 1; display: grid; gap: var(--s-4); align-content: start; min-width: 0; border-radius: var(--r-16); }
.konsol__panel[hidden] { display: none; }
.konsol__panel .kod { background: var(--zemin); }
.konsol__not { color: var(--metin-2); }
.konsol__etki-baslik { font-size: var(--fs-32); font-weight: 300; letter-spacing: var(--ls-large); max-width: 18ch; }
.konsol__etki-sayi { display: flex; align-items: baseline; gap: var(--s-4); padding-block: var(--s-4); border-block: 1px solid var(--cizgi); }
.konsol__etki-sayi .mono { font-size: var(--fs-64); line-height: 1; letter-spacing: -0.04em; color: var(--vurgu); }
.konsol__etki-sayi span:last-child { color: var(--metin-2); max-width: 30ch; }
.konsol__meta { margin: 0; display: grid; grid-template-columns: auto auto 1fr; gap: var(--s-5); }
.konsol__meta dt, .konsol__onay dt { color: var(--metin-2); font-size: var(--fs-14); }
.konsol__meta dd, .konsol__onay dd { margin: var(--s-1) 0 0; }
.konsol__onay { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
.konsol__onay div { padding-top: var(--s-3); border-top: 1px solid var(--cizgi); }
.konsol__onay dd { font-size: var(--fs-18); font-family: var(--mono); }
.konsol__alt { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--cizgi); }
.konsol__ilerleme { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.konsol__ilerleme span { height: 3px; border-radius: 2px; background: var(--cizgi); position: relative; overflow: hidden; }
.konsol__ilerleme span::after { content: ""; position: absolute; inset: 0; background: var(--metin); transform: scaleX(var(--p, 0)); transform-origin: left; }
.konsol__oynat { min-height: 36px; padding: 0 var(--s-3); border-radius: 12px; border: 1px solid var(--cizgi); background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-12); color: var(--metin); }

.js .konsol__panel.is-giris { animation: m-panel 460ms var(--ease-out) both; }
@keyframes m-panel { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.js .konsol__panel.is-giris .kod-satirlar li { animation: m-satir-yaz 360ms var(--ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 70ms); }
@keyframes m-satir-yaz { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.js .konsol__panel.is-giris .kod-bulgu { animation-name: m-satir-yaz, m-bulgu; animation-duration: 360ms, 700ms; }
@keyframes m-bulgu { 0%, 60% { box-shadow: inset 0 0 0 var(--alarm); } 100% { box-shadow: inset 3px 0 0 var(--alarm); } }
.js .konsol__panel.is-giris [data-damga] { animation: m-damga 520ms var(--ease-out) 380ms both; transform-origin: left center; }
@keyframes m-damga { from { opacity: 0; transform: scale(1.08) rotate(-1.5deg); } 70% { opacity: 1; transform: scale(0.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .konsol__ilerleme { visibility: hidden; } }
@media (max-width: 600px) {
  .konsol { --k-yuk: 0px; }
  .konsol__paneller { padding: var(--s-4); }
  .konsol__meta { grid-template-columns: 1fr 1fr; } .konsol__meta div:last-child { grid-column: 1 / -1; }
  .konsol__onay { grid-template-columns: 1fr; }
  .konsol__etki-sayi { flex-direction: column; gap: var(--s-2); }
}

.onem-secici { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.onem-secici__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.onem-secici__dugme { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 var(--s-4);
  border: 1px solid transparent; border-radius: 16px; background: transparent; cursor: pointer; text-align: left; font-size: var(--fs-18); color: var(--metin);
  transition: background-color var(--d-fast) var(--ease-out), border-color var(--d-fast); }
.onem-secici__dugme .mono { color: var(--metin-2); font-size: var(--fs-12); }
.onem-secici__dugme[aria-pressed="true"] { background: var(--zemin); border-color: var(--cizgi); }
@media (hover: hover) { .onem-secici__dugme:hover { background: var(--zemin); } }
.onem-secici__sahne { display: grid; justify-items: center; gap: var(--s-5); text-align: center; }
.onem-secici__buyuk { width: min(220px, 60%); height: auto; overflow: visible; }
.onem-secici__buyuk .k { fill: transparent; stroke: var(--cizgi); stroke-width: 0.6; transform-box: fill-box; transform-origin: center;
  transition: fill 380ms var(--ease-out), stroke 380ms var(--ease-out), transform 520ms var(--ease-out); }
.onem-secici__buyuk .k.is-dolu { stroke: transparent; transform: scale(1.06); }
.onem-secici__buyuk[data-level="4"] .k.is-dolu { fill: var(--sev-critical); stroke: var(--sev-critical-kontur); }
.onem-secici__buyuk[data-level="3"] .k.is-dolu { fill: var(--sev-high); }
.onem-secici__buyuk[data-level="2"] .k.is-dolu { fill: var(--sev-medium); }
.onem-secici__buyuk[data-level="1"] .k.is-dolu { fill: var(--sev-low); }
.onem-secici__ad { font-size: var(--fs-32); font-weight: 600; }
.onem-secici__aciklama { color: var(--metin-2); max-width: 36ch; min-height: 3em; }
@media (max-width: 700px) { .onem-secici { grid-template-columns: 1fr; } .onem-secici__sahne { order: -1; } }

.cevir { perspective: 1800px; display: grid; }
.cevir__ic { display: grid; transform-style: preserve-3d; transform: rotateY(calc(var(--d, 0) * 180deg)); will-change: transform; }
.cevir__yuz { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cevir__yuz--arka { transform: rotateY(180deg); }
.cevir:not(.is-3d) .cevir__yuz--on { display: none; } 
.cevir:not(.is-3d) .cevir__yuz--arka { transform: none; }
.supheli { height: 100%; display: grid; align-content: start; gap: var(--s-5); padding: var(--s-6); border: 1.5px dashed var(--cizgi);
  border-radius: var(--r-32); background: var(--zemin); }
.supheli__ust { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.supheli__etiket { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--mono); font-size: var(--fs-12); color: var(--metin-2); }
.supheli__etiket::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--kor); }
.supheli__baslik { font-size: var(--fs-32); font-weight: 300; letter-spacing: var(--ls-large); max-width: 18ch; }
.supheli__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); color: var(--metin-2); font-size: var(--fs-14); }
.supheli__liste li { display: flex; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-2); border-top: 1px solid var(--cizgi); }
.supheli__liste .mono { color: var(--metin); }

.arti-gecis { display: none; }
.arti-gecis.is-aktif { display: block; height: 170vh; background: var(--gecis-zemin); }
.arti-gecis__sabit { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.arti-gecis svg { width: 100%; height: 100%; display: block; }
.arti-gecis path { fill: var(--gecis-arti); transform-box: fill-box; transform-origin: center; transform: scale(0.02); will-change: transform; }

.cta-etiket { position: relative; overflow: hidden; border-top: 1px solid var(--cizgi); }
.cta-etiket__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; min-height: 86svh; padding-block: var(--s-9); }
.cta-etiket__metin { display: grid; gap: var(--s-5); justify-items: start; position: relative; z-index: 1; }
.cta-etiket__metin .lead { max-width: 34ch; }
.cta-etiket__baslik { font-size: clamp(2.5rem, 1rem + 4vw, 5rem); font-weight: 300; letter-spacing: -0.035em; max-width: 13ch; }
.cta-etiket__eylem { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; margin-top: var(--s-2); }
.cta-etiket__aski { position: relative; align-self: stretch; display: flex; justify-content: center; min-height: 600px; margin-top: calc(-1 * var(--s-9)); }
.cta-etiket__sarkac { position: relative; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; will-change: transform; }
.cta-etiket__ip { width: 1.5px; height: 120px; background: var(--metin); flex: none; }
.cta-etiket__etiket { margin-top: -21px; }
.cta-etiket__kanit { width: 20rem; }
.js .cta-etiket__aski.is-hazir .cta-etiket__sarkac { transform: translateY(-110%); opacity: 0; } 
@media (max-width: 900px) {
  .cta-etiket__in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cta-etiket__aski { min-height: 520px; margin-top: 0; }
  .cta-etiket__ip { height: 40px; }
  .js .cta-etiket__aski.is-hazir .cta-etiket__sarkac { transform: translateY(-48px); }
}

.js [data-damga-in].is-hazir { opacity: 0; transform: scale(1.14) rotate(-2.5deg); transform-origin: left center; }
.js [data-damga-in].is-hazir.is-in { opacity: 1; transform: none; transition: opacity 240ms var(--ease-out), transform 520ms cubic-bezier(0.2, 1.4, 0.4, 1); }
