/* ============================================================
   MutfakSirlari Ana Layout CSS
   ============================================================ */

/* ── Nokta video reklam — tüm site lightboxlarının altında ── */
#noktaplayercontainer,
#stickyplayervideoclose {
    z-index: 9000 !important;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-bg);
    margin: 0;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-secondary); }

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text);
    margin-top: 0;
}

ul, ol { padding-left: 1.5em; }
p { margin-top: 0; margin-bottom: 1rem; }

/* ── Layout ───────────────────────────────────────────────── */
.site-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
}

.site-content-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px 16px;
    display: grid;
    grid-template-columns: var(--content-pct) var(--sidebar-pct);
    gap: 2%;
    align-items: start;
}

/* Sayfalar ve arşiv sayfaları tam genişlik */
.full-width .site-content-wrap,
.page-template-default .site-content-wrap,
.archive-content-wrap,
.full-width-wrap,
.td-wrap {
    display: block;
    grid-template-columns: none;
}

.archive-content-wrap #primary,
.full-width-wrap #primary,
.td-wrap #primary {
    width: 100%;
}

#primary { min-width: 0; }
#secondary { min-width: 0; }

/* ── Header ───────────────────────────────────────────────── */
#site-header {
    background: var(--color-white);
    border-bottom: 2px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 8px 16px;
    height: auto;
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.site-logo a,
.site-logo a:hover,
.site-title a,
.site-title a:hover {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-primary);
    white-space: nowrap;
    text-decoration: none;
}

.site-logo img { height: 48px; width: auto; }

/* ── Navigation ───────────────────────────────────────────── */
#site-nav { flex: 1; }

.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
    align-items: center;
}

.main-menu > li > a {
    display: block;
    padding: 8px 12px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--color-text);
    border-radius: 4px;
    transition: background .15s, color .15s;
}

.main-menu > li > a:hover,
.main-menu > li.current-menu-item > a {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Dropdown */
.main-menu li { position: relative; }

.main-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    z-index: 300;
    padding: 4px 0;
    list-style: none;
    margin: 0;
}

.main-menu li:hover > .sub-menu { display: block; }

.main-menu .sub-menu li a {
    display: block;
    padding: 8px 16px;
    color: var(--color-text);
    font-size: .9rem;
    transition: background .15s;
}

.main-menu .sub-menu li a:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

/* Hamburger (mobil) */
#hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--color-text);
    font-size: 1.4rem;
}

/* ── Compact header (scroll sonrası) ─────────────────────── */
#masthead.header-scrolled .category-scroll-wrap {
    display: none !important;
}

#masthead.header-scrolled .header-inner {
    min-height: 48px;
    padding: 6px 16px;
    flex-wrap: nowrap;
}

#masthead.header-scrolled .site-branding {
    flex-shrink: 0;
    order: 0;
}

#masthead.header-scrolled .header-search-wrap {
    display: flex !important;
    flex: 1;
    max-width: none;
    order: 1;
}

/* Mobil scrolled: logo solda, arama sağda tek satır */
@media (max-width: 768px) {
    #masthead.header-scrolled .header-inner {
        flex-wrap: nowrap;
        padding: 6px 12px;
        min-height: 48px;
        gap: 8px;
    }

    #masthead.header-scrolled .site-branding {
        flex: 0 0 auto;
        order: 0;
    }

    #masthead.header-scrolled .header-search-wrap {
        flex: 1;
        min-width: 0;
        max-width: none;
        order: 1;
    }

    #masthead.header-scrolled .header-search-form input[type="search"] {
        width: 100%;
    }
}

/* Çok küçük ekranlarda scrolled header: arama logoyu altına geçsin */
@media (max-width: 440px) {
    #masthead.header-scrolled .header-inner {
        flex-wrap: wrap;
        min-height: auto;
        padding: 6px 10px;
    }

    #masthead.header-scrolled .menu-toggle {
        order: 0;
    }

    #masthead.header-scrolled .site-branding {
        order: 1;
        flex: 1;
    }

    #masthead.header-scrolled .header-search-wrap {
        order: 2;
        flex: 0 0 100%;
        padding-bottom: 6px;
    }
}

/* Smooth geçiş */
#masthead { transition: box-shadow .2s; }

/* ── Search Bar ───────────────────────────────────────────── */
.header-search-wrap {
    flex: 1;
    min-width: 200px;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-search-form {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: visible;       /* dropdown'ı kesmemek için */
    position: relative;
    transition: border-color .2s;
    background: var(--color-white);
}

.header-search-form:focus-within {
    border-color: var(--color-primary);
}

.header-search-form input[type="search"] {
    flex: 1;
    border: none;
    outline: none;
    padding: 8px 12px;
    font-size: .9rem;
    font-family: var(--font-family);
    background: transparent;
    min-width: 0;
}

.header-search-form button {
    flex-shrink: 0;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 0;
    padding: 8px 14px;
    cursor: pointer;
    font-size: .9rem;
    transition: background .2s;
}

.header-search-form button:hover { background: var(--color-secondary); }

.search-ingredient-toggle {
    font-size: .78rem;
    color: var(--color-text-soft);
    display: none !important;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding-left: 2px;
    user-select: none;
}

/* Arama kutusuna odaklanılınca checkbox görünsün — kaldırıldı */
.header-search-wrap:focus-within .search-ingredient-toggle,
.header-search-wrap.search-open .search-ingredient-toggle {
    display: none !important;
}

.search-ingredient-toggle input[type="checkbox"] {
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Mobil: arama kutusu üste, logo+hamburger alta */
@media (max-width: 768px) {
    .header-search-wrap {
        display: flex !important;
        order: -1;
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
    }

    #hamburger-btn { order: 0; }
    .site-branding { order: 1; flex: 1; }
}

/* ── Category Strip (eski helper sınıflar) ────────────────── */
.category-strip {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.category-strip::-webkit-scrollbar { display: none; }
.category-strip-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    gap: 8px;
    height: 42px;
    align-items: center;
    white-space: nowrap;
}
.category-strip a {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text-soft);
    padding: 4px 10px;
    border-radius: 14px;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.category-strip a:hover { background: var(--color-primary); color: var(--color-white); }

/* ── Category Scroll Şeridi (header.php) ─────────────────── */
.category-scroll-wrap {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    display: flex;
    align-items: center;
}

.category-scroll-wrap.cat-dismissed { display: none; }

nav.category-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 16px;
    height: 42px;
    white-space: nowrap;
}
nav.category-scroll::-webkit-scrollbar { display: none; }

nav.category-scroll a {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text-soft);
    padding: 5px 12px;
    border-radius: 14px;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    text-decoration: none;
}
nav.category-scroll a:hover,
nav.category-scroll a.mega-active {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Mobil kapat düğmesi */
.cat-scroll-close {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-soft);
    padding: 0 14px;
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 42px;
}
.cat-scroll-close:hover { color: var(--color-primary); }

@media (max-width: 768px) {
    .cat-scroll-close { display: block; }
}

/* ── Mega Menu ────────────────────────────────────────────── */
.cat-mega-menu {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--max-width);
    background: #fff;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
    border-top: 2px solid var(--color-primary);
    border-radius: 0 0 10px 10px;
    z-index: 8000;
    display: none;
}
.cat-mega-menu.is-open { display: block; }

