/* ----------------------------------------------------------------------------
 * Azeem-Et — siteye özel ekler
 *
 * Sayfa markup'ı Spicyhunt temasıyla birebirdir; buradaki kurallar yalnızca temada
 * karşılığı OLMAYAN üç şey içindir:
 *   1. Bildirim şeridi (TempData mesajları)
 *   2. Hero'da YouTube arka planı (tema yalnızca self-hosted video sunuyor)
 *   3. Blog yorumları ve sunucu tarafı doğrulama (temada bu bileşenler yok)
 * Tema dosyalarına (assets/css/*) dokunulmaz.
 * -------------------------------------------------------------------------- */

/* --- 1. Bildirim şeridi --- */
.site-alert {
    padding-top: 20px;
}

    .site-alert .alert {
        border-radius: 0;
        border: 1px solid var(--divider-color);
        background: var(--dark-divider-color);
        color: var(--primary-color);
    }

/* --- 2. Hero'da YouTube arka planı ---
   Self-hosted video için tema zaten .hero.hero-video .hero-bg-video video kuralını
   içeriyor. Aşağısı yalnızca iframe'i (YouTube) aynı şekilde kaplatmak ve videonun
   slider slaytları içinde de çalışması içindir. */
.hero .hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

    .hero .hero-bg-video iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw;
        height: 56.25vw; /* 16:9 */
        min-height: 100%;
        min-width: 177.77vh; /* 16:9 */
        transform: translate(-50%, -50%);
        border: 0;
        pointer-events: none;
    }

.hero.hero-slider-layout .hero-slide {
    overflow: hidden;
}

    .hero.hero-slider-layout .hero-slide > .container {
        position: relative;
        z-index: 2;
    }

/* --- 3. Blog yorumları --- */
.post-comments {
    margin-top: 60px;
}

    .post-comments h2 {
        margin-bottom: 25px;
        font-size: 28px;
        text-transform: capitalize;
    }

    .post-comments .comment-list {
        margin: 0 0 50px;
        padding: 0;
        list-style: none;
    }

        .post-comments .comment-list li {
            padding: 25px 0;
            border-bottom: 1px solid var(--divider-color);
        }

    .post-comments .comment-body h3 {
        margin-bottom: 4px;
        font-size: 20px;
    }

    .post-comments .comment-date {
        display: block;
        margin-bottom: 12px;
        font-size: 14px;
        color: var(--text-color);
    }

    .post-comments .comment-form h2 {
        margin-bottom: 10px;
    }

    .post-comments .comment-form > p {
        margin-bottom: 30px;
        color: var(--text-color);
    }

.post-gallery {
    margin: 40px 0;
}

/* Blog yazısındaki ürün fiyatı / porsiyon gibi menü detayları */
.menu-item-title h3 small {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-color);
}

.menu-item-title del {
    margin-right: 8px;
    color: var(--text-color);
    font-weight: 400;
}

/* --- Sunucu tarafı doğrulama (ASP.NET MVC) --- */
.field-validation-error,
.validation-summary-errors,
.text-danger {
    color: var(--error-color) !important;
}

.input-validation-error {
    border-color: var(--error-color) !important;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 18px;
}

button.disabled,
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.explore_theme_panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10000;
    display: flex;
}

    .explore_theme_panel a {
        position: relative;
        height: 46px;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 600;
        color: #1d2327;
        background: #D2E761;
        transition: all 0.4s ease-in-out;
        margin-left: 10px;
        line-height: 46px;
        padding: 0px 30px;
        border: 1px solid #D2E761;
        border-radius: 30px;
    }

.animated-arrow {
    height: 46px !important;
    margin-right: -10px;
    filter: contrast(0);
}

.explore_theme_panel a.btn-buynow i {
    margin-right: 4px;
}

.explore_theme_panel a:hover {
    color: #fff;
    background: #1d2327;
    border-color: #ffffff40;
}

.explore_theme_panel a.btn-doc {
    width: 46px;
    padding: 0;
    text-align: center;
    color: #fff;
    background: #1d2327;
    display: none;
}

    .explore_theme_panel a.btn-doc i {
        font-size: 22px;
        position: relative;
        top: 2px;
    }

.offer-banner img,
.rezervasyon img {
    width: 16px;
    height: auto;
}

body.offer-banner-active {
    margin-top: 56px;
    position: relative;
}

.offer-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #F8FBEF;
    box-shadow: 0 0 10px #00000010;
    padding: 10px 20px;
    z-index: 999;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .offer-banner p {
        color: #000;
        margin: 0;
        font-weight: 600;
        font-size: 16px;
    }

a.offer-btn {
    background: #D2E761;
    color: #000;
    padding: 6px 24px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4em;
    border-radius: 40px;
    margin-left: 20px;
}

    a.offer-btn:hover {
        background: #1d2327;
        color: #fff;
    }

