/*
Theme Name: Tarif Defteri Tema
Author: Ali
Description: Tarif Defteri projesi için özel tema. Modern ve sade tasarım, iştah açan kırmızı vurgu rengi.
Version: 2.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tarif-defteri-tema
*/

/* ==================================================================
   1) RENKLER VE TEMEL DEĞERLER
   Bütün renkler burada; birini değiştirince tüm site değişir.
   ================================================================== */
:root {
    --metin: #111111;
    --soluk: #6b6b6b;
    --cizgi: #ececec;
    --acik: #f6f6f4;
    --zemin: #ffffff;
    --vurgu: #d4321c;          /* domates kırmızısı (beyaz üstünde kontrast 4,9:1) */
    --vurgu-koyu: #b02a17;
    --koseler: 18px;
    --genislik: 1180px;
    --yazi: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
    font-family: var(--yazi);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }

/* Klavyeyle gezenler için: odaklanan öğe belirgin görünsün */
:focus-visible { outline: 3px solid var(--vurgu-koyu); outline-offset: 3px; border-radius: 6px; }

/* "İçeriğe geç" bağlantısı: sadece Tab'a basınca görünür */
.atla {
    position: absolute; left: 16px; top: -60px; z-index: 100;
    padding: 10px 18px; border-radius: 999px;
    background: var(--metin); color: #fff; font-weight: 600;
    transition: top .15s;
}
.atla:focus { top: 12px; }

/* Sayfa genişliği kabı */
.kap {
    width: 100%;
    max-width: var(--genislik);
    margin: 0 auto;
    padding: 0 24px;
}

/* ==================================================================
   2) ÜST BAR (header)
   ================================================================== */
.ust-bar {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.logo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    white-space: nowrap;
}
.logo span { color: var(--vurgu); }

.menu {
    display: flex;
    gap: 28px;
    margin-left: auto;
    font-size: 15px;
}
.menu a { color: var(--soluk); transition: color .15s; }
.menu a:hover,
.menu a.aktif { color: var(--metin); font-weight: 600; }

.ara input[type="search"] {
    width: 220px;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23999' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 15px center;
    outline: none;
    transition: border-color .15s;
}
.ara input[type="search"]:focus { border-color: var(--metin); }

/* ==================================================================
   3) DÜĞMELER VE ÇİPLER
   ================================================================== */
.btn {
    display: inline-block;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    transition: transform .15s, background .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn-ana { background: var(--vurgu); color: #fff; }
.btn-ana:hover { background: var(--vurgu-koyu); }
.btn-cam { background: rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(6px); }
.btn-cam:hover { background: rgba(255, 255, 255, .3); }

.cipler { display: flex; flex-wrap: wrap; gap: 10px; }
.cip {
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--acik);
    font-size: 14px;
    color: #333;
    transition: background .15s, color .15s;
}
.cip:hover { background: #e9e9e6; }
.cip.aktif { background: var(--metin); color: #fff; }
.cip small { color: var(--soluk); margin-left: 4px; }
.cip.aktif small { color: #bbb; }

/* ==================================================================
   4) ANA SAYFA: HERO
   ================================================================== */
.hero {
    position: relative;
    height: 460px;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, #3a1d14, #8a2b1b);
    margin-top: 4px;
}
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-ort {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,0) 78%);
}
.hero-yazi {
    position: absolute;
    left: 56px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 540px;
    color: #fff;
}
.ust-yazi {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .85;
}
.hero h1 {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.02;
    margin: 14px 0 18px;
}
.hero p { font-size: 17px; opacity: .9; margin: 0 0 28px; }
.hero .btn { margin: 0 10px 10px 0; }
.hero-etiket {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: #fff;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13px;
    color: var(--soluk);
}
.hero-etiket b { color: var(--metin); }

/* ==================================================================
   5) BÖLÜMLER VE SAYFA BAŞLIKLARI
   ================================================================== */
.bolum { padding-top: 48px; padding-bottom: 24px; }
.bolum-bas {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 24px;
}
.bolum-bas h2 { font-size: 30px; font-weight: 800; }
.bolum-bas a { color: var(--soluk); font-size: 14px; white-space: nowrap; }
.bolum-bas a:hover { color: var(--vurgu); }

.sayfa-bas { padding-top: 32px; }
.sayfa-bas .ust-yazi { color: var(--vurgu); opacity: 1; }
.sayfa-bas h1 { font-size: 46px; font-weight: 800; letter-spacing: -0.04em; margin: 8px 0 10px; }
.sayfa-bas p { color: var(--soluk); margin: 0 0 24px; max-width: 640px; }
.sayfa-bas h1 + .cipler, .sayfa-bas h1 + .filtre { margin-top: 20px; }

/* ==================================================================
   5b) FİLTRE PANELİ VE HIZLI SEÇİMLER
   ================================================================== */
.filtre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--cizgi);
}
.filtre-grup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filtre-baslik {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--soluk);
    min-width: 52px;
}
.cip-kucuk { padding: 7px 13px; font-size: 13px; }
.cip-kucuk span { margin-left: 4px; font-size: 11px; opacity: .7; }
.filtre-temizle { font-size: 13px; color: var(--vurgu); font-weight: 600; margin-left: auto; }
.filtre-temizle:hover { text-decoration: underline; }