.cat-mega-inner {
    padding: 20px 16px;
    display: flex;
    gap: 0;
    align-items: stretch;
}

.cat-mega-loading {
    color: var(--color-text-soft);
    font-size: 1.5rem;
    padding: 20px;
    width: 100%;
    text-align: center;
}

/* Mega menu tarif kartı */
.mega-card {
    flex: 1;
    text-decoration: none;
    color: var(--color-text);
    padding: 0 16px;
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: opacity .15s;
}
.mega-card:first-child { padding-left: 0; }
.mega-card:last-child  { border-right: none; padding-right: 0; }
.mega-card:hover { opacity: .85; }

/* Thumbnail — 390:205 oranı */
.mega-card-thumb {
    width: 100%;
    padding-top: 52.56%;   /* 205/390 * 100 */
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: var(--color-bg);
}
.mega-card-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s;
}
.mega-card:hover .mega-card-thumb img { transform: scale(1.04); }

.mega-card-title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}
/* desc CSS'te gizle — JS zaten oluşturmuyor */
.mega-card-desc { display: none; }

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb-wrap {
    background: var(--color-bg);
    padding: 10px 0;
    font-size: .85rem;
    color: var(--color-text-soft);
}

.breadcrumb-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.breadcrumb-inner a { color: var(--color-text-soft); }
.breadcrumb-inner a:hover { color: var(--color-primary); }
.breadcrumb-inner .sep { color: var(--color-border); margin: 0 2px; }

/* ── Recipe Grid ──────────────────────────────────────────── */
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.recipe-card {
    background: var(--color-bg-card);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}

.recipe-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.recipe-card-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--color-bg);
}

.recipe-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.recipe-card:hover .recipe-card-image img { transform: scale(1.04); }

.recipe-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: .78rem;
    font-weight: 700;
    z-index: 1;
}

.badge-new    { background: var(--color-primary);   color: #fff; }
.badge-video  { background: var(--color-secondary); color: #fff; }
.badge-star   { background: rgba(0,0,0,.75);         color: #fc0; }

.recipe-card-body {
    padding: 12px 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.recipe-card-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.recipe-card-title a { color: var(--color-text); }
.recipe-card-title a:hover { color: var(--color-primary); }

.recipe-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .82rem;
    color: var(--color-text-soft);
}

.recipe-card-meta span { display: flex; align-items: center; gap: 4px; }
.recipe-card-macros { font-size: .8rem; color: var(--color-text-soft); display: flex; flex-wrap: wrap; gap: 8px; }

/* Favori + yorum — resim üstü sağ köşe */
.recipe-card-overlay-stats {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

.recipe-card-overlay-stats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 20px;
    padding: 3px 8px;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.recipe-card-overlay-stats .fa-bookmark { color: #fff; }
.recipe-card-overlay-stats .fa-comment  { color: #fff; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 32px 0;
}

.pagination a,
.pagination .current,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    font-size: .9rem;
    font-weight: 600;
    transition: background .15s, color .15s;
}

.pagination a:hover,
.pagination .current {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* ── Archive Header ───────────────────────────────────────── */
.archive-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-border);
}

.archive-header h1 {
    font-size: 1.6rem;
    margin-bottom: 0;
}

.archive-header h1 span {
    color: var(--color-primary);
}

.archive-count {
    font-size: .85rem;
    font-weight: 400;
    color: var(--color-text-soft);
    vertical-align: middle;
}

/* Kategori SEO metni — sayfalama sonrasında görünür */
.archive-seo-description {
    margin-top: 40px;
    padding: 28px 32px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--color-text-soft);
}

.archive-seo-description p { margin-bottom: .75rem; }
.archive-seo-description p:last-child { margin-bottom: 0; }
.archive-seo-description strong { color: var(--color-text); }
.archive-seo-description a { color: var(--color-primary); }

@media (max-width: 768px) {
    .archive-header h1 { font-size: 1.3rem; }
    .archive-seo-description { padding: 20px 16px; }
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background .2s, color .2s, border-color .2s;
    text-decoration: none;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background: #b52222;
    border-color: #b52222;
    color: var(--color-white);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ── Sidebar ──────────────────────────────────────────────── */
#secondary {
    position: sticky;
    top: 80px;
}

.widget {
    background: var(--color-bg-card);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

.widget-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-text);
}

/* ── Footer ───────────────────────────────────────────────── */
#site-footer {
    background: var(--color-footer-bg);
    color: #ccc;
    margin-top: 40px;
}

.footer-widgets {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 40px 16px 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.footer-widgets .widget-title { color: #fff; border-color: var(--color-secondary); }
.footer-widgets a { color: #ccc; }
.footer-widgets a:hover { color: var(--color-secondary); }

/* footer-socket artık footer-orange-band içinde, aşağıda tanımlandı */

/* ── Scroll-to-top ────────────────────────────────────────── */
#scroll-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s;
    z-index: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

#scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
}

#scroll-top:hover { transform: translateY(-3px); }

/* ── Reading Progress Bar ─────────────────────────────────── */
#reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--color-primary);
    z-index: 9999;
    transition: width .1s linear;
}

/* ── Fixed vertical ads (single.php) ─────────────────────── */
/* Varsayılan: gizli — sadece geniş ekranlarda göster */
/* Empower sticky reklamı lightbox/popup'ların altında tut */
.empower-sticky,
.empower-sticky-bottom,
.empowerBanner {
    z-index: 1000 !important;
}

.ad-sidebar-left,
.ad-sidebar-right,
.empower-tower-left,
.empower-tower-right {
    display: none !important;
}

@media (min-width: 1620px) {
    .ad-sidebar-left,
    .ad-sidebar-right {
        display: block !important;
        position: fixed;
        top: 210px;
        width: 300px;
        z-index: 100;
        transition: top 0.3s ease;
    }

    .ad-sidebar-left  { left:  calc(50% - 640px - 320px); }
    .ad-sidebar-right { right: calc(50% - 640px - 320px); }

    .empower-tower-left,
    .empower-tower-right {
        display: block !important;
        top: 210px !important;
        transition: top 0.3s ease;
    }

    /* Aşağı scroll → tower reklamlar header altına çeker */
    .ad-sidebar-left.tower-scrolled,
    .ad-sidebar-right.tower-scrolled,
    .empower-tower-left.tower-scrolled,
    .empower-tower-right.tower-scrolled {
        top: 80px !important;
    }
}

/* ── Section headings ─────────────────────────────────────── */
.section-heading {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--color-text);
    margin: 0 0 15px;
    padding: 5px 0 5px 14px;
    border-left: 6px solid #f4b400;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.section-heading span {
    background: none;
    color: inherit;
    padding: 0;
    display: inline;
}

/* ── Share buttons ────────────────────────────────────────── */
.share-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    font-size: .9rem;
    color: var(--color-text-soft);
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
    transition: opacity .2s;
}

