html {
    font-family: Arial;
    display: inline-block;
    text-align: center;
}

h2 {
    font-size: 3.0rem;
}

body {
    max-width: 600px;
    margin:0px auto;
    padding-bottom: 25px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 68px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #949494;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 52px;
    width: 52px;
    left: 8px;
    bottom: 8px;
    background-color: #fff;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 68px;
}

.pulse-button {
    background-color: #4CAF50; /* Yeşil arka plan */
    color: white; /* Beyaz yazı rengi */
    border: none; /* Kenarlık yok */
    padding: 20px 40px; /* İç boşluk */
    text-align: center; /* Metni ortala */
    text-decoration: none; /* Alt çizgi yok */
    display: inline-block; /* Satır içi blok */
    font-size: 16px; /* Yazı boyutu */
    margin: 4px 2px; /* Dış boşluk */
    cursor: pointer; /* İmleç işareti */
    border-radius: 5px; /* Köşeleri yuvarlat */
    }

.pulse-button.active {
        background-color: red; /* Kırmızı arka plan */
    }

#countdown {
    font-size: 18px; /* Sayaç yazı boyutu */
    color: red; /* Kırmızı yazı rengi */
    margin-top: 10px; /* Üst boşluk */
    text-align: center; /* Metni ortala */
}

.progress-bar-container {
    width: 100%;
    background-color: #f3f3f3;
    border: 1px solid #ccc;
    height: 20px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center; /* Ortalamayı sağlar */
}

.progress-bar {
    height: 60%;
    width: 100%; /* Başlangıçta yüzde yüz */
    background-color: green; /* Başlangıçta yeşil */
    text-align: center;
    line-height: 20px; /* Yükseklik ile aynı */
    color: white;
    transition: width 1s, background-color 1s; /* Geçiş süreleri */
    display: flex;
    align-items: center; /* İçerik yatay olarak ortalanır */
    justify-content: center; /* İçerik dikey olarak ortalanır */
}

.switch-status {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
    color: #333;
}



input:checked+.slider {
    background-color: #008B74;
}

input:checked+.slider:before {
    -webkit-transform: translateX(52px);
    -ms-transform: translateX(52px);
    transform: translateX(52px);
}

input[type=text],
input[type=password],
select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #008B74;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #005a4c;
}

div {
    text-align: left;
    border-radius: 4px;
    background-color: #efefef;
    padding: 20px;
}