Bilgi: ayarlar.json içerisinde 'site_title' zaten mevcut (DemoLiveaaa bbgg cc ss). İşlem yapılmadı.<br>













<style>
    /* Wİfi QR Kodu için font */
    /* Ek Fontlarr */
    @import url('https://fonts.googleapis.com/css2?family=Anta&family=Dancing+Script:wght@400..700&family=Gabriela&family=Great+Vibes&family=Madimi+One&family=Miss+Fajardose&display=swap');
    /********************************/

    body {
        font-family: Arial, Helvetica, sans-serif;
        /* Sayfa içindeki metinler için yazı tipi belirlenir */
    }

    #qr {
        font-family: sans-serif;
        /* QR kodu içindeki metinler için yazı tipi belirlenir */
        font-weight: 500;
        /* QR kodu içindeki metinler için yazı kalınlığı belirlenir */
    }

    /* Modal (arkaplan) */
    .modal {
        /* Hiçbir şekilde imlec görülmez yanıp sönen */
        caret-color: transparent;
        
        display: none;
        /* Modal pencereyi başlangıçta gizler */
        position: fixed;
        /* Modal pencerenin sabit konumda kalmasını sağlar */
        z-index: 1;
        /* Modal pencerenin diğer öğelerin önünde kalmasını sağlar */
        top: 0;
        /* Modal pencerenin en üst kısmından başlar */
        left: 0;
        /* Modal pencerenin en sol kısmından başlar */
        width: 100%;
        /* Modal pencerenin genişliği %100 olacak şekilde ayarlanır */
        height: 100%;
        /* Modal pencerenin yüksekliği %100 olacak şekilde ayarlanır */
        overflow: auto;
        /* Modal pencerenin aşağıya doğru kaydırılabilir olmasını sağlar */
        background-color: rgba(0, 0, 0, 0.4);
        /* Modal pencerenin arka plan rengi ayarlanır */
    }

    @media only screen and (min-width: 759px) {
        /* Bilgisayar Responsive Başlangıç */

        /* QR resminin boyut ayarları */
        .qrimg {
            width: 60%;
            /* Genişliği %60 */
            height: 60%;
            /* Yüksekliği %60 */
            margin: auto;
            /* Ortalanmış */
        }

        /* Modal İçeriği */
        .modal-cont {
            /* QR kodunun bilgisayar genişlik ayarı */
            width: 30% !important;
            /* Genişliği %30, önemli (important) */
            height: 100% !important;
            /* background-color: #fefefe; Arkaplan rengi */
            position: absolute;
            /* Mutlak konumlandırma */
            top: 50%;
            /* Üstten %50 konumlandırma */
            left: 50%;
            /* Soldan %50 konumlandırma */
            transform: translate(-50%, -50%);
            /* Dikey ve yatayda %50 hareket */
            padding: 0;
            /* İç boşluk */
            border: 1px solid #888;
            /* Çerçeve rengi ve kalınlığı */
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            /* Kutu gölgesi */
            -webkit-animation-name: animatetop;
            /* -webkit-prefix ile animasyon adı */
            -webkit-animation-duration: 0.5s;
            /* Animasyon süresi */
            animation-name: animatetop;
            /* Animasyon adı */
            animation-duration: 0.5s;
            /* Animasyon süresi */
        }

        /* Ayırıcı çizgi */
        .modal-cont hr {
            border: 1px solid rgba(65, 105, 225);
            /* Renk ve kalınlık */
        }
    }

    /* Bilgisayar Responsive Bitiş */


    /* Telefon Responsive başlangıcı */
    @media only screen and (max-width: 760px) {
        .qrimg {
            width: 100%;
            /* Genişliği %100 */
            height: 100%;
            /* Yüksekliği %100 */
            padding-left: 20px;
            /* Sol iç boşluk */
            padding-right: 20px;
            /* Sağ iç boşluk */
            margin: auto;
            /* Ortalanmış */
        }

        /* Ayırıcı çizgi */
        .qrimg hr {
            border: 1px solid rgba(65, 105, 225);
            /* Renk ve kalınlık */
        }

        /* Modal İçeriği */
        .modal-cont {
            /* QR kodunun telefon genişlik ayarı */
            width: 60% !important;
            /* Genişliği %60, önemli (important) */
            min-height: 30% !important;
            /* En az yükseklik %30, önemli (important) */
            background-color: #fefefe;
            /* Arkaplan rengi */
            position: absolute;
            /* Mutlak konumlandırma */
            top: 50%;
            /* Üstten %50 konumlandırma */
            left: 50%;
            /* Soldan %50 konumlandırma */
            transform: translate(-50%, -50%);
            /* Dikey ve yatayda %50 hareket */
            padding: 0;
            /* İç boşluk */
            border: 1px solid #888;
            /* Çerçeve rengi ve kalınlığı */
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            /* Kutu gölgesi */
            -webkit-animation-name: animatetop;
            /* -webkit-prefix ile animasyon adı */
            -webkit-animation-duration: 0.5s;
            /* Animasyon süresi */
            animation-name: animatetop;
            /* Animasyon adı */
            animation-duration: 0.5s;
            /* Animasyon süresi */
        }

        /* Ayırıcı çizgi */
        .modal-cont hr {
            border: 1px solid rgba(65, 105, 225);
            /* Renk ve kalınlık */
        }

        .modal-body {
            width: 100%;
            /* Genişliği %100 */
        }
    }

    /* Telefon Responsive Bitiş */


    @-webkit-keyframes animatetop {

        /* -webkit-prefix ile animasyon tanımlaması başlangıcı (Safari ve Chrome için) */
        from {
            /* Başlangıç durumu */
            top: -50%;
            /* Üst kenarın -50%'sinden başlar */
            opacity: 0;
            /* Opaklık 0 (tamamen saydam) */
        }

        to {
            /* Bitiş durumu */
            top: 50%;
            /* Üst kenara %50'sinden bitirir */
            opacity: 1;
            /* Opaklık 1 (tamamen opak) */
        }
    }

    /* Animasyon tanımlaması sonu */

    @keyframes animatetop {

        /* animatetop adında bir animasyon tanımlaması başlangıcı */
        from {
            /* Başlangıç durumu */
            top: -50%;
            /* Üst kenarın -50%'sinden başlar */
            opacity: 0;
            /* Opaklık 0 (tamamen saydam) */
        }

        to {
            /* Bitiş durumu */
            top: 50%;
            /* Üst kenara %50'sinden bitirir */
            opacity: 1;
            /* Opaklık 1 (tamamen opak) */
        }
    }

    /* Animasyon tanımlaması sonu */


    /* The Close Button */
    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-header {
        padding: 2px 16px;
        /* background-color: black;
        color: white; */
    }

    .modal-body {
        padding: 2px 16px;

    }

    .modal-footer {
        padding: 2px 16px;
        min-height: 50px;
        padding-bottom: 20px;
        /* adjust the value according to your needs */
        /* background-color: black;
        color: white; */
    }

    #snow {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 1000;
        width: 100%;
        height: 100%;
    }

    .snowflake {
        position: absolute;
        color: #FFF;
        font-size: 1em;
        opacity: 0.7;
        animation-name: fall;
        animation-duration: 40s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    @keyframes fall {
        0% {
            opacity: 0;
            transform: translateY(-50vh) rotate(0deg);
        }

        10% {
            opacity: 1;
        }

        100% {
            transform: translateY(100vh) rotate(360deg);
        }
    }

    .modal-cont {
        border: 6px solid rgba(65, 105, 225);
        /* Çerçeve oluşturur, 6 piksel kalınlıkta, renk: RGB(65, 105, 225) */
        border-radius: 5px;
        /* Kenar yuvarlatma, 5 piksel yarıçap */
        background-color: #fefefe;
            /* Arkaplan rengi */
    }

    /* Wifi QR Kodu texti*/
    #wifiQr {
        font-family: "Madimi One", sans-serif;
        /* Yazı tipi belirleme, öncelikle "Madimi One" fontunu arar, bulamazsa sans-serif kullanır */
        border-bottom: 1.5px solid rgba(65, 105, 225);
        /* Alt kenarlık oluşturur, 1.5 piksel kalınlıkta, renk: RGB(65, 105, 225) */
        padding: 10px;
        /* İçerik ile çerçeve arasında boşluk bırakır */
        text-align: center;
        /* Metni ortalar */
        font-size: 25px;
        /* Yazı boyutunu belirleme */
        /* Alt kenardan 20 piksel mesafe bırakır */
    }

    /* Bağlanmak için tarayınız texti */
    #qrAciklama {
        padding-top:10px;
        text-align: center;
        /* Metni ortalamak için */
        font-family: "Madimi One", sans-serif;
        /* Yazı tipi belirleme, öncelikle "Madimi One" fontunu arar, bulamazsa sans-serif kullanır */
        font-size: 17px;
        /* Yazı boyutunu belirleme */
    }



    .parent-class {
        text-align: right;
    }
/* Modallar arası geçiş için gerekli css özellikleri */
    .emoji-button {
        display: inline-block;
        margin-top: -10px;
        margin-bottom: -20px;
        width: 50px;
        height: 50px;
        background-color: #f0f0f0;
        /* Çok açık gri arka plan */
        border-radius: 50%;
        /* Daire şekli */
        text-align: center;
        line-height: 50px;
        /* Yükseklik ile aynı olmalı ki emoji ortalansın */
        font-size: 24px;
        /* Emoji boyutu */
        cursor: pointer;
        /* İmleç değişimi */
        user-select: none;
        /* Seçilemez */
        display: inline-block;
        /* inline-block olarak yerleşimi */
    }

    .emoji-button:hover {
        background-color: #e0e0e0;
        /* Hover durumunda biraz koyu gri */
    }

    .emoji-button:active {
        background-color: #d0d0d0;
        /* Tıklama durumunda daha koyu gri */
    }


    /* ----------------------------------------------------------------------------------- */
    /* General Button Styling */
    button {
        transition: all 0.3s ease;
        padding: 5px 10px;
        border-radius: 8px;
        /* Yuvarlak köşeler */
        background-color: #f9f9f9;
        /* Çok açık gri arka plan */
        border: 1px solid #ddd;
        /* Açık gri sınır */
    }

    /* Hover Effects */
    button:hover {
        background-color: #f0f0f0;
        /* Biraz daha koyu gri arka plan */
        color: #333;
        /* Daha koyu metin rengi */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        /* Gölge efekti */
        cursor: pointer;
    }

    /* Active Effects */
    button:active {
        background-color: #dcdcdc;
        /* Biraz daha koyu arka plan */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
        /* İç gölge efekti */
    }

    /* Custom Styles for Specific Buttons */
    .guncelle,
    .guncelleDuyuru {
        color: green;
        border-radius: 100px;
        font-size: 18px;
        border: none;
        background: #f0f0f0;
        /* Genel arka plan rengi */
        padding-left: 20px;
        padding-right: 20px;
    }

    .btn-del,
    .btn-delDuyuru {
        color: orange;
        font-size: 17px;
        border-radius: 100px;
        border: none;
        background: #f0f0f0;
        /* Genel arka plan rengi */
    }

    /* ------------------------------------------------------------ */
    /* Ekranı karartmak için */
    #overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        display: none;
        align-items: center;
        justify-content: center;
    }

    /* Döngü halkası (loader) için */
    #loader {
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #3498db;
        width: 120px;
        height: 120px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>








<!doctype html>
<html>
  

<head>

<meta charset="utf-8">
<title>DemoLiveaaa bbgg cc ss</title>
<meta name="title" content="DemoLiveaaa bbgg cc ss">
<meta name="keywords" content="Restaurant, Cafe, Smart QR, Smart Menu, User Friendly, Easy, Online Menu, Web Menu, Artificial Intelligence, Innovation, Futurist, Call Waiter, Waitress, Request Account, Digital Transformation, Happy Customers">
<meta name="description" content="Balıkta Lezzetin Galata Hali">
<meta name="author" content="Dev Secure Bilisim Teknolojileri">
<link rel="icon" href="resimler/favicon.jpg" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="HandheldFriendly" content="True">	
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://1b.dslink.co/">
<meta property="og:title" content="DemoLiveaaa bbgg cc ss">
<meta property="og:description" content="Balıkta Lezzetin Galata Hali">
<meta property="og:image" content="https://1b.dslink.co/resimler/kapak.jpg">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="1b.dslink.co">
<meta property="twitter:url" content="https://1b.dslink.co/">
<meta name="twitter:title" content="DemoLiveaaa bbgg cc ss">
<meta name="twitter:description" content="Balıkta Lezzetin Galata Hali">
<meta name="twitter:image" content="https://1b.dslink.co/resimler/kapak.jpg">

<link href='https://fonts.googleapis.com/css?family=Berkshire Swash' rel='stylesheet'>


  <link rel="stylesheet" href="lib\bootstrap\css\bootstrap.min.css">
  <link rel="stylesheet" href="css\normalize.css">
  <link rel="stylesheet" href="css\theme\themelibrary.css">
  <link rel="stylesheet" type="text/css" href="lib\slick\slick\slick.css">
  <link rel="stylesheet" type="text/css" href="lib\slick\slick\slick-theme.css">
  <link rel="stylesheet" href="lib\Magnific-Popup-master\dist\magnific-popup.css">
	
  





<style>
#custom-btn{display: none !important;}/*================================================



================================================*/



@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
  font-family: 'Poppins', sans-serif;
  background: #ffffff;
  font-size: 13px;
  color: #212529;
  max-width: 960px;
  margin: 0px auto;

  top: 0 !important; }

body a,
body a:hover {
  color: #212529;
  text-decoration: none; }


.image-change {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: 25px;
  height: 25px; }
  .image-change .awl-btn {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    display: table;
    background-color: #000000;
    border: 1px solid #f8f8f8;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.21);
    -moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.21);
    box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.21);
    cursor: pointer; }
  .image-change .awl-btn .awl-btn-icon {
    display: table-cell;
    vertical-align: middle;
    font-size: 20px;
    text-align: center;
    color:#141118; }
	
	
.btn {
  background-color: #141118;
  color: #ffffff; }

.btn:hover {
  color: #ffffff; }

img {
  max-width: 100%;
  max-height: 100%; }

.none {
  display: none; }

.clear {
  clear: both; }

.theme-button {
  background-color: #141118;
  padding: 5px 15px;
  color: #fff;
  cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: inline-block; }

.theme-button.medium {
  padding: 10px 15px; }

.line {
  width: 100%;
  height: 1px;
  background-color: #ddd; }

.theme-button-line {
  border: 1px solid #141118;
  background-color: transparent;
  padding: 3px 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-align: center;
  color: #141118; }

.theme-button:hover {
  background-color: #708a00; }

ul.slick-dots li button {
  width: 15px;
  height: 5px;
  background-color: #141118;
  padding: 0px;
  -webkit-border-radius: 90px;
  -moz-border-radius: 90px;
  border-radius: 90px;
  opacity: 0.3; }

ul.slick-dots li.slick-active button {
  opacity: 1; }

.slick-dots li {
  margin: 0px 0px !important;
  height: 15px !important; }
.slick-dots li button:before {
  font-size: 0px !important; }

.content-wrap {
  max-width: 100%;
  margin: 0 auto;
  min-height: calc(100vh - 156px);
  background-color: #ffffff;
  overflow: hidden; }

.no-margin-top {
  margin-top: 0px; }

.heading-page {
  font-size: 10px;
 
  padding: 10px 10px 10px 10px;
  position: relative;
  
  height: 70px; }
  .heading-page .icon-back {
    text-align: center;
    display: table;
    display: table-cell;
    vertical-align: middle;
    cursor: pointer; }
  .heading-page .back-btn {
    position: absolute;
    left: 0px;
    top: 0px;
   
    height: 50px;
    width: 40px;
    text-align: center;
    display: table; }

.share-button {
  margin-top: 20px; }
  .share-button ul {
    list-style: none;
    padding: 0px 0px; }
  .share-button li {
    display: inline-block;
    text-align: center; }
    .share-button li a {
      padding: 2px 5px;
      background-color: #141118;
      color: #ffffff;
      width: 35px;
      height: 35px;
      display: block;
	  font-size: 20px; }
      .share-button li a .svg-inline--fa {
        color: #ffffff; }
  .share-button li.text {
    font-weight: 600;
    padding-right: 5px; }

body .form-control:focus {
  border-color: #141118;
  outline: 0;
  -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0), 0 0 8px rgba(0, 0, 0, 0);
  box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0), 0 0 8px rgba(0, 0, 0, 0); }

.section-single-page {
  padding: 15px 15px; }

.img-news {
  margin: 0px 0px 10px; }

#content {
  width: 100%;
  
  min-height: calc(100vh - 56px);
  transition: all 0.3s;
  position: absolute;
  top: 56px;
  right: 0; }

#miknatissoft {
    text-align: center;
    padding: .8rem 0;
    font-size: 0.80rem;
    color: #141118;;
}

/*==================================================
2. PRELOADER
==================================================
.preloading {
  width: 100%;
  text-align: center;
  height: 100%;
  position: fixed;
  background: #ffffff;
  z-index: 999999;
  top: 0px;
  display: table;
  left: 0; }

.preloading .wrap-preload {
  background-color:;
  display: table-cell;
  text-align: center;
  vertical-align: middle; }

.preloading .cssload-loader {
  width: 49px;
  height: 49px;
  border-radius: 50%;
  margin: 3em;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  background: #ffffff; }

.preloading .cssload-loader,
.preloading .cssload-loader:before,
.preloading .cssload-loader:after {
  animation: 1.15s infinite ease-in-out;
  -o-animation: 1.15s infinite ease-in-out;
  -ms-animation: 1.15s infinite ease-in-out;
  -webkit-animation: 1.15s infinite ease-in-out;
  -moz-animation: 1.15s infinite ease-in-out; }

.preloading .cssload-loader:before,
.preloading .cssload-loader:after {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0; }

.preloading .cssload-loader {
  animation-name: cssload-loader;
  -o-animation-name: cssload-loader;
  -ms-animation-name: cssload-loader;
  -webkit-animation-name: cssload-loader;
  -moz-animation-name: cssload-loader; }

@keyframes cssload-loader {
  from {
    transform: scale(0);
    opacity: 1; }
  to {
    transform: scale(1);
    opacity: 0; } }
@-o-keyframes cssload-loader {
  from {
    -o-transform: scale(0);
    opacity: 1; }
  to {
    -o-transform: scale(1);
    opacity: 0; } }
@-ms-keyframes cssload-loader {
  from {
    -ms-transform: scale(0);
    opacity: 1; }
  to {
    -ms-transform: scale(1);
    opacity: 0; } }
@-webkit-keyframes cssload-loader {
  from {
    -webkit-transform: scale(0);
    opacity: 1; }
  to {
    -webkit-transform: scale(1);
    opacity: 0; } }
@-moz-keyframes cssload-loader {
  from {
    -moz-transform: scale(0);
    opacity: 1; }
  to {
    -moz-transform: scale(1);
    opacity: 0; } }
    */
/* ---------------------------------------------------
3. HEADER
----------------------------------------------------- */
.bg-header {
  z-index: 10;
  position: fixed !important;
  top: 0px;
  left: 0px;
  /* height: 56px; navbar uzunluğu değiştirme ayarı, navbar uzunluk*/
  width: 100%;
  background-color: #141118;
  border-bottom: 0px solid #ddd; }

.navbar {
  position: relative; }
  .navbar #sidebarleftbutton.btn,
  .navbar #sidebarrightbutton.btn {
    background-color: transparent;
    padding: 5px 5px;
    font-size: 28px;
    line-height: 0px;
    position: absolute;
    font-size: 20px; }
    
     .navbar #sidebarlefttbutton.btn {
    background-color: transparent;
top: 3px;
      left: 5px;
    font-size: 28px;
    line-height: 0px;
    position: absolute;
    font-size: 40px; }
  .navbar .btn:hover {
    color: #ffffff; }
  .navbar #sidebarleft.btn {
    left: 1rem; }
  .navbar #sidebarrightbutton.btn {
    right: 1rem; }
  .navbar .logo {
    height: 48px;
    width: 48px;
    margin: 0px 0px;
    font-size: 20px;
    font-weight: 800;
    width: 100%;
    text-align: center; }
  .navbar .logo,
  .navbar #sidebarleftbutton.btn,
  .navbar #sidebarrightbutton.btn {
    color: #ffffff; }
  .navbar .logo img {
    height: 100%;
    width: auto; }
  .navbar .logo .fa-pizza-slice {
    color: #ec7b00; }

.navbar-btn {
  box-shadow: none;
  outline: none !important;
  border: none; }

/* ---------------------------------------------------
4. SIDEBAR  
----------------------------------------------------- */
/*---------- Profile ----------*/
.sdprofile {
  background-color: rgba(255, 255, 255, 0.08);
  min-height: 100px;
  position: relative;
  padding-left: 100px; }
  .sdprofile .sdp-left {
    position: absolute;
    margin: 15px 10px 15px 20px;
    left: 0px;
    top: 0px; }
    .sdprofile .sdp-left img {
      width: 70px;
      height: 70px;
      overflow: hidden;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border-radius: 100%; }
  .sdprofile .sdp-right {
    padding: 20px 20px 0px 0px; }
    .sdprofile .sdp-right .sd-name {
      font-weight: 600;
      color: #141118; }

/*---------- Sidebar left ----------*/
.sidenav .fa-caret-down {
  color: #ffffff !important;
  margin: 5px 0px 0px !important;
  float: right; }

.sidenav .collapsible-body {
  padding: 0px 0px !important;
  background-color: rgba(255, 255, 255, 0.08); }
  .sidenav .collapsible-body a {
    padding: 5px 20px 5px 35px !important; }

.sidenav a,
.sidenav a:hover,
.sidenav a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s; }

.sidenav ul ul a {
  padding-left: 30px !important; }

.sidebar-header h3 {
  font-size: 20px;
  font-weight: 800; }

#sidebarleft {
  width: 250px;
  position: fixed;
  top: 0;
  left: -250px;
  height: 100vh;
  z-index: 999;
  background-color: #333333;
  color: #fff;
  transition: all 0.3s;
  overflow: auto; }
  #sidebarleft a,
  #sidebarleft a:hover {
    color: #ffffff; }
  #sidebarleft ul .svg-inline--fa {
    color: #141118; }
  #sidebarleft .svg-inline--fa {
    color: #ffffff; }

#sidebarleft .list-unstyled .fas,
#sidebarleft .list-unstyled .svg-inline--fa {
  font-size: 14px;
  margin-right: 5px; }

