.prodee {
      display: flex;
      align-items: center;
      font-size: 70px;
    }
    .propic {
      width: 400px;
      height: 400px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 30px;
      background: #ccc;
    }
    .prival h2 {
      margin: 0;
    }
    .stats {
      display: flex;
      gap: 20px;
      margin: 10px 0;
    }
    .bio {
      margin-top: 10px;
    }
    .bergaris {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
      padding: 5px 0;
      font-size: 14px;
    }
    .labil {
      color: black;
     font-size: 70px; 
     gap: 20px;
    }
    .nilai {
      color: #000;
      text-align: right;
      max-width: 60%;
      word-break: break-word;
      font-size: 70px;
      
    }
    a.bergaris {
      display: flex;
      justify-content: space-between;
      text-decoration: none;
      color: inherit;
      padding: 5px 0;
      border-bottom: 1px solid #eee;
      font-size: 14px;
    }
   
   
   
   
.arya-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px;
  overflow-x: auto;
}

.arya-bar::-webkit-scrollbar {
  display: none;
}

.arya-item {
  width: 200px;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.arya-item {
  border: 1px solid red;
  padding: 2px;
}

.arlay {
  position: relative;
  display: inline-block;
}

.arlay img {
  display: block;
}

.arlay span {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: ;
  color: black;
  padding: 2px 1px;
  border-radius: 1px;
  font-size: 10px;
  font-weight: bold;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 6px white, 0 0 8px green, 0 0 10px red;
}

.orlay {
  position: relative;
  display: inline-block;
}

.orlay img {
  display: block;
}

.orlay span {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: ;
  color: white;
  padding: 2px 1px;
  border-radius: 1px;
  font-size: 10px;
  font-weight: bold;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 6px white, 0 0 8px green, 0 0 10px red;
}

.ascroll {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding: 2px;
  gap: 2px;
  margin-top: -1px;
}

.ascroll::-webkit-scrollbar {
  display: none;
}

.ascroll img {
  width: 200px;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  object-fit: cover;
  flex: 0 0 auto;
}






.atasanaturan {
  display: flex;
  justify-content: center;
  gap: 10px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white; 
  padding: 10px 0; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
  z-index: 1000;
}


.bawahanaturan {
  display: flex;
  justify-content: center;
  gap: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white; 
  padding: 10px 0; 
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000; 
}

.variansiaturan {
      background-color: rgba(255, 255, 255, 0.1);
      border: 2px solid red;
      color: black;
      padding: 10px 20px;
      text-decoration: none;
      font-weight: bold;
      border-radius: 5px;
      transition: background-color 0.3s;
      text-align: center;
      font-size: 38px; 
    }     
    



.judul-aturan {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 5px;
}

.aturan {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  margin-bottom: 20px;
}

.aturan p {
  margin-top: 10px;
  font-size: 30px;
  font-weight: bold;
  text-align: left;
  width: 95%;
  box-sizing: border-box;
  margin-bottom: 1px;
}



 
 

 
 
 
 
      
      .perspective-on { perspective: 1000px; }
    .perspective-off { perspective: 0; }
    
    .tilted { transform: rotateY(45deg); }
    .spin-0  { transform: rotateX(-3600deg); }
    .spin-1  { transform: rotateX(-3636deg); }
    .spin-2  { transform: rotateX(-3672deg); }
    .spin-3  { transform: rotateX(-3708deg); }
    .spin-4  { transform: rotateX(-3744deg); }
    .spin-5  { transform: rotateX(-3780deg); }
    .spin-6  { transform: rotateX(-3816deg); }
    .spin-7  { transform: rotateX(-3852deg); }
    .spin-8  { transform: rotateX(-3888deg); }
    .spin-9  { transform: rotateX(-3924deg); }
    
    @keyframes back-spin { 100% { transform: rotateX(36deg); } }
    @keyframes tiltin { 0% { transform: rotateY(0deg);} 50% { transform: rotateY(0deg);} 100% { transform: rotateY(45deg);} }
    @keyframes tiltout { 0% { transform: rotateY(45deg);} 100% { transform: rotateY(0deg);} }
    @keyframes spin-0  { 0% { transform: rotateX(36deg); } 100% { transform: rotateX(-3600deg); } }
    @keyframes spin-1  { 0% { transform: rotateX(36deg); } 100% { transform: rotateX(-3636deg); } }
    @keyframes spin-2  { 0% { transform: rotateX(36deg); } 100% { transform: rotateX(-3672deg); } }
    @keyframes spin-3  { 0% { transform: rotateX(36deg); } 100% { transform: rotateX(-3708deg); } }
    @keyframes spin-4  { 0% { transform: rotateX(36deg); } 100% { transform: rotateX(-3744deg); } }
    @keyframes spin-5  { 0% { transform: rotateX(36deg); } 100% { transform: rotateX(-3780deg); } }
    @keyframes spin-6  { 0% { transform: rotateX(36deg); } 100% { transform: rotateX(-3816deg); } }
    @keyframes spin-7  { 0% { transform: rotateX(36deg); } 100% { transform: rotateX(-3852deg); } }
    @keyframes spin-8  { 0% { transform: rotateX(36deg); } 100% { transform: rotateX(-3888deg); } }
    @keyframes spin-9  { 0% { transform: rotateX(36deg); } 100% { transform: rotateX(-3924deg); } }
    
    #resultDisplay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 600px;
      z-index: 9999;
      pointer-events: none;
    }
    
    #numbersDisplay {
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 40px;
      font-weight: bold;
      color: #000;
      background: rgba(255, 255, 255, 0.9);
      padding: 10px 20px;
      border-radius: 10px;
      z-index: 10000;
      display: flex;
      gap: 10px;
    }
    
    #timeDisplay {
      position: absolute;
      top: 20px;
      left: 20px;
      font-size: 18px;
      color: #000;
      background: rgba(255, 255, 255, 0.9);
      padding: 10px 20px;
      border-radius: 10px;
      z-index: 10000;
      text-align: left;
    }
    
        
    
  
    #rotate {
      margin: 0 auto;
      width: 700px;
      height: 700px;
      padding-top: 700px;
      transform-style: preserve-3d;
      transform: rotateY(45deg);
    }
    
    .ring {
      margin: 0 auto;
      height: 115px;
      width: 115px;
      float: left;
      transform-style: preserve-3d;
    }
    
    .roll {
      position: absolute;
      width: 120px;
      height: 120px;
      box-sizing: border-box;
      opacity: 0.9;
      color: black;
      background: white;
      border: solid 5px #ccc;
      backface-visibility: visible;
    }
    
    .roll p {
      font-size: 100px;
      font-weight: bold;
      line-height: 130px;
      margin: 0;
      text-align: center;
    }
    
    .backface-on { backface-visibility: visible; }
    
  

    .bottom-links {
      position: fixed;
      bottom: 20px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      box-sizing: border-box;
    }
  
    #spinButton:disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }
  
    #spinButton {
      position: absolute;    
      top: 1500px;
      left: 50%;
      transform: translateX(-50%);
      padding: 30px;
      background-color: blue;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 30px;
      width: 950px;
    }
    
    .mainting-panel {
      position: absolute;
      top: 1600px;
      left: 20px;
      background: rgba(0,0,0,0.7);
      padding: 15px;
      font-size: 30px;
      border-radius: 10px;
      color: white;
      width: 950px;
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }
    
    .main-input {
      width: 100%;
      padding: 8px;
      margin: 5px 0;
      border-radius: 5px;
      border: none;
      background-color: #333;
      color: white;
      font-size: 30px;
    }
    
    .main-button {
      background-color: #4CAF50;
      color: white;
      border: none;
      font-size: 2px;
      padding: 8px 15px;
      margin: 5px 2px;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    
    .main-button:hover {
      background-color: #45a049;
    }
    
    .main-button:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
    }
    
    .result-message {
      margin-top: 10px;
      padding: 10px;
      border-radius: 5px;
      text-align: center;
      font-weight: bold;
      transition: all 0.3s ease;
    }
    
   #perakBalance {
      font-weight: bold;
      color: snow;
    }
    
   .win {
      background-color: rgba(255, 215, 0, 0.7) !important;
      color: black !important;
    }

    .win-types {
      margin-top: 15px;
      font-size: 30px;
      background-color: rgba(255, 215, 0, 0.7) !important;
      color: black !important;
    }

    .win-type {
      display: flex;
      justify-content: space-between;
      margin: 5px 0;
      background-color: rgba(255, 215, 0, 0.7) !important;
      color: black !important;
    }

    #numbersDisplay {
      position: absolute;
      top: 20px;
      left: 80%;
      transform: translateX(-50%);
      font-size: 50px;
      font-weight: bold;
      background: snow;
      padding: 10px 20px;
      border-radius: 5px;
      display: flex;
      gap: 10px;
    }
    
    #numbersDisplay span {
      display: inline-block;
      width: 30px;
      text-align: center;
      font-size: 30px;
    }
    
    #loading {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: grey;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    
    .auto-main-options {
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid #444;
      font-size: 30px;
    }
    
    .auto-main-options h4 {
      margin-bottom: 10px;
      font-size: 30px;
    }
    
    #automainButtons {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      font-size: 30px;
    }
    
    #automainButtons button {
      flex: 1;
      min-width: 50px;
      padding: 5px;
      background-color: #333;
      border: none;
      border-radius: 4px;
      color: white;
      cursor: pointer;
      font-size: 30px;
    }
    
    #automainButtons button.active {
      background-color: #4CAF50;
      font-weight: bold;
      font-size: 30px;
    }
    
    #automainButtons button:last-child {
      background-color: #f44336;
      font-size: 30px;
    }
    
    .result-hidden {
      opacity: 0;
      height: 0;
      overflow: hidden;
      margin: 0;
      padding: 0;
      transition: all 0.3s ease;
    }
    
    .rolling-text {
      position: fixed;
      bottom: 10px;
      left: 10px;
      color: black;
      font-size: 30px;
      opacity: 0.7;
      z-index: 100;
      font-size: 30px;
    }

    .link-container {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .menu-link {
      background-color: rgba(255, 255, 255, 0.1);
      border: 2px solid red;
      color: black;
      padding: 10px 20px;
      text-decoration: none;
      font-weight: bold;
      border-radius: 5px;
      transition: background-color 0.3s;
      text-align: center;
      font-size: 28px; 
    }
      
    .menu-link:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }

    .history-link-container {
      position: absolute;
      bottom: 20px;
      left: 20px;
    }     
    
    .error-message {
      color: red;
      font-weight: bold;
      text-align: center;
      margin-top: 10px;
      display: none;
    }
    
    .bling-bling {
      animation: glowing 1.5s infinite alternate;
      text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff7, 0 0 20px #ff7, 0 0 25px #ff0, 0 0 30px #ff0, 0 0 35px #ff0;
    }

    @keyframes glowing {
      from {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff7, 0 0 20px #ff7, 0 0 25px #ff0, 0 0 30px #ff0, 0 0 35px #ff0;
      }
      to {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff0, 0 0 40px #ff0, 0 0 50px #ff7, 0 0 60px #ff7, 0 0 70px #ff7;
      }
    }
    
    .link-container {
      position: relative;
      z-index: 200000;
    }
    
    .menu-link {
      background-color: rgba(255, 255, 255, 0.1);
      border: 2px solid red;
      color: snow;
      padding: 10px 20px;
      text-decoration: none;
      font-weight: bold;
      border-radius: 5px;
      transition: background-color 0.3s;
      text-align: center;
      font-size: 28px; 
      background: rgba(0,0,0,0.7);
    }
      
    .menu-link:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }

    .history-link-container {
      position: absolute;
      bottom: 20px;
      left: 20px;
    }
    
    .auto-spin-buttons {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        gap: 10px;
    }
    .auto-spin-buttons button {
        padding: 15px 30px;
        font-size: 24px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        width: 45%;
        color: white;
    }
    #startAutoSpinButton {
        background-color: #4CAF50;
    }
    #stopAutoSpinButton {
        background-color: #f44336;
        display: none; 
    }
  
  
  
  
 
