/* =====================
    TASBIH CUSTOM THEME
===================== */

.tasbih-page {
     background: radial-gradient(circle at top, #1c1433, #0b0815);
     color: white;
     min-height: 100vh;
     font-family: 'Montserrat', sans-serif;
}

.tasbih-main {
     width: 100%;
     display: flex;
     justify-content: center;
     padding: 40px 20px;
}

.tasbih-wrapper {
     width: 100%;
     max-width: 500px;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
}

.page-title {
     font-family: 'Cinzel', serif;
     font-size: clamp(2rem, 6vw, 3.5rem);
     margin-bottom: 30px;
     letter-spacing: 0.1em;
}

nav {
     width: 100%;
     display: flex;
     justify-content: center;
     padding: 20px 0;
     background: transparent;
}

.nav-links {
     list-style: none;
     display: flex;
     gap: 50px;
     padding: 12px 32px;
     background: rgba(255, 255, 255, 0.04);
     border-radius: 999px;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.nav-links a {
     text-decoration: none;
     color: rgba(255, 255, 255, 0.6);
     font-size: 12px;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     transition: 0.3s;
}

.nav-links a:hover, .nav-links a.active {
     color: #f4a261;
}

.tasbih-card {
     width: 100%;
     background: rgba(255, 255, 255, 0.03);
     padding: 40px;
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(10px);
}

.dhikr-label {
     font-family: 'Amiri', serif;
     font-size: 1.8rem;
     color: #f4a261;
     margin-bottom: 10px;
}

.counter-number {
     font-family: 'Cinzel', serif;
     font-size: 5rem;
     margin-bottom: 30px;
     text-shadow: 0 0 20px rgba(244, 162, 97, 0.3);
}

.tasbih-circle {
     width: 160px;
     height: 160px;
     border-radius: 50%;
     background: transparent;
     border: 2px solid #f4a261;
     color: white;
     font-family: 'Cinzel', serif;
     font-size: 1.2rem;
     cursor: pointer;
     transition: all 0.3s ease;
     margin-bottom: 30px;
     position: relative;
     overflow: hidden;
}

.tasbih-circle:hover {
     background: rgba(244, 162, 97, 0.1);
     box-shadow: 0 0 30px rgba(244, 162, 97, 0.2);
}

.tasbih-circle:active {
     transform: scale(0.92);
     background: #f4a261;
     color: #0b0815;
}

.tasbih-controls {
     display: flex;
     gap: 15px;
     justify-content: center;
}

.ctrl-btn {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: white;
     padding: 12px 25px;
     border-radius: 10px;
     font-size: 0.9rem;
     cursor: pointer;
     transition: 0.3s;
     text-transform: uppercase;
     letter-spacing: 1px;
}

.ctrl-btn:hover {
     background: rgba(255, 255, 255, 0.1);
     border-color: #f4a261;
}

@media (max-width: 768px) {
     html, body {
          max-width: 100%;
          overflow-x: hidden;
          margin: 0;
          padding: 0;
     }
     
     .nav-links {
          gap: 15px;           
          padding: 12px 20px;  
          width: 90%;          
          margin: 0 auto;      
          justify-content: space-around;
          background: rgba(255, 255, 255, 0.08);
     }

     .nav-links a {
          font-size: 11px;      
          letter-spacing: 0.05em;
     }

     .tasbih-card {
          padding: 30px 20px;
          width: 95%;          
          max-width: 350px;    
          box-sizing: border-box;
          margin-right: 30px;
     }

     .counter-number {
          font-size: 4rem;      
     }

     .tasbih-circle {
          width: 140px;         
          height: 140px;
     }

     .page-title {
          font-size: 2.2rem;    
          margin-top: 10px;
          margin-right: 40px;
     }
}