/* ===== /kac-kalori/ hub sayfaları — styles.css üstüne ek katman ===== */

/* --- kırıntı (breadcrumb) --- */
.kk-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--g-mut);margin-bottom:26px}
.kk-crumbs a{color:var(--g-mut);font-weight:500}
.kk-crumbs a:hover{color:var(--black)}
.kk-crumbs .sep{opacity:.55}
.kk-crumbs span[aria-current]{color:var(--black);font-weight:500}

/* --- hero / cevap --- */
.kk-hero{padding-top:clamp(44px,6vw,72px);padding-bottom:clamp(24px,3vw,40px)}
/* Hero'yu takip eden içerik bölümünün üst boşluğunu kıs — yoksa iki .sec'in 132px'i
   üst üste binip hero ile içerik arasında ~264px boşluk bırakıyor (tüm kk-hero sayfaları). */
.kk-hero+.sec{padding-top:clamp(24px,3vw,40px)}
.kk-hero h1{font-size:clamp(34px,4.6vw,56px)}
.kk-answer{margin-top:18px;font-size:clamp(17px,1.7vw,20px);color:#2e2e33;max-width:38em}
.kk-answer b{font-weight:700}
.kk-meta{margin-top:14px;font-size:13px;color:var(--g-mut)}

/* --- hub arama --- */
.kk-search{position:relative;margin-top:26px;max-width:520px}
.kk-search-ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--g-mut);pointer-events:none}
.kk-search-input{width:100%;height:54px;padding:0 20px 0 50px;border:1px solid var(--line-l);border-radius:999px;background:var(--white);font:500 16px var(--font);color:var(--black);transition:border-color .15s,box-shadow .15s}
.kk-search-input::placeholder{color:#9a9aa2}
.kk-search-input:focus{outline:none;border-color:var(--lime-deep);box-shadow:0 0 0 4px rgba(157,189,46,.16)}
.kk-search-empty{margin-top:14px;font-size:15px;font-weight:500;color:var(--g-mut)}
[dir="rtl"] .kk-search-ico{left:auto;right:18px}
[dir="rtl"] .kk-search-input{padding:0 50px 0 20px}

/* --- porsiyon çipleri --- */
.kk-portions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
/* Çip her zaman beyaz zeminli → yazı rengi açıkça koyu (yoksa sec-dark'ta beyaz miras alıp beyaz-üstü-beyaz olur, ör. Aktivite eşdeğeri). */
.kk-chip{border:1px solid var(--line-l);border-radius:999px;padding:9px 18px;font-size:14.5px;background:var(--white);color:var(--black)}
.kk-chip b{font-weight:600}
.kk-chip .kcal{font-weight:700;margin-left:6px;white-space:nowrap}

/* --- besin değerleri tablosu (koyu bölüm) --- */
.kk-table-wrap{overflow-x:auto;border:1px solid var(--line-d);border-radius:var(--r-md);background:var(--d-1)}
table.kk-table{width:100%;border-collapse:collapse;font-size:15px;min-width:420px}
.kk-table th,.kk-table td{padding:14px 20px;text-align:right;border-bottom:1px solid var(--line-d)}
.kk-table th:first-child,.kk-table td:first-child{text-align:left}
.kk-table thead th{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--d-3)}
.kk-table tbody tr:last-child td{border-bottom:0}
.kk-table td{color:#e4e4e8}
.kk-table td:first-child{color:#c9c9cf;font-weight:500}
.kk-table tr.kk-row-hero td{font-weight:700;color:var(--white)}
.kk-table-note{margin-top:16px;font-size:13px;color:var(--d-3);max-width:52em}
.kk-subh{font-size:clamp(18px,2.1vw,23px);margin:clamp(30px,3.6vw,44px) 0 14px}

/* --- makale gövdesi --- */
.kk-article{max-width:720px}
.kk-article h2{font-size:clamp(22px,2.4vw,30px);margin:clamp(36px,4.5vw,54px) 0 14px}
.kk-article h2:first-child{margin-top:0}
.kk-article p{margin-bottom:14px;color:#2e2e33;max-width:58em}
.kk-article p:last-child{margin-bottom:0}

/* --- benzer yemekler / hub kartları --- */
.kk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.kk-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line-l);border-radius:var(--r-md);padding:18px 20px;transition:border-color .15s,transform .15s}
.kk-card:hover{border-color:rgba(11,11,13,.4);transform:translateY(-2px)}
.kk-card b{font-size:15.5px;font-weight:600;line-height:1.3}
.kk-card span{font-size:13px;color:var(--g-mut)}

/* --- hub sayfası --- */
.kk-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.kk-cat-link{border:1px solid var(--line-l);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:500;transition:background .15s,color .15s}
.kk-cat-link:hover{background:var(--black);color:var(--white)}
.kk-hub-sec{margin-top:clamp(40px,5vw,64px)}
.kk-hub-sec h2{font-size:clamp(20px,2.2vw,26px);margin-bottom:16px}

/* --- SSS ufak varyasyon: sayfa içi tekrar kullanım --- */
.kk-faq .faq-list{margin-top:0}

/* --- blog --- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.blog-card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line-l);border-radius:var(--r-lg);padding:26px 26px 24px;transition:border-color .15s,transform .15s,box-shadow .15s}
.blog-card:hover{border-color:rgba(11,11,13,.28);transform:translateY(-3px);box-shadow:0 16px 40px rgba(11,11,13,.07)}
.blog-card-tag,.blog-tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--lime-deep);background:rgba(157,189,46,.12);border-radius:999px;padding:5px 12px}
.blog-card h2{font-size:21px;line-height:1.25;font-weight:700}
.blog-card p{font-size:15px;color:#2e2e33;line-height:1.5;flex:1}
.blog-card-meta,.blog-post-meta{font-size:13px;color:var(--g-mut)}
.blog-post-meta{margin-top:14px}
.blog-tag{display:inline-block;margin-top:6px}
.blog-article{margin-top:6px}
.blog-article h2{font-size:clamp(21px,2.3vw,27px)}
.blog-article a{color:var(--lime-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.blog-article a:hover{color:var(--black)}
.blog-disclaimer{margin-top:34px;padding:16px 18px;border:1px solid var(--line-l);border-radius:var(--r-md);background:rgba(11,11,13,.02);font-size:13.5px;color:var(--g-mut);max-width:none}

/* --- mobil --- */
@media (max-width:520px){
  .kk-chip{padding:8px 14px;font-size:13.5px}
  .kk-table th,.kk-table td{padding:12px 14px}
  .blog-card{padding:22px}
}

/* blog SSS (A2) + beslenme sozlugu (A3) */
.blog-faq h2{font-size:26px;margin:0 0 20px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.gloss-list{margin:8px 0 0;display:grid;gap:14px}
.gloss-item{border:1px solid var(--line-l);border-radius:var(--r-md);padding:18px 22px}
.gloss-term{font-weight:700;font-size:18px;margin:0 0 6px}
.gloss-def{margin:0;color:#46464c;max-width:60em;line-height:1.6}
.gloss-related{margin:32px 0 0}
.gloss-related h2{font-size:20px;margin:0 0 8px}
.gloss-related a{color:var(--lime-deep);text-decoration:underline}

/* Utility class'ları — CSP style-src (unsafe-inline yok) inline style="" attribute'larını blokluyor; class'a taşındı */
.mt-20{margin-top:20px}
.mt-14{margin-top:14px}