.kk-pet-setup{padding:24px;border:1px solid var(--kk-line);border-radius:18px;background:#fff}
.kk-pet-name-field{display:flex;max-width:520px;flex-direction:column;gap:7px;margin-bottom:22px}
.kk-pet-name-field span{font-size:13px;font-weight:750}
.kk-pet-name-field input{height:48px;padding:10px 13px;border:1px solid #d0d5dd;border-radius:10px;background:#fff;font:inherit}
.kk-pet-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;margin-bottom:22px}
.kk-pet-picker label{position:relative;cursor:pointer}
.kk-pet-picker input{position:absolute;opacity:0;pointer-events:none}
.kk-pet-picker label>span{display:flex;min-height:158px;align-items:center;justify-content:center;flex-direction:column;padding:14px;border:2px solid #e4e7ec;border-radius:15px;background:#fafcfb;text-align:center;transition:.2s ease}
.kk-pet-picker label:hover>span,.kk-pet-picker input:checked+span{border-color:var(--kk-primary);background:#edfbf6;box-shadow:0 8px 24px rgba(8,127,91,.1);transform:translateY(-2px)}
.kk-pet-picker b{font-size:58px;line-height:1.1;filter:drop-shadow(0 5px 3px rgba(0,0,0,.1))}
.kk-pet-picker strong{margin-top:9px;font-size:14px}
.kk-pet-picker small{margin-top:5px;color:var(--kk-muted);font-size:9px;line-height:1.35}
.kk-pet-level small{display:block;margin-top:4px;color:var(--kk-muted);font-size:9px}
.kk-animal-panda .kk-cat,.kk-animal-penguin .kk-cat,.kk-animal-fox .kk-cat{filter:drop-shadow(0 8px 5px rgba(0,0,0,.15)) saturate(1.08)}
@media(max-width:900px){.kk-pet-picker{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.kk-pet-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.kk-pet-picker label>span{min-height:135px}.kk-pet-picker b{font-size:48px}}

/* Pet 3D dan ruang kantor Lazismu bergaya game. */
.kk-pet-scene{min-height:520px;background-image:linear-gradient(rgba(255,255,255,.03),rgba(255,244,224,.08)),url('../images/pet-office-3d.png');background-position:center;background-size:cover}
.kk-pet-scene .kk-pet-character{bottom:24px;width:250px;height:430px}
.kk-pet-scene .kk-cat{display:block;width:100%;height:100%;background-image:url('../images/pet-characters-3d.png');background-repeat:no-repeat;background-size:500% 100%;filter:drop-shadow(0 14px 10px rgba(69,39,10,.22));font-size:0;animation:kk-pet-3d-idle 2.6s ease-in-out infinite}
.kk-animal-cat .kk-cat{background-position:0 0}
.kk-animal-rabbit .kk-cat{background-position:25% 0}
.kk-animal-panda .kk-cat{background-position:50% 0}
.kk-animal-penguin .kk-cat{background-position:75% 0}
.kk-animal-fox .kk-cat{background-position:100% 0}
.kk-pet-scene.stage-1 .kk-pet-character{--pet-scale:.68;transform:translateX(-50%) scale(var(--pet-scale));transform-origin:center bottom}
.kk-pet-scene.stage-2 .kk-pet-character{--pet-scale:.82;transform:translateX(-50%) scale(var(--pet-scale));transform-origin:center bottom}
.kk-pet-scene.stage-3 .kk-pet-character{--pet-scale:.94;transform:translateX(-50%) scale(var(--pet-scale));transform-origin:center bottom}
.kk-pet-scene.stage-4 .kk-pet-character{--pet-scale:1;transform:translateX(-50%) scale(var(--pet-scale));transform-origin:center bottom}
.kk-pet-scene .kk-pet-shadow{position:absolute;right:28px;bottom:8px;left:28px;z-index:-1;width:auto;height:22px;margin:0;background:rgba(85,52,20,.24);filter:blur(3px)}
.kk-pet-scene .kk-pet-crown{display:none!important}
.kk-pet-stage-label{z-index:6;box-shadow:0 5px 15px rgba(0,0,0,.08)}
.kk-worn{position:absolute;z-index:5;display:block;filter:drop-shadow(0 3px 2px rgba(0,0,0,.18));line-height:1;pointer-events:none;transform-origin:center}
.kk-worn svg{display:block;width:100%;height:100%;overflow:visible}
/* Titik pemasangan dasar dihitung terhadap kanvas karakter agar tetap pas pada desktop dan HP. */
.kk-worn-glasses{top:var(--acc-glasses-y,45%);left:var(--acc-glasses-x,50%);width:62%;aspect-ratio:2/1;transform:translate(-50%,-50%) scaleX(var(--acc-glasses-wide,1))}
.kk-worn-hat{top:var(--acc-hat-y,23%);left:var(--acc-hat-x,50%);width:64%;aspect-ratio:1.55/1;transform:translate(-50%,-50%) rotate(var(--acc-hat-rotate,0deg))}
.kk-worn-top{top:var(--acc-top-y,72%);left:var(--acc-top-x,50%);width:67%;aspect-ratio:1/1.08;transform:translate(-50%,-50%) scaleX(var(--acc-top-wide,1))}
.kk-worn-bottom{top:var(--acc-bottom-y,84%);left:var(--acc-bottom-x,50%);width:59%;aspect-ratio:1.25/1;transform:translate(-50%,-50%) scaleX(var(--acc-bottom-wide,1))}
.kk-worn-shoes{bottom:var(--acc-shoes-y,0%);left:var(--acc-shoes-x,50%);width:64%;aspect-ratio:2.2/1;transform:translateX(-50%) scaleX(var(--acc-shoes-wide,1.18))}
.kk-worn-bag{top:var(--acc-bag-y,70%);right:var(--acc-bag-right,-6%);width:38%;aspect-ratio:.82/1;transform:translateY(-50%) rotate(var(--acc-bag-rotate,8deg))}

/* Kalibrasi anatomi tiap hewan pada sprite 3D. */
.kk-animal-cat{--acc-glasses-y:45%;--acc-glasses-wide:1.08;--acc-hat-y:23%;--acc-top-y:72%;--acc-top-wide:.94;--acc-bottom-y:84%;--acc-bottom-wide:.92;--acc-shoes-y:0%;--acc-shoes-wide:1.28;--acc-bag-y:70%;--acc-bag-right:-5%}
.kk-animal-rabbit{--acc-glasses-y:45%;--acc-glasses-wide:1.02;--acc-hat-y:31%;--acc-hat-size:58px;--acc-top-y:72%;--acc-top-wide:.9;--acc-bottom-y:84%;--acc-bottom-wide:.88;--acc-shoes-y:0%;--acc-shoes-wide:1.22;--acc-bag-y:70%;--acc-bag-right:-4%}
.kk-animal-panda{--acc-glasses-y:45%;--acc-glasses-wide:1.1;--acc-hat-y:23%;--acc-hat-size:60px;--acc-top-y:72%;--acc-top-wide:1.03;--acc-bottom-y:84%;--acc-bottom-wide:1.02;--acc-shoes-y:0%;--acc-shoes-wide:1.2;--acc-bag-y:70%;--acc-bag-right:-6%}
.kk-animal-penguin{--acc-glasses-y:49%;--acc-glasses-wide:1.02;--acc-hat-y:27%;--acc-hat-size:57px;--acc-top-y:73%;--acc-top-wide:.96;--acc-bottom-y:85%;--acc-bottom-wide:.94;--acc-shoes-y:-1%;--acc-shoes-wide:1.25;--acc-bag-y:71%;--acc-bag-right:-6%}
.kk-animal-fox{--acc-glasses-y:45%;--acc-glasses-wide:1.08;--acc-hat-y:20%;--acc-top-y:72%;--acc-top-wide:.94;--acc-bottom-y:84%;--acc-bottom-wide:.93;--acc-shoes-y:0%;--acc-shoes-wide:1.27;--acc-bag-y:70%;--acc-bag-right:-5%}
@keyframes kk-pet-3d-idle{50%{transform:translateY(-6px) rotate(1deg)}}

.kk-wardrobe{margin-top:18px;padding:20px;border:1px solid var(--kk-line);border-radius:16px;background:linear-gradient(145deg,#fffaf0,#fff)}
.kk-wardrobe .kk-panel-heading h3{margin:4px 0 0}
.kk-wardrobe-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}
.kk-wardrobe fieldset{min-width:0;margin:0;padding:13px;border:1px solid #f0dfbd;border-radius:13px;background:rgba(255,255,255,.8)}
.kk-wardrobe legend{padding:0 7px;color:#8a5800;font-size:12px;font-weight:800}
.kk-wardrobe fieldset>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.kk-wardrobe label{position:relative;min-width:0;cursor:pointer}
.kk-wardrobe input{position:absolute;opacity:0;pointer-events:none}
.kk-wardrobe label>span{display:flex;min-height:92px;align-items:center;justify-content:center;flex-direction:column;padding:7px;border:2px solid transparent;border-radius:10px;background:#f8f8f6;text-align:center;transition:.18s ease}
.kk-wardrobe label:not(.is-locked):hover>span,.kk-wardrobe input:checked+span{border-color:#f2ad2e;background:#fff4d8;transform:translateY(-2px)}
.kk-wardrobe label.is-locked{cursor:not-allowed;filter:grayscale(.8);opacity:.55}
.kk-wardrobe label b{font-size:30px;line-height:1.1}
.kk-wardrobe label strong{overflow:hidden;width:100%;margin-top:4px;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.kk-wardrobe label small{margin-top:3px;color:var(--kk-muted);font-size:8px}
@media(max-width:800px){.kk-wardrobe-groups{grid-template-columns:1fr}.kk-pet-scene{min-height:470px}.kk-pet-scene .kk-pet-character{height:385px}}
@media(max-width:520px){.kk-pet-scene{min-height:405px}.kk-pet-scene .kk-pet-character{width:215px;height:350px}.kk-wardrobe fieldset>div{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Pembaruan langsung tanpa memuat ulang halaman. */
.kk-pet-live-message{position:sticky;top:12px;z-index:20;margin:0 0 14px;padding:12px 16px;border:1px solid #8ce2c2;border-radius:12px;background:#e9fbf4;color:#056847;font-weight:800;box-shadow:0 8px 24px rgba(8,127,91,.12)}
.kk-pet-live-message.is-error{border-color:#ffc9c9;background:#fff1f1;color:#b42318}
.kk-pet-live-message.is-pop{animation:kk-message-pop .35s ease-out}
.kk-pet-actions button:disabled{cursor:wait;opacity:.62}
@keyframes kk-message-pop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Aktivitas Pet level lanjut. */
.kk-pet-activities{margin-top:18px;padding:20px;border:1px solid var(--kk-line);border-radius:16px;background:linear-gradient(145deg,#effbf7,#fff)}
.kk-pet-activities .kk-panel-heading h3{margin:4px 0 0}
.kk-pet-activity-note{margin:8px 0 17px;color:var(--kk-muted);font-size:13px}
.kk-pet-command-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kk-pet-command{display:flex;min-height:108px;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:10px;border:1px solid #b8dfd2;border-radius:13px;background:#fff;color:#063f31;cursor:pointer;font:inherit;transition:.18s ease}
.kk-pet-command:hover:not(:disabled){border-color:var(--kk-primary);box-shadow:0 7px 20px rgba(8,127,91,.12);transform:translateY(-2px)}
.kk-pet-command>span{font-size:29px}.kk-pet-command b{font-size:12px}.kk-pet-command small{color:var(--kk-muted);font-size:9px}
.kk-pet-command.is-locked{cursor:not-allowed;filter:grayscale(.85);opacity:.5}

/* Animasi perintah; seluruh karakter dan aksesori bergerak sebagai satu unit. */
.kk-pet-scene.pet-action-feed .kk-pet-character{animation:kk-pet-nod 1.1s ease}
.kk-pet-scene.pet-action-play .kk-pet-character,.kk-pet-scene.pet-action-jump .kk-pet-character{animation:kk-pet-jump 1.1s ease}
.kk-pet-scene.pet-action-walk .kk-pet-character{animation:kk-pet-walk 2.4s ease-in-out}
.kk-pet-scene.pet-action-sleep .kk-pet-character{animation:kk-pet-sleep 2.5s ease-in-out}
.kk-pet-scene.pet-action-exercise .kk-pet-character{animation:kk-pet-exercise 1.6s ease-in-out infinite}
.kk-pet-scene.pet-action-laugh .kk-pet-character,.kk-pet-scene.pet-action-wave .kk-pet-character{animation:kk-pet-shake .28s ease-in-out 7 alternate}
.kk-pet-scene.pet-action-combo .kk-pet-character{animation:kk-pet-combo 2.3s ease-in-out}
.kk-pet-scene.pet-action-dance .kk-pet-character{animation:kk-pet-dance .45s ease-in-out 5 alternate}
.kk-pet-scene.pet-action-roll .kk-pet-character{animation:kk-pet-roll 1.9s ease-in-out}
.kk-pet-scene.pet-action-ball .kk-pet-character,.kk-pet-scene.pet-action-catch .kk-pet-character,.kk-pet-scene.pet-action-rope .kk-pet-character{animation:kk-pet-jump .75s ease-in-out 3}
.kk-pet-scene.pet-action-freeplay .kk-pet-character,.kk-pet-scene.pet-action-celebrate .kk-pet-character{animation:kk-pet-celebrate .55s ease-in-out 5 alternate}
.kk-pet-scene.pet-action-ball:after,.kk-pet-scene.pet-action-catch:after,.kk-pet-scene.pet-action-rope:after{position:absolute;z-index:8;right:14%;bottom:17%;font-size:56px;animation:kk-prop 1s ease-in-out infinite alternate}
.kk-pet-scene.pet-action-ball:after{content:'⚽'}.kk-pet-scene.pet-action-catch:after{content:'🥎'}.kk-pet-scene.pet-action-rope:after{content:'🪢'}
@keyframes kk-pet-nod{0%,100%{transform:translateX(-50%) scale(var(--pet-scale))}50%{transform:translateX(-50%) translateY(14px) rotate(4deg) scale(var(--pet-scale))}}
@keyframes kk-pet-jump{0%,100%{transform:translateX(-50%) scale(var(--pet-scale))}45%{transform:translateX(-50%) translateY(-70px) scale(var(--pet-scale))}}
@keyframes kk-pet-walk{0%,100%{transform:translateX(-50%) scale(var(--pet-scale))}45%{transform:translateX(-105%) scale(var(--pet-scale))}75%{transform:translateX(5%) scale(var(--pet-scale))}}
@keyframes kk-pet-sleep{30%,80%{transform:translateX(-50%) translateY(25px) rotate(82deg) scale(calc(var(--pet-scale)*.85))}100%{transform:translateX(-50%) scale(var(--pet-scale))}}
@keyframes kk-pet-exercise{0%,100%{transform:translateX(-50%) scale(var(--pet-scale))}50%{transform:translateX(-50%) translateY(-35px) rotate(7deg) scale(var(--pet-scale))}}
@keyframes kk-pet-shake{from{transform:translateX(-53%) rotate(-4deg) scale(var(--pet-scale))}to{transform:translateX(-47%) rotate(4deg) scale(var(--pet-scale))}}
@keyframes kk-pet-combo{0%,100%{transform:translateX(-50%) scale(var(--pet-scale))}35%{transform:translateX(-90%) scale(var(--pet-scale))}60%{transform:translateX(-20%) translateY(-80px) rotate(8deg) scale(var(--pet-scale))}}
@keyframes kk-pet-dance{from{transform:translateX(-54%) rotate(-8deg) scale(var(--pet-scale))}to{transform:translateX(-46%) rotate(8deg) scale(var(--pet-scale))}}
@keyframes kk-pet-roll{0%,100%{transform:translateX(-50%) scale(var(--pet-scale))}50%{transform:translateX(-50%) rotate(360deg) scale(var(--pet-scale))}}
@keyframes kk-pet-celebrate{from{transform:translateX(-53%) translateY(-18px) rotate(-7deg) scale(var(--pet-scale))}to{transform:translateX(-47%) rotate(7deg) scale(var(--pet-scale))}}
@keyframes kk-prop{from{transform:translateY(0) rotate(-12deg)}to{transform:translateY(-70px) rotate(15deg)}}
@media(max-width:800px){.kk-pet-command-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.kk-pet-command-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kk-pet-command{min-height:98px}}
@media(prefers-reduced-motion:reduce){.kk-pet-scene[class*="pet-action-"] .kk-pet-character{animation-duration:.01ms!important;animation-iteration-count:1!important}}