.hizli-secim {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}
.hizli-secim a {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid var(--cizgi);
    border-radius: var(--koseler);
    transition: border-color .15s, transform .15s;
}
.hizli-secim a:hover { border-color: var(--vurgu); transform: translateY(-2px); }
.hizli-secim span {
    grid-row: span 2;
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--acik);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.hizli-secim b { font-size: 16px; }
.hizli-secim small { color: var(--soluk); font-size: 13px; }

/* ==================================================================
   6) TARİF KARTLARI
   ================================================================== */
.izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 32px;
}

.kart-foto {
    position: relative;
    display: block;
    aspect-ratio: 10 / 7;
    border-radius: var(--koseler);
    overflow: hidden;
    background: var(--acik);
}
.kart-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.kart:hover .kart-foto img { transform: scale(1.05); }
.foto-yok {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 72px;
}
.rozet {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 700;
}
.rozet::before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--vurgu);
    margin-right: 6px;
    vertical-align: 1px;
}
.kart-baslik { font-size: 21px; font-weight: 700; margin: 16px 0 6px; }
.kart-baslik a:hover { color: var(--vurgu); }
.kart-meta { font-size: 14px; color: var(--soluk); margin: 0; }

/* Boş durum */
.bos {
    text-align: center;
    padding: 64px 24px;
    background: var(--acik);
    border-radius: var(--koseler);
    color: var(--soluk);
}
.bos span { font-size: 48px; display: block; margin-bottom: 8px; }

