* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Bebas Neue', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

/* iOS Safari üst çentik/alan telafisi — diğer tarayıcılarda 0'dır */
@supports (padding: max(0px)) {

    .main-content,
    .product-detail {
        margin-top: calc(90px + env(safe-area-inset-top));
    }
}
.product-header,
  .language-selector {
    top: calc(90px + env(safe-area-inset-top));
  }


body {

    /* background-color: #f5f5f5; */

    overflow-x: hidden;

    height: 100vh;

    display: flex;

    flex-direction: column;

    background-image: url('img/bulutZemin.jpg');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

}



/* 1) Mobilde fixed’i kapat */

@media (max-width: 1024px) {

    body {

        background-attachment: scroll;

    }

}



.review-image {

    width: 120px;

    height: auto;

    border-radius: 5px;

    margin-top: 30px;

}



.ymenu-link {

    width: 50px;

    height: auto;

    border-radius: 2px;

}





.fixed-gif {

    position: fixed;

    top: 70px;

    /* Üstten mesafe */

    right: 90px;

    /* Sağdan mesafe */

    z-index: 9999;

    /* Her şeyin üstünde */

    pointer-events: none;

    /* Tıklanamaz, isterseniz kaldırabilirsiniz */

    width: 100px;

    /* Sabit genişlik */

    height: auto;

    display: block;

    /* Görünürlüğü garantilemek için */

    transform: translateZ(0);

    /* Hardware acceleration için */

    -webkit-transform: translateZ(0);

    /* Safari/Chrome için */

    backface-visibility: hidden;

    /* Render sorunlarını önlemek için */

    -webkit-backface-visibility: hidden;

}



.fixed-gif img {

    width: 100%;

    height: auto;

    display: block;

}





/* Header */

.header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 120px;

    background-image: url('img/cloudy-sky.png');

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 32px;

    z-index: 100;

    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */

}



.logo {

    width: 210px;

    height: 60px;

    background-image: url('img/marmaraLogo.svg');

    background-size: contain;

    background-repeat: no-repeat;

    background-position: left center;

    margin-top: -10px;

}



/* Dil alanı sağda */

.language-area {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.language-btn {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: #fff;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    cursor: pointer;

    transition: transform 0.3s ease;

    z-index: 201;

    margin-bottom: 2px;

}



.language-btn img {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    display: block;

}



/* Dil etiketi tam altında, ince yazı */

.language-label {

    margin-top: 2px;

    font-size: 12px;

    color: #444;

    font-weight: 400;

    letter-spacing: 0.5px;

    text-align: center;

    min-height: 16px;

}



.language-label span {

    display: inline-block;

    max-width: 60px;

    /* butonun genişliğine göre ayarlayın */

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-align: center;

}



.language-label span.active {

    display: inline-block;

}



/* Dil seçici dropdown */

.language-selector {

    position: fixed;

    top: 90px;

    right: 20px;

    display: none;

    flex-direction: column;

    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: slideDown 0.3s forwards;

    border: 2px solid #fff;

}



.language-option img {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    cursor: pointer;

    border: 1px solid #ddd;

    transition: box-shadow 0.2s;

}



.language-option img:hover {

    box-shadow: 0 0 8px #2196f3;

}



@keyframes slideDown {

    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;

}



/* Ana İçerik */

.main-content {

    flex: 1;

    margin-top: 90px;

    margin-bottom: 0px;

    overflow-y: auto;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

    padding: 10px;

    padding-bottom: 200px;

    /* Footer yüksekliğinden biraz fazla olmalı */

    overflow-y: auto;

}



/* Kategori Kartları */

.category-grid {

    display: flex;

    flex-direction: column;

    /* Dikey yönde sıralama */

    gap: 15px;

    /* Kartlar arası boşluk */

    padding: 7px;

    max-width: 600px;

    /* Maksimum genişlik */

    margin: 0 auto;

    /* Merkezde hizalama */

}



.category-card {

    position: relative;

    /* Relative pozisyonlama */

    width: 100%;

    min-height: 120px;

    /* Minimum yükseklik */

    border-radius: 10px;

    overflow: hidden;

    /* Video taşmasın */

    cursor: pointer;

    display: flex;

    /* Flex container */

    align-items: flex-end;

    /* İçeriği alta hizala */

    padding-bottom: 15px;

    /* Alt boşluk */

}



.category-card video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: -1;

    /* İçeriğin arkasında */

}