.input-circle ~ .pajaro { opacity: 0; transition: 0.3s cubic-bezier(0,.43,1,0); animation: move 8s infinite alternate; }
.pajaro.hidden { opacity: 0 !important; }
.pajaro.hide-all { display: none !important; }

.input-circle1:not(:checked) ~ .pajaro1,
.input-circle2:not(:checked) ~ .pajaro2,
.input-circle3:not(:checked) ~ .pajaro3,
.input-circle4:not(:checked) ~ .pajaro4,
.input-circle5:not(:checked) ~ .pajaro5,
.input-circle6:not(:checked) ~ .pajaro6,
.input-circle7:not(:checked) ~ .pajaro7,
.input-circle8:not(:checked) ~ .pajaro8,
.input-circle9:not(:checked) ~ .pajaro9,
.input-circle10:not(:checked) ~ .pajaro10,

.input-circle12:not(:checked) ~ .pajaro12,
.input-circle13:not(:checked) ~ .pajaro13,
.input-circle14:not(:checked) ~ .pajaro14,
.input-circle15:not(:checked) ~ .pajaro15,
.input-circle16:not(:checked) ~ .pajaro16,
.input-circle17:not(:checked) ~ .pajaro17,
.input-circle18:not(:checked) ~ .pajaro18,
.input-circle19:not(:checked) ~ .pajaro19,
.input-circle20:not(:checked) ~ .pajaro20,
.input-circle21:not(:checked) ~ .pajaro21,
.input-circle22:not(:checked) ~ .pajaro22,
.input-circle23:not(:checked) ~ .pajaro23,
.input-circle24:not(:checked) ~ .pajaro24,
.input-circle25:not(:checked) ~ .pajaro25,
.input-circle26:not(:checked) ~ .pajaro26,
.input-circle27:not(:checked) ~ .pajaro27
 { opacity: 1; }