/* Sayfalama */
.pagination { margin-top: 48px; }
.nav-links { display: flex; justify-content: center; gap: 8px; }
.page-numbers {
    min-width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--acik);
    font-size: 14px;
}
.page-numbers.current { background: var(--metin); color: #fff; }
.screen-reader-text,
.gizli {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==================================================================
   7) DÜZ İÇERİK (sayfalar, geçici tek tarif görünümü)
   ================================================================== */
.icerik { max-width: 760px; margin: 0 auto; padding-top: 32px; }
.icerik h1 { font-size: 44px; font-weight: 800; margin-bottom: 24px; }
.icerik .one-cikan { border-radius: var(--koseler); overflow: hidden; margin-bottom: 32px; }
.icerik .metin { font-size: 18px; }

/* Blok düzenleyiciyle yapılan sayfalar (page.php) */
.sayfa .sayfa-bas { padding-left: 0; padding-right: 0; max-width: 760px; }
.sayfa .one-cikan { border-radius: var(--koseler); overflow: hidden; margin-bottom: 32px; }
.sayfa-icerik { font-size: 18px; line-height: 1.65; }
.sayfa-icerik > * { max-width: 760px; margin-left: 0; margin-right: 0; }
.sayfa-icerik > .alignwide { max-width: 100%; }
.sayfa-icerik > .alignfull { max-width: none; }
.sayfa-icerik > * + * { margin-top: 24px; }
.sayfa-icerik h2 { font-size: 30px; font-weight: 800; margin-top: 56px; }
.sayfa-icerik h3 { font-size: 21px; font-weight: 700; margin: 8px 0 6px; }
.sayfa-icerik p { margin-bottom: 0; }
.sayfa-icerik a:not(.wp-block-button__link) { color: var(--vurgu-koyu); text-decoration: underline; text-underline-offset: 3px; }
.sayfa-icerik ul, .sayfa-icerik ol { padding-left: 1.3em; }
.sayfa-icerik li + li { margin-top: 6px; }

.sayfa-icerik .wp-block-cover { border-radius: 24px; overflow: hidden; padding: 48px; }
.sayfa-icerik .wp-block-cover h2 { margin-top: 0; font-size: 40px; color: #fff; }
.sayfa-icerik .wp-block-cover p { color: #fff; font-size: 19px; max-width: 620px; }
.sayfa-icerik .wp-block-columns { gap: 20px; margin-bottom: 0; }
.sayfa-icerik .wp-block-column.has-background,
.sayfa-icerik .wp-block-group.has-background { border-radius: 20px; padding: 28px; }
.sayfa-icerik .wp-block-column p { font-size: 16px; color: var(--soluk); }
.sayfa-icerik .has-background > :first-child,
.sayfa-icerik .wp-block-group__inner-container > :first-child { margin-top: 0; }
.sayfa-icerik .wp-block-group__inner-container > * + * { margin-top: 16px; }
.sayfa-icerik .wp-block-group.has-background { padding: 36px; }
.sayfa-icerik p.ikon-yazi { font-size: 34px; line-height: 1; margin-bottom: 14px; }
.sayfa-icerik .wp-block-buttons { gap: 12px; }
.sayfa-icerik .wp-block-button__link {
    padding: 14px 26px; border-radius: 999px;
    background: var(--vurgu); color: #fff; font-weight: 600; font-size: 16px;
    text-decoration: none;
}
.sayfa-icerik .wp-block-button__link:hover { background: var(--vurgu-koyu); }
.sayfa-icerik .is-style-outline .wp-block-button__link { background: transparent; color: var(--metin); border: 2px solid var(--metin); }

/* Hakkında: ekip bölümü */
.sayfa-icerik .ekip { margin-top: 56px; }
.ekip-bas h2 { margin-top: 8px !important; }
.ekip-bas .ust-yazi { color: var(--vurgu-koyu); }
.ekip-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 24px; }
.ekip-kart {
    display: flex; align-items: center; gap: 20px;
    padding: 24px;
    border: 1px solid var(--cizgi);
    border-radius: 20px;
    background: #fff;
    transition: transform .2s, box-shadow .2s;
}
.ekip-kart:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(0,0,0,.35); }
.sayfa-icerik .ekip-kart h3 { margin: 0; font-size: 20px; }
.ekip-rol { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vurgu-koyu); }
.sayfa-icerik .ekip-kart p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--soluk); }
.sayfa-icerik .ekip + .wp-block-buttons { margin-top: 32px; }

/* İletişim formu (Contact Form 7 eklentisi) temaya uysun */
.wpcf7 { max-width: 640px; }
.wpcf7-form p { margin: 0 0 18px; }
.wpcf7-form label { display: block; font-weight: 600; font-size: 15px; }
.wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #c9c9c9;
    border-radius: 14px;
    font: inherit; font-size: 16px; font-weight: 400;
    background: #fff;
}
.wpcf7-form textarea { min-height: 160px; resize: vertical; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus { border-color: var(--metin); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu) 20%, transparent); }
.wpcf7-submit {
    padding: 14px 30px; border: 0; border-radius: 999px;
    background: var(--vurgu); color: #fff;
    font: inherit; font-weight: 600; cursor: pointer;
}
.wpcf7-submit:hover { background: var(--vurgu-koyu); }
.wpcf7-not-valid-tip { color: var(--vurgu-koyu); font-size: 14px; margin-top: 4px; }
.wpcf7 form .wpcf7-response-output { margin: 18px 0 0; padding: 14px 18px; border-radius: 14px; font-size: 15px; }
.wpcf7 .wpcf7-spinner { vertical-align: middle; }

/* ==================================================================
   7b) TEK TARİF SAYFASI
   ================================================================== */
.yol { font-size: 14px; color: var(--soluk); padding-top: 24px; }
.yol a:hover { color: var(--vurgu); }
.yol span { margin: 0 8px; color: #bbb; }

:root { --tarif-izgara: minmax(0, 5fr) minmax(0, 7fr); --tarif-bosluk: 56px; }

.tarif-ust {
    display: grid;
    grid-template-columns: var(--tarif-izgara);
    gap: var(--tarif-bosluk);
    align-items: stretch;          /* iki sütun aynı yükseklikte */
    padding-top: 20px;
}
/* Sol sütun: üstte başlık ve özet, en altta bilgi kutuları; fotoğrafın üst ve alt kenarıyla hizalı */
.tarif-bilgi { display: flex; flex-direction: column; }
.tarif-bilgi .ust-yazi { display: block; line-height: 1; margin-bottom: 20px; } /* kategori, tarif adının altında */
.tarif-bilgi .bilgiler { margin-top: auto; }
.tarif-bilgi > :first-child { margin-top: 0; } /* kategorisiz tarifte başlık da fotoğrafla hizalı başlasın */
.tarif-ust .ust-yazi { color: var(--vurgu); opacity: 1; }
.tarif-ust h1 { font-size: 52px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; margin: 0 0 14px; }
.tarif-ust .ozet { font-size: 18px; color: var(--soluk); margin: 0 0 28px; }

.yore-cip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--cizgi);
    font-size: 14px;
    margin-bottom: 24px;
    transition: border-color .15s;
}
.yore-cip:hover { border-color: var(--metin); }
.yore-cip b { font-weight: 600; }

