* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html, body { height: 100%; }
/* Ürün detay sayfası: viewport yüksekliğini kaplasın ve içteki liste kayabilsin */
.product-detail {
  display: flex;          /* zaten JS ile flex yapılıyor ama CSS’te de dursun */
  flex-direction: column;
  height: 100vh;          /* 100% yerine viewport yüksekliği */
  min-height: 0;          /* flex-child overflow:auto olan elemanların kaymasına izin verir */
}

/* Liste zaten var ama güvence için: */
.products-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;          /* ebeveyn flex’teyken şart */
}

body {
    background-color: #f5f5f5;
    overflow-x: hidden;
    background-image: url('img/nokzem-s.jpg');
    background-size: cover;
    /* Resim ekranı doldursun */
    background-position: center;
    /* Ortalasın */
    background-repeat: no-repeat;
    /* Tekrarlamasın */
    background-attachment: fixed;
    /* Sabit kalsın */
}

/* Genel stiller */
.container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Üst başlık */
.header {
    background-color: #000000;
    padding: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10;
    position: sticky;
    top: 0;
}


@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.logo {
    width: 190px;
    height: 85px;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-weight: bold;
    font-size: 22px;
    overflow: hidden;
}

.logo img {
    height: 100%;
    /* Dikey boy tamamen kapsasın */
    width: auto;
    /* En orantılı olarak ayarlansın */
    display: block;
    /* Fazla boşluk bırakmasın */
}

.logo video {
    width: auto;
    /* İstediğiniz genişlik */
    height: 85px;
    /* Orantıyı korur */
}

/* Ana içerik alanı */
.content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Kategori kartları */
.category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 80px;
}

