/* =========================
   LARGE DESKTOP (1400px+)
========================= */
@media (min-width: 1600px) {
    
#slider-outer{position: relative;float:left;width:100%;height:580px;z-index:5;}        
#slider-right img{width:60%;margin-right:0;}
#slider-box-holder {position: absolute;bottom:-30px;left:20%;width:60%;z-index: 5;display: table;border:0px solid rgba(255, 255, 255, 0.1); border-radius: 12px;box-shadow: 0 0 10px rgba(25, 53, 90, 0.7);}

.slider-img-temperleme {width:35% !important;margin-right:10% !important;}

.product-box {height:360px;    }

.product-box-image-holder {height: 240px;}    

#references-holder {width: 60%;}

.footer-container {padding-bottom: 150px;}    
    
.urun-image-left {height:800px;}    
}/*1500 ends */


/* =========================
   DESKTOP (1200px - 1399px)
========================= */
@media (max-width: 1299px) {
 
#slider-right{float:right;margin-top:-45px;width:60%;}
#slider-right img{width:90%;}

#urunler-icon-menu.open {max-height: 100%; }

#logo-top-menu-inner{position:relative;width:80%;margin:0 auto;}
    
        #logo-holder{float:left;width:30%;background:#fff;/*padding:30px 10px;margin-left:10%;*/border-radius:0 0 10px 10px;box-shadow:0 0 0px #d5dee5;}
            
            
#mobile-menu-toggle {
    display: block;
  }

  #top-menu {
    display: none;
  }
  
  #mobile-menu-links-holder {
      display: none;
  }
  
  #mobile-menu-holder{display:block;float:right;width:45px;height:50px;/*margin:30px 15px 0 0;*/ z-index: 999999;}
    #mobile-menu-bar{display:block;float:left;margin-top:10px;width:30px;height:15px;padding:5px 0 10px 0;background:#fff;border:1px solid rgba(25, 53, 90, 0.3);box-shadow:0 2px 10px rgba(25, 53, 90, 0.1);border-radius:5px;cursor:pointer;}
    #mobile-menu-bar:hover{background:var(--dark-blue);border:1px solid var(--dark-blue);}
    #mobile-menu-bar:hover .menu-bar{background:#fff;}
    
    .menu-bar{width:80%;height:2px;margin:4px auto;background:var(--dark-blue);}
    
    /* AKTİF DURUM (X) */
#mobile-menu-bar.active .menu-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

#mobile-menu-bar.active .menu-bar:nth-child(2) {
  opacity: 0;
}