.bilgiler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bilgi { background: var(--acik); border-radius: 14px; padding: 16px 18px; }
.bilgi .ikon { font-size: 20px; display: block; margin-bottom: 6px; }
.bilgi b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.bilgi b em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--soluk); }
.bilgi small { display: block; line-height: 1.35; }
.bilgi small { color: var(--soluk); font-size: 13px; }

.tarif-foto {
    min-height: 440px;             /* sol sütunun yüksekliğine uyar */
    border-radius: 24px;
    overflow: hidden;
    background: var(--acik);
    position: relative;
}
.tarif-foto img { width: 100%; height: 100%; object-fit: cover; }

.tarif-govde {
    display: grid;
    grid-template-columns: var(--tarif-izgara);
    gap: var(--tarif-bosluk);
    align-items: start;
    padding-top: 56px;
}

/* Malzeme kutusu */
.yan { display: flex; flex-direction: column; gap: 20px; }
.malzeme-kutu,
.besin-kutu {
    background: var(--acik);
    border-radius: 20px;
    padding: 26px;
}

/* Besin değerleri */
.besin-bas { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }

.besin-bas small { color: var(--soluk); font-size: 13px; }

:root { --protein: #e23d28; --karbonhidrat: #f2a93b; --yag: #3d7a5c; }
.m-protein { background: var(--protein); }
.m-karbonhidrat { background: var(--karbonhidrat); }
.m-yag { background: var(--yag); }

.makro-cubuk {
    display: flex;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    gap: 3px;
    margin-bottom: 14px;
}
.makro-cubuk span { display: block; height: 100%; }
.makro-cubuk span:first-child { border-radius: 999px 0 0 999px; }
.makro-cubuk span:last-child { border-radius: 0 999px 999px 0; }

.makrolar { list-style: none; margin: 0; padding: 0; }
.makrolar li {
    display: grid;
    grid-template-columns: 12px 1fr auto 44px;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 15px;
}
.makrolar i { width: 12px; height: 12px; border-radius: 4px; }
.makrolar b { font-weight: 700; }
.makrolar small { color: var(--soluk); font-size: 13px; text-align: right; }

.besin-toplam {
    margin-top: 14px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 14px;
    font-size: 14px;
}
.besin-toplam span { color: var(--soluk); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.besin-toplam span b { color: var(--vurgu); }
.besin-toplam p { margin: 4px 0 0; color: var(--metin); line-height: 1.5; }
.besin-toplam p span { all: unset; }
.malzeme-bas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    margin-bottom: 18px;
}
.malzeme-bas h2, .besin-bas h2 { font-size: 24px; font-weight: 800; }

.porsiyon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    padding: 4px;
}
.porsiyon button {
    width: 32px; height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--acik);
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.porsiyon button:hover { background: var(--vurgu); color: #fff; }
.porsiyon button:disabled { opacity: .35; cursor: default; background: var(--acik); color: inherit; }
.porsiyon output { min-width: 86px; padding: 0 6px; text-align: center; font-size: 14px; font-weight: 600; white-space: nowrap; }

.malzeme-listesi { list-style: none; margin: 0; padding: 0; }
.malzeme-listesi li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px dashed #dcdcd8;
    font-size: 15px;
}
.malzeme-listesi li:last-child { border-bottom: 0; }
.malzeme-listesi a:hover { color: var(--vurgu); }
.malzeme-listesi .miktar { color: var(--soluk); white-space: nowrap; text-align: right; }
.malzeme-listesi .miktar b { color: var(--metin); font-weight: 700; }
.malzeme-not { font-size: 13px; color: var(--soluk); margin: 14px 0 0; }