.share-btn:hover { opacity: .85; color: #fff; }
.share-whatsapp  { background: #25D366; }
.share-facebook  { background: #1877F2; }
.share-twitter   { background: #000; }
.share-pinterest { background: #E60023; }
.share-email     { background: #555; }

/* ── Recipe actions bar ───────────────────────────────────── */
.recipe-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 32px 0 24px;
    align-items: center;
}

/* Simple Favorite Button eklentisini .btn.btn-primary ile birebir eşleştir */
.recipe-actions .favorite-button-container {
    display: inline-flex;
    align-items: stretch;
}

.recipe-actions button.simplefavorite-button,
.recipe-actions button.simplefavorite-button.has-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 20px !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
    background-color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: background .2s, border-color .2s !important;
    box-shadow: none !important;
    outline: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    font-family: var(--font-family) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.recipe-actions button.simplefavorite-button:hover {
    background-color: #b52222 !important;
    border-color: #b52222 !important;
}

.recipe-actions button.simplefavorite-button i,
.recipe-actions button.simplefavorite-button span {
    color: #fff !important;
    font-size: inherit !important;
}

/* ── Accordion ────────────────────────────────────────────── */
.accordion-menu { margin: 24px 0; }

.accordion-item {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 6px;
    overflow: hidden;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    background: var(--color-bg);
    font-weight: 600;
    font-size: .95rem;
    transition: background .15s;
    user-select: none;
}

.accordion-header:hover { background: var(--color-border); }
.accordion-toggle { font-size: 1.2rem; color: var(--color-primary); }

.accordion-content {
    display: none;
    padding: 14px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-white);
}

/* ── Tags ─────────────────────────────────────────────────── */
.tags-wrapper {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 14px;
    margin: 16px 0;
}

.tags-wrapper h4 { margin-bottom: 10px; font-size: .95rem; }

.custom-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.custom-tags li {
    background: var(--color-secondary);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: .85rem;
}

.custom-tags li a { color: #fff; }
.custom-tags li:hover { background: var(--color-primary); }

/* ── Popular searches ─────────────────────────────────────── */
.popular-searches { margin: 20px 0; }
.search-item { display: block; border-bottom: 1px solid var(--color-border); }
.search-item:last-child { border-bottom: none; }
.search-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 4px;
    color: var(--color-text-soft);
    transition: color .15s;
}
.search-item a:hover {
    color: var(--color-primary);
    background: #fff5f5;
    border-radius: 8px;
}
.popular-search-icon {
    width: 32px; height: 32px;
    background: #e0e0e0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    color: #555;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.search-item a:hover .popular-search-icon {
    background: var(--color-primary);
    color: #fff;
}

/* ── Disclaimer ───────────────────────────────────────────── */
.disclaimer-box {
    background: #fff9c4;
    border: 2px solid #ff9800;
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
    font-size: .9rem;
    line-height: 1.6;
}
.disclaimer-box h2 { color: #ff9800; font-size: 1.1rem; margin-bottom: 10px; }

/* ── Sizin İçin Seçtiklerimiz ─────────────────────────────── */
.special-recipes-wrap {
    margin: 24px 0 8px;
}

.special-recipes-wrap .section-heading {
    margin-bottom: 15px;
}

.special-recipes-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.special-recipe-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: color .15s;
}

.special-recipe-item:last-child {
    border-bottom: none;
}

.special-recipe-item:hover {
    color: var(--color-primary);
}

/* Görsel kapsayıcı — rozet için position:relative */
.special-recipe-thumb {
    position: relative;
    flex-shrink: 0;
    display: block;
    width: 140px;
    height: 90px;
    border-radius: 6px;
    overflow: hidden;
}

.special-recipe-thumb img {
    width: 140px;
    height: 90px;
    object-fit: cover;
    display: block;
}

/* Rozet — görselin sol üst köşesi */
.sr-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    z-index: 2;
    line-height: 1.3;
}

.sr-badge-new   { background: rgba(220, 43, 43, .82); color: #fff; }
.sr-badge-video { background: rgba(0, 0, 0, .75);     color: #00ff00; }
.sr-badge-star  { background: rgba(0, 0, 0, .75);     color: #ffc107; }

.special-recipe-title {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
    flex: 1;
}

.special-ad-wrap {
    margin: 4px 0;
}

/* ── Live search dropdown ─────────────────────────────────── */
#live-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 0 0 8px 8px;
    max-height: 340px;
    overflow-y: auto;
    z-index: 1100;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.live-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: background .15s;
}

.live-search-item:last-child { border-bottom: none; }
.live-search-item:hover,
.live-search-item:active { background: var(--color-bg); }
.live-search-item img { width: 50px; height: 38px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.live-search-item-title { font-weight: 600; font-size: .9rem; }

/* ── Header malzeme autocomplete ─────────────────────────── */
#header-ingredient-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 0 0 8px 8px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 400;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    display: none;
}

.ing-suggest-item {
    padding: 9px 14px;
    cursor: pointer;
    font-size: .9rem;
    border-bottom: 1px solid var(--color-border);
    transition: background .15s;
    color: var(--color-text);
}

.ing-suggest-item:last-child { border-bottom: none; }
.ing-suggest-item:hover { background: var(--color-bg); color: var(--color-primary); }

/* ── Header ingredient tags ───────────────────────────────── */
#header-selected-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 0;
}

#header-selected-ingredients .ingredient-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
}

#header-selected-ingredients .remove-tag {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: .9rem;
    line-height: 1;
    padding: 0;
    opacity: .8;
}

#header-selected-ingredients .remove-tag:hover { opacity: 1; }

/* ── Push notification popup ──────────────────────────────── */
#push-optin {
    display: none; /* JS ile gösterilir */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #2c3e50;
    color: #fff;
    padding: 16px 20px;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .95rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

#push-optin.visible {
    display: flex;
}

.push-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.push-text strong {
    font-size: 1rem;
    font-weight: 700;
}

.push-text span {
    font-size: .85rem;
    color: #ccc;
}

#push-optin-accept {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 9px 20px;
    cursor: pointer;
    font-weight: 700;
    transition: background .2s;
    white-space: nowrap;
}

#push-optin-accept:hover { background: var(--color-secondary); }

#push-optin-dismiss {
    background: transparent;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: .88rem;
    transition: color .2s;
    white-space: nowrap;
}

#push-optin-dismiss:hover { color: #fff; }

@media (max-width: 480px) {
    #push-optin { flex-direction: column; text-align: center; padding: 16px; }
    #push-optin-accept, #push-optin-dismiss { width: 100%; }
}

/* ── 404 ──────────────────────────────────────────────────── */
.error404-content {
    text-align: center;
    padding: 60px 20px;
}

.error404-number {
    font-size: 8rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
}

/* ── Timed recipes — sayfa sarmalayıcı ───────────────────── */
.timed-page-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px 16px 40px;
}

.timed-page-header {
    margin-bottom: 24px;
}

.timed-page-title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 8px;
}

.timed-page-desc {
    color: var(--color-text-soft);
    font-size: .95rem;
    margin: 0;
}

.timed-no-result {
    color: var(--color-text-soft);
    padding: 32px 0;
    font-size: .95rem;
}

/* ── Timed recipes tabs ───────────────────────────────────── */
.time-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.time-tab-btn {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 6px 16px;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    transition: background .15s, color .15s;
}

