.counter-container {
            display: none;
            align-items: center;
            min-width: 46vw;
      	gap: 5px;
  	padding-bottom: 20px;
        } 
            .counter-btn {
      	width: 40px;
      	height: 40px;
      	border: none;
      	background: transparent;
      	cursor: pointer;
      	padding: 0;
      	border-radius: 50%;
      	transition: all 0.2s ease;
    	}

    	.counter-btn:hover {
    	  transform: scale(1.15);
   	   opacity: 0.9;
   	 }

   	 .counter-btn:active {
   	   transform: scale(0.85);
   	 }

              /* Toggle Buttons */
              .toggle {
                  position: fixed;
                  width: 60px;
                  height: 60px;
                  border-radius: 50%;
                  color: white;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  cursor: pointer;
                  box-shadow: 0 2px 10px rgba(0,0,0,0.2);

                  transition: transform 0.3s ease;
                  -webkit-tap-highlight-color: transparent;
              }
              
              .toggle:active {
                  transform: scale(0.95);
              }
              
              .toggle svg {
                  width: 24px;
                  height: 24px;
                  fill: white;
              }
              
              .toggle1 {
                  bottom: 20px;
                  right: 20px;
                  background-color: #4CAF50;
                  z-index: 10;
              }
              
              .toggle2 {
                  bottom: 20px;
                  right: 20px;
                  background-color: #2196F3;
            transition: transform 2s ease;
            transform: translateX(0) rotate(0);
            will-change: transform;
            z-index: 9;
              }
              
              .toggle.toggle3 {
                  bottom: 20px;
                  right: 20px;
                  background-color: #FF9800;
            transition: transform 2s ease;
            transform: translateX(0) rotate(0);
            will-change: transform;
                  z-index: 8;
              }
              
              
.gonder_wrapper {
  display: flex;
  justify-content: center;
scale: .7;
  margin-top: 10px;
}

.gonder_cta {
    display: flex;
    padding: 10px 45px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    color: var(--gonder-color-3);
    background: var(--gonder-color-1);
    transition: 1s;
    box-shadow: 6px 6px 0 var(--gonder-color-4);
    transform: skewX(-15deg);
    cursor: pointer;
}

.gonder_cta:focus {
   outline: none; 
}

.gonder_cta.active {
    transition: 0.5s;
    box-shadow: 10px 10px 0 var(--gonder-color-2);
}

.gonder_cta .gonder_icon {
    transition: 0.5s;
    margin-right: 0px;
}

.gonder_cta.active .gonder_icon {
    transition: 0.5s;
    margin-right: 45px;
}

.gonder_text, .gonder_icon {
    transform: skewX(15deg) 
}

.gonder_icon {
    width: 20px;
    margin-left: 30px;
    position: relative;
    top: 12%;
}

/**************SVG****************/

.gonder_one {
    transition: 0.4s;
    transform: translateX(-60%);
}

.gonder_two {
    transition: 0.5s;
    transform: translateX(-30%);
}

.gonder_cta.active .gonder_three {
    animation: gonder_color_anim 1s infinite 0.2s;
}

.gonder_cta.active .gonder_one {
    transform: translateX(0%);
    animation: gonder_color_anim 1s infinite 0.6s;
}

.gonder_cta.active .gonder_two {
    transform: translateX(0%);
    animation: gonder_color_anim 1s infinite 0.4s;
}

/* SVG animations */

@keyframes gonder_color_anim {
    0% {
        fill: var(--gonder-color-3);
    }
    50% {
        fill: var(--gonder-color-2);
    }
    100% {
        fill: var(--gonder-color-3);
    }
}
              
              /* siparis_modals */
              .siparis_modal {
                  position: fixed;
                  width: 90%;
              max-width: min(400px, 90vw);
                  background-color: white;
                  border-radius: 10px;
                  padding: 20px;
                  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
                  z-index: 7;
                  left: 50%;
                  display: none;
                  transform: translate(-50%, 0%);
                  bottom: max(100px, 15vh);
              }
              
              .siparis_modal h2 {
                  color: #333;
                  padding: 1rem;
              }
              
              /* Menu List */
              .menu-list {
                  list-style: none;
              }
              
              .menu-list li {
                  padding: 12px 10px;
                  border-bottom: 1px solid #eee;
                  display: flex;
                  justify-content: space-between;
              }
              
              .siparis_modal1 div:nth-child(3) {
                  padding: 12px 10px;
                  display: flex;
                  justify-content: space-between;
              }
            
            .menu-list li:last-child {border-bottom: none;}
            
              .ortala {display:flex;justify-content: center;}
              
              /* Form */
              
.siparis_modal2 form {padding:20px; padding-bottom: 0; padding-top: 0;}

.siparis_modal2 textarea {
margin-top: 20px;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid;
    border-bottom-color: black;

  outline: none;
font-size: 20px;
width: 100%;
padding-left: 20px;
padding-right: 20px;
    resize: none;
height: 40px;
              }
              
.siparis_modal2 ::placeholder {
    position: absolute;
    bottom: 10px;
}
              
              /* Social Icons */
              #socialIcons {
                  display: none;
                  position: fixed;
                  bottom: max(100px, 5vh);
                  left: 50%;
                  transform: translateX(-50%);
                  background-color: white;
                  border-radius: 10px;
                  padding: 15px;
                  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
                  flex-direction: column;
                  width: 90%;
                  max-width: 400px;
                  min-height: 70%;
                  justify-content: space-evenly;
              }
              
              #socialIcons a {
                  display: flex;
                  align-items: center;
                  padding: 5px 0px 0px 40px;
                  text-decoration: none;
                  color: #333;
                  font-size: 24;
                  border-radius: 5px;
                  margin: 5px 0;
                  -webkit-tap-highlight-color: transparent;
              }
              

      #socialIcons span::after {
        width: 2.5rem;
        height: 2.5rem;
          margin-right: 10px;
      }
              .whatsapp { color: #25D366; }
            .instagram { color: #E1306C; }
            .telegram { color: #0088cc; }
            .sms { color: #2196F3; }
            .copy { color: #607D8B; }
            
            /* Overlay - Non-clickable dimmer */
              .overlay {
                  position: fixed;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background-color: rgba(0,0,0,0.5);
                  z-index: 6;
                  display: none;
                  cursor: not-allowed;
              }