#sidebarleft.active {
  left: 0; }

#dismiss {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  position: absolute;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 26px; }

#sidebarleft #dismiss {
  top: 15px;
  right: 15px; }

#dismiss:hover {
  color: #ffffff; }

.overlay {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 998;
  opacity: 0;
  transition: all 0.5s ease-in-out; }

.overlay.active {
  display: none;
  opacity: 1; }

#sidebarleft .sidebar-header {
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  background-color: #141118; }

#sidebarleft ul {
  padding: 10px 0px; }

#sidebarleft ul li a {
  padding: 5px 20px;
  font-size: 1.1em;
  display: block; }

#sidebarleft ul li a:hover,
#sidebarright ul li a:hover {
  background-color: rgba(255, 255, 255, 0.07); }

#sidebarleft ul li.active > a,
a[aria-expanded="true"] {
  color: #fff; }

a[data-toggle="collapse"] {
  position: relative; }



/*---------- Sidebar right ----------*/
#sidebarright {
  width: 290px;
  position: fixed;
  top: 0;
  right: 0px;
  height: 100vh;
  z-index: 999;
  background-color: #333333;
  color: #fff;
  transition: all 0.3s;
  overflow: auto;
  right: -290px; }
  #sidebarright a,
  #sidebarright a:hover {
    color: #ffffff; }
  #sidebarright ul .svg-inline--fa {
    color: #141118; }
  #sidebarright .right-menu {
    padding: 10px 0px;
    border-top: 0px solid rgba(0, 0, 0, 0.3);
    margin-top: 0px; }
    #sidebarright .right-menu .right-menu-item {
      padding: 0px 0px; }
  #sidebarright ul li a {
    padding: 5px 15px;
    font-size: 1.1em;
    display: block; }
  #sidebarright ul li .fas,
  #sidebarright ul li .svg-inline--fa {
    font-size: 14px;
    margin-right: 5px;
    color: #141118; }
  #sidebarright .count {
    background-color: rgba(0, 0, 0, 0.07);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 0px 3px;
    font-size: 12px;
    display: inline-block;
    text-align: center;
    margin-left: 3px; }

#sidebarright #dismiss {
  top: 15px;
  left: 15px; }

#sidebarright .sidebar-header {
  padding: 20px;
  text-align: right;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18); }

#sidebarright.active {
  right: 0; }

.sidebar-header h3 {
  margin-bottom: 0px; }

.search-wrapper {
  margin: 0;
  padding: 10px 10px;
  color: #303030;
  position: relative; }

.search-wrapper input#search {
  display: block;
  font-weight: 300;
  width: 100%;
  height: 35px;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 45px 0 15px;
  border: 0;
  border: 0px solid #ffffff;
  -webkit-border-radius: 90px;
  -moz-border-radius: 90px;
  border-radius: 90px;
  background: #ffffff; }
.search-wrapper i.material-icons {
  position: absolute;
  top: 0px;
  right: 20px;
  cursor: pointer;
  color: #303030;
  line-height: auto;
  height: auto; }
.search-wrapper button.ssubmit {
  border: 0px solid #ffffff;
  background-color: transparent;
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 18px; }

/* ---------------------------------------------------
5. HOMEPAGE
----------------------------------------------------- */
#content {
  background-color: #f4f4f4;
  /*---------- Homepage Slider ----------*/ }
  #content .img-hero {
    margin-bottom: 10px;
    overflow: hidden; }
    #content .img-hero .slick-slide img {
      width: 100%;
      height: auto; }
  #content .img-hero ul.slick-dots {
    bottom: 20px; }
  #content .img-hero ul.slick-dots li {
    margin: 0px; }
  #content .img-hero ul.slick-dots li button {
    background-color: #ffffff; }
  #content .img-hero ul.slick-dots li button:before {
    color: #fff;
    font-size: 0px; }

.section-home {
  overflow: hidden;
  background-color: #ffffff;
  width: 95%;
  margin: 0 auto 15px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 20px 15px;
  -webkit-box-shadow: 0px 1px 9px 0px rgba(50, 50, 50, 0.13);
  -moz-box-shadow: 0px 1px 9px 0px rgba(50, 50, 50, 0.13);
  box-shadow: 0px 1px 9px 0px rgba(50, 50, 50, 0.13); }

.section-home .sa-title {
  color: #212529;
  font-size: 18px;  
 }
 .sa-title1 {
  color: #212529;
  font-size: 16px;
  font-family:gotham;
  border-left:2px solid green;
	border-bottom:2px solid green;
  width:42%;
  text-align: left;
 }

.section-home .heading-section {
  position: relative;
  margin-top: 0px; 
	}
	
  .section-home .heading-section .sa-title.popcat {
    width: 100%;
    line-height: 1;
    text-align: center;
    font-weight: 600;
	font-family:sans-serif;
	font-size:23px;
	}

.section-home .more-category {
  width: 100%;
  text-align: center;
  padding: 10px 0px 0px; }
  .section-home .more-category .mcbutton {
    position: relative;
    right: 0px;
    bottom: 0px;
    display: inline-block;
    font-size: 14px;
    font-weight: 600; }

.section-a {
  background: #fff;
  position: relative;
  z-index: 2;
  padding: 15px 15px; }

.section-home.s-category {
  position: relative; }

.home-category-list {
  margin-left: -5px;
  margin-right: -5px;
  margin-top: -10px;
 }
	
.home-category-list .home-box-content {
    position: relative;
    width: 100%;
    overflow: hidden;
    float: right;
    border: 5px solid #ffffff;
    border-radius: 10px;
	height:400px;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
	color: #000;
	margin-top: 10px;
	margin-right:2px;
	margin-bottom:10px;
	padding:2px;
}
      
  .home-category-list .home-box1-category {
    position: relative;
    width: 50%;
    height:250px;
    overflow: hidden;
    float: left;
    border: 5px solid #ffffff;
    border-radius: 10px; }
	
  .home-category-list .home-box-category {
    position: relative;
    width: 50%;
    height: 180px;
    overflow: hidden;
    float: left;
    border: 5px solid #ffffff;
    border-radius: 15px;
    margin-top: 5px;	
	}
  .home-category-list .home-text-category {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    text-align: center; 
	}
	.home-category-list .home-text-category .bc-text {
      word-break: break-word;
      display: table-cell;
      z-index: 2;
      vertical-align: middle;
      color: #fff;
      font-size: 18px;
      font-weight: 600;
      padding: 0px 20px;
      line-height: 1;
	bottom:20px
	right:20px}
  .home-category-list .home-image-category {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000; }
    .home-category-list .home-image-category img {
      opacity: 0.5;
      max-height: 100%;
      width: 100%;
      height: 400px;
      max-width: 100%;
	  
	  object-fit: cover;
	  object-position: center;
      
	  }
    .content1 {
  text-align: center;
  position: absolute;
  right: 0;
  font-family:open-sans-serif;
  color: #000;
  font-size: 15px; 
  margin-top:6px;
  margin-right:2px;  
  width:48%;
  height:42px;
  font-weight:700; 

    overflow: hidden;
   border-radius: 10px;
}
.content2 {
  text-align: center;
  position: absolute;
  right: 0;
  overflow: hidden;
  height:125px;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 122, 0.13) 0px 0px 1px 1px;
  color: #000;
  font-size: 15px;  
  margin-top:14px;
  margin-right:2px;
  width:48%;
  padding:2px;
  border-radius: 10px;
}
.content-box-main {
  
  position: absolute;
  right: 0;
  overflow: hidden;
  height:160px;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
  color: #000;
  font-size: 15px;  
  margin-top:5px;
  margin-right:10px;
  width:100%;
  padding:2px;
}

/*---------- Homepage You Might Like  ----------*/
.you-might-like {
  position: relative; }
  .you-might-like .slick-track {
    margin-left: -2.5px; }
  .you-might-like .heading-section .sa-title {
    width: 100% !important; }
  .you-might-like .slick-track {
    margin: 0px 0px; }
  .you-might-like .yml-box {
    width: 120px;
	position: relative;
  	}
  .you-might-like .yml-box .yml-img {
    overflow: hidden;
    margin: 0px 5px 0px 5px;
    border-radius: 10px;
	border: 1px solid #555;
    height: auto; }
    .you-might-like .yml-box .yml-img img {
      height: 160px;
      width: 100%;
      max-width: 99999%;
      border-radius: 10px;
      margin: 0 auto; }
  .you-might-like .yml-box .yml-food-text {
    padding: 10px 10px 0px;
    text-align: center;
    line-height: 1.2;
 }

/*---------- Homepage Author  ----------*/
.recipe-author .slick-track {
  margin-bottom: 10px; }
.recipe-author .slick-dotted.slick-slider {
  margin-bottom: 20px; }