.time-tab-btn.active,
.time-tab-btn:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ── Timed recipes — sayfalama ───────────────────────────── */
.timed-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 28px;
    justify-content: center;
}

.timed-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-card);
    color: var(--color-text);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.timed-page-btn:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.timed-page-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    cursor: default;
}

.timed-page-prev,
.timed-page-next {
    min-width: auto;
    padding: 0 14px;
    font-weight: 500;
}

.timed-page-dots {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 4px;
    color: var(--color-text-soft);
    font-size: .9rem;
    user-select: none;
}

.timed-loading {
    color: var(--color-text-soft);
    padding: 32px 0;
    font-size: .95rem;
    text-align: center;
}

.time-tab-content { display: none; }
.time-tab-content.active { display: block; }

/* ── Footer Turuncu Bant ──────────────────────────────────── */
.footer-orange-band {
    background: var(--color-secondary);
    padding: 36px 16px 0;
    text-align: center;
}

/* "Daha fazla tarif için aşağı kaydırın" */
.footer-scroll-hint {
    margin-bottom: 20px;
}

.footer-scroll-hint p {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

/* Copyright — turuncu alanda, beyaz kutunun hemen üstünde */
.footer-copyright {
    color: rgba(255,255,255,.85);
    font-size: .85rem;
    margin-bottom: 24px;
}

.footer-partner {
    display: inline-block;
    margin-left: 8px;
}

.footer-copyright a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

/* Beyaz kutu — turuncu bandın içinde, üstten başlar */
.footer-white-box {
    background: #fff;
    border-radius: 12px 12px 0 0;
    padding: 32px 20px 40px;
    max-width: var(--max-width);
    margin: 0 auto;
    min-height: 200px;
}

/* Son yayınlananlar kartı grid (infinite scroll) */
.infinite-recipes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .infinite-recipes-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .infinite-recipes-grid { grid-template-columns: repeat(2, 1fr); }
}

.no-more-recipes {
    text-align: center;
    color: var(--color-text-soft);
    padding: 20px;
    grid-column: 1 / -1;
}

/* Sonsuz scroll — reklam kartı */
/* Masaüstü: normal kart gibi grid'in içinde */
.is-ad-card {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 200px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

/* Mobil: tam genişlik, kart çerçevesi yok */
@media (max-width: 767px) {
    .is-ad-card {
        grid-column: 1 / -1;
        background: transparent;
        border: none;
        border-radius: 0;
        min-height: 0;
        padding: 4px 0;
    }
}


/* ── Kategori Bölümleri ──────────────────────────────────── */
.cat-section-wrap {
    max-width: var(--max-width);
    margin: 60px auto 0;
    padding: 0 16px;
}

.cat-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cat-section-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cat-section-more {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
}

.cat-section-more:hover { color: var(--color-secondary); text-decoration: none; }

/* Refresh butonu */
.cat-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text-soft);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    font-size: .8rem;
    flex-shrink: 0;
}

.cat-refresh-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.cat-refresh-btn:disabled {
    opacity: .5;
    cursor: default;
}

@keyframes ms-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Desktop: büyük sol + 2x2 sağ */
.cat-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
    overflow: hidden;
}

.cat-feature-main {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #111;
    text-decoration: none;
    min-width: 0;
    width: 100%;
}

.cat-feature-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s;
}

.cat-feature-main:hover img { transform: scale(1.04); }

.cat-feature-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 48px 16px 16px;
    background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
    pointer-events: none;
}

.cat-feature-caption h3 {
    color: #fff;
    font-size: clamp(.95rem, 1.8vw, 1.2rem);
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.cat-feature-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.cat-feature-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .72rem;
    font-weight: 600;
    color: rgba(255,255,255,.9);
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* 2x2 mini grid */
.cat-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

.cat-mini-card {
    display: block;
    text-decoration: none;
    color: var(--color-text);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg-card);
    transition: box-shadow .2s;
}

.cat-mini-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); text-decoration: none; }

.cat-mini-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-bg);
}

.cat-mini-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}

.cat-mini-card:hover .cat-mini-img img { transform: scale(1.05); }

.cat-mini-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.cat-mini-title {
    font-size: .82rem;
    font-weight: 600;
    margin: 0;
    padding: 6px 8px 4px;
    line-height: 1.35;
    color: var(--color-text);
}

.cat-mini-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 8px 7px;
    font-size: .72rem;
    color: var(--color-text-soft);
}

.cat-mini-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Mobil: büyük kart üstte, altı küçük liste */
@media (max-width: 768px) {
    .cat-feature-grid {
        grid-template-columns: 1fr;
    }

    .cat-mini-grid {
        grid-template-columns: 1fr;
        gap: 0;
        border-top: 1px solid var(--color-border);
        margin-top: 8px;
    }

    .cat-mini-card {
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 0;
        border-bottom: 1px solid var(--color-border);
        padding: 10px 0;
        background: transparent;
    }

    .cat-mini-card:hover { box-shadow: none; }

    .cat-mini-img {
        width: 100px;
        height: 75px;
        flex-shrink: 0;
        aspect-ratio: auto;
        border-radius: 8px;
    }

    .cat-mini-img img { width: 100px; height: 75px; }

    .cat-mini-title {
        padding: 0 0 3px;
        font-size: .9rem;
    }

    .cat-mini-meta {
        padding: 0;
        font-size: .75rem;
    }

    .cat-mini-body { flex-direction: column; justify-content: center; }

    /* Mobilde sadece zaman+kalori göster, yorum/kaydet gizle */
    .cat-mini-meta .meta-hide-mobile { display: none; }
}

/* ── Dual List Section (Fit + Popüler) ───────────────────── */
.dual-list-section {
    background: #FFF3EC;
    padding: 28px 0 32px;
    margin: 44px 0 0;
}

.dual-list-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.dual-list-col:first-child {
    border-right: 1px solid rgba(0,0,0,.08);
    padding-right: 40px;
}

.dual-list-header { margin-bottom: 18px; }

.dual-list-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 11px 0;
    border-bottom: 1px solid rgba(0,0,0,.07);
    text-decoration: none;
    color: var(--color-text);
    transition: opacity .2s;
}

.dual-list-item:last-child { border-bottom: none; padding-bottom: 0; }
.dual-list-item:hover { opacity: .78; text-decoration: none; }

.dual-list-img {
    width: 115px;
    height: 78px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg);
}

.dual-list-img img {
    width: 115px;
    height: 78px;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}

.dual-list-item:hover .dual-list-img img { transform: scale(1.04); }

.dual-list-text { flex: 1; min-width: 0; }

