/*
Theme Name: LezizMaster
Theme URI: #
Author: Kaptan & Sen
Author URI: #
Description: Modern ve SEO Uyumlu Yemek Tarifi Teması
Version: 1.0
License: GNU General Public License v2 or later
Tags: food, recipe, blog, modern, responsive
*/

/* Reset ve Temel Ayarlar */
* { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: sans-serif; line-height: 1.6; }

/* --- YEŞİL TİK LİSTE STİLLERİ --- */
.leziz-malzeme-listesi { 
    list-style: none !important; 
    padding-left: 0 !important; 
}

.leziz-malzeme-listesi li { 
    list-style: none !important; 
    padding-left: 30px !important; 
    margin-bottom: 10px !important; 
    position: relative !important; 
}

.leziz-malzeme-listesi li::before { 
    content: "✅" !important; 
    position: absolute !important; 
    left: 0 !important; 
    top: 0 !important; 
    font-size: 16px !important; 
}
/* ---------------------------------- */

/* Kart Efektleri */
.article-kart {
    transition: all 0.3s ease-in-out;
}
.article-kart:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* --- YORUM FORMU MAKYAJI --- */
#commentform { margin-top: 20px; }
#commentform textarea, 
#commentform input[type="text"], 
#commentform input[type="email"], 
#commentform input[type="url"] {
    width: 100%;
    padding: 15px;
    border: 2px solid #f1f5f9; /* Slate-100 rengi */
    border-radius: 1rem;      /* Rounded-2xl */
    margin-bottom: 15px;
    font-family: sans-serif;
}
#commentform textarea:focus, 
#commentform input:focus {
    border-color: #f97316;    /* Orange-500 */
    outline: none;
}
#submit {
    background-color: #ea580c; /* Orange-600 */
    color: white;
    padding: 12px 25px;
    border-radius: 9999px;    /* Tam yuvarlak */
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}
#submit:hover {
    background-color: #c2410c;
}
/* --------------------------- */

/* Videoların taşmasını engelle */
.video-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
}

/* Reklamları ve Yazıyı Tam Genişliğe Zorla */
.reklam-alani, .prose {
    width: 100% !important;
    max-width: 100% !important;
}

/* Yorum Formu Giriş Alanları (Lezizya Özel) */
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background-color: #f8fafc !important;
    margin-top: 6px !important;
    margin-bottom: 16px !important;
    transition: all 0.3s !important;
}

#respond input:focus,
#respond textarea:focus {
    outline: none !important;
    border-color: #fb923c !important; /* Turuncu odaklanma efekti */
    background-color: #ffffff !important;
}

/* Yorum formu düzeni */
#commentform textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 1rem;
    padding: 1rem;
}
#commentform input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 1rem;
}
#submit {
    background-color: #fb923c !important;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
}

/* Videoyu hücreye zorla hapseden kod */
.video-container iframe {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0;
    left: 0;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 oran */
    height: 0;
    overflow: hidden;
}

/* Yazıların daha koyu ve okunaklı olması için */
.prose {
    --tw-prose-body: #1e293b; /* Daha koyu bir gri/siyah tonu */
    --tw-prose-headings: #0f172a; /* Başlıklar tam koyu */
}

/* Yorum Alanı Modernizasyonu */
#commentform {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

#commentform label {
    font-weight: 800;
    color: #334155; /* Koyu Slate */
    font-size: 0.9rem;
}

#comment, #author, #email, #url {
    width: 100%;
    border: 2px solid #e2e8f0; /* Belirgin kenarlık */
    border-radius: 1rem;       /* Modern yumuşak köşeler */
    padding: 1rem;
    background-color: #f8fafc; /* Hafif bir arka plan tonu */
    transition: all 0.3s ease;
    font-size: 1rem;
}

#comment:focus, #author:focus, #email:focus, #url:focus {
    border-color: #f97316;     /* Odaklanınca turuncu efekt */
    background-color: #fff;    /* Beyazlaşan arka plan */
    outline: none;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
}

/* Footer (Alt) Menüsünü Tam Ortaya Hizala */
footer nav ul {
    justify-content: center !important;
    margin: 0 auto !important;
}
/* Gönder Butonu Düzenlemesi */
#submit {
    background-color: #f97316 !important; /* Lezizya Turuncusu */
    color: white;
    padding: 1rem 2rem;
    border-radius: 1rem;
    font-weight: 800;
    cursor: pointer;
    border: none;
    transition: transform 0.2s, background-color 0.3s;
}

