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