.dual-list-title {
    font-size: .88rem;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.35;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dual-list-meta {
    font-size: .75rem;
    color: var(--color-text-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.dual-list-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.dual-list-meta .rating-star { color: #f5a623; }

@media (max-width: 768px) {
    .dual-list-inner {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .dual-list-col:first-child {
        border-right: none;
        padding-right: 0;
        border-bottom: 2px solid rgba(0,0,0,.08);
        padding-bottom: 24px;
        margin-bottom: 24px;
    }
    .dual-list-img { width: 95px; height: 66px; }
    .dual-list-img img { width: 95px; height: 66px; }
}

/* ── Hero Slider v2 ──────────────────────────────────────── */
.homepage-masthead-ad {
    max-width: var(--max-width);
    margin: 12px auto 0;
    padding: 0 16px;
    text-align: center;
    overflow: hidden;
    min-height: 90px;
}

@media (max-width: 768px) {
    .homepage-masthead-ad {
        width: 300px;
        height: 100px;
        min-height: unset;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .homepage-masthead-ad .empower-ad {
        width: 300px !important;
        height: 100px !important;
        min-height: unset;
        overflow: hidden;
        flex-shrink: 0;
    }

    .homepage-masthead-ad .empower-ad iframe,
    .homepage-masthead-ad .empower-ad > * {
        max-width: 300px !important;
        max-height: 100px !important;
        overflow: hidden;
    }
}

.hero-v2-wrap {
    max-width: var(--max-width);
    margin: 12px auto 0;
    padding: 0 16px;
}

.homepage-section-ad {
    max-width: var(--max-width);
    margin: 24px auto 0;
    padding: 0 16px;
    text-align: center;
    overflow: hidden;
    min-height: 90px;
}

/* ── Malzeme + Besin İki Kolon Section ───────────────────── */
.ing-besin-section {
    max-width: var(--max-width);
    margin: 60px auto 0;
    padding: 0 16px;
}

.ing-besin-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
}

/* Sol: Malzemeye Göre Ara — orijinal sıcak turuncu */
.ing-picker-col {
    background: #FFF3EC;
    padding: 36px 32px;
}

/* Single sayfası malzeme picker sarmalayıcısı */
.single-ing-picker {
    background: #FFF3EC;
    border-radius: 12px;
    padding: 28px 24px;
    margin: 32px 0;
}

/* Sağ: Besin Değerine Göre Ara — soft sage/mint */
.besin-col {
    background: #EEF6F2;
    padding: 36px 32px;
    border-left: none;
}

/* ── Malzeme Seçici ──────────────────────────────────────── */
.ing-picker-desc {
    font-size: .9rem;
    color: var(--color-text-soft);
    margin: 6px 0 20px;
}

.ing-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.ing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    position: relative;
}

.ing-card-img {
    width: 80px;
    height: 80px;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.ing-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.ing-card-letter {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
}

.ing-card-check {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%) translateY(4px) scale(0);
    width: 22px;
    height: 22px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .65rem;
    transition: transform .2s;
    border: 2px solid #fff;
}

.ing-card.selected .ing-card-img {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(214,43,43,.15);
}

.ing-card.selected .ing-card-check {
    transform: translateX(-50%) translateY(4px) scale(1);
}

.ing-card-name {
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-text);
}

/* Malzeme Ekle kartı */
.ing-card-add .ing-card-img {
    border: 2px dashed var(--color-border);
    background: #f9f9f9;
}

.ing-card-plus {
    font-size: 1.5rem;
    color: var(--color-text-soft);
}

.ing-card-add:hover .ing-card-img {
    border-color: var(--color-primary);
    background: #fff5f5;
}

.ing-card-add:hover .ing-card-plus {
    color: var(--color-primary);
}

.ing-picker-footer {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-ing-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}

.btn-ing-search:hover { background: var(--color-secondary); }

/* Besin değeri arama butonu — sage yeşil kartla uyumlu teal */
#nutri-search-btn { background: #2A9D72; }
#nutri-search-btn:hover { background: #228860; }

/* ── Besin Değeri Kolonu ─────────────────────────────────── */

/* ── Nutri Picker Grid — ing-card formatının aynısı ─────── */
.nutri-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
    margin-bottom: 16px;
}

/* Kart sarmalayıcı — ing-card ile aynı */
.nutri-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: default;
}

/* Görsel kutusu — ing-card-img ile birebir aynı */
.nutri-card-img {
    width: 80px;
    height: 80px;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.nutri-card:hover .nutri-card-img {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(255,122,0,.12);
}

.nutri-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

/* İsim — ing-card-name ile aynı */
.nutri-card-name {
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: center;
    line-height: 1.2;
}

/* Max değer input satırı */
.nutri-card-inputs {
    width: 100%;
}

.nutri-input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 5px 6px;
    font-size: .72rem;
    text-align: center;
    color: var(--color-text);
    background: #fafafa;
    outline: none;
    transition: border-color .2s;
    -moz-appearance: textfield;
    box-sizing: border-box;
}

.nutri-input::-webkit-outer-spin-button,
.nutri-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.nutri-input:focus {
    border-color: var(--color-secondary);
    background: #fff;
}

.nutri-input:focus::placeholder {
    opacity: 0;
}

/* Birim ipucu */
.nutri-card-hint {
    font-size: .62rem;
    color: var(--color-text-soft);
    text-align: center;
    line-height: 1.3;
    width: 100%;
    margin-top: 3px;
}

/* Mobil: 3+2 düzeni */
@media (max-width: 768px) {
    .nutri-picker-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .nutri-card-img { width: 64px; height: 64px; }
}

.besin-col-placeholder {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 160px;
    background: rgba(255,255,255,.6);
    border-radius: 12px;
    color: var(--color-text-soft);
    font-size: .95rem;
    gap: 10px;
}

.besin-col-placeholder i { font-size: 2rem; color: var(--color-border); }

/* ══════════════════════════════════════════════════════════
   NAV DRAWER
   ══════════════════════════════════════════════════════════ */

/* Overlay */
.nav-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 2147483643;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s;
}

.nav-drawer-overlay.open {
    opacity: 1;
    pointer-events: all;
}

/* Drawer — desktop: sol panel */
.nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 320px;
    background: #fff;
    z-index: 2147483645;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 32px rgba(0,0,0,.15);
}

.nav-drawer.open {
    transform: translateX(0);
}

/* Drawer Başlık */
.nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    min-height: 64px;
}

.nav-drawer-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.nav-drawer-logo img {
    height: 38px;
    width: auto;
}

.nav-drawer-logo span {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-primary);
}

.nav-drawer-close {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-soft);
    font-size: 1.2rem;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}

.nav-drawer-close:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

/* Drawer Gövde */
.nav-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.nav-drawer-body::-webkit-scrollbar { width: 4px; }
.nav-drawer-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* Menü öğeleri */
.nav-drawer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-drawer-menu li {
    border-bottom: 1px solid var(--color-border);
}

.nav-drawer-menu li:last-child { border-bottom: none; }

.nav-drawer-menu li a {
    display: flex;
    align-items: center;
    gap: 9px;                     /* ikon ile metin arası boşluk */
    padding: 14px 24px;
    color: var(--color-text);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    transition: background .15s, color .15s, padding-left .15s;
    line-height: 1.3;
}

/* İkon rengi — turuncu ton */
.nav-drawer-menu li a i,
.nav-drawer-menu li a img.menu-icon {
    color: #E07B39;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.nav-drawer-menu li a:hover {
    background: var(--color-bg);
    color: var(--color-primary);
    padding-left: 30px;
}

/* Alt menü (sub-menu) — accordion: kapalı başlar */
.nav-drawer-menu .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fafafa;
    display: none;
    overflow: hidden;
}

/* Açık hali */
.nav-drawer-menu li.open > .sub-menu {
    display: block;
}