/* Yapılış adımları */
/* Malzemeler kutusunun iç boşluğu (26px) kadar aşağıdan başla, başlıklar aynı satıra gelsin */
.yapilis { padding-top: 26px; }
.yapilis h2 { font-size: 24px; font-weight: 800; min-height: 40px; display: flex; align-items: center; margin-bottom: 18px; }
.yapilis .metin { font-size: 17px; }
.yapilis .metin ol {
    list-style: none;
    counter-reset: adim;
    margin: 0;
    padding: 0;
}
.yapilis .metin ol li {
    counter-increment: adim;
    position: relative;
    padding: 0 0 22px 60px;
    min-height: 44px;
}
.yapilis .metin ol li::before {
    content: counter(adim);
    position: absolute;
    left: 0;
    top: -4px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--vurgu);
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.yapilis .metin ol li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 42px;
    bottom: 4px;
    width: 2px;
    background: var(--cizgi);
}
.yapilis .metin p { margin: 0 0 16px; }

/* ==================================================================
   7c) YEMEK BULUCU
   ================================================================== */
.secici {
    background: var(--acik);
    border-radius: 24px;
    padding: 24px;
}
.secici-ust { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.secici-ara {
    flex: 1;
    min-width: 200px;
    max-width: 360px;
    padding: 12px 18px;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
    background: #fff;
    outline: none;
}
.secici-ara:focus { border-color: var(--metin); }
.secici-sayac { font-size: 14px; font-weight: 600; color: var(--vurgu); }
.secici-temizle {
    margin-left: auto;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--soluk);
    cursor: pointer;
    text-decoration: underline;
}
.secici-temizle[hidden] { display: none; }
.secici-temizle:hover { color: var(--vurgu); }