.offer-banner .tablet-mobile {
    display: none;
}

img.offer-animated-arrow {
    transform: rotate(180deg);
    height: 32px;
    width: auto;
    position: relative;
    top: 4px;
}

@media only screen and (max-width: 991px) {

    .offer-banner {
        z-index: 99;
    }

        .offer-banner .tablet-mobile {
            display: block;
        }

        .offer-banner .desktop,
        img.offer-animated-arrow {
            display: none;
        }

        .offer-banner p {
            font-size: 15px;
        }

    a.offer-btn {
        font-size: 14px;
        margin-left: 10px;
        min-width: 116px;
    }
}

.rezervasyon {
    position: fixed;
    bottom: 24px;
    right: -390px;
    width: 340px;
    background: #1d2327;
    border: 1px solid #ffffff20;
    border-radius: 14px;
    padding: 22px 22px 20px;
    transition: right 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9999;
    overflow: hidden;
}

    .rezervasyon.show {
        right: 20px;
    }

    .rezervasyon::before {
        content: "";
        position: absolute;
        top: -60px;
        right: -60px;
        width: 140px;
        height: 140px;
        background: radial-gradient(circle, #d2e76150, transparent 70%);
        pointer-events: none;
    }

span.html-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: #ffffff30;
    text-align: center;
    line-height: 20px;
    font-family: "Space Grotesk", sans-serif;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

    span.html-popup-close:hover {
        background: #d2e761;
        color: #1d2327;
    }

.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #d2e76120;
    border: 1px solid #d2e76160;
    color: #d2e761;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 20px;
    margin-bottom: 14px;
}

    .cta-badge .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #d2e761;
        animation: pulse 1.4s infinite;
    }

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.75);
    }
}

.cta-headline {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: #f5f1ff;
    line-height: 1.3;
    margin-bottom: 6px;
}

    .cta-headline span {
        color: #d2e761;
        text-transform: capitalize;
    }

.cta-sub {
    font-size: 13px;
    color: #ffffffbb;
    line-height: 1.5;
    margin-bottom: 16px;
}

.rezervasyon .cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #d2e761;
    color: #1d2327;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    padding: 14px;
    height: 44px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 18px #d2e76150;
    margin: 0 !important;
    box-sizing: border-box;
    text-decoration: none;
}

    .rezervasyon .cta-btn:hover {
        transform: translateY(-2px);
        background: #d2e761;
        color: #1d2327;
        box-shadow: 0 10px 24px #d2e76150;
        text-decoration: none;
    }

    .rezervasyon .cta-btn:active,
    .rezervasyon .cta-btn:focus {
        transform: translateY(0);
        background: #d2e761;
        color: #1d2327;
    }

.cta-btn svg {
    width: 15px;
    height: 15px;
}

@media (max-width: 767px) {
    .rezervasyon {
        display: none;
    }
}

/* --- 5. Liste sayfalaması (blog / galeri) ---
   Temada sayfalama bileşeni yok; buton görünümü tema .btn-default kurallarıyla uyumlu
   tutuldu ki liste altında yabancı durmasın. */
.site-sayfalama {
    margin-top: 30px;
}

    .site-sayfalama ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-sayfalama a,
    .site-sayfalama span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        height: 44px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid var(--divider-color);
        color: var(--text-color);
        font-weight: 600;
        text-decoration: none;
        transition: all .3s ease;
    }

    .site-sayfalama a:hover {
        background: var(--accent-color);
        border-color: var(--accent-color);
        color: var(--dark-color);
    }

    .site-sayfalama .active {
        background: var(--accent-color);
        border-color: var(--accent-color);
        color: var(--dark-color);
    }

    .site-sayfalama .disabled {
        opacity: .35;
    }

    .site-sayfalama .ayrac {
        border-color: transparent;
        min-width: auto;
    }

/* --- 6. Footer düzeni ---
   Tema footer'ı tek sütunluydu (logo + iki iletişim satırı) ve telif metnini sağa yaslıyordu.
   Aşağısı üç sütunlu düzeni, sütun başlıklarını, hızlı link listesini ve ortalanmış telif
   şeridini ekler. Tema dosyalarına (assets/css/*) dokunulmadı; yalnızca .footer-copyright-text
   hizası burada geçersiz kılınır. */
.main-footer {
    padding-top: 90px;
    border-top: 1px solid var(--divider-color);
}

.footer-sutunlar {
    row-gap: 40px;
}

.footer-sutun {
    height: 100%;
}

.footer-baslik {
    margin-bottom: 26px;
    font-size: 26px;
    font-weight: 500;
}