.nav-drawer-menu .sub-menu li {
    border-bottom: 1px solid #f0f0f0;
}

.nav-drawer-menu .sub-menu li a {
    padding: 11px 24px 11px 36px;
    font-size: .88rem;
    font-weight: 400;
    color: var(--color-text-soft);
}

.nav-drawer-menu .sub-menu li a:hover {
    color: var(--color-primary);
    padding-left: 42px;
}

/* Chevron oku — alt kırılımı olan üst menü öğeleri */
.nav-drawer-menu li.menu-item-has-children > a {
    /* space-between yok: ikon+metin solda kalır, chevron margin-left:auto ile sağa iter */
}

.nav-drawer-menu li.menu-item-has-children > a::after {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: .7rem;
    color: var(--color-text-soft);
    transition: transform .25s;
    flex-shrink: 0;
    margin-left: auto;   /* chevron'u sağa it, metin sola yaslı kalır */
    padding-left: 8px;
}

.nav-drawer-menu li.menu-item-has-children.open > a::after {
    transform: rotate(180deg);
    color: var(--color-primary);
}

/* Mobil: tam ekran lightbox */
@media (max-width: 768px) {
    .nav-drawer {
        width: 100%;
        border-radius: 0;
    }
}

/* ── Lightbox ─────────────────────────────────────────────── */
.ing-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 2147483630;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

.ing-lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.ing-lightbox {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    width: min(480px, 90vw);
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px 24px;
    z-index: 2147483635;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    max-height: 85vh;
    overflow-y: auto;
}

.ing-lightbox.active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}

.ing-lightbox-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--color-text-soft);
    cursor: pointer;
    line-height: 1;
}

.ing-lightbox-close:hover { color: var(--color-text); }

.ing-lightbox-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 16px;
}

.ing-lightbox-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
    margin-bottom: 0;
}
.ing-lightbox-tags:not(:empty) {
    min-height: 32px;
    margin-bottom: 16px;
}

.lb-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: .85rem;
    font-weight: 500;
}

.lb-tag-remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--color-text-soft);
    padding: 0;
    line-height: 1;
}

.lb-tag-remove:hover { color: var(--color-primary); }

.ing-lightbox-search-wrap {
    position: relative;
    margin-bottom: 20px;
}

.ing-lightbox-search-wrap input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 36px 10px 14px;
    font-size: .95rem;
    outline: none;
    transition: border-color .2s;
    box-sizing: border-box;
}

.ing-lightbox-search-wrap input:focus { border-color: var(--color-primary); }

.ing-lightbox-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--color-text-soft);
    cursor: pointer;
    display: none;
}

.ing-lightbox-suggestions {
    position: fixed;  /* lightbox overflow'unun dışına çıkar */
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0 0 8px 8px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 2147483640;    /* her şeyin üzerinde */
    box-shadow: 0 6px 16px rgba(0,0,0,.1);
    display: none;
}

.lb-sugg-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: .9rem;
    border-bottom: 1px solid var(--color-border);
    transition: background .15s;
}

.lb-sugg-item:last-child { border-bottom: none; }
.lb-sugg-item:hover { background: var(--color-bg); }
.lb-sugg-item strong { color: var(--color-primary); font-weight: 700; }

.btn-ing-lightbox-submit {
    display: block;
    width: 100%;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}

.btn-ing-lightbox-submit:hover { background: var(--color-secondary); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .ing-besin-inner {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .ing-picker-col { padding: 24px 16px; }
    .besin-col { padding: 24px 16px; margin-top: 16px; border-radius: 16px; }
    .ing-picker-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .ing-card-img { width: 64px; height: 64px; }
}

.hero-v2 {
    display: grid;
    grid-template-columns: 1fr 260px;
    height: 440px;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
}

/* Ana büyük görsel alanı */
.hero-v2-main {
    position: relative;
    overflow: hidden;
}

.hero-v2-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .55s ease;
    pointer-events: none;
}

.hero-v2-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.hero-v2-slide a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.hero-v2-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.hero-v2-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 50px 22px 20px;
    background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
    pointer-events: none;
}

.hero-v2-title {
    display: block;
    color: #fff;
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* Ok butonları */
.hero-v2-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    color: #fff;
    font-size: .9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background .2s;
}

.hero-v2-arrow:hover { background: rgba(255,255,255,.35); }
.hero-v2-prev { left: 12px; }
.hero-v2-next { right: 12px; }

/* Mobil dot'lar — masaüstünde gizli */
.hero-v2-dots {
    display: none;
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    gap: 7px;
    z-index: 10;
}

.hero-v2-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.9);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .2s;
}

.hero-v2-dot.active {
    background: #fff;
}

/* Sağ thumbnail listesi */
.hero-v2-list {
    display: flex;
    flex-direction: column;
    background: #111;
    border-left: 2px solid rgba(255,255,255,.06);
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.hero-v2-list::-webkit-scrollbar { display: none; }

.hero-v2-thumb {
    flex: 0 0 88px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: background .2s;
}

.hero-v2-thumb:last-child { border-bottom: none; }

.hero-v2-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
    transition: opacity .3s;
    display: block;
}

.hero-v2-thumb.active img,
.hero-v2-thumb:hover img { opacity: 1; }

.hero-v2-thumb-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 22px 10px 8px;
    background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
    font-size: .7rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    opacity: 0.8;
    transition: opacity .2s;
}

.hero-v2-thumb.active .hero-v2-thumb-caption,
.hero-v2-thumb:hover .hero-v2-thumb-caption { opacity: 1; }

/* Aktif thumbnail sol çizgisi */
.hero-v2-thumb::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity .2s;
    z-index: 2;
}

.hero-v2-thumb.active::before { opacity: 1; }

/* Mobil: liste gizle, tam genişlik */
@media (max-width: 768px) {
    .hero-v2 {
        grid-template-columns: 1fr;
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .hero-v2-list { display: none; }
    .hero-v2-title { font-size: 1.1rem; text-shadow: none; }
    .hero-v2-caption { padding-bottom: 36px; }
    .hero-v2-arrow { width: 32px; height: 32px; font-size: .8rem; }
    .hero-v2-dots { display: flex; }
}

/* ── Google Follow Banner ─────────────────────────────────── */
.ms-google-follow-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 6px solid #f4b400;
    border-radius: 0 10px 10px 0;
    padding: 18px 20px 18px 18px;
    margin-bottom: 24px;
    position: relative;
}

.ms-gfb-logos {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ms-gfb-logo-site {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}

.ms-gfb-logo-google {
    width: 36px;
    height: 36px;
}

.ms-gfb-plus {
    font-size: 1.2rem;
    color: var(--color-text-soft);
    line-height: 1;
}

.ms-gfb-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ms-gfb-text strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}

.ms-gfb-text span {
    font-size: .85rem;
    color: var(--color-text-soft);
    line-height: 1.45;
}

.ms-gfb-btn {
    flex-shrink: 0;
    padding: 10px 22px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
    transition: opacity .15s;
}

.ms-gfb-btn:hover { opacity: .85; color: #fff; }

.ms-gfb-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--color-text-soft);
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
}

