/* calisma: sunucunuzdaki motor, yerel dil modeli; "BİNANIZ" çerçevesi içinde altın çizgi şema. */
.bolum-calisma { background: radial-gradient(60% 50% at 50% 55%, rgba(227,179,65,.05), transparent 70%), var(--gece); }
.bolum-calisma .bolum-bas { margin-bottom: clamp(36px, 5vh, 56px); }
.ca-sema { margin: 0; background: var(--gece-2); }
.ca-ciz { padding: clamp(18px, 2.4vw, 32px) clamp(12px, 2vw, 28px) 8px; container: ca / inline-size; }
.ca-svg { width: 100%; height: auto; overflow: visible; }
.ca-dikey { display: none; max-width: 380px; margin-inline: auto; }
@container ca (max-width: 859px) { .ca-yatay { display: none; } .ca-dikey { display: block; } }

.ca-bina { font: 500 13px var(--mono); letter-spacing: .22em; text-transform: uppercase; fill: var(--altin); }
.ca-cerceve { fill: rgba(227,179,65,.025); stroke: rgba(227,179,65,.5); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ca-kutu { fill: var(--yuzey); stroke: rgba(244,238,223,.22); stroke-width: 1; }
.ca-motor { fill: rgba(227,179,65,.07); stroke: var(--altin); }
.ca-ad { font: 500 19px var(--govde); fill: var(--metin); }
.ca-alt { font: 400 13px var(--mono); fill: var(--metin-3); letter-spacing: .02em; }
.ca-yol { fill: none; stroke: var(--altin); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ca-ok { fill: var(--altin); }
.ca-nokta { fill: var(--altin-acik); filter: drop-shadow(0 0 4px rgba(242,198,90,.8)); }

/* çizim: bölüm ekrana girince .ciz */
html.js .bolum-calisma .ca-cerceve { stroke-dashoffset: 1; }
html.js .bolum-calisma .ca-yol { stroke-dashoffset: 1; }
html.js .bolum-calisma .ca-dugum, html.js .bolum-calisma .ca-ok, html.js .bolum-calisma .ca-bina { opacity: 0; }
html.js .bolum-calisma .ca-dugum { transform: translateY(8px); }
html.js .bolum-calisma .ca-not { opacity: 0; }
html.js .bolum-calisma .ca-sema.ciz .ca-cerceve { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.5, 0, .2, 1); }
html.js .bolum-calisma .ca-sema.ciz .ca-yol { stroke-dashoffset: 0; transition: stroke-dashoffset .5s ease var(--d); }
html.js .bolum-calisma .ca-sema.ciz .ca-dugum { opacity: 1; transform: none; transition: opacity .5s var(--yay) var(--d), transform .5s var(--yay) var(--d); }
html.js .bolum-calisma .ca-sema.ciz .ca-ok { opacity: 1; transition: opacity .25s ease var(--d); }
html.js .bolum-calisma .ca-sema.ciz .ca-bina { opacity: 1; transition: opacity .5s ease .2s; }
html.js .bolum-calisma .ca-sema.ciz .ca-not { opacity: 1; transition: opacity .6s ease 2s; }

.ca-alt-bant { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(18px, 2.4vw, 32px); margin-top: 8px; border-top: 1px solid var(--cizgi-soluk); }
.ca-not { position: relative; padding-inline-start: 28px; font-size: clamp(17px, 1.4vw, 20px); color: var(--metin); }
.ca-not::before { content: ''; position: absolute; inset-inline-start: 0; top: .78em; width: 18px; height: 1px; background: var(--altin); }

.ca-sutunlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: clamp(48px, 7vh, 80px); }
.ca-s { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--cizgi); }
.ca-no { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--altin); }
.ca-s h3 { text-wrap: balance; }
.ca-bag { margin-top: clamp(32px, 5vh, 48px); }
.bolum-calisma.hata .ca-cerceve, .bolum-calisma.hata .ca-yol { stroke-dashoffset: 0 !important; }
.bolum-calisma.hata .ca-dugum, .bolum-calisma.hata .ca-ok, .bolum-calisma.hata .ca-bina, .bolum-calisma.hata .ca-not { opacity: 1 !important; transform: none !important; }
@media (max-width: 860px) { .ca-sutunlar { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (prefers-reduced-motion: reduce) {
  html.js .bolum-calisma .ca-cerceve, html.js .bolum-calisma .ca-yol { stroke-dashoffset: 0 !important; transition: none !important; }
  html.js .bolum-calisma .ca-dugum, html.js .bolum-calisma .ca-ok, html.js .bolum-calisma .ca-bina, html.js .bolum-calisma .ca-not { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ca-tekrar { display: none; }
}
