/* ==========================================================================
   pomodoro.css - Spesifik Halaman Timer Pomodoro (Mahasiswa)
   Pondasi dasar dan Tata Letak Sidebar diwarisi murni dari global.css
   ========================================================================== */

.timer-card { 
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); 
    padding: 40px 20px; 
}

.timer-svg { 
    width: 250px; 
    height: 250px; 
}

.timer-bg { 
    fill: none; 
    stroke: #e9ecef; 
    stroke-width: 8; 
}

.timer-progress { 
    fill: none; 
    stroke: #74b9ff; 
    stroke-width: 8; 
    stroke-linecap: round; 
    transform: rotate(-90deg); 
    transform-origin: center; 
    transition: stroke-dashoffset 1s linear, stroke 0.5s ease; 
}

.timer-progress.rest-mode { 
    stroke: #55efc4; 
}

.timer-text { 
    font-size: 3.5rem; 
    font-weight: 800; 
    fill: #2d3436; 
    font-family: 'Segoe UI', sans-serif; 
}

.timer-label { 
    font-size: 0.9rem; 
    fill: #b2bec3; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
}

.setting-box { 
    background: #f8f9fa; 
    border-radius: 12px; 
    padding: 10px 15px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}

.setting-btn { 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    border: none; 
    background: #fff; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
    color: #636e72; 
    cursor: pointer; 
}

.setting-btn:hover { 
    background: #74b9ff; 
    color: #fff; 
}

.task-input-pomodoro { 
    background: #f1f2f6; 
    border: 2px solid transparent; 
    border-radius: 12px; 
    padding: 12px 20px; 
    width: 100%; 
    font-size: 1rem; 
    transition: all 0.2s; 
}

.task-input-pomodoro:focus { 
    background: #fff; 
    border-color: #74b9ff; 
    outline: none; 
    box-shadow: 0 0 0 0.2rem rgba(116, 185, 255, 0.15); 
}

.pill-btn { 
    border-radius: 50px; 
    padding: 12px 30px; 
    font-weight: 600; 
    border: none; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    transition: all 0.2s; 
}

.pill-btn:active { 
    transform: scale(0.95); 
}

.offcanvas { 
    border-radius: 16px 0 0 16px; 
    border: none; 
}

/* Responsive Breakpoints khusus elemen Timer saja */
@media (max-width: 768px) {
    .timer-svg { width: 200px; height: 200px; }
    .timer-text { font-size: 2.5rem; }
}