.ms-gfb-close:hover { color: var(--color-text); }

@media (max-width: 600px) {
    .ms-google-follow-banner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 16px 16px;
    }
    .ms-gfb-logos {
        order: 1;
        flex: 0 0 auto;
    }
    .ms-gfb-text {
        order: 2;
        flex: 0 0 100%;
    }
    .ms-gfb-btn {
        order: 3;
        flex: 0 0 100%;
        text-align: center;
        padding: 11px;
    }
}

/* ── Related Recipes Grid ────────────────────────────────── */
.related-recipes-wrap {
    margin: 32px 0;
}

.related-recipes-wrap .section-heading {
    margin-bottom: 15px;
}

.related-recipes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .related-recipes-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .related-recipes-grid { grid-template-columns: 1fr; }
}

/* ── Comments ─────────────────────────────────────────────── */
.comments-area { margin: 32px 0; }

.comments-title,
.comment-reply-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-border);
}

/* Liste */
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list .children {
    list-style: none;
    padding-left: 40px;
    margin: 0;
    border-left: 3px solid var(--color-border);
}

/* Tek yorum */
.comment { padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.comment:last-child { border-bottom: none; }

/* Avatar absolut sol, içerik padding-left ile sağa kayar */
.comment-body {
    position: relative;
    padding-left: 58px;
    min-height: 50px;
}

.comment-author .avatar {
    position: absolute;
    left: 0;
    top: 2px;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    display: block;
}

/* "dedi ki:" gizle */
.comment-author .says { display: none; }

/* İsim + tarih yan yana */
.comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.comment-author b,
.comment-author .fn {
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-text);
}

.comment-author a { color: var(--color-text); text-decoration: none; }
.comment-author a:hover { color: var(--color-primary); }

.comment-metadata {
    font-size: .78rem;
    color: var(--color-text-soft);
    white-space: nowrap;
}
.comment-metadata a { color: var(--color-text-soft); text-decoration: none; }
.comment-metadata time { display: inline; }

.edit-link { font-size: .75rem; margin-left: 6px; }
.edit-link a { color: var(--color-text-soft); }

.comment-content {
    font-size: .92rem;
    line-height: 1.7;
    color: var(--color-text);
}
.comment-content p { margin: 0 0 6px; }
.comment-content p:last-child { margin-bottom: 0; }

.reply { margin-top: 8px; }

.comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    padding: 3px 12px;
    border: 1px solid var(--color-primary);
    border-radius: 20px;
    transition: background .15s, color .15s;
}
.comment-reply-link:hover { background: var(--color-primary); color: #fff; }

/* Yanıtla sonrası açılan inline form */
.comment-respond {
    margin-top: 16px;
    padding: 16px;
    background: var(--color-bg);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.comment-respond .comment-reply-title {
    font-size: 1rem;
    margin-bottom: 12px;
    padding-bottom: 8px;
}

/* İptal linki */
#cancel-comment-reply-link {
    font-size: .8rem;
    color: var(--color-text-soft);
    margin-left: 10px;
    text-decoration: underline;
    font-weight: 400;
}

.comment-form p { margin-bottom: 12px; }

.comment-form label {
    display: block;
    font-size: .83rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--color-text);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .9rem;
    font-family: var(--font-family);
    color: var(--color-text);
    background: var(--color-bg-card);
    transition: border-color .2s;
    box-sizing: border-box;
}
.comment-form input:focus,
.comment-form textarea:focus { outline: none; border-color: var(--color-primary); }
.comment-form textarea { min-height: 100px; resize: vertical; }

.comment-form #submit {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    font-family: var(--font-family);
}
.comment-form #submit:hover { background: #b52222; }

@media (max-width: 480px) {
    .comment-list .children { padding-left: 20px; }
    .comment-author.vcard { width: 36px; }
    .comment-author .avatar { width: 36px !important; height: 36px !important; }
}

/* ── Responsive ───────────────────────────────────────────── */
/* ad-sidebar kuralları yukarıda min-width:1340px bloğunda */

@media (max-width: 1024px) {
    .site-content-wrap {
        grid-template-columns: 1fr;
    }

    #secondary { position: static; }
    .footer-widgets { grid-template-columns: 1fr 1fr; }
}

/* Arşiv mobil reklam — sadece mobilde görünür */
.archive-mobile-ad { display: none; }
@media (max-width: 768px) {
    .archive-mobile-ad { display: block; text-align: center; margin: 4px 0; }

    .archive-content-wrap { padding: 10px; }

    #site-nav { display: none; }
    #site-nav.open { display: block; position: absolute; top: 64px; left: 0; right: 0; background: var(--color-white); border-bottom: 2px solid var(--color-border); padding: 10px 0; z-index: 200; }
    #hamburger-btn { display: flex; }
    .main-menu { flex-direction: column; padding: 0 16px; }
    .main-menu .sub-menu { display: none !important; }

    .header-search-form input[type="search"] { width: 140px; }
    .header-search-form input[type="search"]:focus { width: 180px; }

    .footer-widgets { grid-template-columns: 1fr; gap: 20px; }

    .recipe-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}

@media (max-width: 480px) {
    .recipe-actions { flex-wrap: wrap; justify-content: center; }
    .btn { font-size: .85rem; padding: 8px 14px; }
    .share-btn { width: 34px; height: 34px; font-size: .9rem; }
}

/* Page şablonlarında Recent Comments widget'ını gizle */
body.page .widget_recent_comments {
    display: none;
}

/* ── Contact Form 7 Stili ─────────────────────────────────── */
.wpcf7 {
    max-width: 620px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 32px 36px;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
}

.wpcf7 p {
    margin: 0 0 20px;
}

.wpcf7 label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text-soft);
    margin-bottom: 6px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: .95rem;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
    outline: none;
    appearance: none;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(214,43,43,.1);
    background: #fff;
}

.wpcf7 textarea {
    min-height: 140px;
    resize: vertical;
}

/* Captcha satırı */
.wpcf7 .wpcf7-quiz-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 10px 14px;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: 8px 0 0 8px;
    font-weight: 700;
    color: var(--color-text);
    font-size: .95rem;
    border-right: none;
}

.wpcf7 .wpcf7-quiz {
    width: auto !important;
    border-radius: 0 8px 8px 0 !important;
    border-left: none !important;
    max-width: 100px;
}

/* Captcha img (really-simple-captcha) */
.wpcf7 .wpcf7-captchac {
    display: block;
    margin-bottom: 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

/* Gönder butonu */
.wpcf7 input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 32px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s, transform .15s;
    width: 100%;
    letter-spacing: .02em;
}

.wpcf7 input[type="submit"]:hover {
    background: #b71c1c;
}

.wpcf7 input[type="submit"]:active {
    transform: scale(.98);
}

/* Hata / başarı mesajları */
.wpcf7-response-output {
    margin-top: 16px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: .9rem !important;
    border-width: 1.5px !important;
}

.wpcf7-mail-sent-ok {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}