.category-title {

    width: 100%;

    text-align: center;

    padding: 10px;

    color: #ffffff;

    /* Beyaz yazı */

    font-family: 'Bebas Neue', sans-serif !important;

    ;

    font-size: 1.4em;

    /* Biraz daha büyük font */

    font-weight: normal;

    text-shadow:

        -3px -3px 3px #00000078,

        3px -3px 3px #00000078,

        -3px 3px 3px #00000078,

        3px 3px 3px #00000078;

    letter-spacing: 1.5px;

    /* Harfler arası mesafe */

}







.category-card img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: -1;

}



.category-card {

    position: relative;

    width: 100%;

    min-height: 120px;

    border-radius: 10px;

    overflow: hidden;

    cursor: pointer;

    display: flex;

    align-items: flex-end;

    padding-bottom: 2px;

}



/* Siyah overlay için yeni pseudo-element */

.category-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to top,

            rgba(0, 0, 0, 0.9) 0%,

            /* Altta daha koyu */

            rgba(0, 0, 0, 0.0) 70%,

            /* Ortada yarı saydam */

            rgba(0, 0, 0, 0.0) 100%
            /* Üstte daha şeffaf */

        );

    z-index: 0;

}



/* Video'nun z-index'ini güncelle */

.category-card video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: -1;

}



/* Yazının overlay'in üstünde durması için */

.category-title {

    position: relative;

    z-index: 1;

    /* ...existing code... */

}





























/* Diğer dillerdeki metinleri gizle */

.category-title span:not(.active) {

    display: none;

}



/* Ürün Detay Sayfası */

.product-detail {

    display: none;

    flex-direction: column;

    height: 100%;

    margin-top: 90px;

    margin-bottom: 90px;

    overflow-y: auto;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

}



.product-header {

    position: fixed;

    top: 90px;

    left: 0;

    width: 100%;

    height: 70px;

    background-color: #fff;

    display: flex;

    align-items: center;

    padding: 0 20px;

    z-index: 90;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}



.back-button {

    width: 35px;

    height: 35px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    margin-right: 15px;

    background-color: #f0f0f0;

    border-radius: 5px;

    transition: background-color 0.3s ease;

    position: absolute;

    /* konumlandırmayı aktif eder */

    bottom: 5px;

    /* kutunun altından 5px boşluk */

    left: 15px;

    /* örnek: soldan 15px, ihtiyacına göre ayarla */

}



.back-button:hover {

    background-color: #e0e0e0;

}



.back-button span {

    display: block;

    width: 25px;

    height: 3px;

    background-color: #333;

    margin: 3px 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);

}



.product-category-title {

    font-size: 20px;

    font-weight: bold;

    color: #ffffff;

    letter-spacing: 1.5px;

    position: absolute;

    /* konumlandırmayı aktif eder */

    bottom: 5px;

    /* kutunun altından 5px boşluk */

    left: 65px;

    /* örnek: soldan 15px, ihtiyacına göre ayarla */

}



.products-container {

    margin-top: 80px;

    margin-bottom: 30px;

    padding: 0 20px;

    position: relative;

}



/* Product cards için container */

.products-category {

    width: 100%;

    position: relative;

}



.product-card {

    display: flex;

    margin-bottom: 15px;

    background-color: white;

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    padding: 15px;

    min-height: 100px;

    overflow: hidden;

}



