.keamanan-visual-section{display:flex;flex-direction:column;align-items:center;margin-top:2.5rem;width:100%}.keamanan-visual-title{text-align:center;font-family:var(--font-body);font-size:clamp(1.1rem,2.2vw,1.35rem);font-weight:600;margin-bottom:1.25rem;letter-spacing:-.01em;color:var(--text-strong)}.encryption-diagram{display:grid;grid-template-columns:1fr;gap:.75rem;align-items:stretch;position:relative;width:100%}@media(min-width:768px){.encryption-diagram{max-width:1100px;grid-template-columns:1fr 2.75rem 1fr 2.75rem 1fr 2.75rem 1fr;gap:0}}.diagram-node{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;padding:1.35rem 1.25rem;border-radius:1rem;border:1px solid var(--surface-border);background:color-mix(in oklab,var(--page-bg) 60%,var(--surface) 40%);outline:0;position:relative;cursor:default;transition:border-color var(--motion-duration) var(--motion-ease),box-shadow var(--motion-duration) var(--motion-ease),transform var(--motion-duration) var(--motion-ease),background-color var(--motion-duration) var(--motion-ease)}.diagram-node:hover{transform:translateY(-2px);border-color:var(--primary-bg);box-shadow:0 12px 30px -15px color-mix(in oklab,var(--primary-bg) 20%,transparent)}@media(min-width:768px){.node-desc{display:none}.diagram-node{gap:.6rem}}.node-icon-wrapper{width:2.75rem;height:2.75rem;border-radius:.85rem;background:color-mix(in oklab,var(--primary-bg) 10%,transparent);color:var(--primary-bg);display:flex;align-items:center;justify-content:center;transition:all .3s ease}.diagram-node:hover .node-icon-wrapper{background:var(--primary-bg);color:var(--primary-text)}.node-title{font-family:var(--font-body);font-size:1rem;font-weight:700;color:var(--text-strong);line-height:1.25;margin:0;white-space:nowrap}.node-desc{font-size:.85rem;color:var(--text-muted-color);line-height:1.4}.node-full-desc{max-height:none;overflow:visible;color:var(--text-body-color);font-size:.83rem;line-height:1.48;opacity:1;transition:max-height .25s ease,opacity .2s ease,padding-top .25s ease}.diagram-connector{display:flex;align-items:center;justify-content:center;color:var(--primary-bg)}.diagram-connector-svg{width:2rem;height:2rem;opacity:.55}@media(min-width:768px){.diagram-connector-svg{width:2.5rem;height:2.5rem}}.flow-line{stroke-dasharray:6 4;animation:diagramFlow 30s linear infinite}@keyframes diagramFlow{to{stroke-dashoffset:-100}}@media(max-width:767px){.diagram-node{display:grid;grid-template-columns:auto 1fr;align-content:start;align-items:start;gap:.75rem;padding:.9rem 2.25rem .9rem .9rem;border-radius:.9rem;background:var(--surface);text-align:left;cursor:pointer}.diagram-node:after{content:"";position:absolute;top:1.05rem;right:.9rem;width:.55rem;height:.55rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;color:var(--text-muted-color);transform:rotate(45deg);transition:color var(--motion-duration) var(--motion-ease),transform var(--motion-duration) var(--motion-ease)}.diagram-node--active{border-color:var(--primary-bg);background:var(--surface);box-shadow:0 12px 30px -15px color-mix(in oklab,var(--primary-bg) 25%,transparent)}.diagram-node--active:after{color:var(--primary-bg);transform:translateY(.2rem) rotate(225deg)}.diagram-node:focus-visible{transform:translateY(-2px);border-color:var(--primary-bg);box-shadow:0 12px 30px -15px color-mix(in oklab,var(--primary-bg) 20%,transparent)}.node-icon-wrapper{grid-row:span 3;width:2.25rem;height:2.25rem;border-radius:.7rem}.node-icon-wrapper svg{width:1.05rem;height:1.05rem}.diagram-node--active .node-icon-wrapper{background:var(--primary-bg);color:var(--primary-text)}.node-title{font-size:.95rem}.node-desc,.node-full-desc{font-size:.82rem}.node-full-desc{grid-column:2;max-height:0;overflow:hidden;opacity:0}.diagram-node--active .node-full-desc{max-height:14rem;opacity:1;padding-top:.25rem}.diagram-connector{display:flex;min-height:1.8rem}.diagram-connector-svg{width:2rem;height:2rem;transform:rotate(90deg);opacity:.6}}@media(max-width:420px){.diagram-node{grid-template-columns:1fr;gap:.5rem}.node-icon-wrapper{grid-row:auto}.node-full-desc{grid-column:1}}