.category-card {
    border: #cdb44e 1px solid;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.8);
    /* yatayKayma dikeyKayma bulanıklıkRadius */
    position: relative;
    height: 160px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.category-card:hover {
    transform: translateY(-5px);
}

.category-card:nth-child(1) {
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}

.category-card:nth-child(2) {
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
}

.category-card:nth-child(3) {
    background: linear-gradient(135deg, #ffecd2, #fcb69f);
}

.category-card:nth-child(4) {
    background: linear-gradient(135deg, #d4fc79, #96e6a1);
}

.category-card:nth-child(5) {
    background: linear-gradient(135deg, #84fab0, #8fd3f4);
}

.category-card:nth-child(6) {
    background: linear-gradient(135deg, #a6c0fe, #f68084);
}

/* resimlerin altındaki degrade için, img nin üstündeki div */
.category-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.category-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    /* sadece alt yarısı için degrade */
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.category-wrapper video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Videoyu kırparak kutuyu tamamen doldurur */
    margin: 0;
    padding: 0;
}

.category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-title {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Ürün detay sayfası */
.product-detail {
    display: none;
    flex-direction: column;
    height: 100%;
}

.product-header {
    position: relative;
    height: 120px;
    overflow: hidden;
}

.product-header-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-header-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    color: white;
}

.product-header-title {
    font-size: 24px;
    font-weight: bold;
}

.back-button {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
}

.back-button span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #333;
    margin: 4px 0;
    transition: 0.3s;
}

.back-button span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.back-button span:nth-child(2) {
    opacity: 0;
}

.back-button span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Var olanı koruyoruz */
.products-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Kategoriyi 2'li grid yapalım. JS görünürken inline 'display:block' verebilir,
   yine de grid olsun diye attribute selector + !important kullandık. */
.products-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.products-container[style*="display: block"] {
    display: grid !important;
}

/* Kart: koyu gri zemin, radius, gölge */
.product-card {
    position: relative;
    display: block;
    /* Dikey düzen */
    background-color: #1d1d1d;
    /* koyu gri */
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
    padding: 4px;
    min-height: 180px;
    overflow: hidden;
    /* taşanları kes */
}

/* İçten 4px boşlukla altın çerçeve (2px) */
.product-card::before {
    content: "";
    position: absolute;
    inset: 8px;
    /* her kenardan 4px içeri */
    border: 1px solid #d4af37;
    /* altın ton */
    border-radius: 8px;
    /* dış radius - 4px */
    pointer-events: none;
    z-index: 1;
}

/* Ürün görseli: üstte ortada, çerçevenin üstünde */
.product-image {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -18px;
    /* biraz yukarı taşı */
    width: 110px;
    height: 110px;
    object-fit: contain;
    /* PNG’ler için ideal */
    z-index: 2;
    /* altın çerçevenin üzerinde */
    display: block;
}

/* Metin alanını görsele çarpmaması için üstten boşluk bırak */
.product-info {
    flex: 1;
    padding: 10px;
    padding-top: 80px;
    /* görsele yer aç */
    color: #ececec;
    /* koyu gri zeminde okunabilir */
}

/* Başlık ve açıklama renk/boşlukları */
.product-name {
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 6px;
    color: #ffffff;
    text-align: center;
}

/*
.product-description {
  font-size: 12px;
  color: #c9c9c9;
  margin-bottom: 8px;
  line-height: 1.45;
}
.allergen-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 6px;
}
.allergen-icon {
  width: 20px;
  height: 20px;
  display: block;
}*/


/* Fiyat rozeti: sağ altta küçük beyaz kutu */
.product-price {
    position: absolute;
    bottom: 0px;
    left: 50%;
    /* soldan %50 */
    transform: translateX(-50%);
    /* ortalamak için sola kaydır */
    background: #ada53a;
    padding: 2px 8px;
    border-radius: 6px;
    /* border: 1px dotted #333; */
    font-weight: 600;
    font-size: 15px;
    color: #232323;
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.4); */
    z-index: 3;
}
.tl{
    font-size: 0.8em;
}

/*
.product-price {
    font-weight: bold;
    font-size: 16px;
    color: #e74c3c;
    text-align: right;
}
*/
/* Dil seçimi için span stilleri */
.lang-tr,
.lang-en,
.lang-de,
.lang-fr,
.lang-es,
.lang-it,
.lang-ru,
.lang-ar,
.lang-fa,
.lang-nl {
    display: none;
}

/* Fotoğraf sayfası 
.photos-page {
    display: none;
    padding: 15px;
    margin-bottom: 80px;
}
*/
.photos-page {
    display: none;
    padding: 15px;
    height: calc(100vh - 180px);
    /* Header (90px) + Bottom Nav (90px) */
    overflow-y: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/*
.photos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
*/
.photos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding-bottom: 20px;
    /* Alt boşluk ekleyin */
}

.photo-card {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.photo-card:hover {
    transform: translateY(-5px);
}

.photo-card:nth-child(odd) {
    height: 200px;
}

.photo-card:nth-child(even) {
    height: 240px;
}

.photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Alt navigasyon */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000000;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.nav-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #000000;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    text-decoration: none;
}

.nav-button img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    margin-bottom: 5px;
}

.nav-button.active {
    background-color: #e74c3c;
    color: white;
    transform: translateY(-10px);
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
}

.nav-button i {
    font-size: 24px;
    margin-bottom: 5px;
}

.nav-button span {
    font-size: 12px;
}

/* Dil seçici */
.language-selector {
    position: fixed;
    bottom: 90px;
    right: 20px;
    display: none;
    flex-direction: column-reverse;
    align-items: center;
    z-index: 200;
}

.language-selector.active {
    display: flex;
}

.language-option {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: white;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transform: translateY(100px);
    opacity: 0;
    animation: slideUp 0.3s forwards;
    border: 2px solid #fff;
}

.language-option img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

@keyframes slideUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.language-option:nth-child(1) {
    animation-delay: 0.05s;
}

.language-option:nth-child(2) {
    animation-delay: 0.1s;
}

.language-option:nth-child(3) {
    animation-delay: 0.15s;
}

.language-option:nth-child(4) {
    animation-delay: 0.2s;
}

.language-option:nth-child(5) {
    animation-delay: 0.25s;
}

.language-option:nth-child(6) {
    animation-delay: 0.3s;
}

.language-option:nth-child(7) {
    animation-delay: 0.35s;
}

.language-option:nth-child(8) {
    animation-delay: 0.4s;
}

.language-option:nth-child(9) {
    animation-delay: 0.45s;
}

.language-option:nth-child(10) {
    animation-delay: 0.5s;
}

/* İkonlar */
.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");
}

.nav-button.active .icon-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");
}

.icon-photo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
}

.nav-button.active .icon-photo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
}

.icon-language {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z'/%3E%3C/svg%3E");
}

.nav-button.active .icon-language {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z'/%3E%3C/svg%3E");
}

/* Bayrak ikonu */
.flag-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