.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked,
.wpcf7-validation-errors {
    background: #fff5f5 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

/* Alan hata vurgusu */
.wpcf7-not-valid-tip {
    color: var(--color-primary) !important;
    font-size: .8rem !important;
    margin-top: 4px !important;
    display: block;
}

.wpcf7 .wpcf7-not-valid {
    border-color: var(--color-primary) !important;
}

@media (max-width: 600px) {
    .wpcf7 {
        padding: 20px 16px;
        border-radius: 10px;
    }
}

/* ── Özellik Şeridi (slider altı) ───────────────────────────── */
.feature-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: #fff;
    border-top: 3px solid var(--color-primary, #D62B2B);
    border-bottom: 1px solid var(--color-border, #e8e8e8);
    margin: 0 auto 28px;
    max-width: var(--max-width);
    padding: 0 16px;
    box-sizing: border-box;
}

.feature-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 12px;
    text-decoration: none;
    color: var(--color-text, #2d2d2d);
    border-right: 1px solid var(--color-border, #e8e8e8);
    transition: background .18s, transform .18s;
    text-align: center;
}
.feature-strip__item:last-child { border-right: none; }
.feature-strip__item:hover {
    background: #fdf5f5;
    transform: translateY(-2px);
}

.feature-strip__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--feat-color) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s;
}
.feature-strip__item:hover .feature-strip__icon {
    background: color-mix(in srgb, var(--feat-color) 20%, transparent);
}
.feature-strip__icon i {
    font-size: 1.5rem;
    color: var(--feat-color);
}

.feature-strip__title {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: var(--color-text, #2d2d2d);
    line-height: 1.3;
}
.feature-strip__desc {
    display: block;
    font-size: .72rem;
    color: var(--color-text-soft, #666);
    line-height: 1.4;
    margin-top: 2px;
}

/* Tablet: 2 sütun */
@media (max-width: 700px) {
    .feature-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .feature-strip__item:nth-child(2n) { border-right: none; }
    .feature-strip__item:nth-child(n+3) { border-top: 1px solid var(--color-border, #e8e8e8); }
}

/* Mobil: 2 sütun kompakt */
@media (max-width: 480px) {
    .feature-strip {
        padding: 0;
    }
    .feature-strip__item {
        padding: 14px 8px;
        gap: 7px;
    }
    .feature-strip__icon {
        width: 44px;
        height: 44px;
    }
    .feature-strip__icon i { font-size: 1.2rem; }
    .feature-strip__desc { display: none; }
}


/* ── Süreli Tarifler Hub Sayfası ──────────────────────────── */
.sureli-hub-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.sureli-hub-header {
    margin-bottom: 32px;
}

.sureli-hub-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 10px;
}

.sureli-hub-desc {
    color: var(--color-text-soft);
    font-size: 1rem;
    margin: 0;
}

/* Grid: 2 sütun yan yana */
.sureli-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Kart */
.sureli-hub-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--card-bg, #f9f9f9);
    border: 1.5px solid color-mix(in srgb, var(--card-color) 20%, transparent);
    border-radius: 16px;
    padding: 24px 20px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .2s, border-color .2s;
    cursor: pointer;
}

.sureli-hub-card:hover {
    box-shadow: 0 6px 24px color-mix(in srgb, var(--card-color) 18%, transparent);
    border-color: var(--card-color);
    transform: translateY(-2px);
}

.sureli-hub-card__icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--card-color) 14%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

.sureli-hub-card:hover .sureli-hub-card__icon {
    background: color-mix(in srgb, var(--card-color) 24%, transparent);
}

.sureli-hub-card__icon i {
    font-size: 1.6rem;
    color: var(--card-color);
}

.sureli-hub-card__body {
    flex: 1;
    min-width: 0;
}

.sureli-hub-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 6px;
}

.sureli-hub-card__desc {
    font-size: .85rem;
    color: var(--color-text-soft);
    margin: 0 0 12px;
    line-height: 1.5;
}

.sureli-hub-card__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sureli-hub-tag {
    background: color-mix(in srgb, var(--card-color) 10%, transparent);
    color: var(--card-color);
    border: 1px solid color-mix(in srgb, var(--card-color) 30%, transparent);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: .75rem;
    font-weight: 600;
}

.sureli-hub-card__arrow {
    flex-shrink: 0;
    color: var(--card-color);
    opacity: .5;
    font-size: 1.1rem;
    transition: opacity .2s, transform .2s;
}

.sureli-hub-card:hover .sureli-hub-card__arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Tablet */
@media (max-width: 700px) {
    .sureli-hub-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobil */
@media (max-width: 480px) {
    .sureli-hub-card {
        padding: 18px 14px;
        gap: 14px;
    }
    .sureli-hub-card__icon {
        width: 50px;
        height: 50px;
    }
    .sureli-hub-card__icon i { font-size: 1.25rem; }
    .sureli-hub-card__arrow { display: none; }
}


/* ── PWA Yükleme Popup ─────────────────────────────────────── */
#ms-pwa-install-box {
    display: none !important;
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 2147483647;  /* INT_MAX — nokta player dahil tüm reklamların üzeri */
    padding: 16px;
    justify-content: center;
    align-items: flex-start;
    pointer-events: none;
    box-sizing: border-box;
}

#ms-pwa-install-box .ms-pwa-install-inner {
    pointer-events: auto;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 18px;
    padding: 22px 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    text-align: center;
    box-sizing: border-box;
}

#ms-pwa-install-box .ms-pwa-install-title {
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: #222222;
}

#ms-pwa-install-box .ms-pwa-install-text {
    font-size: 15px;
    line-height: 1.5;
    color: #555555;
    margin: 0 0 18px 0;
}

#ms-pwa-install-box button {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 700;
    padding: 14px;
    margin: 0 0 10px 0;
    box-sizing: border-box;
    line-height: 1.2;
    cursor: pointer;
}

#ms-pwa-install-btn {
    background: #ad171b;
    color: #ffffff;
}

#ms-pwa-later-btn {
    background: #eeeeee;
    color: #333333;
    margin-bottom: 0;
}

@media (max-width: 480px) {
    #ms-pwa-install-box {
        padding: 14px;
        top: auto;
        bottom: 0;
    }

    #ms-pwa-install-box .ms-pwa-install-inner {
        max-width: none;
        border-radius: 16px 16px 0 0;
        padding: 20px 16px;
    }

    #ms-pwa-install-box .ms-pwa-install-title { font-size: 18px; }
    #ms-pwa-install-box .ms-pwa-install-text  { font-size: 14px; }
    #ms-pwa-install-box button                { font-size: 16px; }
}

/* ── CLS Önleme — Lazy-loaded kart görselleri ──────────────── */
/*
 * WP Rocket lazy loading img'lere width/height attribute yazar
 * ama bu bazen CSS aspect-ratio ile çelişerek layout shift'e yol açar.
 * Container'lar zaten aspect-ratio tanımlı; img'lere de ekliyoruz.
 */
.recipe-card-image img {
    /* Container: aspect-ratio: 4/3 — img bunu miras almalı */
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.mega-card-thumb img {
    /* Container: padding-top: 52.56% (205/390) */
    aspect-ratio: 390 / 205;
    object-fit: cover;
}

/* Infinite scroll / footer cards */
.infinite-recipes-grid .recipe-card-image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Story thumbnail — 62×62 daire; img kare aspect-ratio */
.ig-story-thumb img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}