/* ========== BASE SLIDER STYLES ========== */
.panda-slider {
    width: 100%;
    height: 480px;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.panda-slide-group {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    padding-bottom: 40px;
    overflow: visible;
    margin-left: 10%;
}

/* ========== PRODUCT WRAPPER ========== */
.product-wrapper {
    position: relative;
    display: inline-block;
    z-index: 2;
}

.panda-product {
    display: block;
    max-width: 250px;
    width: 100%;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* ========== LEFT MASCOT ========== */
.panda-maskot-left {
    position: absolute;
    top: 15%;
    right: 100%;
    margin-right: -20px;
    max-width: 130px;
    width: 100%;
    object-fit: contain;
    z-index: 1;
    transform-origin: bottom center;
    --maskot-y: translateY(-20%); /* Default */
    transform: var(--maskot-y);
}

/* ========== RIGHT MASCOT ========== */
.panda-maskot {
    max-width: 130px;
    width: 100%;
    flex-shrink: 0;
    margin-left: -20px;
    object-fit: contain;
    z-index: 3;
    transition: transform 0.3s ease;
    transform-origin: bottom center;
    align-self: flex-end;
}

/* ========== ANIMASI PRODUCT & KEYFRAMES ========== */
.panda-product.slide-out { animation: slideOut 0.9s ease-in forwards; }
.panda-product.slide-out-right { animation: slideOutRight 0.9s ease-in forwards; }
.panda-product.slide-out-left { animation: slideOutLeft 0.9s ease-in forwards; }
.panda-product.slide-in { animation: none; }
.panda-product.slide-in-from-right { animation: slideInFromRight 0.9s ease-out; }
.panda-product.slide-in-from-left { animation: slideInFromLeft 0.9s ease-out; }
.panda-product.being-pushed { animation: beingPushed 0.9s ease-in-out; }
.panda-product.pushed-right { animation: productPushedRight 0.9s ease-in-out; }
.panda-product.pushed-left { animation: productPushedLeft 0.9s ease-in-out; }

@keyframes slideOutRight {
    0% { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; }
    30% { transform: translateX(20px) scale(1.05) rotate(5deg); opacity: 1; }
    100% { transform: translateX(300px) scale(0.8) rotate(15deg); opacity: 0; }
}
@keyframes slideOutLeft {
    0% { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; }
    30% { transform: translateX(-20px) scale(1.05) rotate(-5deg); opacity: 1; }
    100% { transform: translateX(-300px) scale(0.8) rotate(-15deg); opacity: 0; }
}
@keyframes slideInFromRight {
    0% { transform: translateX(300px) scale(0.8) rotate(-15deg); opacity: 0; }
    50% { transform: translateX(-30px) scale(1.05) rotate(5deg); opacity: 1; }
    100% { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes slideInFromLeft {
    0% { transform: translateX(-300px) scale(0.8) rotate(15deg); opacity: 0; }
    50% { transform: translateX(30px) scale(1.05) rotate(-5deg); opacity: 1; }
    100% { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes beingPushed {
    0%, 30% { transform: translateX(0); }
    70% { transform: translateX(40px); }
    100% { transform: translateX(0); }
}
@keyframes productPushedRight {
    0%, 20% { transform: translateX(0) scale(1) rotate(0deg); }
    50% { transform: translateX(50px) scale(1.05) rotate(8deg); }
    80% { transform: translateX(15px) scale(1) rotate(2deg); }
    100% { transform: translateX(0) scale(1) rotate(0deg); }
}
@keyframes productPushedLeft {
    0%, 20% { transform: translateX(0) scale(1) rotate(0deg); }
    50% { transform: translateX(-50px) scale(1.05) rotate(-8deg); }
    80% { transform: translateX(-15px) scale(1) rotate(-2deg); }
    100% { transform: translateX(0) scale(1) rotate(0deg); }
}

/* ========== ANIMASI MASKOT KANAN & KEYFRAMES ========== */
.panda-maskot.maskot-exit { animation: maskotExit 0.9s ease-in forwards; }
.panda-maskot.maskot-exit-right { animation: maskotExitRight 0.9s ease-in forwards; }
.panda-maskot.maskot-exit-left { animation: maskotExitLeft 0.9s ease-in forwards; }
.panda-maskot.pushing { animation: pushMotion 0.9s ease-in-out; }
.panda-maskot.push-right { animation: pushRight 0.9s ease-in-out; }
.panda-maskot.push-left { animation: pushLeft 0.9s ease-in-out; }

@keyframes maskotExitRight {
    0% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translateX(250px) rotate(20deg) scale(0.9); opacity: 0; }
}
@keyframes maskotExitLeft {
    0% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translateX(-250px) rotate(-20deg) scale(0.9); opacity: 0; }
}
@keyframes pushMotion {
    0% { transform: translateX(0) rotate(0deg); }
    30% { transform: translateX(-20px) rotate(-5deg); }
    70% { transform: translateX(30px) rotate(10deg); }
    100% { transform: translateX(0) rotate(0deg); }
}
@keyframes pushRight {
    0% { transform: translateX(0) rotate(0deg) scale(1); }
    20% { transform: translateX(-25px) rotate(-8deg) scale(1.05); }
    50% { transform: translateX(35px) rotate(12deg) scale(1.1); }
    80% { transform: translateX(10px) rotate(3deg) scale(1); }
    100% { transform: translateX(0) rotate(0deg) scale(1); }
}
@keyframes pushLeft {
    0% { transform: translateX(0) rotate(0deg) scale(1); }
    20% { transform: translateX(25px) rotate(8deg) scale(1.05); }
    50% { transform: translateX(-35px) rotate(-12deg) scale(1.1); }
    80% { transform: translateX(-10px) rotate(-3deg) scale(1); }
    100% { transform: translateX(0) rotate(0deg) scale(1); }
}

/* ========== FIX: MASKOT KIRI TETAP DI ATAS (SLIDE HORIZONTAL SAJA) ========== */
/* Keyframes khusus maskot kiri yang mengunci nilai translateY via CSS Variable */
@keyframes slideOutRightMaskot {
    0%   { transform: var(--maskot-y) translateX(0) scale(1) rotate(0deg); opacity: 1; }
    30%  { transform: var(--maskot-y) translateX(20px) scale(1.05) rotate(5deg); opacity: 1; }
    100% { transform: var(--maskot-y) translateX(300px) scale(0.8) rotate(15deg); opacity: 0; }
}
@keyframes slideOutLeftMaskot {
    0%   { transform: var(--maskot-y) translateX(0) scale(1) rotate(0deg); opacity: 1; }
    30%  { transform: var(--maskot-y) translateX(-20px) scale(1.05) rotate(-5deg); opacity: 1; }
    100% { transform: var(--maskot-y) translateX(-300px) scale(0.8) rotate(-15deg); opacity: 0; }
}
@keyframes slideInFromRightMaskot {
    0%   { transform: var(--maskot-y) translateX(300px) scale(0.8) rotate(-15deg); opacity: 0; }
    50%  { transform: var(--maskot-y) translateX(-30px) scale(1.05) rotate(5deg); opacity: 1; }
    100% { transform: var(--maskot-y) translateX(0) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes slideInFromLeftMaskot {
    0%   { transform: var(--maskot-y) translateX(-300px) scale(0.8) rotate(15deg); opacity: 0; }
    50%  { transform: var(--maskot-y) translateX(30px) scale(1.05) rotate(-5deg); opacity: 1; }
    100% { transform: var(--maskot-y) translateX(0) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes pushedRightMaskot {
    0%, 20% { transform: var(--maskot-y) translateX(0) scale(1) rotate(0deg); }
    50%     { transform: var(--maskot-y) translateX(50px) scale(1.05) rotate(8deg); }
    80%     { transform: var(--maskot-y) translateX(15px) scale(1) rotate(2deg); }
    100%    { transform: var(--maskot-y) translateX(0) scale(1) rotate(0deg); }
}
@keyframes pushedLeftMaskot {
    0%, 20% { transform: var(--maskot-y) translateX(0) scale(1) rotate(0deg); }
    50%     { transform: var(--maskot-y) translateX(-50px) scale(1.05) rotate(-8deg); }
    80%     { transform: var(--maskot-y) translateX(-15px) scale(1) rotate(-2deg); }
    100%    { transform: var(--maskot-y) translateX(0) scale(1) rotate(0deg); }
}

/* Arahkan selector maskot kiri ke keyframes baru */
.panda-product.slide-out-right ~ .panda-maskot-left,
.panda-slide-group:has(.panda-product.slide-out-right) .panda-maskot-left { animation: slideOutRightMaskot 0.9s ease-in forwards; }

.panda-product.slide-out-left ~ .panda-maskot-left,
.panda-slide-group:has(.panda-product.slide-out-left) .panda-maskot-left { animation: slideOutLeftMaskot 0.9s ease-in forwards; }

.panda-product.slide-in-from-right ~ .panda-maskot-left,
.panda-slide-group:has(.panda-product.slide-in-from-right) .panda-maskot-left { animation: slideInFromRightMaskot 0.9s ease-out; }

.panda-product.slide-in-from-left ~ .panda-maskot-left,
.panda-slide-group:has(.panda-product.slide-in-from-left) .panda-maskot-left { animation: slideInFromLeftMaskot 0.9s ease-out; }

.panda-product.pushed-right ~ .panda-maskot-left,
.panda-slide-group:has(.panda-product.pushed-right) .panda-maskot-left { animation: pushedRightMaskot 0.9s ease-in-out; }

.panda-product.pushed-left ~ .panda-maskot-left,
.panda-slide-group:has(.panda-product.pushed-left) .panda-maskot-left { animation: pushedLeftMaskot 0.9s ease-in-out; }

/* ========== PAGINATION ========== */
.panda-pagination.swiper-pagination-horizontal {
    width: auto !important;
    transform: translateX(-50%) !important;
    display: inline-flex;
    gap: 12px;
    position: absolute;
    left: 50%;
    bottom: 10px;
}
.panda-pagination .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}
.panda-pagination .swiper-pagination-bullet:hover { background: rgba(255, 255, 255, 0.8); }
.panda-pagination .swiper-pagination-bullet-active {
    background: #99C844;
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(153, 200, 68, 0.6);
}

/* ========== RESPONSIVE ========== */
@media (min-width: 1200px) {
    .panda-slider { height: 520px; }
    .panda-product { max-width: 280px; }
    .panda-maskot-left { max-width: 150px; margin-right: -20px; --maskot-y: translateY(-25%); }
    .panda-maskot { max-width: 150px; margin-left: -25px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .panda-slider { height: 480px; }
    .panda-product { max-width: 250px; }
    .panda-maskot-left { max-width: 130px; margin-right: -25px; --maskot-y: translateY(-20%); }
    .panda-maskot { max-width: 130px; margin-left: -20px; }
}

@media (max-width: 1024px) {
    .panda-slider { height: 420px; }
    .panda-product { max-width: 220px; }
    .panda-maskot-left { max-width: 110px; margin-right: -20px; --maskot-y: translateY(-15%); }
    .panda-maskot { max-width: 110px; margin-left: -15px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .panda-slider { height: 400px; }
    .panda-product { max-width: 200px; }
    .panda-maskot-left { max-width: 110px; margin-right: -20px; --maskot-y: translateY(-15%); }
    .panda-maskot { max-width: 110px; margin-left: -15px; }
}

@media (max-width: 768px) {
    .panda-slider { height: 360px; }
    .panda-slide-group { padding-bottom: 15px; margin-left: 8%; }
    .panda-product { max-width: 180px; }
    .panda-maskot-left { max-width: 100px; margin-right: -15px; --maskot-y: translateY(-10%); }
    .panda-maskot { max-width: 100px; margin-left: -10px; }
    .panda-pagination { bottom: 10px; }
    .panda-pagination .swiper-pagination-bullet { width: 10px; height: 10px; }
}

@media (min-width: 640px) and (max-width: 767px) {
    .panda-slider { height: 380px; }
    .panda-product { max-width: 190px; }
    .panda-maskot-left { max-width: 100px; margin-right: -15px; --maskot-y: translateY(-10%); }
}

@media (max-width: 640px) {
    .panda-slider { height: 320px; }
    .panda-product { max-width: 160px; }
    .panda-maskot-left { max-width: 90px; margin-right: -12px; --maskot-y: translateY(-5%); }
    .panda-maskot { max-width: 90px; margin-left: -10px; }
}

@media (min-width: 480px) and (max-width: 639px) {
    .panda-slider { height: 340px; }
    .panda-product { max-width: 170px; }
    .panda-maskot-left { max-width: 90px; margin-right: -10px; --maskot-y: translateY(-5%); }
}

@media (max-width: 480px) {
    .panda-slider { height: 280px; }
    .panda-slide-group { margin-left: 8%; padding-bottom: 30px; }
    .panda-product { max-width: 140px; }
    .panda-maskot-left { max-width: 80px; margin-right: -8px; top: -10px; --maskot-y: translateY(0%); }
    .panda-maskot { max-width: 80px; margin-left: -8px; }
    .panda-pagination { bottom: 8px; gap: 8px; }
    .panda-pagination .swiper-pagination-bullet { width: 8px; height: 8px; }
}

@media (min-width: 375px) and (max-width: 479px) {
    .panda-product { max-width: 136px; }
    .panda-maskot-left { max-width: 80px; margin-right: -8px; }
}

@media (max-width: 375px) {
    .panda-slider { height: 260px; }
    .panda-product { max-width: 125px; }
    .panda-maskot-left { max-width: 70px; margin-right: -5px; top: -5px; --maskot-y: translateY(0%); }
    .panda-maskot { max-width: 70px; margin-left: -5px; }
}

@media (max-width: 320px) {
    .panda-slider { height: 240px; }
    .panda-product { max-width: 110px; }
    .panda-maskot-left { max-width: 60px; margin-right: -5px; top: 0; --maskot-y: translateY(0%); }
    .panda-maskot { max-width: 60px; margin-left: -5px; }
}

/* ========== GLOBAL ========== */
body { overflow-x: hidden; }
.swiper { overflow: hidden; }
* { box-sizing: border-box; }