/* İletişim satırları: ikon sabit genişlikte bir sütunda durur ki çok satırlı bir değer
   (çalışma saatleri) ikonun altına kaymasın, metin hizası bozulmasın. */
.main-footer .footer-contact-item {
    align-items: flex-start;
    margin-bottom: 22px;
}

.footer-ikon {
    flex: 0 0 22px;
    margin-right: 12px;
    line-height: 1.6em;
    color: var(--accent-color);
    font-size: 15px;
}

.main-footer .footer-contact-content p + p {
    margin-top: 2px;
}

.main-footer .footer-contact-content p a:hover {
    color: var(--accent-color);
}

.footer-linkler {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .footer-linkler li + li {
        margin-top: 12px;
    }

    .footer-linkler a {
        color: var(--text-color);
        transition: color .3s ease;
    }

        .footer-linkler a:hover {
            color: var(--accent-color);
        }

.footer-sutun-marka .footer-logo {
    margin-bottom: 28px;
}

/* Telif şeridi: içerikten ince bir çizgiyle ayrılır ve ortalanır. */
.main-footer .footer-copyright {
    margin-top: 70px;
    padding: 26px 0 40px;
    border-top: 1px solid var(--divider-color);
}

.main-footer .footer-copyright-text {
    text-align: center; /* tema sağa yaslıyor */
}

.footer-yasal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 22px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

    .footer-yasal a {
        color: var(--text-color);
        transition: color .3s ease;
    }

        .footer-yasal a:hover {
            color: var(--accent-color);
        }

    /* Bağlantılar arasındaki ayraç: son öğeden sonra basılmaz. */
    .footer-yasal li + li {
        position: relative;
    }

        .footer-yasal li + li::before {
            content: "";
            position: absolute;
            left: -12px;
            top: 50%;
            width: 3px;
            height: 3px;
            margin-top: -1px;
            border-radius: 50%;
            background: var(--text-color);
            opacity: .6;
        }

@media only screen and (max-width: 991px) {
    .main-footer {
        padding-top: 60px;
    }

    .main-footer .footer-copyright {
        margin-top: 40px;
    }

    .footer-baslik {
        font-size: 22px;
        margin-bottom: 20px;
    }
}

/* --- 7. Çerez onay kutusu ---
   Rezervasyon kartıyla aynı görsel dili kullanır ama SOL altta durur: sağ alt köşe
   rezervasyon kartı ve yukarı çık butonu tarafından kullanılıyor. Kutu yalnızca ziyaretçi
   henüz karar vermemişken basılır (LayoutController.CerezOnay). */
.cerez-onay {
    position: fixed;
    left: 20px;
    bottom: 24px;
    width: 380px;
    max-width: calc(100vw - 40px);
    padding: 22px 22px 20px;
    background: #1d2327;
    border: 1px solid #ffffff20;
    border-radius: 14px;
    z-index: 10000;
    overflow: hidden;
    /* Başlangıç: biraz aşağıda ve saydam. .gorunur sınıfı js/cerez.js tarafından verilir. */
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .45s ease, transform .45s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

    .cerez-onay.gorunur {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .cerez-onay::before {
        content: "";
        position: absolute;
        top: -60px;
        left: -60px;
        width: 140px;
        height: 140px;
        background: radial-gradient(circle, #d2e76150, transparent 70%);
        pointer-events: none;
    }

.cerez-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #f5f1ff;
}

    .cerez-baslik i {
        color: #d2e761;
    }

.cerez-metin {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.55;
    color: #ffffffbb;
}

.cerez-linkler {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0 0 16px;
    font-size: 12.5px;
}

    .cerez-linkler a {
        color: #d2e761;
        text-decoration: underline;
    }

        .cerez-linkler a:hover {
            color: #fff;
        }

.cerez-butonlar {
    display: flex;
    gap: 10px;
}

.cerez-btn {
    flex: 1 1 0;
    padding: 11px 12px;
    border-radius: 8px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease, color .2s ease;
}

    .cerez-btn:hover {
        transform: translateY(-2px);
    }

.cerez-btn-kabul {
    border: none;
    background: #d2e761;
    color: #1d2327;
    box-shadow: 0 6px 18px #d2e76150;
}

.cerez-btn-red {
    border: 1px solid #ffffff30;
    background: transparent;
    color: #ffffffcc;
}

    .cerez-btn-red:hover {
        border-color: #ffffff60;
        color: #fff;
    }

/* Dar ekranda alt şerit: iki köşe boşluğu da bırakılır ki yukarı çık butonuyla
   yan yana değil, üst üste gelmesin (scroll-ust.js kutuyu ölçüp butonu yukarı alır). */
@media (max-width: 575px) {
    .cerez-onay {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-width: none;
        padding: 18px 18px 16px;
    }

    .cerez-butonlar {
        flex-direction: column;
    }
}

/* Hareketi azaltma tercihi: kutu kayarak değil, olduğu yerde belirir. */
@media (prefers-reduced-motion: reduce) {
    .cerez-onay {
        transform: none;
        transition: opacity .2s linear;
    }

        .cerez-onay.gorunur {
            transform: none;
        }

    .cerez-btn:hover {
        transform: none;
    }
}

/* --- 8. reCAPTCHA rozeti ile köşe paylaşımı ---
   v3 rozeti Google tarafından sağ alta (bottom: 14px, 60px yüksek) basılır ve z-index'i her
   şeyin üstündedir. Aynı köşede rezervasyon kartı ve yukarı çık butonu var; rozet etkinken
   (body.recaptcha-aktif, _Layout basar) ikisi de rozetin üstüne alınır. Yukarı çık butonu kart
   görünürken zaten JS ile kartın üstüne çıkar; buradaki değer kart gizliyken geçerli olan
   taban konumdur. Rozetin kendisine dokunulmaz: Google gizlenmesini değil, görünür kalmasını
   ister; taşımak yerine bizim öğelerimiz çekilir. */
body.recaptcha-aktif .rezervasyon {
    bottom: 90px;
}

body.recaptcha-aktif .scroll-ust {
    --su-alt: 90px;
}

/* Dar ekranda çerez kutusu alt şeride dönüşür ve rozetin altına girer; o da yukarı alınır. */
@media (max-width: 575px) {
    body.recaptcha-aktif .cerez-onay {
        bottom: 86px;
    }
}

/* --- 9. Menü listesi: fiyat rozetlerinin hizası ---
   Tema .menu-item-title'ı flex kurar (başlık · çizgi · fiyat) ama iki şeyi eksik bırakır:
   1) Fiyat rozeti daralabiliyor; "750 ₺" içindeki boşluktan kırılıp iki satıra ("750" / "₺")
      bölünüyor ve rozet uzuyordu.
   2) Görselsiz üründe gövde yine calc(100% - 130px) genişliğinde kalıyor; rozet öteki
      ürünlerinkinden 130px içeride bitiyor, sütun hizası bozuluyordu.
   Sabit bir alt genişlik de verildi ki 3 ve 4 basamaklı fiyatların rozetleri aynı boyda
   görünsün; indirimli fiyat (üstü çizili eski + yeni) doğal olarak daha geniş kalır. */
.menu-item-title span {
    flex-shrink: 0;
    min-width: 92px;
    white-space: nowrap;
    text-align: center;
}

/* Görsel yoksa gövde satırın tamamını alsın; rozet ötekilerle aynı kenara dayanır. */
.our-menu-item > .menu-item-body:first-child {
    width: 100%;
}

/* --- 10. Blog detayı: başlıktaki meta satırı ---
   Tema yalnızca yazar ve tarihi basar; bizde kategori, yorum ve görüntülenme de var.
   Kategori bağlantısı öteki öğelerle aynı renkte kalır (tema bağlantıya renk vermez, tarayıcı
   varsayılanı mavi olurdu); üzerine gelince vurgu rengine döner. Dar ekranda beş öğe alt alta
   kırılabilir, satır arası açıldı. */
.post-single-meta ol {
    flex-wrap: wrap;
    row-gap: 6px;
}

    .post-single-meta ol li {
        white-space: nowrap;
    }

        .post-single-meta ol li a {
            color: inherit;
            transition: color .3s ease;
        }

            .post-single-meta ol li a:hover {
                color: var(--accent-color);
            }

/* --- 11. Header'da telefon ---
   Tema header'ında yalnızca "masa ayırt" butonu var. Telefon aynı kutuya (.header-btn) girer:
   yuvarlak çerçeveli ikon + numara, butonun solunda. Kutu temada text-align:end idi; iki öğe
   yan yana durabilsin diye flex'e çevrildi. 992-1199px arası başlıkta yer daralır, orada
   yalnızca ikon kalır; 991px altında tema kutunun tamamını zaten gizler. */
.main-header .header-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
}

.header-tel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-color);
    font-weight: 600;
    white-space: nowrap;
    transition: color .3s ease;
}

    .header-tel:hover {
        color: var(--accent-color);
    }

.header-tel-ikon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--divider-color);
    border-radius: 50%;
    color: var(--accent-color);
    font-size: 14px;
    transition: all .3s ease;
}

    .header-tel:hover .header-tel-ikon {
        background: var(--accent-color);
        border-color: var(--accent-color);
        color: var(--dark-divider-color);
    }

@media only screen and (max-width: 1199px) {
    .header-tel-no {
        display: none;
    }

    .main-header .header-btn {
        gap: 14px;
    }
}