.input-circle1:checked ~ .pajaro1 span,
.input-circle2:checked ~ .pajaro2 span,
.input-circle3:checked ~ .pajaro3 span,
.input-circle4:checked ~ .pajaro4 span,
.input-circle5:checked ~ .pajaro5 span,
.input-circle6:checked ~ .pajaro6 span,
.input-circle7:checked ~ .pajaro7 span,
.input-circle8:checked ~ .pajaro8 span,
.input-circle9:checked ~ .pajaro9 span,
.input-circle10:checked ~ .pajaro10 span,

.input-circle12:checked ~ .pajaro12 span,
.input-circle13:checked ~ .pajaro13 span,
.input-circle14:checked ~ .pajaro14 span,
.input-circle15:checked ~ .pajaro15 span,
.input-circle16:checked ~ .pajaro16 span,
.input-circle17:checked ~ .pajaro17 span,
.input-circle18:checked ~ .pajaro18 span,
.input-circle19:checked ~ .pajaro19 span,
.input-circle20:checked ~ .pajaro20 span,
{ display: block; }

.pajaro7  { top: 150px; animation-delay: -4s !important; transform: scale(1.0); }
.pajaro8  { top: 250px; animation-delay: -5s !important; transform: scale(0.7); }
.pajaro9  { top: 300px; animation-delay: -6s !important; transform: scale(1.1); }
.pajaro10 { top: 150px; animation-delay: -7s !important; transform: scale(0.9); }
.pajaro11 { top: 250px; animation-delay: -8s !important; transform: scale(1.2); }
.pajaro12 { top: 300px; animation-delay: -9s !important; transform: scale(0.6); }
.pajaro13 { top: 70px; animation-delay: -10s !important; transform: scale(1.3); }
.pajaro14 { top: 120px; animation-delay: -11s !important; transform: scale(0.85); }
.pajaro15 { top: 180px; animation-delay: -12s !important; transform: scale(1.15); }
.pajaro16 { top: 220px; animation-delay: -13s !important; transform: scale(0.95); }
.pajaro17 { top: 280px; animation-delay: -14s !important; transform: scale(1.05); }
.pajaro18 { top: 320px; animation-delay: -15s !important; transform: scale(0.75); }
.pajaro19 { top: 90px; animation-delay: -16s !important; transform: scale(1.25); }
.pajaro20 { top: 140px; animation-delay: -17s !important; transform: scale(0.65); }