.cip-secim {
    border: 0;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    background: #fff;
}
.cip-secim:hover { background: #ececea; }
.cip-secim[aria-pressed="true"] { background: var(--metin); color: #fff; }
.cip-secim[aria-pressed="true"]::before { content: "✓ "; }
.cip-secim[hidden] { display: none; }
.secici-not, .secici-bulunamadi { margin: 16px 0 0; font-size: 13px; color: var(--soluk); }

.sonuclar { transition: opacity .2s; }
.sonuclar.yukleniyor { opacity: .4; pointer-events: none; }

.rozet.tam::before { background: #2e9d5b; }
.uyum-cubuk { height: 4px; background: var(--cizgi); border-radius: 4px; overflow: hidden; margin-top: 14px; }
.uyum-cubuk span { display: block; height: 100%; background: var(--vurgu); transition: width .4s; }
.eksik { font-size: 13px; color: var(--soluk); margin-top: 10px; line-height: 1.5; }
.eksik b { color: var(--metin); font-weight: 600; }
.eksik-yok { color: #2e9d5b; font-weight: 600; }
.kopyala {
    display: block;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--vurgu);
    cursor: pointer;
}
.kopyala:hover { text-decoration: underline; }

/* Tarif sayfasında dolap durumu */
.dolap-durum {
    display: flex;
    gap: 14px;
    align-items: center;
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-left: 4px solid var(--vurgu);
}
.dolap-durum[hidden] { display: none; }
.dolap-durum.tam { border-left-color: #2e9d5b; }
.dolap-yuzde { font-size: 26px; font-weight: 800; color: var(--vurgu); letter-spacing: -0.03em; }
.dolap-durum.tam .dolap-yuzde { color: #2e9d5b; }
.dolap-yazi { margin: 0; font-size: 14px; line-height: 1.45; }
.dolap-durum a { font-size: 13px; color: var(--soluk); }
.dolap-durum a:hover { color: var(--vurgu); }

.malzeme-listesi li.var .ad::before { content: "✓ "; color: #2e9d5b; font-weight: 700; }
.malzeme-listesi li.yok .ad { color: var(--vurgu); }
.malzeme-listesi li.yok .ad::after,
.malzeme-listesi li.evde .ad::after {
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    vertical-align: 1px;
}
.malzeme-listesi li.yok .ad::after { content: "eksik"; background: #fde8e5; color: var(--vurgu); }
.malzeme-listesi li.evde .ad::after { content: "evde var"; background: #eee; color: var(--soluk); }

/* ==================================================================
   7d) FAVORİLER
   ================================================================== */
.kart { position: relative; }
.fav-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px; height: 38px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--metin);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    transition: transform .15s, color .15s;
}
.fav-btn:hover { transform: scale(1.08); color: var(--vurgu); }
.fav-btn svg { fill: none; stroke: currentColor; stroke-width: 2; }
.fav-btn[aria-pressed="true"] { color: var(--vurgu); }
.fav-btn[aria-pressed="true"] svg { fill: var(--vurgu); }
.fav-btn.atla { animation: kalp-atla .35s ease; }
@keyframes kalp-atla {
    0% { transform: scale(1); }
    40% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Tarif sayfasındaki yazılı favori düğmesi */
.tarif-etiketler { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.tarif-etiketler .yore-cip { margin-bottom: 0; }
.fav-btn.fav-buyuk {
    position: static;
    width: auto; height: auto;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--cizgi);
    box-shadow: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
}
.fav-btn.fav-buyuk:hover { transform: none; border-color: var(--vurgu); }
.fav-btn.fav-buyuk[aria-pressed="true"] { background: #fde8e5; border-color: #fde8e5; }

/* Menüdeki sayı */
.fav-sayac {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    margin-left: 2px;
    border-radius: 999px;
    background: var(--vurgu);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    vertical-align: 1px;
}
.fav-sayac[hidden] { display: none; }

/* Favoriler sayfası: favori.js "goster" sınıfı ekleyene kadar kartlar gizli */
.favori-izgara .kart { display: none; }
.favori-izgara .kart.goster { display: block; }

/* Bildirim balonu */
.bildirim {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 20px);
    background: var(--metin);
    color: #fff;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 100;
}
.bildirim.gorunur { opacity: 1; transform: translate(-50%, 0); }

/* ==================================================================
   7e) YÖRELER
   ================================================================== */
.bolgeler {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}
.bolge {
    --bolge-renk: var(--vurgu);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 180px;
    padding: 22px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--bolge-renk) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--bolge-renk) 18%, #fff);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.bolge:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px var(--bolge-renk); }
.bolge-ikon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    margin-bottom: 10px;
}
.bolge-sayi {
    position: absolute;
    top: 22px; right: 22px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--bolge-renk);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.bolge-yakinda .bolge-sayi { background: #fff; color: var(--bolge-renk); border: 1px dashed var(--bolge-renk); }
.bolge-ad { font-size: 20px; font-weight: 800; color: var(--bolge-renk); letter-spacing: -0.02em; }
.bolge-lezzet { color: var(--soluk); font-size: 13px; }
.bolge-iller { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 600; }

/* Konum kutusu */
.konum {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 16px 24px;
    padding: 24px;
    border-radius: 24px;
    background: var(--acik);
}
.konum-sol { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.konum-bul { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.konum-bul:disabled { opacity: .6; cursor: wait; transform: none; }
.konum-bul[hidden] { display: none; }
.konum-durum { margin: 0; font-size: 14px; color: var(--soluk); max-width: 300px; }
.konum-durum.tamam { color: #2e9d5b; font-weight: 600; }
.konum-durum.hata { color: var(--vurgu); }
.konum-veya { color: var(--soluk); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.konum-sec { display: flex; gap: 8px; }
.konum-sec select {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 15px;
}
.konum-git { background: var(--metin); color: #fff; border: 0; font: inherit; font-weight: 600; cursor: pointer; padding: 12px 22px; }
.konum-not { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--soluk); }

/* Çok yakında kartı */
.cok-yakinda {
    --bolge-renk: var(--vurgu);
    text-align: center;
    padding: 56px 24px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--bolge-renk) 14%, transparent) 0, transparent 40%),
        radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--bolge-renk) 12%, transparent) 0, transparent 40%),
        color-mix(in srgb, var(--bolge-renk) 5%, #fff);
    border: 2px dashed color-mix(in srgb, var(--bolge-renk) 35%, #fff);
}
.cok-yakinda-ikon { display: block; font-size: 56px; margin-bottom: 12px; }
.cok-yakinda-rozet {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--bolge-renk);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.cok-yakinda h2 { font-size: 32px; font-weight: 800; margin: 16px 0 10px; }
.cok-yakinda p { color: var(--soluk); max-width: 520px; margin: 0 auto 24px; }

.cip-soluk { background: transparent; border: 1px dashed var(--cizgi); color: var(--soluk); }

/* ==================================================================
   7f) YAPAY ZEKA
   ================================================================== */
.ai-foto {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    padding: 20px 24px;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(120deg, #1d1d1f 0%, #3a1d14 55%, #8a2b1b 100%);
    position: relative;
    overflow: hidden;
}
.ai-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
    transform: translateX(-100%);
    pointer-events: none;
}
.ai-foto.calisiyor::after { animation: parilti 1.4s linear infinite; }
@keyframes parilti { to { transform: translateX(100%); } }

.ai-foto-yazi { flex: 1; min-width: 0; }
.ai-foto-yazi b { display: block; font-size: 18px; margin: 6px 0 4px; }
.ai-etiket {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    font-size: 12px;
    font-weight: 600;
}
.ai-foto-durum { margin: 0; font-size: 14px; opacity: .85; }
.ai-foto-durum.tamam { color: #9be3b4; opacity: 1; }
.ai-foto-durum.hata { color: #ffb3a7; opacity: 1; }
.ai-foto-dugme { cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.ai-foto-dugme.bekliyor { opacity: .6; pointer-events: none; }
.ai-foto-onizleme { flex-shrink: 0; width: 72px; height: 72px; border-radius: 14px; overflow: hidden; border: 2px solid rgba(255,255,255,.3); }
.ai-foto-onizleme[hidden] { display: none; }
.ai-foto-onizleme img { width: 100%; height: 100%; object-fit: cover; }

/* İkame önerisi */
.ikame { margin-top: 10px; }
.ikame-dugme {
    padding: 7px 12px;
    border: 1px dashed #d9b8b2;
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--vurgu);
    cursor: pointer;
    transition: background .15s;
}
.ikame-dugme:hover { background: #fdf0ee; }
.ikame-dugme:disabled { cursor: wait; opacity: .7; }
.ikame-dugme[hidden] { display: none; }
.ikame-liste { list-style: none; margin: 0; padding: 12px 14px; background: #fff8f6; border-radius: 12px; border: 1px solid #f6dcd6; }
.ikame-liste li { padding: 6px 0; font-size: 14px; }
.ikame-liste li + li { border-top: 1px dashed #f0d2cb; }
.ikame-ust { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.ikame-eksik { text-decoration: line-through; color: var(--soluk); }
.ikame-ok { color: var(--vurgu); font-weight: 700; }
.ikame-liste small { display: block; color: var(--soluk); font-size: 13px; line-height: 1.45; margin-top: 2px; }
.ikame-uyari { margin: 6px 0 0; font-size: 12px; color: var(--soluk); }
.ikame-hata { margin: 6px 0 0; font-size: 13px; color: var(--vurgu); }
.dolap-durum { align-items: flex-start; }
.dolap-icerik { flex: 1; min-width: 0; }

/* Ana sayfadaki yapay zeka bandı */
.ai-bant {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
    padding: 22px 28px;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(120deg, #1d1d1f 0%, #3a1d14 55%, #8a2b1b 100%);
    transition: transform .2s, box-shadow .2s;
}
.ai-bant:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -20px rgba(138, 43, 27, .8); }
.ai-bant-ikon {
    flex-shrink: 0;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
}
.ai-bant-yazi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-bant-yazi .ai-etiket { align-self: flex-start; }
.ai-bant-yazi b { font-size: 19px; }
.ai-bant-yazi small { font-size: 14px; opacity: .8; }
.ai-bant-ok {
    flex-shrink: 0;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--vurgu);
    font-weight: 600;
    font-size: 15px;
}

/* Tarif sayfasındaki ipucu kutusu */
.yapilis .metin .tarif-ipucu {
    margin-top: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    background: #fff8e6;
    border-left: 4px solid #f2a93b;
    font-size: 15px;
}

/* ==================================================================
   8) ALT BAR (footer)
   ================================================================== */
.alt-bar { margin-top: 80px; border-top: 1px solid var(--cizgi); }
.alt-bar .kap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 32px;
    padding-bottom: 32px;
}
.alt-bar p { margin: 4px 0 0; color: var(--soluk); font-size: 14px; }
/* İmza: sağ alttaki ekip isimleri */
.imza { display: flex; align-items: center; gap: 14px; text-align: right; }
.imza b { display: block; font-size: 14px; font-weight: 700; }
.imza p { margin-top: 2px; }
.imza-avatarlar { display: flex; flex-shrink: 0; order: 2; }
.imza-avatarlar .avatar + .avatar { margin-left: -6px; }

/* Baş harf rozetleri */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vurgu) 0%, var(--vurgu-koyu) 100%);
    color: #fff;
    font-size: 22px; font-weight: 800; letter-spacing: .02em;
    box-shadow: 0 10px 24px -12px var(--vurgu);
}
.avatar + .avatar, .ekip-kart:nth-child(2) .avatar { background: linear-gradient(135deg, #2b2523 0%, #111 100%); box-shadow: 0 10px 24px -12px #111; }
.avatar-kucuk { width: 36px; height: 36px; font-size: 12px; border: 2px solid #fff; box-shadow: none; }

.alt-menu { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; font-weight: 500; }
.alt-menu a { color: var(--metin); }
.alt-menu a:hover, .alt-menu a.aktif { color: var(--vurgu-koyu); }

/* ==================================================================
   9) TABLET VE TELEFON
   ================================================================== */
@media (max-width: 1080px) {
    .ust-bar { flex-wrap: wrap; gap: 14px 24px; }
    .menu { margin-left: 0; order: 3; width: 100%; flex-wrap: wrap; gap: 8px 22px; }
    .ara { margin-left: auto; }
}

@media (max-width: 960px) {
    .izgara { grid-template-columns: repeat(2, 1fr); }
    .konum { grid-template-columns: 1fr; }
    .konum-veya { display: none; }
    .ara input[type="search"] { width: 170px; }
    .hero h1 { font-size: 44px; }
    .tarif-ust { grid-template-columns: 1fr; gap: 28px; }
    .tarif-ust .tarif-foto { order: -1; aspect-ratio: 4 / 3; min-height: 0; }
    .tarif-bilgi .bilgiler { margin-top: 0; }
    .yapilis { padding-top: 0; }
    .tarif-govde { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
}

@media (max-width: 680px) {
    .kap { padding-left: 16px; padding-right: 16px; }
    .ust-bar { flex-wrap: wrap; gap: 12px 20px; }
    .menu { margin-left: 0; order: 3; width: 100%; gap: 8px 18px; flex-wrap: wrap; }
    .ara { margin-left: auto; }
    .ara input[type="search"] { width: 150px; }
    .hero { height: 540px; border-radius: 18px; }
    .hero-ort { background: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.15) 100%); }
    .hero-yazi { left: 22px; right: 22px; top: auto; bottom: 64px; transform: none; }
    .hero h1 { font-size: 36px; }
    .hero p { font-size: 15px; }
    .hero-etiket { left: 22px; right: auto; bottom: 18px; }
    .izgara { grid-template-columns: 1fr; gap: 32px; }
    .bolum-bas h2 { font-size: 24px; }
    .hizli-secim { grid-template-columns: 1fr; gap: 10px; }
    .konum { padding: 18px; }
    .ai-foto { flex-wrap: wrap; padding: 18px; border-radius: 18px; }
    .ai-foto-dugme { width: 100%; text-align: center; }
    .ai-bant { flex-wrap: wrap; padding: 18px; border-radius: 18px; gap: 14px; }
    .ai-bant-ikon { display: none; }
    .ai-bant-ok { width: 100%; text-align: center; }
    .bolgeler { grid-template-columns: 1fr 1fr; gap: 10px; }
    .bolge { min-height: 0; padding: 16px; border-radius: 16px; }
    .bolge-ikon { width: 40px; height: 40px; font-size: 20px; margin-bottom: 6px; }
    .bolge-sayi { position: static; align-self: flex-start; order: 5; margin-top: 8px; font-size: 11px; }
    .bolge-ad { font-size: 17px; }
    .bolge-iller { padding-top: 4px; }
    .konum-durum { max-width: none; }
    .cok-yakinda h2 { font-size: 24px; }
    .filtre { gap: 12px; }
    .filtre-grup { width: 100%; }
    .filtre-temizle { margin-left: 0; }
    .sayfa-bas h1, .icerik h1 { font-size: 34px; }
    .tarif-ust h1 { font-size: 36px; }
    .tarif-ust .ozet { font-size: 16px; }
    .bilgiler { gap: 8px; }
    .bilgi { padding: 12px; }
    .bilgi b { font-size: 18px; }
    .malzeme-kutu, .besin-kutu { padding: 20px; }
    .secici { padding: 18px; border-radius: 18px; }
    .secici-ara { max-width: none; }
    .bilgi small { font-size: 12px; }
    .alt-bar .kap { flex-direction: column; align-items: flex-start; }
    .imza { text-align: left; }
    .imza-avatarlar { order: 0; align-self: flex-start; margin-top: 2px; }
    .ekip-kart { padding: 20px; gap: 16px; }
    .avatar { width: 54px; height: 54px; font-size: 19px; }
    .avatar-kucuk { width: 36px; height: 36px; font-size: 12px; }
    .sayfa-icerik .wp-block-cover { padding: 28px 22px; }
    .sayfa-icerik .wp-block-cover h2 { font-size: 30px; }
    .sayfa-icerik h2 { font-size: 24px; margin-top: 40px; }
}