/* calisma-bas: "nasıl çalışır" açılışı; solda yazı, sağda iç içe çerçeveler ve ortada göz (çerçeveler bir kez çizilir). */
.bolum-calisma-bas { padding-top: calc(var(--ust-boy) + clamp(56px, 11vh, 128px)); padding-bottom: clamp(72px, 11vh, 130px); overflow: clip;
  background: radial-gradient(55% 60% at 80% 40%, rgba(227,179,65,.10), transparent 68%), var(--gece); }
.cb-duzen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.cb-metin { display: grid; gap: clamp(18px, 2.6vh, 28px); }
.cb-metin h1 { font-size: clamp(42px, 5.2vw, 84px); }
.cb-cumle { max-width: 34em; }
.cb-sahne { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin-inline: auto; }
html.js .cb-sahne[data-ac] { opacity: 1; transform: none; transition: none; }
.cb-sahne svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cb-k { fill: rgba(227,179,65,.02); stroke: var(--altin); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.cb-k1 { stroke: rgba(227,179,65,.4); }
.cb-k2 { stroke: rgba(227,179,65,.65); }
.cb-k3 { fill: rgba(227,179,65,.07); }
.cb-t { fill: none; stroke: rgba(227,179,65,.5); stroke-width: 1; }
.cb-goz { position: absolute; width: 24%; height: 24%; inset: 0; margin: auto; }
html.js .cb-k { stroke-dashoffset: 1; }
html.js .cb-t { opacity: 0; }
html.js .cb-goz { opacity: 0; scale: .6; }
.cb-sahne.gorundu .cb-k { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.5, 0, .2, 1); }
.cb-sahne.gorundu .cb-k1 { transition-delay: .1s; }
.cb-sahne.gorundu .cb-k2 { transition-delay: .55s; }
.cb-sahne.gorundu .cb-k3 { transition-delay: 1s; }
.cb-sahne.gorundu .cb-t { opacity: 1; transition: opacity .8s ease 1.4s; }
.cb-sahne.gorundu .cb-goz { opacity: 1; scale: 1; transition: opacity .8s var(--yay) 1.5s, scale 1s var(--yay) 1.5s; filter: drop-shadow(0 0 22px rgba(227,179,65,.45)); }
@media (max-width: 960px) {
  .cb-duzen { grid-template-columns: minmax(0, 1fr); }
  .cb-sahne { width: min(100%, 280px); margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .cb-k { stroke-dashoffset: 0 !important; transition: none !important; }
  html.js .cb-t, html.js .cb-goz { opacity: 1 !important; scale: none !important; transition: none !important; }
}