#submit:hover {
    background-color: #ea580c !important;
    transform: translateY(-2px);
}

/* Footer Rengini ve Yazılarını Zorla Değiştir */
footer {
    background-color: #f8fafc !important; /* Çok hafif gri */
    border-top: 1px solid #e2e8f0 !important;
}

footer .menu-footer-container ul li a {
    color: #334155 !important; /* Koyu renk yazı */
    font-weight: 800 !important;
}

footer p {
    color: #475569 !important; /* Telif yazısı koyu gri */
}

/* ==========================================
   1. GENEL VE ALT MENÜ (AÇILIR MENÜ) AYARLARI
   ========================================== */
header nav ul li {
    position: relative;
}

/* Alt menüyü başlangıçta gizle ve şekillendir */
header nav ul li ul.sub-menu {
    display: none !important; 
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    min-width: 220px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 9999;
    padding: 10px 0;
    border-radius: 8px;
    margin: 0;
    list-style: none;
}

/* Fareyle üzerine gelince alt menüyü göster */
header nav ul li:hover > ul.sub-menu {
    display: block !important;
}

/* Alt menü içindeki linklerin tasarımı */
header nav ul li ul.sub-menu li {
    width: 100%;
}

header nav ul li ul.sub-menu li a {
    display: block;
    padding: 10px 20px;
    white-space: normal;
    color: #1e293b;
    font-size: 14px;
}

/* ==========================================
   2. MASAÜSTÜ GÖRÜNÜMÜ (BİLGİSAYARLAR)
   ========================================== */
@media (min-width: 769px) {
    /* Menüyü sağa yasla ve aralıkları düzenle */
    header nav ul {
        display: flex !important;
        flex-wrap: wrap;
        gap: 15px !important; 
        justify-content: flex-end !important; 
        align-items: center;
        list-style: none;
        padding: 0;
        margin: 0 0 0 auto !important;
    }
}

/* ==========================================
   3. MOBİL GÖRÜNÜM (HAMBURGER MENÜ ALTYAPISI)
   ========================================== */
@media (max-width: 768px) {
    /* Mobilde normal menüyü butona basılana kadar gizle */
    header nav ul {
        display: none !important; /* SADECE ÜST MENÜ GİZLENECEK */
        flex-direction: column !important;
        background-color: #ffffff;
        width: 100%;
        margin: 15px 0 0 0 !important;
        padding: 0 !important;
        border-radius: 8px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999;
    }

    /* Javascript ile eklenecek "mobil-acik" sınıfı menüyü gösterecek */
    header nav ul.mobil-acik {
        display: flex !important;
    }

    /* Mobildeki menü elemanlarının tasarımı */
    header nav ul li {
        width: 100%;
        border-bottom: 1px solid #f1f5f9;
        position: relative;
    }

    header nav ul li:last-child {
        border-bottom: none;
    }

    header nav ul li a {
        display: block;
        padding: 15px 20px;
        color: #1e293b;
        font-weight: 600;
        text-align: center; 
    }
}

/* ==========================================
   LOGO BOYUTLANDIRMA VE HİZALAMA
   ========================================== */
.logo img, 
.custom-logo,
.custom-logo-link img {
    max-width: 200px !important; /* Logonun yatayda kaplayacağı maksimum alan */
    max-height: 70px !important;  /* Logonun dikeyde kaplayacağı maksimum alan */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important; /* Logonun sündürülmeden (orijinal oranıyla) sığmasını sağlar */
    display: block;
}

/* ==========================================
   WORDPRESS İÇERİK (YAZI/SAYFA) BOŞLUK AYARLARI
   ========================================== */
.leziz-icerik p {
    margin-bottom: 1.5em; /* Paragraflar arası boşluk */
}

.leziz-icerik h1, 
.leziz-icerik h2, 
.leziz-icerik h3, 
.leziz-icerik h4 {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-weight: bold;
    color: #1e293b; /* Koyu lacivert başlık rengi */
}

.leziz-icerik ul {
    list-style-type: disc;
    padding-left: 1.5em;
    margin-bottom: 1.5em;
}