#mobile-menu-bar.active .menu-bar:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

    #mobile-menu-links-holder{
    position: absolute; /* tekrar buna dönebilirsin */
    z-index: 9999;
    top:100%;
    left:0;
    width:80%;
    margin-left:10%;
    background:#fff;
    border:1px solid #eee;
    padding:10px;
    box-sizing:border-box;

}
    a.mobile-menu-link:link,a.mobile-menu-link:visited{text-decoration:none;color:var(--dark-blue);border-bottom:1px solid #f1f1f1;font-weight:600;float:left;width:90%;padding:10px 0;margin-left:2%;height:30px;}
    a.mobile-menu-link:hover{border-bottom:1px solid var(--dark-blue);}  
    
    a.mobile-menu-link-active:link,a.mobile-menu-link-active:visited{text-decoration:none;color:var(--red);border-bottom:1px solid #f1f1f1;font-weight:600;float:left;width:90%;padding:10px 0;margin-left:2%;height:30px;}
    
    #lang-holder{margin: 45px 10px;}
#lang-holder img {width: 25px;}

}


/* =========================
   LAPTOP (992px - 1199px)
========================= */
@media (max-width: 1199px) {
.slider-title{font-size:30px;font-weight:700;color:#fff;}
        #slider-left p{float:left;margin-top:30px;font-size:14px;line-height:24px;}
}


/* =========================
   TABLET (768px - 991px)
========================= */
@media (max-width: 991px) {


#top-bar-inner{width:90%;margin:0 auto;}
#top-bar-left{float:left;color:#fff;}
#top-bar-right{float:left;color:#fff;margin-top:10px;}


#logo-holder{margin:0;}
    #logo-holder img{width:160px;}

#slider-left{float:left;width:30%;margin-top:30px;}
.slider-title{font-size:24px;font-weight:700;}
        #slider-left p{float:left;margin-top:30px;font-size:12px;line-height:22px;}
#slider-right{float:right;margin-top:10px;width:60%;}
#slider-right img{width:90%;}

#urunler-icon-menu.open {max-height: 100%; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* max 3 kolon */
  gap: 20px;
  width: 90%;
  margin: 40px auto;
}

#footer-top-chocolate {top: -2%;}

}


/* =========================
   LARGE MOBILE (576px - 767px)
========================= */
@media (max-width: 767px) {

        
.content-outer {padding: 10px 10px 30px 10px;box-sizing:border-box;}
.content-inner{display:block;width:90%;margin:0 auto;z-index:9; padding:10px 0;}
#about-left {display:none; }
#about-left-inner{display:none;} 
#about-bant{display:none;}

#about-right{float:left;width:90%;margin-left:3%;margin-top:10px;}
#about-right-inner{float:left;width:90%;margin-left:3%;margin-top:30px;font-size:13px;line-height:23px;}
.title-sup{font-size:30px;color:var(--red);font-weight: 400;margin-bottom:-5px;}            
#about-right h1{color:#fff;}
#about-right-inner h1{color:#fff;font-weight: 600;font-size:30px;}

.section-title {
    font-size: 36px;
    text-align: center;
    margin-top: -5px;
    color: #fff;
    position:relative;
    z-index: 999;
}
    
.product-box {flex: 0 0 calc(80% - 15px);}      

.news-holder{display:table;width:90%;height:100%;margin:30px auto; background:#fff;border:1px solid #eee;border-radius:10px;}        
.news-left{float:left;width:90%;margin-left:1%;}
.news-left img{width:100%;margin:10px;border-radius:10px 0 10px 0;}
.news-right{float:right;width:90%;margin-left:1%;margin-top:15px;}
.news-title{font-size:18px;color:var(--red);}
.news-right p{width:90%;color:#000;}

#references-holder {width:90%;}

.ref-box {width:40%;}

#chocolate-01-inner img {width: 100px;}

#kurumsal-content-left {width: 90%;box-sizing:border-box;}
#kurumsal-content-right {width: 90%;margin-top:30px;margin-left:0;}

#product-boxes-holder-urunlerimiz{width:90%;flex-direction:column;justify-content:center;}

#urunler-toggle{}
#urunler-icon-menu{display:flex;}

.urun-image-left {width:90%;height: 500px;}
.urun-content {width: 100%;margin-left: 0;margin-top: 0;}
    .urun-content ul{    margin: 0;padding: 0;}
    
#footer-top-chocolate {top: -3%;}

#footer-top-right {float: left;width:90%;text-align:left;}

.footer-link:link, .footer-link:visited {float: left;width:90%;margin: 10px;}
.footer-link-active:link, .footer-link-active:visited {float: left;width:90%;margin: 10px;border:none;}

.footer-middle-col {width: 90%;}

.footer-bottom-inner{flex-direction:column;gap:15px;}

#contact-boxes-holder {
    width: 90%;
    flex-direction: column;
}
    
.contact-boxes {
    float: left;
    width: 96%;
        
}
    
#urunler-footer-ustu {
    left: 5%;
    width: 90%;
    padding: 30px;
    box-sizing: border-box;}    


/* =========================
   MOBILE (0px - 575px)
========================= */
@media (max-width: 575px) {

#top-bar-inner {width: 96%;}
.top-info {font-size: 11px;}
    
#logo-top-menu-outer {height:200px;}

#slider-outer{position: relative;float:left;width:100%;height:580px;z-index:5;}        
    #slider-left{float:left;width:80%;margin-top:0;}
.slider-title{font-size:21px;font-weight:700;}
        #slider-left p{float:left;margin-top:15px;font-size:12px;line-height:22px;}
        #slider-left a:link,#slider-left a:visited{float:left;margin-top:15px;text-decoration:none;}
        
#slider-right{float:left;margin-top:10px;width:100%;}
#slider-right img{width:100%;}

#slider-box-holder{display:none;}
.slider-boxes{display:none;}

.cookie_bar {
    position: fixed;
    bottom: 20px;
    right: 3%;
    width: 80%;
    background: rgb(10 16 35);
    color: #fff;
    padding: 25px 10px 25px 20px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 9999;
}    
    
.urun-image-left {width:90%;height: 300px;}    

    #urunler-icon-menu.open {
    max-height: 540px;
    padding: 15px;
    }
    
    #urunler-icon-menu {
    display: flex;
    flex-wrap: wrap;
    max-height: 150px;
    overflow: hidden;
    padding: 15px;
    transition: all 0.4s ease;
    position: relative;
    width: 90%;
    margin: 15px auto;
    background: transparent;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    gap: 15px;
    z-index: 9;
    /* opacity: 0; */
}
    
    
}