.tis {
    color : red;
}


@font-face {
    font-family: 'nameLatin';
    src: url('../fonts/RougeScript-Regular.ttf');
    
}
 @font-face {
    font-family: 'happy';
    src: url('../fonts/Chewy-Regular.ttf');
    
}

  /* Hover Effect */
        #playIcon:hover {
            transform: scale(1.1);
            color: #ff4500;
        }

        /* Animasi Berdenyut Saat Play */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        @keyframes glow {
            0% { filter: drop-shadow(0px 0px 10px #ff6600); }
            25% { filter: drop-shadow(0px 0px 15px #ff00ff); }
            50% { filter: drop-shadow(0px 0px 20px #00ffff); }
            75% { filter: drop-shadow(0px 0px 15px #00ff00); }
            100% { filter: drop-shadow(0px 0px 10px #ff6600); }
        }

        #playIcon {
            font-size: 60px;
            cursor: pointer;
            transition: transform 0.2s ease-in-out, color 0.3s;
            animation: glow 2s infinite alternate ease-in-out;
            color: white;
            cursor: pointer;
            transition: transform 0.2s ease-in-out, color 0.3s;
            filter: drop-shadow(0px 0px 10px #ff6600); /* Bayangan awal */
        }
        
        @media (min-width: 1024px) { 
                .slider-container {
                position: relative;
                width: 40%;
                margin: 10% auto;
                perspective: 1200px; /* Efek 3D */
                
            } 
            
            #frame{
                margin-left:10%;
            }
            
            
              .txt {
    position: absolute;
    bottom: 5%; /* Naik lebih dekat ke frame animasi */
    left: 50%;
    transform: translateX(-50%);
    font-size: 130%;
    z-index: 3;
    width: 100%;
    text-align: center;
}
            
        }
        
        
         @media  (min-width: 768px) and (max-width: 1023px) { 
                .slider-container {
                position: relative;
                width: 50%;
                margin: 10% auto;
                perspective: 1200px; /* Efek 3D */
                
            } 
            
            .txt {
    position: absolute;
    bottom: 1%; /* Naik lebih dekat ke frame animasi */
    left: 50%;
    transform: translateX(-50%);
    font-size: 130%;
    z-index: 3;
    width: 100%;
    text-align: center;
}
             
         }
         
          @media  (max-width: 768px) { 
                .slider-container {
                position: relative;
                width: 80%;
                margin: 10% auto;
                perspective: 1200px; /* Efek 3D */
                
            } 
            
             #frame{
                margin-left:-28%;
            }
            
              .txt {
    position: absolute;
    bottom: 40%; /* Naik lebih dekat ke frame animasi */
    left: 50%;
    transform: translateX(-50%);
    font-size: 130%;
    z-index: 3;
    width: 100%;
    text-align: center;
    font-family: 'happy';
}
             
         }
        
        
        
      
        

        .slide {
            position: absolute;
            width: 100%;
            opacity: 0;
            transform-origin: center right;
            transform: rotateY(120deg);
            transition: transform 1.2s ease-in-out, opacity 1s ease-in-out;
            border-radius:2em;
            border:5px solid silver;
            box-shadow:0px 0px 6px black;
        }

        /* Efek buka buku */
        .slide.show {
            opacity: 1;
            transform: rotateY(0deg);
        }

        /* Efek gambar lama tetap miring ke 120째 sebelum hilang */
        .slide.hide {
            opacity: 0.5;
            transform: rotateY(-120deg);
            transition: transform 1.5s ease-in-out, opacity 1.2s ease-in-out;
        }

        /* Efek dissolve (fade in/out) setelah buka buku selesai */
        .slide.fade {
            opacity: 0;
            transform: none;
            transition: opacity 1.5s ease-in-out;
        }
        
        .slide.fade.show {
            opacity: 1;
        }
        
        
         .stopbtn {
        position: fixed;
        bottom: 20px; /* Posisikan di bawah */
        left: 40%;
        transform: translateX(-50%);
        background-color: #FF8989; /* Warna merah */
        border-radius: 40%; /* Membuat sudut membulat */
        padding: 10px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        cursor: pointer;
        animation: pulse 1.5s infinite; /* Efek berdetak */
    }

    .stopbtn i {
        font-size: 160%;
        color: white;
    }