.pajaro > span {
display: none;
position: absolute;
z-index: 2;
left: -250%;
bottom: -50%;
background-color: blue;
border: solid 2px #000;
width: 80px;
height: 30px;
padding: 10px;
border-radius: 50%;
}

.pajaro > span:before {
content: "1 Perak";
color: yellow;
font-weight: bold;
}

.pajaro1 { top: 50px; animation-delay: -2s !important; transform: scale(0.9); }
.pajaro2 { top: 100px; animation-delay: -1s !important; transform: scale(0.8); }
.pajaro3 { top: 200px; animation-delay: -3s !important; transform: scale(1.4); }
.pajaro4 { top: 50px; animation-delay: -12s !important; transform: scale(0.9); }
.pajaro5 { top: 100px; animation-delay: -16s !important; transform: scale(0.5); }
.pajaro6 { top: 200px; animation-delay: -20s !important; transform: scale(1.4); }

@keyframes move {
10% { left: 10%; }
20% { left: 20%; top: 50%; }

40% { top: 30%; left: 60%; }
60% { top: 80%; left: 80%; }
80% { top: 10%; left: 20%; }
100% { top: 30%; left: 20%; }

}

.pajaro:after,
.pajaro:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
}

.pajaro:after {
box-shadow: inset 0px 11px 0 black;    
border-radius: 100% 100% 0 0;
width: 200px;
height: 200px;
margin-top: -5px;
margin-left: -90px;
transform-origin: 100% 0%;
animation: alas 3s linear infinite;
}


.pajaro {
background: gray;

position: absolute;
left: 0;
cursor: crosshair;
border-radius: 50% 50% 20% 20%;
color: white;
line-height: 20px;
letter-spacing: 2px;
font-size: 0.8em;
text-align: center;
margin-top: -10px;
margin-left: 0px;
width: 30px;
height: 30px;
animation: planeo 0.8s linear infinite;
z-index: 999;
}

.pajaro:before {
background: black;
border-radius: 100% 0% 20% 0%;
margin-top: 12px;
margin-left: -5px;
width: 12px;
height: 12px;
transform: rotateZ(45deg);
}

@keyframes alas {
50% { transform: rotateX(-1440deg); }
}

.sum {
position: fixed;
left: 1%;
top: 20px;
font-size: 50px;
font-weight: bold;
}