.flag-tr {
    background-image: url('img/tr.png');
}

.flag-en {
    background-image: url('img/gb.png');
}

.flag-de {
    background-image: url('img/de.png');
}

.flag-fr {
    background-image: url('img/fr.png');
}

.flag-es {
    background-image: url('img/es.png');
}

.flag-it {
    background-image: url('img/it.png');
}

.flag-ru {
    background-image: url('img/ru.png');
}

.flag-ar {
    background-image: url('img/sa.png');
}

.flag-fa {
    background-image: url('img/fa.png');
}

.flag-nl {
    background-image: url('img/nl.png');
}

/* ===================================== MODAL =================================== */
.modal-overlay{
  position:fixed; inset:0; width:100vw; height:100vh;
  background:rgba(0,0,0,.8); backdrop-filter:blur(8px);
  z-index:1000; opacity:0; visibility:hidden;
  transition:all .4s cubic-bezier(.4,0,.2,1);
}
.modal-overlay.active{ opacity:1; visibility:visible; }

.modal-container{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.7);
  width:90%; max-width:500px; max-height:85vh;
  background:linear-gradient(145deg,#fff,#f8f9fa);
  border-radius:20px; overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.2);
  transition:all .4s cubic-bezier(.4,0,.2,1); backdrop-filter:blur(20px);
}
.modal-overlay.active .modal-container{ transform:translate(-50%,-50%) scale(1); }

.modal-header{
  position:relative; width:100%; height:310px;
  background:linear-gradient(0deg,#775505 0%,#000000 100%);
  color:#fff; text-align:center; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
  padding:0 25px 25px;
}
.modal-close{
  position:absolute; top:15px; right:15px; width:40px; height:40px;
  border:none; background:rgba(0,0,0,.6); backdrop-filter:blur(10px);
  border-radius:50%; color:#fff; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .3s ease; z-index:4;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.modal-close:hover{ background:rgba(0,0,0,.8); transform:rotate(90deg) scale(1.1); }

.modal-product-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.modal-header::before{
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.8) 100%);
}
.modal-product-title{
  position:relative; z-index:3; font-size:24px; font-weight:bold; margin:0;
  text-shadow:0 2px 8px rgba(0,0,0,.8), 0 0 20px rgba(0,0,0,.5);
  letter-spacing:1px; max-width:90%;
}
.modal-body{ padding:30px 25px; overflow-y:auto; max-height:60vh; background: #1d1d1d; }
.modal-description{ font-size:16px; line-height:1.6; color:#555; margin-bottom:25px; text-align:center; }

.modal-allergens{ margin-bottom:25px; }
.allergen-title{ font-weight:bold; font-size:16px; color:#bbbbbb; margin-bottom:15px; display:flex; align-items:center; }
.allergen-title::before{ content:"⚠️"; margin-right:8px; }
.allergen-grid{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.allergen-item{
  display:flex; flex-direction:column; align-items:center; padding:10px;
  background:linear-gradient(145deg,#f8f9fa,#e9ecef);
  border-radius:12px; box-shadow:0 4px 8px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .2s ease;
}
.allergen-item:hover{ transform:translateY(-2px); }
.allergen-item img{ width:24px; height:24px; margin-bottom:5px; }
.allergen-text{ font-size:12px; color:#666; text-align:center; font-weight:500; }

.modal-price{
  text-align: center; margin-top:25px; padding:20px;
  /* background:linear-gradient(145deg,#ada53a,#f8f9fa); border-radius:15px; */
  background: #ada53a; border-radius: 15px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.1);
}
.price-label{ font-size:14px; color:#2f2f2f; margin-bottom:5px; }
.price-value{ font-size:28px; font-weight:bold; color:#2f2f2f; text-shadow:0 2px 4px rgba(231,76,60,.3); }

/* Responsive */
@media (max-width:480px){
  .modal-container{ width:calc(100vw - 20px); border-radius:15px; }
  .modal-header{ height:250px; padding:0 20px 20px; }
  .modal-product-title{ font-size:22px; }
  .modal-body{ padding:25px 20px; }
}
@media (max-width:360px){
  .modal-container{ width:calc(100vw - 10px); border-radius:12px; }
  .modal-header{ height:220px; padding:0 15px 15px; }
  .modal-product-title{ font-size:20px; }
  .modal-body{ padding:20px 15px; }
}
/* ============================================================================== */