.leziz-icerik ol {
    list-style-type: decimal;
    padding-left: 1.5em;
    margin-bottom: 1.5em;
}

.leziz-icerik a {
    color: #ea580c; /* Lezizya Turuncusu linkler */
    font-weight: 600;
}

.leziz-icerik a:hover {
    text-decoration: underline;
}

/* Son paragrafın altındaki gereksiz boşluğu al */
.leziz-icerik > *:last-child {
    margin-bottom: 0;
}

/* ==========================================
   İLETİŞİM FORMU VE INPUT ALANLARI GÖRÜNÜMÜ
   ========================================== */
.leziz-icerik input[type="text"],
.leziz-icerik input[type="email"],
.leziz-icerik input[type="url"],
.leziz-icerik input[type="password"],
.leziz-icerik input[type="number"],
.leziz-icerik textarea,
.leziz-icerik select {
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid #cbd5e1; /* Çerçeve rengi (Slate 300) */
    border-radius: 8px; /* Yuvarlak köşeler */
    background-color: #f8fafc; /* Çok hafif gri arka plan */
    color: #1e293b; /* Koyu lacivert okunaklı yazı rengi */
    font-size: 16px;
    transition: all 0.3s ease;
}

/* Kutuya tıklandığındaki (odaklanıldığındaki) efekt */
.leziz-icerik input:focus,
.leziz-icerik textarea:focus,
.leziz-icerik select:focus {
    outline: none;
    border-color: #ea580c; /* Lezizya Turuncusu çerçeve */
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.2); /* Etrafında turuncu parlama */
    background-color: #ffffff; /* Tıklanınca arka planı tam beyaz yap */
}

/* Kutunun içindeki silik (Placeholder) yazıların rengi */
.leziz-icerik input::placeholder,
.leziz-icerik textarea::placeholder {
    color: #94a3b8; /* Orta gri okunaklı ton */
    opacity: 1;
}

/* ==========================================
   ÖZEL SOS MALZEMELERİ KUTUSU
   ========================================== */
.sos-kutusu {
    background-color: #fff7ed; /* Çok açık Lezizya turuncusu arka plan */
    border: 1px solid #ffedd5; /* Çok hafif bir çerçeve */
    border-left: 5px solid #ea580c; /* Sol tarafta kalın ana turuncu çizgi */
    padding: 24px;
    margin: 32px 0;
    border-radius: 8px; /* Hafif yuvarlatılmış köşeler */
}

.sos-kutusu h4 {
    color: #ea580c !important; /* Başlık rengi */
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    font-size: 20px !important;
    font-weight: bold;
}

.sos-kutusu ul {
    margin-left: 20px !important;
    margin-bottom: 0 !important;
}

.sos-kutusu li {
    margin-bottom: 10px;
    color: #334155; /* Okunaklı koyu gri/lacivert yazı */
}

/* ==========================================
   LEZİZYA ÖZEL VİDEO KUTUSU
   ========================================== */
.video-kutusu {
    background-color: #f8fafc; /* Çok uçuk mavi/gri, temiz bir arka plan */
    border: 1px solid #e2e8f0;
    padding: 24px;
    margin: 32px 0;
    border-radius: 12px;
}

.video-baslik {
    color: #1e293b !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    font-size: 22px !important;
    font-weight: bold;
}

.video-aciklama {
    color: #475569;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.6;
}

/* YouTube videosunu telefonda taşmaması için esnek (responsive) yapar */
.video-embed-container {
    position: relative;
    width: 100% !important; /* İŞTE EKSİK OLAN ŞALTER BUYDU! Videoyu tam genişliğe yayar */
    padding-bottom: 56.25%; /* 16:9 Sinema Oranı */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin: 20px 0; /* Videonun altı ve üstüyle rahat nefes alması için boşluk */
}

.video-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Tarif sayfasındaki ana görseli ve tüm büyük fotoğrafları hizzaya sokar */
article img, 
.post img, 
.entry-content > img:first-of-type,
img.attachment-post-thumbnail {
    width: 100% !important;
    max-height: 450px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Görselin etrafındaki grid veya kapsayıcı içinde fotoğrafı doğrudan sabitleyen kesin kural */
img.wp-post-image, 
.entry-content img,
article img {
    width: 100% !important;
    height: 380px !important;
    object-fit: cover !important;
    border-radius: 1rem !important;
}