:root{--card-transition-fast:0.15s ease-out;--card-transition-medium:0.2s ease-out;--card-blur-amount:6px}.card{position:relative;border-radius:1.5rem;overflow:hidden;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;backface-visibility:hidden;transform:translateZ(0);will-change:transform;isolation:isolate;transition:transform var(--card-transition-fast)}.card:after{background:linear-gradient(120deg,transparent 30%,oklch(1 0 0/.2) 50%,transparent 70%);transform:translateX(-100%);transition:transform .2s ease-out;z-index:5}.card:after,.card:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0}.card:before{z-index:1;border-radius:1.5rem;box-shadow:0 0 8px 1px oklch(.67 .33 330/.15);transition:opacity .15s ease-out}.dark .card:before{box-shadow:0 0 8px 1px oklch(.6 .15 230/.15)}.card .cardItemQualang{position:absolute;top:0;z-index:10;background-image:var(--card-gradient-primary);padding:5px 10px;text-align:center;font-size:13px;font-weight:600;letter-spacing:.5px;border-top-right-radius:0;border-bottom-right-radius:12px;border-top-left-radius:24px;color:var(--card-text-color);box-shadow:0 2px 8px oklch(0 0 0/.3);transition:opacity .2s ease-out}.card .poster{position:relative;overflow:hidden;width:100%;transform:translateZ(0);transition:transform .2s ease-out}.card .poster .imgMain{border-radius:1.5rem;transform:scale(1.02) translateZ(0);transition:transform .2s ease-out}.card .details{position:absolute;bottom:-170px;left:0;border-radius:1.5rem;width:100%;padding:22px;background:oklch(0 0 0/0);transition:bottom .2s ease-out,background .2s ease-out,padding .2s ease-out;transform:translateZ(0)}.card .details h3{width:100%;transition:color .2s ease-out;color:var(--card-primary-color);font-weight:700;text-shadow:0 2px 4px oklch(0 0 0/.3)}.card .details h3,.card .details h4{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateY(0)}.card .details h4{color:var(--card-text-color);transition:color .2s ease-out,opacity .2s ease-out;opacity:.85}.card .details .addOn-custom{background-image:var(--card-gradient-secondary);background-size:200% 100%;color:oklch(1 0 0);padding:6px 14px;z-index:3;text-transform:capitalize;text-align:center;font-size:13px;border-radius:6px;line-height:17.6px;font-weight:700;box-shadow:0 4px 10px oklch(0 0 0/.4);transform-origin:center;letter-spacing:.5px;transform:translateZ(0);text-shadow:0 1px 3px oklch(0 0 0/.5);transition:box-shadow .2s ease-out,opacity .2s ease-out}.card .details .addOn-custom:hover{box-shadow:0 6px 15px oklch(0 0 0/.5);opacity:.9}.card .rating{display:flex;align-items:center;justify-content:center;padding:6px 0;color:oklch(.91 .26 90)}.card .rating,.card .rating span{transition:color .2s ease-out;transform:translateZ(0)}.card .rating span{color:var(--card-text-color);margin-left:10px;font-weight:500}.card .tags{display:flex;gap:6px;transition:gap .2s ease-out;transform:translateZ(0)}.card .tags span{padding:3px 8px;color:var(--card-text-color);background:var(--card-secondary-color);border-radius:6px;font-size:.875rem;font-weight:500;transition:background .2s ease-out,color .2s ease-out;box-shadow:0 2px 6px oklch(0 0 0/.2);transform:translateZ(0)}.card .tags span:nth-child(2){background:var(--card-accent-color)}.card .info{color:var(--card-text-color);font-size:13px;transition:color .2s ease-out,opacity .2s ease-out;opacity:.9;transform:translateY(0)}.card .score h4{color:oklch(.7 .2 70);font-weight:800;transition:color .2s ease-out;transform:translateX(0)}.card .score span{display:inline-block;margin-right:5px;font-size:13px;padding:3px 8px;color:var(--card-text-color);border-radius:6px;transition:background-color .2s ease-out;background-color:oklch(0 0 0/.3);box-shadow:0 2px 4px oklch(0 0 0/.2);transform:translateZ(0)}.details.transition-all{transition:none!important}@media (max-width:480px){.card,.card .poster .imgMain{border-radius:1rem}.card .details .addOn-custom{padding:4px 10px}@keyframes addOnCustomAnimation{0%,to{transform:scale(1) rotate(0deg) translateZ(10px)}50%{transform:scale(1.08) rotate(1deg) translateZ(15px)}}}@media (max-width:768px){.card,.card *,.card:after,.card:before,.card:hover,.card:hover *{transition:none!important;animation:none!important;filter:none!important;backdrop-filter:none!important;box-shadow:0 2px 8px oklch(0 0 0/.1)!important;transform:none!important}}@media (min-width:768px){.card .details{bottom:-175px}}@media (min-width:1024px){.card .poster:before{content:"";position:absolute;bottom:-200px;width:100%;height:120%;background:linear-gradient(0deg,oklch(.25 .15 315/.9) 10%,oklch(.25 .15 315/.7) 30%,oklch(.25 .15 315/.3) 60%,transparent);transition:bottom .2s ease-out,opacity .2s ease-out;z-index:1;opacity:.7}.dark .card .poster:before{background:linear-gradient(0deg,oklch(.45 .12 235/.9) 10%,oklch(.45 .12 235/.7) 30%,oklch(.45 .12 235/.3) 60%,transparent);opacity:.8}.card:hover{box-shadow:0 8px 25px oklch(0 0 0/.15)}.card:hover .poster .imgMain{transform:scale(1.05) translateZ(0)}.card:hover:after{transform:translateX(100%);opacity:.4}.card:hover:before{opacity:.3}.card:hover .cardItemQualang{transform:translateX(-5px) translateY(-5px) scale(.98);opacity:.8}.card:hover .poster:before{bottom:0;opacity:.85}.card:hover .details{bottom:var(--details-bottom-hover);background:oklch(0 0 0/.7);padding:25px 22px;border:1px solid oklch(1 0 0/.1);box-shadow:0 8px 32px oklch(0 0 0/.4)}.card:hover .details h3{color:oklch(.97 .22 100);text-shadow:0 2px 4px oklch(0 0 0/.5)}.card:hover .details h4{opacity:1}.card:hover .rating{color:oklch(.97 .22 100)}.card:hover .rating span{color:oklch(.98 .15 100)}.card:hover .tags{gap:8px}.card:hover .info{color:oklch(1 0 0);opacity:1}.card:hover .score h4{color:oklch(.75 .18 65)}.card:hover .score span{background-color:oklch(0 0 0/.5)}.card .tags span:hover{background:oklch(.7 .2 70);color:oklch(1 0 0)}.card .details{bottom:var(--details-bottom-default)}}@media (prefers-reduced-motion:reduce){.card,.card .details,.card .details h3,.card .details h4,.card .info,.card .poster,.card .poster .imgMain,.card .poster:before,.card .rating,.card .score h4,.card .score span,.card .tags,.card:after,.card:before{transition-duration:.1s;animation-duration:.1s!important;transform:none!important}.card:hover{transform:scale(1.01)}.card:hover .details{bottom:-30px}}