.product-image {

    width: 132px;

    height: 100px;

    border-radius: 10px;

    object-fit: cover;

    margin-right: 15px;

}



.product-info {

    flex: 1;

}



.product-name {

    font-weight: bold;

    font-size: 18px;

    margin-bottom: 5px;

}



.product-name span {

    display: inline-block;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.product-description {

    font-size: 14px;

    color: #666;

    margin-bottom: 5px;

    line-height: 1.4;

}



.allergen-icons {

    display: flex;

    flex-wrap: wrap;

    margin-bottom: 2px;

}



.allergen-icon {

    width: 20px;

    height: 20px;

    margin-right: 5px;

}



.product-price {

    font-weight: bold;

    font-size: 18px;

    color: #e74c3c;

    text-align: right;

    margin-top: 2px;

}



/* Footer */

.footer {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 200px;

    /* background-image: url('img/kopru2.png');*/

    background-size: cover;

    background-position: center bottom;

    background-repeat: no-repeat;

    z-index: 100;

    /* box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);*/

}



/* 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;

}



.lang-tr {

    display: inline;

}



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

   MODAL YAPISI ----------------------------------------------------

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



/* Modal Overlay */

.modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(0, 0, 0, 0.8);

    backdrop-filter: blur(8px);

    z-index: 1000;

    opacity: 0;

    visibility: hidden;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.modal-overlay.active {

    opacity: 1;

    visibility: visible;

}



/* Modal Container - Mevcut .modal-container kuralını bu kodla değiştirin */

.modal-container {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0.7);

    width: 90%;

    max-width: 500px;

    max-height: 85vh;

    background: linear-gradient(145deg, #ffffff, #f8f9fa);

    border-radius: 20px;

    box-shadow:

        0 25px 60px rgba(0, 0, 0, 0.3),

        0 0 0 1px rgba(255, 255, 255, 0.2);

    overflow: hidden;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    backdrop-filter: blur(20px);

}



.modal-overlay.active .modal-container {

    transform: translate(-50%, -50%) scale(1);

}



/* Modal Header - Mevcut .modal-header kuralını bu kodla değiştirin */

.modal-header {

    position: relative;

    width: 100%;

    height: 310px;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

    text-align: center;

    overflow: hidden;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding: 0 25px 25px 25px;

}





/* Modal Close Button - konumu ayarla */

.modal-close {

    position: absolute;

    top: 15px;

    right: 15px;

    width: 40px;

    height: 40px;

    border: none;

    background: rgba(0, 0, 0, 0.6);

    backdrop-filter: blur(10px);

    border-radius: 50%;

    color: white;

    font-size: 20px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    z-index: 4;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

}



.modal-close:hover {

    background: rgba(0, 0, 0, 0.8);

    transform: rotate(90deg) scale(1.1);

}



/* Modal Product Image - Mevcut .modal-product-image kuralını bu kodla değiştirin */

.modal-product-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 1;

}



/* Resmin üstüne koyu overlay */

.modal-header::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to bottom,

            rgba(0, 0, 0, 0.0) 0%,

            rgba(0, 0, 0, 0.1) 50%,

            rgba(0, 0, 0, 0.8) 100%);

    z-index: 2;

}



/* Modal Product Title - Mevcut .modal-product-title kuralını bu kodla değiştirin */

.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, 0.8),

        0 0 20px rgba(0, 0, 0, 0.5);

    letter-spacing: 1px;

    max-width: 90%;

}





/* Modal Body */

.modal-body {

    padding: 30px 25px;

    overflow-y: auto;

    max-height: 60vh;

}



.modal-description {

    font-size: 16px;

    line-height: 1.6;

    color: #555;

    margin-bottom: 25px;

    text-align: center;

}



/* Allergen Section */

.modal-allergens {

    margin-bottom: 25px;

}