.recipe-author .author-box {
  padding: 0px 0px;
  text-align: center; }
  .recipe-author .author-box .author-img {
    margin: 0 auto;
    width: 50px;
    height: 50px;
    -webkit-border-radius: 90px;
    -moz-border-radius: 90px;
    border-radius: 90px;
    overflow: hidden;
    padding: 2px;
    border: 2px solid #141118; }
    .recipe-author .author-box .author-img img {
      width: 100%;
      height: 100%;
      -webkit-border-radius: 90px;
      -moz-border-radius: 90px;
      border-radius: 90px; }
  .recipe-author .author-box .author-name {
    margin: 5px auto 0px;
    line-height: 1.2;
    font-size: 12px;
    padding: 0px 5px; }

/*---------- Homepage Banner  ----------*/
.section-home.home-banner {
  padding: 0px 0px; }
  .section-home.home-banner img {
    width: 100%;
    height: auto; }

/*---------- Homepage News ----------*/
.section-home.home-news .home-news-wrap .more-category {
  padding: 0px 0px; }
.section-home.home-news .home-news-wrap .news-item {
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
  margin-bottom: 15px; }
  .section-home.home-news .home-news-wrap .news-item .hnw-title {
    font-weight: 600; }
  .section-home.home-news .home-news-wrap .news-item .news-content {
    position: relative;
    width: 100%;
    padding-left: 120px;
    min-height: 70px; }
    .section-home.home-news .home-news-wrap .news-item .news-content .hnw-img {
      width: 100px;
      position: absolute;
      top: 0px;
      left: 0px;
      overflow: hidden;
      height: 100%; }
      .section-home.home-news .home-news-wrap .news-item .news-content .hnw-img img {
        height: auto;
        max-height: 99999px;
        width: 100%;
        border-radius: 10px; }
    .section-home.home-news .home-news-wrap .news-item .news-content .hnw-desc .more {
      color: #141118; }

/*==================================================
6. SUBSCRIBE
==================================================*/
.section-subscribe {
  position: relative;
  padding: 20px 20px;
  overflow: hidden; }
  .section-subscribe .subcontainer {
    z-index: 1;
    position: relative; }
    .section-subscribe .subcontainer .textsub {
      text-align: center; }
    .section-subscribe .subcontainer .section-title {
      font-weight: 600;
      text-align: center;
      font-size: 18px;
      margin-bottom: 5px; }
    .section-subscribe .subcontainer .submitsub {
      background-color: #141118;
      position: absolute;
      color: #ffffff;
      font-size: 18px;
      border: 1px solid #141118;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border-radius: 100%;
      padding: 4px 8px 0px 10px;
      right: 30px;
      top: 11px;
      cursor: pointer;
      width: 28px;
      height: 28px; }
  .section-subscribe .bg-subscribe {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0.2; }
  .section-subscribe .bg-subscribe img {
    width: 100%;
    height: auto;
    max-height: 999999px; }
  .section-subscribe .mail-subscribe-box {
    position: relative;
    padding-bottom: 35px;
    margin-top: 10px;
    padding: 0px 20px; }
  .section-subscribe .mail-subscribe-box input {
    color: #303030;
    border: 1px solid #141118;
    height: 50px;
    background: #ffffff;
    border-radius: 90px;
    margin-bottom: 0px;
    padding: 10px 50px 10px 20px;
    box-sizing: border-box; }
  .section-subscribe .mail-subscribe-box i {
    position: absolute;
    color: #141118;
    font-size: 18px;
    border: 1px solid #141118;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    padding: 4px 8px 4px 10px;
    right: 30px;
    top: 11px;
    cursor: pointer;
    width: 28px;
    height: 28px; }

/* ---------------------------------------------------
7. RECIPE LIST
----------------------------------------------------- */
.list-section {
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px 0px;
  background-color: #ffffff; }

.lrc-item:nth-child(even) {
  background-color: #f9f9f9; }

.wrap-list-rc .lrc-item {
  border-bottom: 1px solid #ddd;
  padding: 15px 15px; }
  .wrap-list-rc .lrc-item .lrc-content {
    position: relative;
    width: 100%;
    padding-left: 90px;
    min-height: 70px; }
    .wrap-list-rc .lrc-item .lrc-content .lrc-img {
      width: 80px;
      position: absolute;
      top: 5px;
      left: 0px;
      overflow: hidden;
      height: 100%; }
      .wrap-list-rc .lrc-item .lrc-content .lrc-img img {
        height: auto;
        max-height: 99999px;
        width: 100%;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; }
    .wrap-list-rc .lrc-item .lrc-content .lrc-desc .lrc-title {
      font-weight: 600; }
    .wrap-list-rc .lrc-item .lrc-content .lrc-desc .more {
      color: #141118; }
  .wrap-list-rc .lrc-item .lrc-button {
    color: #7b7b7b;
    max-width: 100%;
    margin: 10px auto 0px; }
    .wrap-list-rc .lrc-item .lrc-button .lrcb-left {
      float: left;
      width: 100%; }
      .wrap-list-rc .lrc-item .lrc-button .lrcb-left .lhc {
        padding-right: 8px; }
      .wrap-list-rc .lrc-item .lrc-button .lrcb-left .svg-inline--fa {
        font-size: 14px;
        padding-right: 0px;
        color: #7b7b7b; }
    .wrap-list-rc .lrc-item .lrc-button .lrcb-right {
      float: left;
      width: 50%; }

/* ---------------------------------------------------
8. FOOD RECIPE PAGE
----------------------------------------------------- */
.wrap-food-recipe .tab-detail-rcp {
  padding: 0px 0px; }
.wrap-food-recipe .recipe-description {
  padding: 15px 15px; }
  .wrap-food-recipe .recipe-description ul.list {
    padding: 0px 0px 0px 15px;
    margin-bottom: 10px 0px; }
  .wrap-food-recipe .recipe-description ul.list.list-number {
    list-style: binary; }
  .wrap-food-recipe .recipe-description .recp-heading {
    font-weight: 600; }
  .wrap-food-recipe .recipe-description .recp-detail {
    margin-bottom: 15px;
    padding-bottom: 0px;
    border-bottom: 0px solid #dee2e6; }
  .wrap-food-recipe .recipe-description .recp-directions {
    margin-bottom: 15px;
    padding-bottom: 0px;
    border-bottom: 0px solid #dee2e6; }
  .wrap-food-recipe .recipe-description .recp-ingredients {
    margin-bottom: 15px;
    padding-bottom: 0px;
    border-bottom: 0px solid #dee2e6; }
.wrap-food-recipe .heading-page {
  height: auto;
  font-size: 12px; }
.wrap-food-recipe .image-favourite { /* Ürüngörsell */ 
  position: relative; }
.wrap-food-recipe #food-recipe-image {
  margin-bottom: 0px;
  background-color: #f9f9f9; }
  .wrap-food-recipe #food-recipe-image .pgp-img img {
    width: 100%;
    height: auto; }
  .wrap-food-recipe #food-recipe-image .slick-dots {
    position: absolute;
    width: 100%;
    bottom: 0px;
    left: 0px;
    z-index: 3; }
    .wrap-food-recipe #food-recipe-image .slick-dots li button {
      background-color: #ffffff; }

.add-favourite {
  position: absolute;
  top: 20px;
  right: 50px;
  width: 50px;
  height: 50px; }
  .add-favourite .awl-btn { /* #ürünfiyatt renkk,colorr*/
    width: 75px;
    height: 50px;
    border-radius: 16px;
    display: table;
    background-color: #141118;  
    border: 1px solid #f8f8f8;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.21);
    -moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.21);
    box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.21);
    cursor: pointer; }
  .add-favourite .awl-btn .awl-btn-icon {
    display: table-cell;
    vertical-align: middle;
    font-size: 17px;
    font-weight: 700;
    padding-right: 5px;
    padding-left: 5px;
    text-align: center;
    /*color:#141118;*/
    color: #fff;
  }

.add-favourite .awl-btn.highlight .awl-btn-icon {
  color: #df0000; }

.rd-tab .tab-pane {
  padding: 15px 0px; }

.tab-comment {
  padding: 0px 0px; }
  .tab-comment .add-new-comment {
    margin-top: 0px;
    margin-bottom: 15px; }
    .tab-comment .add-new-comment .input.your-name {
      width: 100%;
      margin-bottom: 5px;
      padding: 5px 5px; }
    .tab-comment .add-new-comment .input.your-msg {
      width: 100%;
      margin-bottom: 10px;
      padding: 5px 5px;
      height: 70px;
      border: 1px solid #dee2e6; }
    .tab-comment .add-new-comment .theme-button.send-msg {
      border: 0px solid #333333;
      padding: 8px 10px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius: 0px; }
  .tab-comment .comment-list .section-comment {
    position: relative;
    padding-left: 40px;
    padding-bottom: 10px; }
    .tab-comment .comment-list .section-comment .comment-view-body {
      background-color: #fafafa;
      border: 1px solid #dee2e6;
      padding: 10px 10px; }
      .tab-comment .comment-list .section-comment .comment-view-body .cm-row .cm-img {
        overflow: hidden;
        width: 30px;
        height: 30px;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        position: absolute;
        left: 0px;
        top: 5px; }
      .tab-comment .comment-list .section-comment .comment-view-body .cm-row .cm-comment .cmc-heading {
        margin-bottom: 5px; }
        .tab-comment .comment-list .section-comment .comment-view-body .cm-row .cm-comment .cmc-heading .cm-hour {
          font-size: 12px;
          padding-top: 2px;
          margin-bottom: 0px;
          color: #949494; }

/* ---------------------------------------------------
9. AUTHOR
----------------------------------------------------- */
.author-list-section {
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px 0px;
  background-color: #ffffff; }
  .author-list-section .lrc-item:nth-child(even) {
    background-color: #f9f9f9; }
  .author-list-section .wrap-list-rc .lrc-item {
    border-bottom: 1px solid #ddd;
    padding: 15px 15px; }
    .author-list-section .wrap-list-rc .lrc-item .lrc-content {
      position: relative;
      width: 100%;
      padding-left: 60px;
      min-height: 60px; }
      .author-list-section .wrap-list-rc .lrc-item .lrc-content .lrc-img {
        width: 80px;
        position: absolute;
        top: 5px;
        left: 0px;
        -webkit-border-radius: 90%;
        -moz-border-radius: 90%;
        border-radius: 90%;
        overflow: hidden;
        width: 50px;
        height: 50px; }
        .author-list-section .wrap-list-rc .lrc-item .lrc-content .lrc-img img {
          height: auto;
          max-height: 99999px;
          width: 100%; }
      .author-list-section .wrap-list-rc .lrc-item .lrc-content .lrc-desc .lrc-title {
        font-weight: 600;
        color: #141118; }
      .author-list-section .wrap-list-rc .lrc-item .lrc-content .lrc-desc .more {
        color: #141118; }
    .author-list-section .wrap-list-rc .lrc-item .lrc-button {
      color: #7b7b7b;
      max-width: 100%;
      margin: 3px auto 0px; }
      .author-list-section .wrap-list-rc .lrc-item .lrc-button .lrcb-left {
        float: left;
        width: 100%; }
        .author-list-section .wrap-list-rc .lrc-item .lrc-button .lrcb-left .lhc {
          padding-right: 8px; }
        .author-list-section .wrap-list-rc .lrc-item .lrc-button .lrcb-left .svg-inline--fa {
          font-size: 14px;
          padding-right: 0px;
          color: #7b7b7b; }
      .author-list-section .wrap-list-rc .lrc-item .lrc-button .lrcb-right {
        float: left;
        width: 50%; }

/* ---------------------------------------------------
10. SETTING
----------------------------------------------------- */
.setting-section {
  padding: 25px 15px; }
  .setting-section .line {
    margin: 20px 0px; }
  .setting-section .submit-btn {
    margin-top: 20px;
    margin-bottom: 20px; }
  .setting-section .form-group {
    margin-bottom: 15px; }
  .setting-section .theme-button {
    padding: 10px 15px;
    border: 0px solid #000000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; }
  .setting-section .stname {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px; }
  .setting-section .avatar-photo {
    margin-bottom: 20px; }
    .setting-section .avatar-photo .upload-photo-text {
      display: block; }
    .setting-section .avatar-photo .upload-photo-text {
      margin: 10px 0px 0px; }
    .setting-section .avatar-photo .profile-img {
      width: 100px;
      height: 100px;
      overflow: hidden;
      -webkit-border-radius: 90%;
      -moz-border-radius: 90%;
      border-radius: 90%; }
      .setting-section .avatar-photo .profile-img img {
        width: 100%;
        height: 100%; }

/* ---------------------------------------------------
11. FEEDBACK (Nereyi etkiliyor bilinmiyor henüz)
----------------------------------------------------- */
.feedback-section {
  padding: 25px 15px; }
  .feedback-section .fb-text {
    margin-bottom: 20px; }
  .feedback-section .submit-btn {
    margin-top: 20px;
    margin-bottom: 20px; }
  .feedback-section .form-group {
    margin-bottom: 15px; }
  .feedback-section .theme-button {
    padding: 10px 15px;
    border: 0px solid #000000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; }
  .feedback-section .stname {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px; }
  .feedback-section .form-check-label a {
    color: #004a99;
    text-decoration: none; }
  .feedback-section .form-check-label a:hover {
    color: #004a99;
    text-decoration: underline; }

/* ---------------------------------------------------
12. NEW RECIPE 
----------------------------------------------------- */
.new-recipe-section {
  padding: 25px 15px; }
  .new-recipe-section .fb-text {
    margin-bottom: 25px; }
  .new-recipe-section .submit-btn {
    margin-top: 20px;
    margin-bottom: 20px; }
  .new-recipe-section .form-group {
    margin-bottom: 15px; }
  .new-recipe-section .theme-button {
    padding: 10px 15px;
    border: 0px solid #000000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top: 10px; }
  .new-recipe-section .stname {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px; }
  .new-recipe-section .form-check-label a {
    color: #004a99;
    text-decoration: none; }
  .new-recipe-section .form-check-label a:hover {
    color: #004a99;
    text-decoration: underline; }

/* ---------------------------------------------------
13. LOGIN
----------------------------------------------------- */
.login-section {
  padding: 25px 15px; }
  .login-section .wrap-line-or {
    margin: 30px 0px; }
  .login-section .or-line {
    position: relative; }
    .login-section .or-line .ol-or {
      display: block;
      text-align: center;
      background: #ffffff;
      width: 40px;
      margin: 0 auto;
      color: #9e9e9e;
      position: relative;
      z-index: 1;
      font-size: 12px; }
    .login-section .or-line .ol-line {
      height: 1px;
      width: 100%;
      background-color: #9e9e9e;
      position: absolute;
      top: 10px;
      left: 0px;
      z-index: 0; }
  .login-section .stt-form {
    max-width: 300px;
    margin: 0 auto; }
  .login-section .fb-text-heading {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
    color: #141118;
    margin-top: 10px; }
  .login-section .submit-btn {
    margin-top: 30px;
    margin-bottom: 20px;
    text-align: center; }
  .login-section .form-group {
    margin-bottom: 15px; }
  .login-section .theme-button {
    padding: 10px 20px;
    border: 0px solid #000000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; }
  .login-section .stname {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px; }
  .login-section .form-check-label a {
    color: #004a99;
    text-decoration: none; }
  .login-section .form-check-label a:hover {
    color: #004a99;
    text-decoration: underline; }
  .login-section .row-forgot {
    margin: 20px 0px;
    text-align: center; }
    .login-section .row-forgot a {
      color: #004a99; }
  .login-section .sign-in-sosmed {
    width: 130px;
    margin: 0px auto 0px; }
    .login-section .sign-in-sosmed .sign-in-icon {
      width: 45px;
      height: 45px;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border-radius: 100%;
      display: table;
      color: #ffffff;
      text-align: center;
      float: left;
      margin: 0px 10px;
      cursor: pointer; }
    .login-section .sign-in-sosmed .sign-in-icon.sii-facebook {
      background-color: #2f7abc; }
    .login-section .sign-in-sosmed .sign-in-icon.sii-tiktok {
      background-color: #00bbed; }
    .login-section .sign-in-sosmed .sign-in-icon .fa,
    .login-section .sign-in-sosmed .sign-in-icon .fab,
    .login-section .sign-in-sosmed .sign-in-icon .fas,
    .login-section .sign-in-sosmed .sign-in-icon .fal,
    .login-section .sign-in-sosmed .sign-in-icon .far,
    .login-section .sign-in-sosmed .icon-centerxy {
      display: table-cell;
      vertical-align: middle;
      font-size: 15px; }

/* ---------------------------------------------------
14. REGISTER
----------------------------------------------------- */
.register-section {
  padding: 25px 15px; }
  .register-section .form-check {
    text-align: center;
    margin-top: 20px; }
  .register-section .fb-text {
    text-align: center;
    margin-bottom: 20px; }
  .register-section .fb-text-heading {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
    color: #141118;
    margin-top: 10px; }
  .register-section .submit-btn {
    margin-top: 30px;
    margin-bottom: 20px;
    text-align: center; }
  .register-section .form-group {
    margin-bottom: 15px; }
  .register-section .theme-button {
    padding: 10px 15px;
    border: 0px solid #000000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0px 2px; }
  .register-section .stname {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px; }
  .register-section .form-check-label a {
    color: #004a99;
    text-decoration: none; }
  .register-section .form-check-label a:hover {
    color: #004a99;
    text-decoration: underline; }
  .register-section .row-forgot {
    text-align: center;
    margin: 20px 0px; }
    .register-section .row-forgot a {
      color: #004a99; }

/* ---------------------------------------------------
15. PAGINATION
----------------------------------------------------- */
.wrap-pagination {
  width: 100%;
  text-align: center; }
  .wrap-pagination .page-link {
    color: #212529; }
  .wrap-pagination .page-item.active .page-link {
    background-color: #141118;
    border-color: #141118;
    color: #ffffff; }
  .wrap-pagination .pagination {
    margin-bottom: 0px;
    display: table;
    width: 100%;
    padding: 15px 15px; }
    .wrap-pagination .pagination .page-item {
      width: auto;
      display: inline-block; }

/* ---------------------------------------------------
16. GALLERY
----------------------------------------------------- */
.gallery-section {
  padding: 15px 15px;
  margin-bottom: 15px; }
  .gallery-section .row-filter {
    margin-bottom: 5px; }
  .gallery-section .row-gallery {
    margin-left: -5px;
    margin-right: -5px; }
  .gallery-section .gall-row {
    width: 100%; }
  .gallery-section .gall-row-filter {
    width: 100%; }
  .gallery-section .gall-col {
    width: 50%;
    float: left;
    padding: 5px 5px; }
  .gallery-section .wrap-gallery img {
    width: 100%;
    height: 100%;
    border-radius: 10px; }
  .gallery-section .col {
    padding: 3px;
    margin: 0; }
  .gallery-section .filter-gallery {
    text-align: center; }
  .gallery-section .filter-button {
    color: #141118;
    background: transparent;
    border: 0px solid #ffffff;
    padding: 10px 10px;
    font-weight: 600;
    margin-bottom: 5px;
    border: 1px solid #cecece; }
  .gallery-section .filter-button.active {
    color: #708a00; }
  .gallery-section .gallery-img-box,
  .gallery-section .gallery-img-box * {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out; }
  .gallery-section .gallery-img-box.gallery-hidden {
    display: none; }

/* ---------------------------------------------------
17. NEWS LIST
----------------------------------------------------- */
.section-news-list .home-news-wrap {
  padding: 15px 15px 0px; }
  .section-news-list .home-news-wrap .news-item {
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 15px; }
    .section-news-list .home-news-wrap .news-item .hnw-title {
      font-weight: 600; }
    .section-news-list .home-news-wrap .news-item .news-content {
      position: relative;
      width: 100%;
      padding-left: 120px;
      min-height: 70px; }
      .section-news-list .home-news-wrap .news-item .news-content .hnw-img {
        width: 100px;
        position: absolute;
        top: 0px;
        left: 0px;
        overflow: hidden;
        height: 100%; }
        .section-news-list .home-news-wrap .news-item .news-content .hnw-img img {
          height: auto;
          max-height: 99999px;
          width: 100%; }
      .section-news-list .home-news-wrap .news-item .news-content .hnw-desc .more {
        color: #141118; }

.news-list-page-section .wrap-pagination .pagination {
  padding: 0px 15px 15px; }

/* ---------------------------------------------------
18. FAVORITES
----------------------------------------------------- */
.favorites .lrc-content {
  padding-right: 35px; }
.favorites .add-favourite {
  width: 30px;
  height: 30px;
  right: 0px;
  top: 0px; }
  .favorites .add-favourite .awl-btn {
    height: 30px;
    width: 30px;
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    border: 1px solid #ddd; }
  .favorites .add-favourite .svg-inline--fa {
    font-size: 16px; }

/* ---------------------------------------------------
19. NEWS
----------------------------------------------------- */
.section-news-page {
  padding: 15px 15px; }
  .section-news-page .news-content {
    margin-top: 10px; }
  .section-news-page .tab-comment {
    margin-top: 20px; }

/* ---------------------------------------------------
20. PROFILE
----------------------------------------------------- */
.section-profile {
  position: relative; }
  .section-profile .wrap-pro {
    position: relative;
    overflow: visible; }
  .section-profile .cf-heading {
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    margin: 30px 0px 10px; }
  .section-profile .banner-bg {
    height: 100px; }
    .section-profile .banner-bg img {
      width: 100%;
      height: auto;
      max-height: 99999999px;
      margin-top: -30px; }
  .section-profile .photo-profile {
    padding: 0px 15px;
    margin-top: -70px;
    text-align: center; }
    .section-profile .photo-profile img {
      height: 100px;
      overflow: hidden;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border-radius: 100%;
      border: 5px solid #fff; }
  .section-profile .proname {
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    margin: 10px 0px 0px;
    color: #141118; }
  .section-profile .proname-info {
    text-align: center; }
  .section-profile .pro-des {
    padding: 20px 0px 10px;
    text-align: center; }
  .section-profile .line {
    margin: 15px 0px; }
  .section-profile .content-from .lrc-item:nth-child(even) {
    background-color: #f9f9f9; }
  .section-profile .content-from .wrap-list-rc .lrc-item {
    border-bottom: 1px solid #ddd;
    padding: 15px 15px; }
    .section-profile .content-from .wrap-list-rc .lrc-item .lrc-content {
      position: relative;
      width: 100%;
      padding-left: 90px;
      min-height: 70px; }
      .section-profile .content-from .wrap-list-rc .lrc-item .lrc-content .lrc-img {
        width: 80px;
        position: absolute;
        top: 5px;
        left: 0px;
        overflow: hidden;
        height: 100%; }
        .section-profile .content-from .wrap-list-rc .lrc-item .lrc-content .lrc-img img {
          height: auto;
          max-height: 99999px;
          width: 100%;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px; }
      .section-profile .content-from .wrap-list-rc .lrc-item .lrc-content .lrc-desc .lrc-title {
        font-weight: 600; }
      .section-profile .content-from .wrap-list-rc .lrc-item .lrc-content .lrc-desc .more {
        color: #141118; }
    .section-profile .content-from .wrap-list-rc .lrc-item .lrc-button {
      color: #7b7b7b;
      max-width: 100%;
      margin: 10px auto 0px; }
      .section-profile .content-from .wrap-list-rc .lrc-item .lrc-button .lrcb-left {
        float: left;
        width: 100%; }
        .section-profile .content-from .wrap-list-rc .lrc-item .lrc-button .lrcb-left .lhc {
          padding-right: 8px; }
        .section-profile .content-from .wrap-list-rc .lrc-item .lrc-button .lrcb-left .svg-inline--fa {
          font-size: 14px;
          padding-right: 0px;
          color: #7b7b7b; }
      .section-profile .content-from .wrap-list-rc .lrc-item .lrc-button .lrcb-right {
        float: left;
        width: 50%; }
  .section-profile .socmed {
    text-align: center;
    width: 100%;
    margin-top: 10px; }
    .section-profile .socmed .socmed-line {
      display: inline-block; }
      .section-profile .socmed .socmed-line .socmed-item {
        width: 25px;
        height: 25px;
        display: table;
        text-align: center;
        color: #ffffff;
        background-color: #141118;
        -webkit-border-radius: 90%;
        -moz-border-radius: 90%;
        border-radius: 90%;
        font-size: 10px;
        padding: 0px 0px; }
        .section-profile .socmed .socmed-line .socmed-item .si-icon {
          display: table-cell;
          vertical-align: middle; }
  .section-profile .probox {
    background-color: #f9f9f9;
    margin: 20px -15px;
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf; }
    .section-profile .probox .bx-col {
      width: 33.33%;
      float: left;
      text-align: center;
      height: 80px;
      display: table; }
      .section-profile .probox .bx-col .bx-col-in {
        display: table-cell;
        vertical-align: middle; }
  .section-profile .border-center {
    border-left: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf; }
  .section-profile .count {
    color: #141118;
    font-weight: 600;
    font-size: 18px; }

/*==================================================
21. 404 PAGE
==================================================*/
.error-page {
  text-align: center;
  width: 100%;
  padding-bottom: 100%;
  height: 0px;
  position: relative;
  height: calc( 100vh - 156px); }
  .error-page h1 {
    margin: 0px 0px;
    font-size: 58px;
    font-weight: 600; }
  .error-page .in-error-page {
    width: 100%;
    height: 100%;
    position: absolute;
    display: table; }
  .error-page .in-error-page .in-in-error-page {
    display: table-cell;
    vertical-align: middle;
    text-align: center; }

/* ---------------------------------------------------
22. FOOTER
----------------------------------------------------- */
.footer {
  padding: 20px 35px;
  height: 100%;
  background-color: #141118;
  text-align: center;
  color: #ffffff; }
  
  .footer .footer-heading {
    font-weight: 600;
    margin-bottom: 10px; }
    
    .footerlogo {
        padding: 5px 5px;
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;}
    
  .footer .socmed {
    text-align: center;
    width: 100%; }
    .footer .socmed .socmed-line {
      display: inline-block; }
      .footer .socmed .socmed-line .socmed-item {
        width: 42px;
        height: 42px;
        display: table;
        text-align: center;
        color: #141118;
        background-color: #ffffff;
        -webkit-border-radius: 90%;
        -moz-border-radius: 90%;
        border-radius: 90%;
        font-size: 16px;
        padding: 0px 0px; }
        .footer .socmed .socmed-line .socmed-item .si-icon {
          display: table-cell;
          vertical-align: middle;
          color: #141118; }

/*==================================================
23. PREVIEW
==================================================*/
body.preview {
  background-color: #ffffff;
  background-size: 120% auto; }
  body.preview .container {
    max-width: 1300px; }
  body.preview .wrap-qr {
    margin-top: 20px; }
  body.preview .description {
    margin: 10px auto 30px;
    text-align: justify;
    padding: 0px 0px 0px 10px; }
  body.preview .your-mobile {
    text-align: center;
    font-size: 16px;
    max-width: 300px;
    margin: 20px auto 0px; }
  body.preview .container {
    position: relative;
    z-index: 2; }
  body.preview .here {
    background-color: #141118;
    color: #ffffff;
    padding: 5px 15px;
    -webkit-border-radius: 90px;
    -moz-border-radius: 90px;
    border-radius: 90px;
    display: inline-block;
    margin: 10px; }
  body.preview .pr-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    width: 100%; }
    body.preview .pr-bg img {
      width: 100%;
      height: auto; }
  body.preview .wrapper {
    max-width: 953px;
    margin: 50px auto; }
  body.preview .pr-title {
    background: #fff;
    display: inline-block;
    padding: 0px 20px;
    font-size: 40px;
    font-weight: 800;
    color: #141118; }
  body.preview .pr-tagline {
    background: #fff;
    display: inline-block;
    font-size: 27px; }
  body.preview .content-left {
    max-width: 410px;
    float: left; }
  body.preview .content-left .mobileframe {
    float: left;
    position: relative;
    border-radius: 30px;
    border-top: 5px solid #ffffff;
    border-right: 5px solid #ffffff;
    border-bottom: 5px solid #ffffff;
    border-left: 5px solid #ffffff;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.5);
    box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.5); }
  body.preview .buy-now .bn {
    background: #141118;
    color: #ffffff;
    font-weight: 600;
    padding: 10px 30px;
    display: inline-block;
    margin: 20px 0px 0px;
    border-radius: 90px;
    cursor: pointer; }
  body.preview .buy-now .bn:hover {
    background-color: #708a00; }
  body.preview .content-left .mobileframe .preview-mobile-frame {
    background-color: #ffffff;
    overflow: hidden; }
  body.preview .content-left .mobileframe,
  body.preview .content-left .mobileframe .mobile-frame-bg,
  body.preview .content-left .mobileframe .preview-mobile-frame #previewFrame,
  body.preview .content-left .mobileframe .preview-mobile-frame {
    height: 700px;
    width: 369px;
    box-sizing: unset; }
  body.preview .content-left .mobileframe .preview-mobile-frame #previewFrame {
    position: relative;
    margin: 0px;
    border: none;
    background: none;
    overflow-y: scroll;
    overflow-x: hidden; }
  body.preview .content-right {
    float: right;
    text-align: center;
    width: 488px; }
  body.preview .content-right .in-r {
    width: 100%;
    text-align: center;
    margin-top: 30px; }
  body.preview .content-right h1 {
    font-weight: 600;
    margin-bottom: 0px; }
  body.preview .content-right p {
    margin-bottom: 40px; }
  body.preview .themestyle {
    max-width: 60px;
    float: left; }
    body.preview .themestyle .iframebutton {
      cursor: pointer;
      width: 30px;
      height: 30px;
      display: inline-block;
      -webkit-border-radius: 90px;
      -moz-border-radius: 90px;
      border-radius: 90px;
      border: 2px solid #ffffff; }
    body.preview .themestyle #preview-red {
      background-color: #b70021; }
    body.preview .themestyle #preview-green {
      background-color: #141118; }
    body.preview .themestyle #preview-orange {
      background-color: #dda900; }
    body.preview .themestyle #preview-blue {
      background-color: #00a2dd; }
    body.preview .themestyle #preview-blue-sea {
      background-color: #4200ff; }
    body.preview .themestyle #preview-green-leaf {
      background-color: #2e8843; }
    body.preview .themestyle #preview-purple {
      background-color: #7d17d3; }
    body.preview .themestyle #preview-black {
      background-color: #000000; }
    body.preview .themestyle #preview-brown {
      background-color: #825200; }
    body.preview .themestyle #preview-pink {
      background-color: #c82872; }
    body.preview .themestyle .ctc {
      margin: 60px 0px 10px;
      font-weight: 600;
      font-size: 12px; }

@media only screen and (max-width: 450px) {
  .content-left .mobileframe,
  .content-left .mobileframe .mobile-frame-bg,
  .content-left .mobileframe .preview-mobile-frame #previewFrame,
  .content-left .mobileframe .preview-mobile-frame {
    height: 700px;
    width: 100%;
    box-sizing: unset; } }
body.preview.foodkuy-red .pr-title {
  color: #b70021; }

body.preview.foodkuy-orange .pr-title {
  color: #dda900; }

body.preview.foodkuy-blue .pr-title {
  color: #00a2dd; }

body.preview.foodkuy-blue-sea .pr-title {
  color: #4200ff; }

body.preview.foodkuy-green-leaf .pr-title {
  color: #2e8843; }

body.preview.foodkuy-purple .pr-title {
  color: #7d17d3; }

body.preview.foodkuy-black .pr-title {
  color: #000000; }

body.preview.foodkuy-brown .pr-title {
  color: #825200; }

body.preview.foodkuy-pink .pr-title {
  color: #c82872; }

@media only screen and (max-width: 767px) {
  body.preview .themestyle {
    width: 100% !important;
    position: relative !important; }
  body.preview .wrapper {
    margin-top: 0px !important;
    padding-left: 0px !important; }
    body.preview .wrapper .ctc {
      margin-top: 0px !important; }
    body.preview .wrapper .description {
      padding: 0px 0px !important; }
  body.preview .content-left,
  body.preview .content-right {
    width: 100%;
    margin: 0 auto;
    float: unset; }
  body.preview .content-left {
    padding-right: 15px !important;
    padding-left: 15px !important;
    max-width: 410px;
    margin: 0 auto;
    float: unset;
    display: block; }
    body.preview .content-left .mobileframe {
      width: 100% !important;
      box-sizing: border-box; }
  body.preview .content-right {
    padding-left: 0px !important;
    padding-right: 0px !important;
    float: left;
    width: 100% !important; }
  body.preview .description {
    width: 100%;
    margin: 0px 0px;
    max-width: 100%; }
  body.preview .content-right .in-r {
    text-align: left; }
  body.preview .pr-title {
    padding: 0px 0px 0px 0px;
    width: 100%;
    text-align: center; }
  body.preview .your-mobile {
    text-align: center;
    max-width: 100%; }
  body.preview .pr-tagline {
    line-height: 1.2;
    margin-bottom: 20px;
    width: 100%;
    text-align: center; }
  body.preview .content-right .in-in-r {
    margin-top: 30px; }
  body.preview .themestyle {
    max-width: 100%;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    float: left;
    margin-top: 20px;
    padding-left: 0px !important; }
  body.preview .wrap-qr {
    text-align: center; } }
@media only screen and (max-width: 410px) {
  body.preview .content-left .mobileframe {
    width: 100% !important;
    box-sizing: border-box; }
    body.preview .content-left .mobileframe .preview-mobile-frame {
      width: 100% !important; }
      body.preview .content-left .mobileframe .preview-mobile-frame #previewFrame {
        width: 100%; } }
@media only screen and (max-width: 956px) {
  body.preview .wrapper {
    max-width: 99999px;
    margin: 50px auto;
    width: 100%;
    position: relative;
    padding-left: 50px; }
    body.preview .wrapper .content-right {
      padding: 0px 20px 0px 30px;
      width: calc( 100% - 379px ); }
  body.preview .themestyle {
    width: 50px;
    position: absolute;
    padding-left: 5px;
    left: 0px;
    top: 0px; }
  body.preview .content-left .mobileframe {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    border-top: 5px solid #dbdbdb;
    border-right: 5px solid #dbdbdb;
    border-bottom: 5px solid #dbdbdb;
    border-left: 5px solid #dbdbdb; } }

.valueOfButton img {
	opacity: 1;
}

.selector {
  position: absolute;
  right: 3rem;
  display: block;
  text-align: left;
  margin-top: 0;
  top: 0;
}

.selector img {
	width: 60px;
}

.selector__toggle {
  display: block;
  background-color: transparent;
  max-height: 55px;
  color: white;
  text-decoration: none;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  padding: 10px 15px 10px 5px;
}
.selector__toggle i {
  float: right;
  position: relative;
  top: 0.2em;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.open .selector__toggle i {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.selector__toggle:hover, .selector__toggle:focus {
  color: white;
}

.selector__list {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #7090cd;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
.open .selector__list {
  display: block;
}
.selector__list li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 10px 15px 10px 5px;
	max-height: 55px;
  background-color: #07bdc0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.selector__list li:hover a, .selector__list li:focus a, .selector__list li.selected a {
  background-color: #56c022;
}

.skiptranslate {
	display: none !important;
}
.favoriurunfiyati{
  position:relative;
  padding-right:5px;
  padding-left:5px;
  padding-top:3px;
  padding-bottom:3px;
  top:1px;
  right:2px;
  z-index:1;
  background-color:rgba(242, 242, 242, 0.7) /*#F2F2F2#F2B705*/;
  color: #000000;
  margin-right:5px;
  font-size:15px;

}
.urunfiyati{
  position:absolute;
  padding-right:10px;
  padding-left:10px;
  padding-top:6px;
  padding-bottom:6px;
  top:5px;
  right:1px;
  z-index:1;
  background-color:rgba(242, 242, 242, 0.7) /*#F2F2F2#F2B705*/;
  color: #000000;
  margin:5px;
  font-size:15px;

}
	

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.dropdown{
    position: absolute;
    display: block;
    text-align: left;
    right: 2.5rem;
	top: 10px;
	padding: 5px;
	margin-top: 0;

}	

	
.dropdown-menu.show{
  font-size: 14px;
  top: 51px;
  padding: 5px;
  display: block;
  margin: auto;
}
	
	
.notranslate{
    position: absolute;
    right: 6rem;
    display: block;
    text-align: left;
    margin-top: 5px;
    top: 0;
}

.notranslate img{
	width: 48px;
	}

.btn-arama{
	padding: 5px;
    top: 10px;
    position: absolute;
    right: 2.5rem;
    display: block;
    text-align: left;
    margin-top: 0;
}	

.navbar #sidebarlefttbutton.btn {
	font-size: 32px;
	margin-top: 5px;
}	
	
.btn-duzenle{
		
	float:right;
	background-color:#12c9ff;
	border:#12c9ff;									
}






/*# sourceMappingURL=theme.css.map */
/* Desktops and laptops ----------- */

@media only screen and (min-width : 720px) {

  .home-category-list .home-box-category {
    position: relative;
    width: 50%;
    height: 400px;
    overflow: hidden;
    float: left;
    border: 5px solid #ffffff;
    font-size: 30px;
    border-radius: 10px;
  }
	}

  @media only screen and (max-width: 576px) {
	.navbar .logo {
		padding: 5px 10px;
		text-align: left;
		margin-left: 70px;
		display: block;
  }
  .you-might-like .yml-box .yml-img img {
    height: 90px;
    width: 100%;
    max-width: 500%;
    border-radius: 10px;
    margin: 0 auto; 
  }
}

@media only screen {
  .you-might-like .yml-box .yml-img img {
    height: 90px;
    width: 100%;
    max-width: 500%;
    border-radius: 10px;
    margin: 0 auto; 
  }
}

@media only screen and (min-height: 576px) {
  .vertical-hidden{
    display: none;
}
}
@media only screen and (max-width: 410px) {
  .logo img {
    margin-left: -20px; /* Sola yaslamak için margin-left değerini ayarlar */
}
}
@media only screen and (max-width: 361px) {
  .logo img {
    margin-left: -85px; /* Sola yaslamak için margin-left değerini ayarlar */
}
#sidebarlefttbutton {
  display: none;
}
}
/* FIYAT CSS */
  /* @media only screen and (max-width: 400px) { 
    
    .badge{
      display: none;
    }
  } */

@media only screen and (max-height: 576px) and (min-width: 376px) { /* YATAY MOD CSS */

	.navbar {
		display: none;
  }
  .fixed-bottom{
    display: none;
  }

  img {
    max-width: 290px;
    max-height: 290px;
  }

  .landscape-hidden{
    display: none;
  }

  .landscpae-visible{
    display: block;
  }

  /* ---------------------------------------------------
8. FOOD RECIPE PAGE
----------------------------------------------------- */
.wrap-food-recipe .tab-detail-rcp {
  padding: 0px 0px; }
.wrap-food-recipe .recipe-description {
  padding: 15px 15px; }
  .wrap-food-recipe .recipe-description ul.list {
    padding: 0px 0px 0px 15px;
    margin-bottom: 10px 0px; }
  .wrap-food-recipe .recipe-description ul.list.list-number {
    list-style: binary; }
  .wrap-food-recipe .recipe-description .recp-heading {
    font-weight: 600; }
  .wrap-food-recipe .recipe-description .recp-detail {
    margin-bottom: 15px;
    padding-bottom: 0px;
    border-bottom: 0px solid #dee2e6; }
  .wrap-food-recipe .recipe-description .recp-directions {
    margin-bottom: 15px;
    padding-bottom: 0px;
    border-bottom: 0px solid #dee2e6; }
  .wrap-food-recipe .recipe-description .recp-ingredients {
    margin-bottom: 15px;
    padding-bottom: 0px;
    border-bottom: 0px solid #dee2e6; }
.wrap-food-recipe .heading-page {
  height: auto;
  font-size: 12px; }
.wrap-food-recipe .image-favourite {
  /* Default styles */
  position: relative;
  width: 100%; /* Adjust width to be responsive */
  height: %10; /* Maintain aspect ratio */
}



.wrap-food-recipe #food-recipe-image {
  margin-bottom: 0px;
  background-color: #f9f9f9; }
  .wrap-food-recipe #food-recipe-image .pgp-img img {
    width: 100%;
    height: auto; }
  .wrap-food-recipe #food-recipe-image .slick-dots {
    position: relative;
    width: 100%;
    bottom: 0px;
    left: 0px;
    z-index: 3; }
    .wrap-food-recipe #food-recipe-image .slick-dots li button {
      background-color: #ffffff; }

.add-favourite {
  position: absolute;
  top: 20px;
  right: 6.8rem;
  width: 50px;
  height: 50px; }
  .add-favourite .awl-btn { /* #ürünfiyatt */
    width: 75px;
    height: 50px;
    border-radius: 16px;
    display: table;
    background-color: #B70404;
    border: 1px solid #f8f8f8;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.21);
    -moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.21);
    box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.21);
    cursor: pointer; }
  .add-favourite .awl-btn .awl-btn-icon {
    display: table-cell;
    vertical-align: middle;
    font-size: 17px;
    font-weight: 700;
    padding-right: 5px;
    padding-left: 5px;
    text-align: center;
    /*color:#141118;*/
    color: #fff;
  }

.add-favourite .awl-btn.highlight .awl-btn-icon {
  color: #df0000; }

.rd-tab .tab-pane {
  padding: 15px 0px; }

.tab-comment {
  padding: 0px 0px; }
  .tab-comment .add-new-comment {
    margin-top: 0px;
    margin-bottom: 15px; }
    .tab-comment .add-new-comment .input.your-name {
      width: 100%;
      margin-bottom: 5px;
      padding: 5px 5px; }
    .tab-comment .add-new-comment .input.your-msg {
      width: 100%;
      margin-bottom: 10px;
      padding: 5px 5px;
      height: 70px;
      border: 1px solid #dee2e6; }
    .tab-comment .add-new-comment .theme-button.send-msg {
      border: 0px solid #333333;
      padding: 8px 10px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius: 0px; }
  .tab-comment .comment-list .section-comment {
    position: relative;
    padding-left: 40px;
    padding-bottom: 10px; }
    .tab-comment .comment-list .section-comment .comment-view-body {
      background-color: #fafafa;
      border: 1px solid #dee2e6;
      padding: 10px 10px; }
      .tab-comment .comment-list .section-comment .comment-view-body .cm-row .cm-img {
        overflow: hidden;
        width: 30px;
        height: 30px;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        position: absolute;
        left: 0px;
        top: 5px; }
      .tab-comment .comment-list .section-comment .comment-view-body .cm-row .cm-comment .cmc-heading {
        margin-bottom: 5px; }
        .tab-comment .comment-list .section-comment .comment-view-body .cm-row .cm-comment .cmc-heading .cm-hour {
          font-size: 12px;
          padding-top: 2px;
          margin-bottom: 0px;
          color: #949494; }

  .landscape-details {
  position: absolute;
  top: 5rem;
  right: 6rem;
  width: 320px;
  height: 60px;
  padding-bottom: 10px; 
}
  .landscape-details p{
    padding-right: 1rem;
    margin-top: 6px;
}
}

.devsecure-copy{
  margin-right: 1rem;
  background-color: black;
}


</style>  <link rel="stylesheet" href="../custom/custom.css" type="text/css">
   <!-- Ayarlardan aldığımız Dinamik renkler için css dosyamızı php olarak tanımlıyoruz  -->

<style>
.home-box-category .home-text-category .bc-text {
    color: #ffffff;
    font-size: 16;
    background: #000000; 
}

.home-box-category .home-text-category .urun-text {
    color: #ffffff;
    font-size: 16;
    background: #000000;
}

.dropdown-menu-right {
  min-width: max-content;
}
/* Dropdown menüdeki tüm <li> elemanlarını tıklanabilir hale getirmek için */
#sidebarrightbutton1 li {
    display: block;
    cursor: pointer; /* İmleci pointer yapıyoruz */
    padding: 20px; /* Tıklanabilir alanı genişletmek için padding ekliyoruz */
}

/* <a> etiketini tüm <li> elemanını kaplayacak şekilde genişletmek için */
#sidebarrightbutton1 li a {
    display: block;
    width: 120%; /* Genişliği tam olarak kaplar */
    height: 100%; /* Yüksekliği de tam olarak kaplar */
    text-decoration: none; /* Alt çizgiyi kaldırır */
}

/* Üzerine gelindiğinde arka plan rengini değiştirmek için */
#sidebarrightbutton1 li:hover {
    background-color: #f0f0f0; /* İstediğiniz bir arka plan rengini seçebilirsiniz */
}


</style>
  





<!DOCTYPE html>
<html>
<head>
    <style>
        #toast {
            visibility: hidden;
            min-width: 250px;
            margin-left: -125px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 2px;
            padding: 16px;
            position: fixed;
            z-index: 1;
            left: 50%;
            bottom: 30px;
            font-size: 17px;
        }
        #toast.show {
            visibility: visible;
            animation: fadein 0.5s, fadeout 0.5s 2.5s;
        }
        @keyframes fadein {
            from {bottom: 0; opacity: 0;}
            to {bottom: 30px; opacity: 1;}
        }
        @keyframes fadeout {
            from {bottom: 30px; opacity: 1;}
            to {bottom: 0; opacity: 0;}
        }
    </style>
</head>
<body>
<div id="toast"></div>


</body>
</html>
  <!-- Eski Font Awesome sürümü -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css" />

  <!-- Eski Font Awesome sürümü -->
  <!-- <script defer="" src="lib\fontawesome-free-5.10.2-web\js\fontawesome.js"></script> 
  <script defer="" src="lib\fontawesome-free-5.10.2-web\js\brands.js"></script> 
  <script defer="" src="lib\fontawesome-free-5.10.2-web\js\solid.js"></script>  -->

</head>

<body class="default">

  <div class="wrapper">

    <nav id="sidebarright" class="sidenav">
      <div id="dismiss">
        <i class="fas fa-times"></i>
      </div>

      <!-- menü kısmında arama kısmını açınca çıkan başlık -->
      <div class="sidebar-header">
        <h3>Ne İstersiniz?</h3>
      </div>


      <div class="search-form">
        <!-- navbar kısmında arama kısmı açılınca çıkan yan menü   -->
        <form action="arama.php">
          <div class="search-wrapper ">
            <input  type="text" name="arama" id="search">
            <!-- navbar arama butonu, ARAMA EYLEMİ GERÇEKLEŞTİRİLDİĞİ YER #Searchh,findd -->
            <button class="ssubmit" type="submit"><i class="fas fa-search"></i></button>
          </div>
        </form>

        <a href="javascript:void(0);" id="expand" style="position: absolute; right: 25px;margin-top: 5px;">Tümünü Genişlet</a>
        <ul class="right-menu">
          <li class="right-menu-item">
            
          <li class="right-menu-item"><a href="#bowl" data-toggle="collapse" aria-expanded="false"><i class="fas fa-plus"></i> BOWL <span></i></span></a>
          </li>

          <ul class="collapse collapsible-body" id="bowl">
          

             
                  
                    <li class="right-menu-item"><a href="#makarnalar" data-toggle="collapse" aria-expanded="false"><i class="fas fa-plus"></i> MAKARNALAR <span></i></span></a></li>
                    <ul class="collapse collapsible-body" id="makarnalar">
                                      <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="pennearabiata2">PENNE ARABIATA! - 225₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="spagettibolognese">SPAGETTI BOLOGNESE - 275₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="porcinnimantarlirisotto">PORCINNI MANTARLI RISOTTO - 370₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="cikolatalisuffle2">Çikolatalı Suffle - 125₺</a>

                  
                </li>

            
                    </ul>
                                <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="test-202">test 20 - 30₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="tavuklubowl">TAVUKLU BOWL - 250₺</a>

                  
                </li>

                      </ul>
      
          <li class="right-menu-item"><a href="#detox" data-toggle="collapse" aria-expanded="false"><i class="fas fa-plus"></i> DETOX <span></i></span></a>
          </li>

          <ul class="collapse collapsible-body" id="detox">
          

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="carroty">CARROTY - 23₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="beetpotion">BEET POTION - 600₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="detoxpower2">Detox Power - 195₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="detox-refresh">Detox Refresh - 195₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="detoxgreen2">DETOX GREEN - 195₺</a>

                  
                </li>

                      </ul>
      
          <li class="right-menu-item"><a href="#banquet" data-toggle="collapse" aria-expanded="false"><i class="fas fa-plus"></i> BANQUET <span></i></span></a>
          </li>

          <ul class="collapse collapsible-body" id="banquet">
          

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="banquet-equipment-kirasi">BANQUET EQUİPMENT KİRASI - 1₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="banquet-alkollu-icecekler">BANQUET ALKOLLÜ İÇECEKLER - 1₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="banquet-salon-kirasi">BANQUET SALON KİRASI - 1₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="banquet-yiyecek">BANQUET YİYECEK - 1₺</a>

                  
                </li>

                      </ul>
      
          <li class="right-menu-item"><a href="#baslangic" data-toggle="collapse" aria-expanded="false"><i class="fas fa-plus"></i> BAŞLANGIÇ <span></i></span></a>
          </li>

          <ul class="collapse collapsible-body" id="baslangic">
          

             
                  
                    <li class="right-menu-item"><a href="#ev-yapimi-limonatalar" data-toggle="collapse" aria-expanded="false"><i class="fas fa-plus"></i> EV YAPIMI LİMONATALAR <span></i></span></a></li>
                    <ul class="collapse collapsible-body" id="ev-yapimi-limonatalar">
                                      <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="limonatacilekli2">LIMONATA CILEKLI - 120₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="limonata-naneli">LIMONATA NANELI - 100₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="limonatasade">LIMONATA SADE - 100₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="limonatafeslegenli">LIMONATA FESLEGENLI - 100₺</a>

                  
                </li>

            
                    </ul>
                                <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="test-26">test 26 - ₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="tes51">tes51 - ₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="testabc">testABC - ₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="testbass">testbass - ₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="patates-kizartmasi2">PATATES KIZARTMASI - 155₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="soslupatlican2">SOSLU PATLICAN - 120₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="havuctaratormeze2">HAVUC TARATOR MEZE - 65₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="pacanga-boregi-tek-servis">PACANGA BOREGI TEK SERVIS - 100₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="karidesjumbo">KARIDES JUMBO - 350₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="haydarimeze2">HAYDARI MEZE - 500₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="muammarameze">MUAMMARA MEZE - 25₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="peynirtabagi2">PEYNIR TABAGI - 425₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="turkmezetabagi">TURK MEZE TABAGI - 400₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="visneli-etli-pazi-dolmasi">VISNELI ETLI PAZI DOLMASI - 330₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="koftelibowl2">KOFTELI BOWL - 280₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="ekmekarasicorba2">Ekmek Arası Çorba - 95₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="karidesguvec">KARIDES GUVEC - 60₺</a>

                  
                </li>

                      </ul>
      
          <li class="right-menu-item"><a href="#salatalar" data-toggle="collapse" aria-expanded="false"><i class="fas fa-plus"></i> SALATALAR <span></i></span></a>
          </li>

          <ul class="collapse collapsible-body" id="salatalar">
          

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="tavuklusezarsalata">TAVUKLU SEZAR SALATA - 40₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="tonbaliklisalata">TON BALIKLI SALATA - 40₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="sasa">sasa - 111₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="beefsalata">BEEF SALATA - 40₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="karamelizekecipeynirlipancarsalata2">KARAMELIZE KECI PEYNIRLI PANCAR SALATA - 40₺</a>

                  
                </li>

                      </ul>
      
          <li class="right-menu-item"><a href="#test" data-toggle="collapse" aria-expanded="false"><i class="fas fa-plus"></i> test <span></i></span></a>
          </li>

          <ul class="collapse collapsible-body" id="test">
          

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="aaaaaaaaa">aaaaaaaaa - 88₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="cccccccc">CCCCCCCC - ₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="elmas-1">Elmas - 0₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="elmas-2">Elmas - 0₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="elmas-3">Elmas - 0₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="elmas-4">Elmas - 0₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="elmas-5">Elmas - 0₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="elmas-6">Elmas - 0₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="elmas-7">Elmas - 0₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="elmas-8">Elmas - 0₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="elmas-9">Elmas - 0₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="elmas-10">Elmas - 0₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="elmas-11">Elmas - 0₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="elmas-12">Elmas - 0₺</a>

                  
                </li>

                      </ul>
      
          <li class="right-menu-item"><a href="#soguk-icecekler" data-toggle="collapse" aria-expanded="false"><i class="fas fa-plus"></i> SOĞUK İÇECEKLER <span></i></span></a>
          </li>

          <ul class="collapse collapsible-body" id="soguk-icecekler">
          

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="banquet-icecek">BANQUET İÇECEK - 26₺</a>

                  
                </li>

                            <!-- yan menüdeki listenin fiyatları fiyatt-->
                <li>
                                                      <a href="iclikoftetekservis">ICLI KOFTE TEK SERVIS - 505₺</a>

                  
                </li>

                      </ul>
            </li>
      </div>
    </nav>

    <div id="content">

      <nav class="navbar navbar-expand-lg navbar-light bg-header">
        <div class="container-fluid">
          <!-- anasayfa home butonu homee  -->
        	            <!-- anasayfa home butonu, homeee -->
            <!-- Eğer ana sayfadaysa href değerini "./welcome" olarak değiştirir. (OnLoad Variable action) Ana sayfadan Home tıklarsa; KARŞILAMA Paneli açılır.-->
           <!-- Eğer ana sayfadaysa href değerini "./welcome" olarak değiştirir. (OnLoad Variable action) Ana sayfadan Home tıklarsa; KARŞILAMA Paneli açılır.-->
           <a id="homeButton"><button type="button" id="sidebarlefttbutton" class="btn">
                <!-- anasayfa home butonu ikonu iconn -->
                <i class="fas fa-home"></i>
            </button></a>
            <!-- navbar restoran logo logoo-->
          <div class="logo">
            <a id="homeButtonLogo" href="./"><img src="resimler/logok.png" alt="DemoLiveaaa bbgg cc ss" width="400" height="auto"></a> <!-- Fancybox için data-fancybox="gallery" ekledik -->
          </div>

            
          

     <div class="selector notranslate">
   
		    
		 <button style="border:none;"class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
			<span class="valueOfButton"><img src="resimler/lang/tr.png" />TR</span></button>
			
		<ul style="background-color:#009a9a;"class="dropdown-menu">
			<li><a class=" selector__toggle" href="javascript:void(0)" data-lang="tr" ><span ><img src="resimler/lang/tr.png" />TR</span> </a></li>
			<li><a class=" selector__toggle" href="javascript:void(0)" data-lang="ar" ><span ><img src="resimler/lang/ar.png" />AR</span></a></li>
			<li><a class=" selector__toggle" href="javascript:void(0)" data-lang="en" ><span ><img src="resimler/lang/en.png" />EN</span></a> </li>
			<li><a class=" selector__toggle" href="javascript:void(0)" data-lang="ru" ><span ><img src="resimler/lang/ru.png" />RU</span></a></li>
		</ul>
  </div>
		    
		 
          <!-- navbar arama butonu -->
	<div class="btn-arama"> 
          <button type="button" id="sidebarrightbutton" class="btn"> <!-- searchh,findd açma dialoğu -->
            <i class="fas fa-search"></i>
          </button>
	</div>


<!-- açılan menüüüü, menüüüüüü, sağğğğ menü, sağğ -->
<div class="dropdown" id="sidebarrightbutton1">
  <button id="ucnokta" class="btn btn-transparent bg-transparent position-absolute" type="button" data-toggle="dropdown"><i
      class="fa fa-ellipsis-v" aria-hidden="true"></i>
    <span class="caret"></span></button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a class="linkkopyala" id="linkkopyala" onclick="copy_board();"><i class="fas fa-share-alt"></i> Sayfayı Paylaş</a></li>
    <div class="dropdown-divider"></div>
    <li><a href="/madmin" target="_blank"><i class="fas fa-user-cog"></i> Yönetim Paneli</a></li>
	
    <div class="dropdown-divider"></div>
	
		
      <li><a href="/?t=all" id="list-view"><i class="fa fa-th-list" aria-hidden="true"></i>&nbsp; Liste Görünümü </a> </li>
  
 	
	
  </ul>
</div>

      </nav>


		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

	  <script>
    // Ev butonuna tıklandığında ana domainin kökünde(index.php) ise welcome adresine,başka yerde ise ana domaine git #evbutonn,homebutonn
    document.getElementById('homeButton').addEventListener('click', function() {
      // Mevcut URL'yi almak için
      var currentUrl = window.location.pathname;

      // Ana domain (uzantısız) olup olmadığını kontrol edin
      if (currentUrl === '/' || /\/index(\.php|\.html)?/.test(currentUrl)) {
          // Eğer ana sayfadaysa "/welcome" sayfasına yönlendir
          window.location.href = '/welcome';
      } else {
          // Başka bir sayfadaysa ana domain'e yönlendir
          window.location.href = '/';
      }
    });
		function copy_board() {
			//Ana Sayfa 3 Nokta: Sayfayı Paylaş Kopyalama Dialog #kopyalandııı
			var el = document.createElement('textarea');
			el.value = "https://1b.dslink.co/";
			document.body.appendChild(el);
			el.select();
			document.execCommand('copy');
			document.body.removeChild(el);
			Swal.fire({
				position: 'top',
				icon: 'success',
				title: 'Panoya Kopyalandı',
				html: "https://1b.dslink.co/",
				showConfirmButton: false,
			});
		}

		</script>
      <!-- navbar kısmında dil ayarının sol tarafında kalan 3 nokta, hamburger menü      -->

      <!-- Kopyalanacak linkin metin kutusu-->
      <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
  // Google Translate widget'ını başlatan fonksiyon
  function googleTranslateElementInit() {
      new google.translate.TranslateElement({
          includedLanguages: 'tr,ar,en,ru', // Dahil edilecek diller
          pageLanguage: 'tr', // Sayfanın varsayılan dili
          layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL // Widget'ın yatay düzeni
      }, 'google_translate_element'); // Widget'ın yerleştirileceği elementin ID'si
  }

  // HTML olaylarını tetikleyen fonksiyon (Tarayıcı uyumluluğu ile birlikte)
  function triggerHtmlEvent(element, eventName) {
      var event;
      if (document.createEvent) {
          // Modern tarayıcılarda olay yaratma
          event = document.createEvent('HTMLEvents');
          event.initEvent(eventName, true, true);
          element.dispatchEvent(event);
      } else if (document.createEventObject) {
          // Eski Internet Explorer tarayıcıları için olay yaratma
          event = document.createEventObject();
          element.fireEvent('on' + eventName, event);
      }
  }


  // Sayfa yüklendiğinde çalışacak olan jQuery fonksiyonu
  $(document).ready(function () {

    window.onload = function() { //Tam olarak çerez yazma kısmına müdahale olmadığı için geçici dslink çerezi silme metodu. #langdell,coockiedell
      //.dslink domaini için yazılan çerezi siliyoruz
      setTimeout(function() {
        document.cookie = 'googtrans' + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; domain=' + '.dslink.co' + '; path=/';
      }, 1250);
    };

      // '.selector__toggle' sınıfına sahip bir elemente tıklandığında çalışacak olan fonksiyon
      $(document).on('click', '.selector__toggle', function () {
          var value = $(this).attr("data-lang"); // Tıklanan elementin 'data-lang' özelliğini alıyoruz
          updateLanguage(value); // Dil güncelleme fonksiyonunu çağırıyoruz ve tıklanan dil değerini geçiyoruz
      });

   // Seçilen dile göre Google Translate elementini güncelleyen fonksiyon #langg,languagee
  function updateLanguage(value) {
     // Arama çubuğunda tümünü daralt diyoruz
      $(".right-menu-item").each(function(){
        if($(this).find("a").attr("aria-expanded") === "true"){
          $(this).find("a").trigger("click");
          $("#expand").text("Tümünü Genişlet");
        }
      });
      var selectElement = document.querySelector("#google_translate_element select"); // Google Translate dil seçim kutusunu seçiyoruz

      // Seçim kutusunun var olup olmadığını kontrol ediyoruz
      if (!selectElement) {
          console.error("Google Translate select element not found!"); // Seçim kutusu bulunamazsa hata mesajı veriyoruz
          return; // Fonksiyondan çıkıyoruz
      }

      // Tüm dil seçeneklerini alıyoruz
      var options = selectElement.options;
      var languageFound = false;

      // 'value' ile eşleşen dil seçeneğini buluyoruz
      for (var i = 0; i < options.length; i++) {
          if (options[i].value === value) {
              selectElement.selectedIndex = i; // Seçili dili ayarlıyoruz
              languageFound = true;
              break;
          }
      }

      if (!languageFound) {
          console.error("Language code not found in select options!"); // Eğer dil kodu bulunamazsa hata mesajı veriyoruz
          return;
      }

      // Değişikliği tarayıcıya bildiriyoruz
      var event = new Event('change', { bubbles: true });
      selectElement.dispatchEvent(event);

      // Sayfanın yeniden yüklenmesi gerekiyorsa
      if (value === "tr") { // Örneğin, sadece Türkçe için sayfa yeniden yüklenir
        setTimeout(function() {
          window.location.reload();
        }, 250);
      }

      //.dslink domaini için yazılan çerezi siliyoruz Tam olarak çerez yazma kısmına müdahale olmadığı için geçici dslink çerezi silme metodu. #langdell,coockiedell
      setTimeout(function() {
        document.cookie = 'googtrans' + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; domain=' + '.dslink.co' + '; path=/';
      }, 1000);

  }

  });

  // Dropdown menüsünden bir dil seçildiğinde butonun içeriğini güncelleyen fonksiyon
  $(document).on('click', '.dropdown-menu li a', function () {
      $(this).parent().parent().parent().find('.valueOfButton').html($(this).html()); // Seçilen dilin adını butona yazıyoruz
  });
</script>


<script>
  var button = document.getElementById("ucnokta");

  var clickCount = 0;
  var timeout;

  button.addEventListener("click", function (event) {
  clickCount++;

  if (clickCount === 3) {
    window.location.href = "/?t=exp";
  } else {
    clearTimeout(timeout);

    timeout = setTimeout(function () {
    clickCount = 0;
    }, 1000); // 2 saniye (2000 milisaniye) #üçclick, 3clickk, clikss, timerr (Timer MS. sayısı: 1000)
  }
  });

  button.addEventListener("contextmenu", function (event) {
  event.preventDefault(); // Sağ tıklama eylemini iptal et
  });
  

</script>






<!-- burası sanırım kullanılmıyor lazım olur diye silmedim -->

<div class="img-hero">        
  
</div><!-- GÜNÜN MENÜSÜ -->
<!-- <h1 style="text-align: center; margin-top: 15px; cursor: pointer;" id="gununMenusuText" onclick="gununMenusuneGit()">Günün Menüsü</h1> -->
<!-- <script>
        function gununMenusuneGit() {
            // Yönlendirme işlemi için belirtilen web sitesi adresi
            var websiteURL = "alcitepe-cabernet-savignon-shiraz-75-cl";
            // Kullanıcıyı belirtilen web sitesine yönlendirme
            window.location.href = websiteURL;
        }
    </script> -->

<!-- kapak görseli -->

 <!-- Kapak resmi varsa bu blok çalışır -->
     <!-- Dosya mp4 değilse resim olarak gösterir -->
         <!-- Dosya var mı kontrol et -->
                     <!-- Google Maps linki yoksa -->
            <img src="./resimler/kapak.jpg" class="center" style="max-width: 100%; width: 100%;" id="imageToClick">
                    


<div id="snow"></div>

<!-- Daha fazla kar div'i ekleyebilirsiniz -->


<!-- modall deletee kapak için  -->
<div class="modal fade" id="delete" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="text-align: center;">
                <h5 class="modal-title" style="display: inline-block; width: 100%; text-align: center;">Kapak Resmi
                    Silme</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="text-center" style="text-align: center;">Kapak fotoğrafını kalıcı olarak silmek istediğinize
                    emin misiniz?</p>
                <h2 class="text-center fullname"></h2>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span
                        class="glyphicon glyphicon-remove"></span> Çık</button>
                <button type="button" style="background: red; text-align: center;" class="btn btn-danger id"><span
                        class="glyphicon glyphicon-trash"></span> Evet</button>
            </div>
        </div>
    </div>
</div>

<!-- modall deletee duyuru için -->
<div class="modal fade" id="deleteDuyuru" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="text-align: center;">
                <h5 class="modal-title" style="display: inline-block; width: 100%; text-align: center;">Duyuru Resmi
                    Silme</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="text-center" style="text-align: center;">Duyuru fotoğrafını kalıcı olarak silmek istediğinize
                    emin misiniz?</p>
                <h2 class="text-center fullname"></h2>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span
                        class="glyphicon glyphicon-remove"></span> Çık</button>
                <button type="button" style="background: red; text-align: center;" class="btn btn-danger id"><span
                        class="glyphicon glyphicon-trash"></span> Evet</button>
            </div>
        </div>
    </div>
</div>



<div id="snackbar"><span id="alert_message"></span></div> <!--Sonuç için bilgi mesajı modal  -->

<!--Edit modal kapak için # editt,modall,kapakk  -->
<div class="modal fade" id="edit" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="file-drop-area">
                <form id="editForm">
                    <div class="modal-header">
                        <h5 class="modal-title">Kapak Resmi Güncelle&nbsp;&nbsp;</h5>
                        <div class="emoji-button" onclick="imageToClickVideoDuyuru()" title="Duyuru Resmi Güncelle">➥
                        </div><!--Tıklandığında direkt olarak diğer modalı açması için !-->
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input value="1" type="hidden" id="resim" name="id">
                        <div class="row col-sm-12">
                            <div class="col-sm-6">
                                <hr>
                                
                                 <!-- Eğer dosya mp4 veya mov değilse, resim olarak göster -->
                                    <img id="resim-1" class="img-thumbnail" style="max-width: 100%; height: auto;"
                                        src="../resimler/kapak.jpg" alt="Image preview">
                                
                                <hr>
                                <input id="fileupload" class="filestyle" onchange="previewImage(this)" type="file"
                                    name="fileupload" />
                                <div id="error-message"></div>
                            </div>
                            <div class="col-sm-6">
                                <div class="image_1" id="imageView"></div>
                                <hr>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="col-12">
                            <div class="right">
                                <button type="submit" class="guncelle" onclick="disableButtonsAndShowLoader()"><i
                                        class="fa fa-check" aria-hidden="true"></i> Güncelle</button>
                            </div>
                            <button type="button" data-id="1" class="btn-del"><i class="fa fa-trash"
                                    aria-hidden="true"></i> Resmi Sıfırla</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Loader ekranı için -->
<div id="overlay">
    <div id="loader"></div>
</div>


<!--Edit modal Duyuru için # editt,modall,duyuruu  -->
<div class="modal fade" id="editDuyuru" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="file-drop-area">
                <form id="editFormDuyuru">
                    <div class="modal-header">
                        <h5 class="modal-title">Duyuru Resmi Güncelle&nbsp;</h5>
                        <div class="emoji-button" onclick="imageToClickVideo()" title="Kapak Resmi Güncelle">➥</div>
                        <!--Tıklandığında direkt olarak diğer modalı açması için !-->
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input value="1" type="hidden" id="resimDuyuru" name="id">
                        <div class="row col-sm-12">
                            <div class="col-sm-6">
                                <hr>
                                
                                 <!-- Eğer dosya mp4 veya mov değilse, resim olarak göster -->
                                    <img id="resim-1" class="img-thumbnail" style="max-width: 100%; height: auto;"
                                        src="../resimler/" alt="Image preview">
                                
                                <hr>
                                <input id="fileuploadDuyuru" class="filestyle" onchange="previewImageDuyuru(this)"
                                    type="file" name="fileuploadDuyuru" />
                                <div id="error-message-duyuru"></div>
                            </div>
                            <div class="col-sm-6">
                                <div class="image_1" id="imageViewDuyuru"></div>
                                <hr>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="col-12">
                            <div class="right">
                                <button type="submit" class="guncelleDuyuru" onclick="disableButtonsAndShowLoader()"><i
                                        class="fa fa-check" aria-hidden="true"></i> Güncelle</button>
                            </div>
                            <button type="button" data-id="1" class="btn-delDuyuru"><i
                                    class="fa fa-trash" aria-hidden="true"></i> Resmi Sıfırla</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    function disableButtonsAndShowLoader() {//Güncelle butonuna tıklandığında dönecek fonksiyon #loaderr döngüü yuvarlakk
        // Tüm butonları devre dışı bırak

        var buttons = document.querySelectorAll('button');
        buttons.forEach(function (button) {
            button.disabled = true;
        });

        // Overlay'i göster
        document.getElementById('overlay').style.display = 'flex';
    }



    // const fileDropArea = document.getElementById('file-drop-area');
    // const fileInput = document.getElementById('fileupload');

    // fileDropArea.addEventListener('dragover', (e) => {
    //   e.preventDefault();
    //   fileDropArea.classList.add('active');
    // });

    // fileDropArea.addEventListener('dragleave', () => {
    //   fileDropArea.classList.remove('active');
    // });

    // fileDropArea.addEventListener('drop', (e) => {
    //   e.preventDefault();
    //   fileDropArea.classList.remove('active');

    //   const files = e.dataTransfer.files;
    //   fileInput.files = files;
    //   previewImage(fileInput);
    // });

    function previewImage(input) {
        const file = input.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                // Önizleme işlemi burada yapılabilir, örneğin bir resim gösterilebilir.
                console.log('Previewing file:', file.name);
                console.log('File data:', e.target.result);
            };
            reader.readAsDataURL(file);
        }
    }
    function previewImageDuyuru(input) {
        const file = input.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                // Önizleme işlemi burada yapılabilir, örneğin bir resim gösterilebilir.
                console.log('Previewing file:', file.name);
                console.log('File data:', e.target.result);
            };
            reader.readAsDataURL(file);
        }
    }
</script>





</center>







<div class="section-home s-category">
        <div class="heading-section">
        
                      <div class="sa-title popcat">Kategoriler</div>
          
          
          
          <div class="clear"></div>
		  <br>
        </div>
        <div class="home-category-list">
            
                    <div class="home-box-category">
            
            <!-- kategorilerin linkleri, kategori isimlerine tıklayınca, kategorii Click eylemi-->
            <a href="bowl">
            <div class="home-text-category">


            <!-- kategori adları -->
            <div class="bc-text">BOWL</div>
            </div>
            </a>

            <!-- kategorilerin linkleri görsele tıklayınca-->
            <a href="bowl">
            <div class="home-image-category">

            <!-- Kategori resimlerini listeler -->
            <!-- Eğer seçilen bir resim yoksa veya dosya mevcut değilse varsayılan görsel gösterilir #kategorii,görsell,varsayilann -->
            <script>console.log('Kategori: BOWL', 'Resim: 280-BOWL.jpg', 'Yol: /var/www/vhosts/dslink.co/1b.dslink.co/resimler/urun_kategori/280-BOWL.jpg', 'Var mı: HAYIR');</script>                <img src="/resimler/urunler/varsayilan.jpg" alt="BOWL">
            
             
            </div>
             </a>
          </div>
          
                        <div class="home-box-category">
            
            <!-- kategorilerin linkleri, kategori isimlerine tıklayınca, kategorii Click eylemi-->
            <a href="detox">
            <div class="home-text-category">


            <!-- kategori adları -->
            <div class="bc-text">DETOX</div>
            </div>
            </a>

            <!-- kategorilerin linkleri görsele tıklayınca-->
            <a href="detox">
            <div class="home-image-category">

            <!-- Kategori resimlerini listeler -->
            <!-- Eğer seçilen bir resim yoksa veya dosya mevcut değilse varsayılan görsel gösterilir #kategorii,görsell,varsayilann -->
            <script>console.log('Kategori: DETOX', 'Resim: 493-DETOX.jpg', 'Yol: /var/www/vhosts/dslink.co/1b.dslink.co/resimler/urun_kategori/493-DETOX.jpg', 'Var mı: HAYIR');</script>                <img src="/resimler/urunler/varsayilan.jpg" alt="DETOX">
            
             
            </div>
             </a>
          </div>
          
                        <div class="home-box-category">
            
            <!-- kategorilerin linkleri, kategori isimlerine tıklayınca, kategorii Click eylemi-->
            <a href="banquet">
            <div class="home-text-category">


            <!-- kategori adları -->
            <div class="bc-text">BANQUET</div>
            </div>
            </a>

            <!-- kategorilerin linkleri görsele tıklayınca-->
            <a href="banquet">
            <div class="home-image-category">

            <!-- Kategori resimlerini listeler -->
            <!-- Eğer seçilen bir resim yoksa veya dosya mevcut değilse varsayılan görsel gösterilir #kategorii,görsell,varsayilann -->
            <script>console.log('Kategori: BANQUET', 'Resim: 478-BANQUET.png', 'Yol: /var/www/vhosts/dslink.co/1b.dslink.co/resimler/urun_kategori/478-BANQUET.png', 'Var mı: EVET');</script>                <img src="../resimler/urun_kategori/478-BANQUET.png" alt="BANQUET">
            
             
            </div>
             </a>
          </div>
          
                        <div class="home-box-category">
            
            <!-- kategorilerin linkleri, kategori isimlerine tıklayınca, kategorii Click eylemi-->
            <a href="baslangic">
            <div class="home-text-category">


            <!-- kategori adları -->
            <div class="bc-text">BAŞLANGIÇ</div>
            </div>
            </a>

            <!-- kategorilerin linkleri görsele tıklayınca-->
            <a href="baslangic">
            <div class="home-image-category">

            <!-- Kategori resimlerini listeler -->
            <!-- Eğer seçilen bir resim yoksa veya dosya mevcut değilse varsayılan görsel gösterilir #kategorii,görsell,varsayilann -->
            <script>console.log('Kategori: BAŞLANGIÇ', 'Resim: 665-BAŞLANGIÇ.jpg', 'Yol: /var/www/vhosts/dslink.co/1b.dslink.co/resimler/urun_kategori/665-BAŞLANGIÇ.jpg', 'Var mı: EVET');</script>                <img src="../resimler/urun_kategori/665-BAŞLANGIÇ.jpg" alt="BAŞLANGIÇ">
            
             
            </div>
             </a>
          </div>
          
                        <div class="home-box-category">
            
            <!-- kategorilerin linkleri, kategori isimlerine tıklayınca, kategorii Click eylemi-->
            <a href="salatalar">
            <div class="home-text-category">


            <!-- kategori adları -->
            <div class="bc-text">SALATALAR</div>
            </div>
            </a>

            <!-- kategorilerin linkleri görsele tıklayınca-->
            <a href="salatalar">
            <div class="home-image-category">

            <!-- Kategori resimlerini listeler -->
            <!-- Eğer seçilen bir resim yoksa veya dosya mevcut değilse varsayılan görsel gösterilir #kategorii,görsell,varsayilann -->
            <script>console.log('Kategori: SALATALAR', 'Resim: ', 'Yol: ', 'Var mı: HAYIR');</script>                <img src="/resimler/urunler/varsayilan.jpg" alt="SALATALAR">
            
             
            </div>
             </a>
          </div>
          
                        <div class="home-box-category">
            
            <!-- kategorilerin linkleri, kategori isimlerine tıklayınca, kategorii Click eylemi-->
            <a href="test">
            <div class="home-text-category">


            <!-- kategori adları -->
            <div class="bc-text">test</div>
            </div>
            </a>

            <!-- kategorilerin linkleri görsele tıklayınca-->
            <a href="test">
            <div class="home-image-category">

            <!-- Kategori resimlerini listeler -->
            <!-- Eğer seçilen bir resim yoksa veya dosya mevcut değilse varsayılan görsel gösterilir #kategorii,görsell,varsayilann -->
            <script>console.log('Kategori: test', 'Resim: 228-test.jpg', 'Yol: /var/www/vhosts/dslink.co/1b.dslink.co/resimler/urun_kategori/228-test.jpg', 'Var mı: EVET');</script>                <img src="../resimler/urun_kategori/228-test.jpg" alt="test">
            
             
            </div>
             </a>
          </div>
          
                        <div class="home-box-category">
            
            <!-- kategorilerin linkleri, kategori isimlerine tıklayınca, kategorii Click eylemi-->
            <a href="soguk-icecekler">
            <div class="home-text-category">


            <!-- kategori adları -->
            <div class="bc-text">SOĞUK İÇECEKLER</div>
            </div>
            </a>

            <!-- kategorilerin linkleri görsele tıklayınca-->
            <a href="soguk-icecekler">
            <div class="home-image-category">

            <!-- Kategori resimlerini listeler -->
            <!-- Eğer seçilen bir resim yoksa veya dosya mevcut değilse varsayılan görsel gösterilir #kategorii,görsell,varsayilann -->
            <script>console.log('Kategori: SOĞUK İÇECEKLER', 'Resim: ', 'Yol: ', 'Var mı: HAYIR');</script>                <img src="/resimler/urunler/varsayilan.jpg" alt="SOĞUK İÇECEKLER">
            
             
            </div>
             </a>
          </div>
          
                                                

                                            

                      <div class="clear"></div>
        </div>
      </div>

<!-- iki click sicript işlemi uzunn clickk -->
<!-- Resimlere uzun tıklandığında hızlı resim düzenleme modalını açar kapak ürün resmi vs.. -->
<script>
    var isLongClick = false;
    var clickCount = 0; // Tıklama sayısını takip etmek için sayıcı
    var clickTimeout; // Tıklama zamanlayıcısını takip etmek için değişken
    var imageElement = document.getElementById('imageToClick');//Kapak görseli veya videosu var mı kontrol etmek için değişkene atıyoruz
    var imageElementDuyuru = document.getElementById('imageToClickDuyuru');//Duyuru görseli veya videosu var mı kontrol etmek için değişkene atıyoruz


    if (imageElement) {//Eğer kapak görseli veya videosu var is:
        document.getElementById('imageToClick').addEventListener('click', function () {//Kapak için çift tıklamada resim edit modal açan fonksiyon
            clickCount++; // Her tıklamada sayacı artır
            
            // İlk tıklamada zamanlayıcıyı başlat
            if (clickCount === 1) {
                clickTimeout = setTimeout(function () {
                    clickCount = 0; // Zamanlayıcı sona erdiğinde sayacı sıfırla
                }, 500); // iki tıklama için izin verilen maksimum süre (örneğin 600 milisaniye)
            }

            // Eğer üç kez tıklandıysa istenilen işlemi gerçekleştir : Resim modalını açmak için gerekli <a> linkini tetikler
            if (clickCount === 2) {
                clearTimeout(clickTimeout); // Zamanlayıcıyı temizle
                clickCount = 0; // Sayacı sıfırla
                document.getElementById('clickLink').click(); // "a" etiketini tıkla

            }
        });
    }

    if (imageElementDuyuru) {//Eğer duyuru görseli veya videosu var ise:
        document.getElementById('imageToClickDuyuru').addEventListener('click', function () { //Duyuru için çift tıklamada resim edit modal açan fonksiyon
            clickCount++; // Her tıklamada sayacı artır

            // İlk tıklamada zamanlayıcıyı başlat
            if (clickCount === 1) {
                clickTimeout = setTimeout(function () {
                    clickCount = 0; // Zamanlayıcı sona erdiğinde sayacı sıfırla
                }, 500); // iki tıklama için izin verilen maksimum süre (örneğin 600 milisaniye)
            }

            // Eğer üç kez tıklandıysa istenilen işlemi gerçekleştir : Resim modalını açmak için gerekli <a> linkini tetikler
            if (clickCount === 2) {
                clearTimeout(clickTimeout); // Zamanlayıcıyı temizle
                clickCount = 0; // Sayacı sıfırla
                document.getElementById('clickLinkDuyuru').click(); // "a" etiketini tıkla

            }
        });
    }


    function imageToClickVideo() {//Kapak için İki kez video etiketine tıklandığında çalışacak fonksiyon
        
        // Eğer iki kez tıklandıysa istenilen işlemi gerçekleştir : Resim modalını açmak için gerekli <a> linkini tetikler
        
        // $('#editDuyuru').modal('hide');	
                // Düzenleme modal'ını gizle
        
        $('#editDuyuru').modal('hide');
    }

    function imageToClickVideoDuyuru() {//Duyuru için İki kez video etiketine tıklandığında çalışacak fonksiyon
        // Eğer iki kez tıklandıysa istenilen işlemi gerçekleştir : Resim modalını açmak için gerekli <a> linkini tetikler
        // alert("as");
        // $('#edit').modal('hide');	
                // Düzenleme modal'ını gizle
        $('#edit').modal('hide');
    }
</script>


<!-- "Beni hatırla" seçeneği "evet" olduğunda ürün resmi güncellendiğinde beliren modal-diyalog içerisindeki resim önizleme alanı -->
<script type="text/javascript">

    //KAPAK için seçilen dosyanın sağ tarafta ön izlemesi görünür
    function previewImage(getFile) {
        
        var file = getFile.files[0];

        if (!file) {
            return; // Eğer dosya seçilmediyse işlem yapma
        }

        var fileName = file.name.toLowerCase();
        var fileSize = file.size;
        var maxFileSize = 10 * 1024 * 1024; // 10 MB

        if ((fileName.endsWith('.jpg') || fileName.endsWith('.jpeg') || fileName.endsWith('.png') || fileName.endsWith('.mp4')) && (fileSize < maxFileSize)) {// Uzantı ve boyut kontrolü
            // Kullanıcı uygun bir dosya seçtiyse
            var reader = new FileReader();

            reader.onload = function (e) {
                if (fileName.endsWith('.mp4') || fileName.endsWith('.mov')) {
                    // Eğer dosya bir video ise, video etiketi ile önizleme yap
                    var videoType = fileName.endsWith('.mp4') ? 'video/mp4' : 'video/mov';
                    $('#imageView').html('<hr><video class="viewImage" controls style="width: 100%; max-width: 200px; height: auto;"><source src="' + e.target.result + '" type="' + videoType + '"></video>');
                } else {
                    // Eğer dosya bir resim ise, img etiketi ile önizleme yap
                    $('#imageView').html('<hr><img class="viewImage" src="' + e.target.result + '" style="width: 100%; max-width: 200px; height: auto;"/>');
                }
            };

            reader.readAsDataURL(file); // FileReader kullanarak dosyayı oku ve Data URL olarak al
        }

        else if (fileName.endsWith('.mov')) {
            displayError('.mov yüklenemiyor, <a href="https://apps.apple.com/us/app/the-video-converter/id893347665" target="_blank" style="color: #fff; text-decoration: underline;">MOV Converter</a> ile videonuzu dönüştürebilirsiniz.');

        } else if ((fileName.endsWith('.jpg') || fileName.endsWith('.jpeg') || fileName.endsWith('.png') || fileName.endsWith('.mp4')) && !(fileSize < maxFileSize)) {
            // Dosya uygun değilse hata mesajı göster
            displayError('Dosya boyutu 10 MB ÜSTÜNDE, <a href="https://www.freeconvert.com/video-compressor" target="_blank" style="color: #fff; text-decoration: underline;"> Video/Image Compressor</a> ile dosyanızı küçültebilirsiniz');
        }
        else {
            displayError("Desteklenmeyen Dosya Formatı.\n'.jpg', '.jpeg', '.png', '.mp4' uzantılı olmalı.");

        }
    }


    //Yanlış yükleme dosyaları ve geçersiz formatlar için error mesajlarını gösteren fonksiyonlar--------------------------
    function displayError(message) {//Kapak modalı için
        var x = document.getElementById("error-message");
        x.className = "show";
        x.style.background = "red";
        x.innerHTML = message;
        setTimeout(function () {
            x.className = x.className.replace("show", "");
            x.style.background = "";
        }, 15000);
        $('#imageView').html(''); // Önizleme alanını temizle
        var fileInput = document.getElementById('fileupload');//İnput kısmına getirilen dosyayı alabilmek için input elementini tanımlıyoruz
        fileInput.value = '';//İnput içindeki dosyayı sil (yüklenmeye çalışılan geçersiz dosyayı kaldırır)

    }
    function displayErrorDuyuru(message) {//Duyuru Modalı için
        var x = document.getElementById("error-message-duyuru");
        x.className = "show";
        x.style.background = "red";
        x.innerHTML = message;
        setTimeout(function () {
            x.className = x.className.replace("show", "");
            x.style.background = "";
        }, 15000);
        $('#imageViewDuyuru').html(''); // Önizleme alanını temizle
        var fileInput = document.getElementById('fileuploadDuyuru');//İnput kısmına getirilen dosyayı alabilmek için input elementini tanımlıyoruz
        fileInput.value = '';//İnput içindeki dosyayı sil (yüklenmeye çalışılan geçersiz dosyayı kaldırır)

    }
    //---------------------------------------------------------------------------------------------------------------------


    //DUYURU için seçilen dosyanın sağ tarafta ön izlemesi görünür
    function previewImageDuyuru(getFile) {
        var file = getFile.files[0];

        if (!file) {
            return; // Eğer dosya seçilmediyse işlem yapma
        }

        var fileSize = file.size;
        var maxFileSize = 10 * 1024 * 1024; // 10 MB
        var fileName = file.name.toLowerCase();

        if ((fileName.endsWith('.jpg') || fileName.endsWith('.jpeg') || fileName.endsWith('.png') || fileName.endsWith('.mp4')) && (fileSize < maxFileSize)) { // Uzantı ve boyut kontrolü
            // Kullanıcı bir resim seçtiyse
            if (getFile.files && getFile.files[0]) {
                // FileReader nesnesi oluşturuluyor
                var reader = new FileReader();

                // Dosya yükleme tamamlandığında
                reader.onload = function (e) {
                    // Dosya yükleme tamamlandığında, dosya tipine göre farklı önizlemeler göster
                    if (fileName.endsWith('.mp4')) {
                        // Eğer dosya bir video ise, video etiketi ile önizleme yap
                        $('#imageViewDuyuru').html('<hr><video class="viewImage" controls playsinline style="width: 100%; max-width: 200px; max-height: 200px; overflow-y: auto;"><source src="' + e.target.result + '" type="video/mp4"></video>');
                    } else {
                        // Eğer dosya bir resim ise, img etiketi ile önizleme yap
                        $('#imageViewDuyuru').html('<hr><img class="viewImage" src="' + e.target.result + '" style="width: 100%; max-width: 200px; max-height: 200px; overflow-y: auto;"/>');
                    }
                };
                // Resmi yüklemek için dosya yolu alınıyor
                reader.readAsDataURL(getFile.files[0]);
            }
        } else if (fileName.endsWith('.mov')) {
            displayErrorDuyuru('.mov yüklenemiyor, <a href="https://apps.apple.com/us/app/the-video-converter/id893347665" target="_blank" style="color: #fff; text-decoration: underline;">MOV Converter</a> ile videonuzu dönüştürebilirsiniz.');
        } else if ((fileName.endsWith('.jpg') || fileName.endsWith('.jpeg') || fileName.endsWith('.png') || fileName.endsWith('.mp4')) && !(fileSize < maxFileSize)) {
            // Dosya uygun değilse hata mesajı göster
            displayErrorDuyuru('Dosya boyutu 10 MB ÜSTÜNDE, <a href="https://www.freeconvert.com/video-compressor" target="_blank" style="color: #fff; text-decoration: underline;"> Video/Image Compressor</a> ile dosyanızı küçültebilirsiniz');
        }
        else {
            displayErrorDuyuru("Desteklenmeyen Dosya Formatı.\n'.jpg', '.jpeg', '.png', '.mp4' uzantılı olmalı.");

        }
    }

    // // Hata mesajı gösterme fonksiyonu
    // function displayError(message) {
    //     // Hata mesajını kullanıcıya göstermek için uygun yöntemi kullanın
    //     alert(message); // Basit bir alert ile gösterme
    // }

</script>
<script>
    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal 
    btn.onclick = function () {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function () {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

    // Javascript Copy to board on click to button


    // input elementi seçiliyor



    // input değeri kopyalanıyor
    function copyText() {
        const input = document.querySelector('#inputId');
        input.select();
        document.execCommand('copy');
    }




</script>













<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="./key.js"></script>

<style>
  /* Yıldız simgesi için gerekli CSS starrrr styleee*/
  .star_footer {
    font-size: 35px;
    cursor: pointer;
    display: inline-block;
    color: #FFD700; /* Altın sarısı - koyu arka planda görünsün */
    margin: 0 8px;
    transition: color 0.3s, transform 0.2s;
  }

  .star_footer:hover {
    transform: scale(1.2);
    color: #FFD700;
  }

  /* Dolu yıldız rengi */
  .star_footer.filled {
    color: #FFD700;
  }

  /* Yıldızları tam ortalamak için */
  .rating {
    text-align: center;
  }

  .stars-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 15px;
  }
</style>


<!-- JavaScript kodu -->
<script>
  $(document).ready(function() {
    var selectedRating = 0; // Seçilen yıldız değerini saklamak için bir değişken tanımlıyoruz

    // Yıldızları sıfırlayan fonksiyon
    function resetStars() {
      selectedRating = 0; // Seçilen yıldız değerini sıfırlıyoruz
      $('.star_footer').removeClass('filled'); // Yıldızların doluluk efektini kaldırıyoruz
    }
	// Yıldızlara tıklama olayını dinleyen fonksiyon
    $('.star_footer').click(function() {
      selectedRating = parseInt($(this).data('rating'));

      // Yıldızlara seçim efektini uygulayan fonksiyon
      $('.star_footer').each(function() {
        var rating = parseInt($(this).data('rating'));
        if (rating <= selectedRating) {
          $(this).addClass('filled');
        } else {
          $(this).removeClass('filled');
        }
      });

      // Belirli bir süre boyunca dolu yıldızın görünmesini sağlamak için setTimeout kullanıyoruz
      setTimeout(function() {
        // Seçilen yıldıza göre uygun dialogu açan kodlar
        if (selectedRating >= 5) {
            var googleMapsUrl = 'https://maps.app.goo.gl/xQF4aFCGzuZ39fC89';
  			window.open(googleMapsUrl, '_system'); // "_system" parametresi, linkin harici tarayıcı yerine cihazın varsayılan harita uygulamasında açılmasını sağlar.
        } else {
          $('#geri_bildirim_modal').modal('show');  //Kasaa,Özel yorumlar, yorummm
        }
		resetStars();
      }, 700); // 700 milisaniye (0.3 saniye) süreyle dolu yıldız görünecek

    });

  });
</script>

		<!-- Feedback Funcion - Action Call! - geri_bildirim_modal #Feedbackk,geribilgirimm bbb -->
		<div class="modal fade" id="geri_bildirim_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">Bize Geri Bildirim Yollayın</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">
						<!-- ürüne ait verilerin yer aldığı form -->
						<form method="POST" enctype="multipart/form-data" class="form-horizontal">
							<div class="form-group">
								<label>Konu:</label>
								<input type="text" class="form-control" name="urun" value="" />
							</div>
							<div class="form-group">
								<label>Mesajınız:</label>
								<textarea class="form-control" name="mesaj" required></textarea>
							</div>
							<div class="form-group">
								<label>Görsel:</label>
								<input style="padding: 2px;" type="file" class="form-control" name="file[]" multiple />
							</div>
							<hr />
							<div class="form-group">
								<label>İsim Soyisim:</label>
								<input type="text" class="form-control" name="isim_soyisim" />
							</div>
							<div class="form-group">
								<label>İrtibat Numarası:</label>
								<input type="text" class="form-control" name="tel" />
							</div>
							<div class="modal-footer" style="border-top: none">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">Kapat</button>
								<button type="submit" class="btn btn-primary">Gönder</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

<div class="footer"> <!-- Footer -->
	<div class="footer-directions">
		<a href="https://www.google.com/maps/dir//41.0762911,28.9299868">
			<img src="resimler/location.png" class="location-icon reveal" id="location-icon" alt="location-icon"><!-- Locationn, paylaşş -->
		</a>
		<div class="footer-share">
			<img src="resimler/share.png" class="share-icon reveal" id="share-icon" alt="share-icon"><!-- sharee, konumm -->
		</div>
		<div class="footerlogo">
			<a href="./"><img id="footerlogo" src="resimler/footer.jpg" alt="DemoLiveaaa bbgg cc ss"></a><!-- logoo -->
		</div>
	</div>
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3007.666084291226!2d28.9299868!3d41.0762911!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cab1dffcec83e7%3A0xea2dd05a46f6807c!2sFaruk%20Usta%20Pide%20-%20Lahmacun%20ve%20Kebap%20Salonu!5e0!3m2!1str!2str!4v1764595073371!5m2!1str!2str" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe><!-- haritaa, mapp -->
	<br>
	<!-- HARİTA ALTINDA YERLEŞTİRİLEN YILDIZLAR -starrr,yıldızz,footer -->
	<div class="stars-container">
		<i class="fas fa-star star_footer" data-rating="1"></i>
		<i class="fas fa-star star_footer" data-rating="2"></i>
		<i class="fas fa-star star_footer" data-rating="3"></i>
		<i class="fas fa-star star_footer" data-rating="4"></i>
		<i class="fas fa-star star_footer" data-rating="5"></i>
	</div>
<!-- Debug: yolTarifiLinki kaldırıldı -->
	<div class="footer-heading">Bizi Sosyal Medya'da Takip Edin</div>
	<div class="socmed">
	
	<!-- sosyal medya ikonlarının ve linklerinin yer aldığı kısım --> <!-- sociall iconn, facebookk,instagramm, -->

								<div class="socmed-line">
				<div class="socmed-item">
					<a href="https://www.instagram.com/dddd" class="si-icon" target="_blank"><i class="fab fa-instagram fa-lg"></i></a>
				</div>			
			</div>
														<div class="socmed-line">
			<div class="socmed-item">
				<a class="si-icon" onclick="copy_board();"><i class="fa fa-share-alt" aria-hidden="true"></i></a> <!-- Footer Sayfa Paylaş Butonu #paylaşş,sharee-->
			</div>
		</div>
	</div>
</div>
<!-- footer en alt kısmındaki yazı ve linkler, footerr,aboutt -->
<div style="padding:10px;">
	<div id="devsecure" align="center">
		<a href="https://www.devlopsoft.com/" target="_blank" title="DevSecure" rel="noopener"><b>Dev Secure <sup>®</sup></a>
		<span>|</span>
		<a href="https://devlopsoft.com/qr_menu" target="_blank" title="qrmenu_info" rel="noopener">Smart QR System</a></b>
	</div>
</div>

	<div id="full_page"><img src="resimler/logok.png" /></div>
	<style>
		#content {
			padding-bottom: 63px;
		}

		#full_page {
			display: none;
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: #ffffffad;
			z-index: 1031;
		}

		#full_page img {
			max-height: 100%;
			max-width: 100%;
			width: auto;
			height: auto;
			position: absolute;
			top: 0;
			bottom: 400px;
			left: 0;
			right: 0;
			margin: auto;
		}

		#custom-btn {
			background-color: #fff !important;
			position: absolute;
			right: 50px;
			width: 65px;
			padding: 2px 1px;
			color: grey;
			border: 1px solid grey;
			background-image: none;
			font-size: 14px;
		}

		.reveal{
		position: relative;
		transform: translateY(150px);
		opacity: 0;
		transition: 1s all ease;
		}

		.reveal.active{
		transform: translateY(0);
		opacity: 1;
		}



		#location-icon{
			width: 10%;
			float: left;
			position: relative;
			margin-top: 3.4%;
		}

		#share-icon{
			width: 10%;
			float: right;
			position: relative;
			margin-top: 3.4%;
		}

		#footerlogo{ /* Masaüstü Görünümü Footer, footerr,logoo,bottomm */
			margin-bottom: 4%; /* Logo ile Harita arasındaki boşluk */
			max-height: 150px; /* Logo boyutlandırması */
		}

		.footer-heading{
			margin-top: 1%;
		}

		@media only screen and (max-width: 767px) {
			#custom-btn {
				background-color: #fff !important;
				color:red;
				border: 1px solid grey;
				background-image: none;
				right: 3%;
			}

			#location-icon{ /* GPS locationn mappp mapss */
				width: 11%;
				float: left;
				position: relative;
				
			}

			#share-icon{
				width: 11%;
				float: right;
				position: relative;
			}

			#footerlogo{ /* Mobil Görünümü Footer, footerr,logoo,bottomm */
			margin-bottom: 4.4%;  /* Logo ile Harita arasındaki boşluk */
			max-height: 140px; /* Logo boyutlandırması */
			}

			.reveal{
			position: relative;
			transform: translateY(150px);
			opacity: 0;
			transition: 1s all ease;
			}

			.reveal.active{
			transform: translateY(0);
			opacity: 1;
			}

			.footer-heading{
			margin-top: 1%;
			margin-bottom: 3%;
			}
		}
	</style>

	

	<a href="tel:90 212 528 8208"><button class="btn-block fixed-bottom btn-success btn-lg" style="border:0; outline: 0;box-shadow: none;"><i class="h3 fas fa-phone m-0" ></i><span style="margin-left: 10px; position: relative; top: -5px;">Telefonla Ara</span></button></a> <!-- #telefonn,phonee -->
<div id="google_translate_element" style="display: none"></div>
	<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
	<script>
		$(document).ready(function() {
			$(".dropdown-toggle").dropdown();
		});

		function gif() {
			Swal.fire({
				imageUrl: 'https://1b.dslink.co/madmin/assets/recycler.gif',
				confirmButtonText: '<i class="fas fa-times-circle"></i>',
				didOpen: () => {
					var snd = new Audio("resimler/error.wav");
					snd.play();
					$("#swal2-validation-message").css({
						"position": "absolute",
						"left": 0,
						"right": 0
					});
					$(".swal2-actions").css({
						"position": "absolute",
						"top": "-5px",
						"right": "10px"
					});
					$(".swal2-image").css({
						"margin-bottom": "-30px"
					});
					$(".swal2-styled.swal2-confirm").css({
						"color": "#7066e0",
						"background": "initial",
						"background-image": "none",
						"box-shadow": "none",
						"font-size": "24px",
						"padding": "3px",
						"top": "-20px",
						"position": "relative",
						"right": "-10px"
					});
					Swal.showValidationMessage(
						`Hata Oluştu`
					)
				}
			})
		}

		function call_waiter() {
			$("#hesap").remove();
			$("#full_page").show(0).delay(500).hide(0);
			setTimeout(function() {
				Swal.fire({
					title: 'Masa Numaranızı Giriniz',
					input: 'number',
					inputAttributes: {
						autocapitalize: 'off',
						oninput: "javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);",
						maxlength: "3",
						style: "text-align: center"
					},
					showCancelButton: true,
					confirmButtonText: 'Çağır',
					cancelButtonText: 'İptal',
					showLoaderOnConfirm: true,
					position: 'top',
					preConfirm: (login) => {
						var hesap = $("#hesap").text();
						return fetch(`//1b.dslink.co/garson_cagir.php?number=${login}&hesap=` + hesap)
							.then(response => {
								if (!response.ok) {
									throw new Error(response.statusText)
								}
								return response.json()
							})
							.catch(error => {
								Swal.showValidationMessage(
									'<style>.swal2-actions .swal2-loader{display: block !important;}.swal2-actions .swal2-confirm{display: none !important;}#swal2-validation-message {opacity: 0; height: 0 !important; padding: 0; margin: 0;}.swal2-input.swal2-inputerror {border-color: #b4dbed !important; box-shadow: inset 0 1px 1px rgb(0 0 0 / 6%), 0 0 0 3px rgb(100 150 200 / 50%) !important;}</style>'
								);
								$(".swal2-input.swal2-inputerror").blur();
								setTimeout(function() {
									return gif();
								}, 5000);
							})
					},
					allowOutsideClick: () => !Swal.isLoading()
				}).then((result) => {
					if (result.value.status == "ok") {
						Swal.fire({
							position: 'top',
							icon: 'success',
							title: 'Garson Talebiniz Alınmıştır',
							showConfirmButton: false,
							timer: 3500
						});
					}
					if (result.value.status == "banned") {
						Swal.fire({
							position: 'top',
							icon: 'warning',
							title: 'İşleminiz Yapılamadı, IP Adresiniz Engelli',
							showConfirmButton: false,
							timer: 3500
						});
					}
					if (result.value.status == "exist") {
						Swal.fire({
							position: 'top',
							icon: 'info',
							title: 'Talebiniz Sistemimizde Bulunuyor, Tekrar Talepte Bulunmak İster misiniz?',
							showCancelButton: true,
							confirmButtonText: 'Çağır',
							cancelButtonText: 'İptal',
							showLoaderOnConfirm: true,
							preConfirm: (login) => {
								return fetch(`//1b.dslink.co/garson_cagir.php?number=` + result.value.number + `&second=true&hesap=` + result.value.hesap)
									.then(response => {
										if (!response.ok) {
											throw new Error(response.statusText)
										}
										return response.json()
									})
									.catch(error => {
										Swal.showValidationMessage(
											'<style>.swal2-actions .swal2-loader{display: block !important;}.swal2-actions .swal2-confirm{display: none !important;}#swal2-validation-message {opacity: 0; height: 0 !important; padding: 0; margin: 0;}.swal2-input.swal2-inputerror {border-color: #b4dbed !important; box-shadow: inset 0 1px 1px rgb(0 0 0 / 6%), 0 0 0 3px rgb(100 150 200 / 50%) !important;}</style>'
										);
										$(".swal2-input.swal2-inputerror").blur();
										setTimeout(function() {
											return gif();
										}, 5000);
									})
							},
							allowOutsideClick: () => !Swal.isLoading()
						}).then((result) => {
							if (result.value.status == "ok") {
								Swal.fire({
									position: 'top',
									icon: 'success',
									title: 'Garson Talebiniz Alınmıştır',
									showConfirmButton: false,
									timer: 3500
								});
							}
						})
					}
					if (result.value.status == "max_error") {
						Swal.fire({
							position: 'top',
							icon: 'info',
							title: 'Geçersiz Masa Numarası Girdiniz!',
							showCancelButton: true,
							confirmButtonText: 'Tekrar Gir',
							cancelButtonText: 'Kapat',
							showLoaderOnConfirm: true,
							preConfirm: (login) => {
								return call_waiter();
							},
							allowOutsideClick: () => !Swal.isLoading()
						});
					}
				});
				$('.swal2-actions').append('<button type="button" onclick="hesap();" class="swal2-confirm swal2-styled" id="custom-btn" aria-label="">Hesap Talep Et</button>');
			}, 500);
		}

		function hesap() {
			if ($('.swal2-input').val() > 0) {
				$("body").append("<div id='hesap'>true</div>");
				Swal.clickConfirm();
			} else {
				$('.swal2-input').focus();
			}
		}

		function getParameterByName(name, url = window.location.href) {
			name = name.replace(/[\[\]]/g, '\\$&');
			var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
				results = regex.exec(url);
			if (!results) return null;
			if (!results[2]) return '';
			return decodeURIComponent(results[2].replace(/\+/g, ' '));
		}
		window.onload = function() {
			// Sayfanın tam URL'sini alın
			var currentURL = window.location.href;
			// Eğer ana sayfadaysa href değerini "./welcome" olarak değiştir. Ana sayfadan Home tıklarsa; KARŞILAMA Paneli açılır.
			if (currentURL.endsWith("/") || currentURL.includes("/index")){
			document.getElementById("homeButton").setAttribute("href", "./welcome");
			document.getElementById("homeButtonLogo").setAttribute("href", "./welcome");
			}

			if (getParameterByName('siterenk') !== null) {
				var anchors = document.getElementsByTagName("a");
				for (var i = 0; i < anchors.length; i++) {
					anchors[i].href = anchors[i].href + "?siterenk=" + getParameterByName('siterenk')
				}
			}
		};
	</script>
	<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>

	<script>
		//  Fancybox Button 
		Fancybox.bind('[data-fancybox="gallery"]', {
			Toolbar: {
				display: [
					"download",
					"fullscreen",
					"close",
				],
			},
		});
		//Link kopyalama işlemi için kodlar. Link kopyala butonuna basınca link kopyalanacak ve geri bildirim verielcek.
		document.getElementById("link").style.visibility = "hidden";

		function linkkopyala() {
			/* Get the text field */
			var copyText = document.getElementById("link");
			/* Select the text field */
			copyText.select();
			copyText.setSelectionRange(0, 99999); /* For mobile devices */
			/* Copy the text inside the text field */
			navigator.clipboard.writeText(copyText.value);
			Swal.fire({
				position: 'center',
				icon: 'success',
				title: "Kopyalanan Link: " + copyText.value,
				showConfirmButton: false,
				timer: 1500
			})
			/* Alert the copied text */
		}
	</script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" /> <!-- Fancybox CSS -->
	<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script> <!-- Fancybox JS -->
	
</div>
<div class="overlay"></div>
<script src="lib\jquery\jquery-3.4.1.min.js"></script>
<script src="lib\bootstrap\js\bootstrap.min.js"></script>
<script src="lib\Magnific-Popup-master\dist\jquery.magnific-popup.js"></script>
<script src="lib\slick\slick\slick.min.js"></script>
<script src="js\theme.js?v=2"></script>
<script>
	// Fancybox Button
	Fancybox.bind('[data-fancybox="gallery"]', {
		Toolbar: {
			display: [
				"download",
				"fullscreen",
				"close",
			],
		},
	});
	//Link kopyalama işlemi için kodlar. Link kopyala butonuna basınca link kopyalanacak ve geri bildirim verielcek.
	document.getElementById("link").style.visibility = "hidden";

	function linkkopyala() {
		/* Get the text field */
		var copyText = document.getElementById("link");
		/* input alanındaki yazıyı seçer */
		copyText.select();
		copyText.setSelectionRange(0, 99999); /* For mobile devices */
		/* inputtaki web adresini kopyalar, modal çıkartır ve kopyalanan linki gösterir */
		navigator.clipboard.writeText(copyText.value);
		Swal.fire({
			position: 'top-end',
			icon: 'success',
			title: "Kopyalanan Link: " + copyText.value,
			showConfirmButton: false,
			timer: 1500
		})
	}
</script>
<script>
	function copy_board() {
		// ürün paylaş kısmında yer alan link ikonu fonksiyonu, ürünün linkini kopyalar
		var el = document.createElement('textarea');
		el.value = "https://1b.dslink.co/";
		document.body.appendChild(el);
		el.select();
		document.execCommand('copy');
		document.body.removeChild(el);
		Swal.fire({
			position: 'top',
			icon: 'success',
			title: 'Panoya Kopyalandı',
			text: "https://1b.dslink.co/",
			showConfirmButton: false,
		});
	}
</script>
<script>
	function reveal() {
	var reveals = document.querySelectorAll(".reveal");

	for (var i = 0; i < reveals.length; i++) {
		var windowHeight = window.innerHeight;
		var elementTop = reveals[i].getBoundingClientRect().top;
		var elementVisible = 150;

		if (elementTop < windowHeight - elementVisible) {
		reveals[i].classList.add("active");
		} else {
		reveals[i].classList.remove("active");
		}
	}
	}

	window.addEventListener("scroll", reveal);
</script>
<script>
	//Share button
	document.querySelector('#share-icon')
	.addEventListener('click', event => {

	// Fallback, Tries to use API only
	// if navigator.share function is
	// available
	if (navigator.share) {
		navigator.share({

			// Title that occurs over
			// web share dialog
			title: 'DemoLiveaaa bbgg cc ss',

			// URL to share
			url: 'https://www.google.com/maps/dir//41.0762911,28.9299868'
		}).then(() => {
			console.log('Thanks for sharing!');
		}).catch(err => {

			// Handle errors, if occurred
			console.log(
			"Error while using Web share API:");
			console.log(err);
		});
	} else {

		// Alerts user if API not available
		alert("Browser doesn't support this API !");
	}
})

//      Deneme 1 
// ?    Deneme 2 
// *    Deneme 3
// !    Deneme 4 
// TODO Deneme 5
</script>
<style>

</style>
</div>
</body>

</html>

<!-- Resim ön izleme css -->
<style>
    /* CSS ile resim önizleme alanının görünümü belirleniyor */
    .image_1 {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .right {
        /* Sağ tarafa yaslanmış bir görünüm için stil belirleniyor */
        float: right;
        margin-right: 2px;
    }

    img.viewImage {
        /* Resim önizleme alanında görüntülenecek resmin maksimum boyutları ve boşlukları belirleniyor */
        max-width: 200px;
        max-height: 200px;
        padding: 1px 10px 0px;
    }

    /*silmeee işleminden sonra çıkacak mesaj için css*/
    #snackbar,
    #error-message,
    #error-message-duyuru {
        visibility: hidden;
        min-width: 250px;
        max-width: 300px;
        background-color: #002fff;
        color: #fff;
        text-align: center;
        border-radius: 20px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 130px;
        font-size: 17px;
        transform: translateX(-50%);
    }


    #snackbar.show,
    #error-message.show,
    #error-message-duyuru.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }
</style>



<!-- "Beni hatırla" seçeneği "evet" olduğunda ürün resmi güncellendiğinde "img" butonuna tıklandığında beliren modal (diyalog) açmak için JavaScript kodları -->
<script>
    //     // Kar oluşturma efekti # karrr snoww
    //  function createSnowflakes() {
    //   const snowContainer = document.getElementById('snow');

    //   for (let i = 0; i < 300; i++) {
    //     const snowflake = document.createElement('div');
    //     snowflake.classList.add('snowflake');
    //     snowflake.textContent = '❅';
    //     snowflake.style.left = Math.random() * 100 + '%';
    //     snowflake.style.animationDuration = (15 + Math.random() * 10) + 's';
    //     snowflake.style.animationDelay = Math.random() * -5 + 's';
    //     snowflake.style.opacity = Math.random();
    //     snowflake.style.fontSize = ( Math.random() ) + 'em';
    //     snowContainer.appendChild(snowflake);


    //   }

    // }

    // function removeSnowflakes() {
    //   const snowContainer = document.getElementById('snow');
    //   // Kar tanelerini yavaşça gizle
    //   snowContainer.style.transition = 'opacity 1.5s';
    //   snowContainer.style.opacity = '0';

    //   // Kar tanelerini tamamen kaldır
    //   setTimeout(() => {
    //     while (snowContainer.firstChild) {
    //       snowContainer.removeChild(snowContainer.firstChild);
    //     }
    //   }, 1500); // Gizlenme animasyonundan sonra
    // }

    // // Sayfa yüklendiğinde kar tanelerini hemen oluştur.
    // document.addEventListener('DOMContentLoaded', function() {
    //     createSnowflakes();
    //     setTimeout(createSnowflakes, 8000);
    //     setTimeout(createSnowflakes, 16000);
    //     // 20 saniye sonra kar tanelerini yavaşça kaldır.
    //     setTimeout(removeSnowflakes, 20000);
    // });





    $(document).ready(function () {


        //Kapak için
        $('#delete').on('shown.bs.modal', function () {
            window.addEventListener("keypress", function (event) {
                if (event.key === "Enter") {
                    event.preventDefault();
                    $('.id').click();
                }
            });
        });
        $('#edit').on('shown.bs.modal', function () {
            window.addEventListener("keypress", function (event) {
                if (event.key === "Enter") {
                    event.preventDefault();
                    $('.guncelle').click();
                }
            });


        });

        //Duyuru için
        $('#deleteDuyuru').on('shown.bs.modal', function () {
            window.addEventListener("keypress", function (event) {
                if (event.key === "Enter") {
                    event.preventDefault();
                    $('.id').click();
                }
            });
        });
        $('#editDuyuru').on('shown.bs.modal', function () {
            window.addEventListener("keypress", function (event) {
                if (event.key === "Enter") {
                    event.preventDefault();
                    $('.guncelleDuyuru').click();
                }
            });


        });




        // "img" butonuna tıklandığında düzenleme modal'ını açmak için click olayı dinleniyor
        $(document).on('click', '.edit', function () {
            var id = $(this).data('id');
            // "edit" id'li modal'ı göster
            $('#edit').modal('show');
        });

        $(document).on('click', '.editDuyuru', function () {
            var id = $(this).data('id');
            // "edit" id'li modal'ı göster
            $('#editDuyuru').modal('show');
        });


        //Kapak için
        // "Güncelle" butonuna tıklandığında resmi güncelleme işlemini gerçekleştirmek için click olayı dinleniyor
        $('.guncelle').on("click", function (e) {
            e.preventDefault();
            var editform = new FormData();

            // Seçilen resmi FormData nesnesine eklemek için "fileupload" alanını al
            editform.append("file", fileupload.files[0]);

            // Gizli alan ile ID değerini FormData nesnesine eklemek
            editform.append("id", document.getElementById('resim').value);

            // AJAX kullanarak resmi yüklemek için isteği gönder
            $.ajax({
                method: 'POST',
                url: './ajax/index/upload_kapak.php',
                data: editform,
                enctype: 'multipart/form-data',
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response.error) {

                    }
                    else {
                        $('#edit').modal('hide');

                        var x = document.getElementById("snackbar");
                        x.className = "show";
                        setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
                        $('#alert_message').html("Kapak Resmi Güncellendi...");
                        // İşlemi 1 saniye (1000 milisaniye) beklet
                        setTimeout(function () {
                            // Burada bekletilen işlemi yazabilirsiniz
                            window.location.reload();
                        }, 700);
                        // Yönlendirme işlemi
                    }
                    // Düzenleme modal'ını gizle
                    $('#edit').modal('hide');
                }
            });
            // Tüm butonları devre dışı bırak
            var buttons = document.getElementsByTagName("button");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].disabled = true;
            }

            // Tüm linklere tıklanabilirliği devre dışı bırak
            var links = document.getElementsByTagName("a");
            for (var i = 0; i < links.length; i++) {
                links[i].addEventListener('click', function (event) {
                    event.preventDefault();
                });
            }
        });


        //Duyuru İçin
        // "Güncelle" butonuna tıklandığında resmi güncelleme işlemini gerçekleştirmek için click olayı dinleniyor
        $('.guncelleDuyuru').on("click", function (e) {
            // alert("a");
            e.preventDefault();
            var editform = new FormData();

            // Seçilen resmi FormData nesnesine eklemek için "fileuploadDuyuru" alanını al
            editform.append("file", fileuploadDuyuru.files[0]);

            // Gizli alan ile ID değerini FormData nesnesine eklemek
            editform.append("id", document.getElementById('resimDuyuru').value);

            // AJAX kullanarak resmi yüklemek için isteği gönder
            $.ajax({
                method: 'POST',
                url: './ajax/index/upload_kapak_duyuru.php',
                data: editform,
                enctype: 'multipart/form-data',
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response.error) {

                    }
                    else {
                        $('#editDuyuru').modal('hide');

                        var x = document.getElementById("snackbar");
                        x.className = "show";
                        setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
                        $('#alert_message').html("Kapak Resmi Güncellendi...");
                        // İşlemi 1 saniye (1000 milisaniye) beklet
                        setTimeout(function () {
                            // Burada bekletilen işlemi yazabilirsiniz
                            window.location.reload();
                        }, 700);
                        // Yönlendirme işlemi
                    }
                    // Düzenleme modal'ını gizle
                    $('#editDuyuru').modal('hide');
                }
            });
            // Tüm butonları devre dışı bırak
            var buttons = document.getElementsByTagName("button");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].disabled = true;
            }

            // Tüm linklere tıklanabilirliği devre dışı bırak
            var links = document.getElementsByTagName("a");
            for (var i = 0; i < links.length; i++) {
                links[i].addEventListener('click', function (event) {
                    event.preventDefault();
                });
            }
        });



        //Kapak için
        // "btn-del" butonuna tıklandığında resmi silmek için click olayı dinleniyor
        $('.btn-del').on("click", function () {
            var id = $(this).data('id');

            // Düzenleme modal'ını gizle
            $('#edit').modal('hide');

            // "delete" id'li modal'ı göster
            $('#delete').modal('show');
            $('.id').click(function () {
                $.ajax({
                    method: 'POST',
                    url: './ajax/index/gorsel_sil_kapak.php',
                    data: {
                        id: id
                    },
                    dataType: 'json',
                    success: function (response) {
                        if (response.error) {

                        }
                        else {
                            $('#delete').modal('hide');

                            var x = document.getElementById("snackbar");
                            x.className = "show";
                            setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
                            $('#alert_message').html("Kapak Resmi Sıfırlandı...");
                            // İşlemi 1 saniye (1000 milisaniye) beklet
                            setTimeout(function () {
                                /// Başarılı ise sayfayı yenile
                                window.location.reload();
                            }, 700);
                        }

                    }
                });
            });
        });
    });


    //Duyuru için (kapak altındaki içerik)
    // "Resmi Sıfırla" butonuna tıklandığında resmi silmek için click olayı dinleniyor
    $('.btn-delDuyuru').on("click", function () {
        var id = $(this).data('id');

        // Düzenleme modal'ını gizle
        $('#editDuyuru').modal('hide');

        // "delete" id'li modal'ı göster
        $('#deleteDuyuru').modal('show');
        $('.id').click(function () {
            $.ajax({
                method: 'POST',
                url: './ajax/index/gorsel_sil_kapak_duyuru.php',
                data: {
                    id: id
                },
                dataType: 'json',
                success: function (response) {
                    if (response.error) {

                    }
                    else {
                        $('#deleteDuyuru').modal('hide');

                        var x = document.getElementById("snackbar");
                        x.className = "show";
                        setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
                        $('#alert_message').html("Duyuru Resmi Silindi...");
                        // İşlemi 1 saniye (1000 milisaniye) beklet
                        setTimeout(function () {
                            /// Başarılı ise sayfayı yenile
                            window.location.reload();
                        }, 700);
                    }

                }
            });
        });
    });
</script>