/* =============================================================================
   CATLITTER — blog yazısı ek bileşenleri (icerik.css'in tamamlayıcısı)
   Kaynak sitedeki rehber bileşenlerinin temadaki karşılıkları:
   bilgi / ipucu / uyarı kutuları · CTA · artı–eksi · ilgili yazılar · etiketler
   ============================================================================= */

/* ── Kutular: bilgi (zeytin), ipucu (yeşil), uyarı (turuncu) ─────────────────── */
.yz-kutu { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 20px 22px; }
.yz-kutu::before { content: ''; width: 34px; height: 34px; border-radius: 12px; background: var(--orange) center / 18px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6 2.8 19.4h18.4L12 3.6Z'/%3E%3Cpath d='M12 9.6v4.6M12 16.9v.1'/%3E%3C/svg%3E"); }
.yz-kutu > * { grid-column: 2; margin: 0; }
.yz-kutu > * + * { margin-top: 0.6em; }
.yz-kutu p { margin: 0; }
.yz-kutu--bilgi { background: #F2F4EC; border-color: rgba(70, 84, 51, 0.22); }
.yz-kutu--bilgi::before { background-color: var(--olive-600); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 10.6v5.8M12 7.7v.1'/%3E%3C/svg%3E"); }
.yz-kutu--bilgi strong:first-child { color: var(--olive-700); }
.yz-kutu--ipucu { background: linear-gradient(120deg, #F4F7EC, #FBFAF4); border-color: rgba(116, 133, 90, 0.3); }
.yz-kutu--ipucu::before { background-color: #6E8A3A; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E"); }
.yz-kutu--ipucu strong:first-child { color: #55702A; }
.yz-kutu--uyari { background: var(--orange-50); border-color: rgba(217, 88, 26, 0.3); }

/* ── CTA: koyu zeytin kart, turuncu vurgu ─────────────────────────────────── */
.yz-cta { position: relative; overflow: hidden; padding: clamp(24px, 3vw, 34px); border-radius: 24px; background: radial-gradient(120% 140% at 100% 0%, rgba(242, 109, 31, 0.22), transparent 55%), var(--olive-900); color: var(--on-dark); }
.yz-cta::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%; border: 1px solid var(--line-dark); pointer-events: none; }
.yz-cta > * + * { margin-top: 0.7em; }
.yz-metin .yz-cta h3 { margin: 0; font-size: clamp(20px, 2vw, 24px); color: var(--on-dark-strong); letter-spacing: -0.02em; }
.yz-cta p { margin: 0; font-size: 16px; line-height: 1.7; }
.yz-cta strong { color: var(--on-dark-strong); }
.yz-metin .yz-cta a:not(.dg) { color: var(--orange-300); text-decoration-color: rgba(249, 166, 111, 0.5); }
.yz-cta__eylem { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.1em !important; }
.yz-metin .yz-cta__eylem .dg { text-decoration: none; }
.yz-metin .yz-cta__eylem .dg--koyu { background: var(--orange); border-color: var(--orange); color: #fff; }
.yz-metin .yz-cta__eylem .dg--koyu:hover { background: var(--orange-600); border-color: var(--orange-600); }
.yz-metin .yz-cta__eylem .dg--cizgi { background: transparent; border-color: var(--line-dark); color: var(--on-dark-strong); }
.yz-metin .yz-cta__eylem .dg--cizgi:hover { border-color: var(--on-dark-strong); }

/* ── Artı / eksi ──────────────────────────────────────────────────────────── */
.yz-artieksi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.yz-arti, .yz-eksi { padding: 20px 22px; border-radius: 20px; border: 1px solid var(--line); background: #fff; }
.yz-arti { border-top: 4px solid #6E8A3A; }
.yz-eksi { border-top: 4px solid var(--orange); }
.yz-metin .yz-artieksi h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.yz-arti h4 { color: #55702A; }
.yz-eksi h4 { color: var(--orange-600); }
.yz-metin .yz-artieksi ul { display: grid; gap: 8px; margin: 0; }
.yz-metin .yz-artieksi li { padding-left: 28px; font-size: 15.5px; line-height: 1.55; }
.yz-metin .yz-artieksi li::before { left: 0; top: 0.2em; width: 18px; height: 18px; border-radius: 50%; background: center / 12px no-repeat; }
.yz-metin .yz-arti li::before { background-color: #E6EDD8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355702A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.yz-metin .yz-eksi li::before { background-color: #FCE3D4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9581A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E"); }
@media (max-width: 640px) { .yz-artieksi { grid-template-columns: minmax(0, 1fr); } }

/* ── İlgili yazılar (yazının içindeki liste) ──────────────────────────────── */
.yz-ilgili { padding: 22px 24px; border-radius: 20px; background: var(--cream); border: 1px solid var(--line); }
.yz-metin .yz-ilgili h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive-600); }
.yz-metin .yz-ilgili ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 0; }
.yz-metin .yz-ilgili li { padding-left: 22px; }
.yz-metin .yz-ilgili li::before { left: 0; top: 0.35em; width: 14px; height: 14px; border-radius: 0; background: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F26D1F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E"); }
.yz-metin .yz-ilgili a { font-size: 15.5px; text-decoration: none; }
.yz-metin .yz-ilgili a:hover { text-decoration: underline; }
@media (max-width: 640px) { .yz-metin .yz-ilgili ul { grid-template-columns: minmax(0, 1fr); } }

/* ── Etiketler ────────────────────────────────────────────────────────────── */
.yz-etiketler { padding-top: 22px; border-top: 1px dashed rgba(27, 31, 22, 0.16); }
.yz-etiketler p { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.yz-metin .yz-etiketler ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.yz-metin .yz-etiketler li { padding: 0; }
.yz-metin .yz-etiketler li::before { content: none; }
.yz-metin .yz-etiketler a { display: inline-flex; padding: 6px 13px; border-radius: 999px; background: var(--cream-2); font-size: 13.5px; font-weight: 500; color: var(--olive-800); text-decoration: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.yz-metin .yz-etiketler a:hover { background: var(--olive-900); color: var(--on-dark-strong); }

/* ── Küçük not / görsel altı ──────────────────────────────────────────────── */
.yz-not { font-size: 14px; color: var(--muted); }

/* yazı içindeki h4 (kutu dışı) */
.yz-metin h4 { margin-top: 1.4em; font-size: 17px; color: var(--ink); }

/* ── Düzeltmeler ──────────────────────────────────────────────────────────── */
/* adım maddesindeki metin + bağlantı ayrı ızgara hücrelerine bölünmesin */
.yz-metin .yz-adim li { display: block; }
.yz-metin .yz-adim li strong { margin-bottom: 2px; }
/* ürün kutusundaki paket fotoğrafı kutusundan taşmasın */
.yz-urun__gorsel { overflow: hidden; }
.yz-urun__gorsel img { height: 130px; max-height: 100%; width: auto; max-width: 100%; }