.allergen-title {

    font-weight: bold;

    font-size: 16px;

    color: #333;

    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, 0.1),

        inset 0 1px 0 rgba(255, 255, 255, 0.5);

    transition: transform 0.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;

}



/* Price Section */

.modal-price {

    text-align: center;

    margin-top: 25px;

    padding: 20px;

    background: linear-gradient(145deg, #fff, #f8f9fa);

    border-radius: 15px;

    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

}



.price-label {

    font-size: 14px;

    color: #888;

    margin-bottom: 5px;

}



.price-value {

    font-size: 28px;

    font-weight: bold;

    color: #e74c3c;

    text-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);

}



/* Responsive düzenlemeler - mevcut responsive kurallarına ekleyin */

@media (max-width: 480px) {

    .modal-container {

        width: calc(100vw - 20px);

        max-width: none;

        margin: 0;

        left: 50%;

        transform: translate(-50%, -50%) scale(0.7);

        border-radius: 15px;

    }



    .modal-overlay.active .modal-container {

        transform: translate(-50%, -50%) scale(1);

    }



    .modal-header {

        height: 250px;

        /* Dar ekranlarda biraz daha küçük */

        padding: 0 20px 20px 20px;

    }



    .modal-product-title {

        font-size: 20px;

    }



    .modal-body {

        padding: 25px 20px;

    }

}



@media (max-width: 360px) {

    .modal-container {

        width: calc(100vw - 10px);

        border-radius: 12px;

    }



    .modal-header {

        height: 220px;

        /* Çok dar ekranlarda daha küçük */

        padding: 0 15px 15px 15px;

    }



    .modal-product-title {

        font-size: 18px;

    }



    .modal-body {

        padding: 20px 15px;

    }

}



/* ARA BAŞLIK STİLLERİ - style.css dosyasına ekleyin */

.section-header {

    margin: 30px 0 20px 0;

    text-align: center;

    position: relative;

}



.section-header h2 {

    font-family: 'Bebas Neue', sans-serif;

    font-size: 24px;

    font-weight: normal;

    color: #333;

    letter-spacing: 2px;

    margin: 0;

    padding: 15px 25px;

    background: linear-gradient(145deg, #ffffff, #f8f9fa);

    border-radius: 15px;

    box-shadow:

        0 4px 15px rgba(0, 0, 0, 0.1),

        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    position: relative;

    overflow: hidden;

    text-transform: uppercase;

}



.section-header h2::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, 0.4),

            transparent);

    animation: shimmer 3s infinite;

}



@keyframes shimmer {

    0% {

        left: -100%;

    }



    100% {

        left: 100%;

    }

}



/* Responsive */

@media (max-width: 480px) {

    .section-header h2 {

        font-size: 20px;

        padding: 12px 20px;

        letter-spacing: 1.5px;

    }

}



@media (max-width: 360px) {

    .section-header h2 {

        font-size: 18px;

        padding: 10px 15px;

        letter-spacing: 1px;

    }

}



/* Footer Links Styling */

.google-yorum {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    margin-top: 20px;

}



.google-yorum a {

    flex: 0 0 auto;

}



.google-yorum .review-link {

    margin-right: auto;

}



.google-yorum a:last-child {

    margin-left: auto;

}
/* 100vh yerine daha stabil minimum yükseklik kullan */
body {
  min-height: 100vh;     /* mevcut height:100vh varsa etkisini yumuşatır */
  height: auto;          /* sabit yüksekliği bırak, içerik kadar uzasın */
}

/* Tarayıcı destekliyorsa dinamik viewport birimi kullan (iOS/modern) */
@supports (height: 100svh) {
  body { min-height: 100svh; }  /* adres çubuğu aç/kapa etkisini düzeltir */
}

.footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 200px; overflow: hidden; z-index: 100; }
.footer video { position: absolute; bottom: -20px; left: 0; width: 100%; height: auto; display: block; }
.footer img   { position: absolute; bottom: -20px; left: 0; width: 100%; height: auto; display: none; }