/* cateringos.com.tr/blog — com.tr B jetonlarıyla okuma düzeni (comtr.css'ten sonra yüklenir). Uzun metin: ölçü ~70 karakter,
   başlık üstü boşluk altından geniş, tablolar kart içinde yatay kaydırmalı, bağlantılar açık mavi + alt çizgi. */
.blog { padding: calc(64px + var(--b16)) 0 var(--b20); background: var(--gece-1); }
.blog .kap { max-width: calc(760px + 2 * var(--yan)); }

/* dizin */
.blog-dizin h1 { font: 500 clamp(34px, 5vw, 52px)/1.08 var(--f-baslik); letter-spacing: -0.03em; color: var(--un); }
.blog-giris { margin: var(--b4) 0 var(--b10); max-width: 62ch; color: var(--sis); font-size: 17px; line-height: 1.6; }
.blog-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b3); }
.blog-kart { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--b4); padding: var(--b6); border: 1px solid var(--cizgi-2);
  border-radius: 16px; background: var(--gece-2); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.blog-kart:hover { border-color: var(--gece-3-cizgi); background: #121B30; }
.blog-kart:focus-visible { outline: 2px solid var(--lavanta); outline-offset: 3px; }
.blog-no { grid-row: 1 / span 3; color: var(--lavanta); font: 600 14px/1.9 var(--f-govde); font-variant-numeric: tabular-nums; }
.blog-kart h2 { margin: 0; color: var(--un); font: 500 20px/1.3 var(--f-baslik); letter-spacing: -0.01em; }
.blog-kart p { margin: var(--b2) 0 var(--b3); color: var(--sis); font-size: 15px; line-height: 1.55; }
.blog-sure { color: var(--kul); font-size: 13px; }

/* yazı */
.blog-yol { margin-bottom: var(--b4); font-size: 14px; }
.blog-yol a, .blog-geri a { color: var(--lavanta); text-decoration: none; }
.blog-yol a:hover, .blog-geri a:hover { text-decoration: underline; text-underline-offset: 4px; }
.blog-yazi h1 { font: 500 clamp(30px, 4.4vw, 46px)/1.12 var(--f-baslik); letter-spacing: -0.028em; color: var(--un); text-wrap: balance; }
.blog-meta { display: flex; flex-wrap: wrap; gap: var(--b2) var(--b4); margin: var(--b4) 0 var(--b10); color: var(--kul); font-size: 14px; }
.blog-meta span + span::before, .blog-meta time::before { content: "·"; margin-right: var(--b4); color: var(--duman); }
.blog-yazi { color: var(--sis); font-size: 17.5px; line-height: 1.72; }
.blog-yazi > p, .blog-yazi > ul, .blog-yazi > ol { max-width: 68ch; }
.blog-yazi p { margin: 0 0 1.05em; }
.blog-yazi h2 { margin: 2.2em 0 .6em; color: var(--un); font: 500 clamp(23px, 3vw, 28px)/1.25 var(--f-baslik); letter-spacing: -0.02em; text-wrap: balance; }
.blog-yazi h3 { margin: 1.8em 0 .5em; color: var(--un); font: 600 19px/1.35 var(--f-baslik); }
.blog-yazi h4 { margin: 1.5em 0 .4em; color: var(--un); font: 600 17px/1.4 var(--f-govde); }
.blog-yazi strong { color: var(--un); font-weight: 600; }
.blog-yazi a { color: var(--lavanta); text-decoration: underline; text-decoration-color: rgba(124, 196, 255, .4); text-underline-offset: 4px; }
.blog-yazi a:hover { text-decoration-color: var(--lavanta); }
.blog-yazi ul, .blog-yazi ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.blog-yazi li { margin: .35em 0; }
.blog-yazi li::marker { color: var(--duman); }
.blog-yazi blockquote { margin: 1.6em 0; padding: var(--b4) var(--b6); border: 1px solid var(--cizgi-2); border-radius: 12px; background: var(--gece-2); color: var(--sis); }
.blog-yazi blockquote p:last-child { margin-bottom: 0; }
.blog-yazi hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--cizgi-2); }
.blog-yazi table { display: block; max-width: 100%; overflow-x: auto; margin: 1.4em 0 1.8em; border-collapse: collapse; font-size: 14.5px; line-height: 1.45;
  border: 1px solid var(--cizgi-2); border-radius: 12px; background: var(--gece-2); }
.blog-yazi th, .blog-yazi td { padding: 10px 14px; border-bottom: 1px solid var(--cizgi-1); text-align: left; vertical-align: top; min-width: 7em; }
.blog-yazi th { color: var(--un); font-weight: 600; background: #121B30; }
.blog-yazi tr:last-child td { border-bottom: 0; }
.blog-yazi td { font-variant-numeric: tabular-nums; }
.blog-yazi code { padding: 1px 6px; border-radius: 6px; background: var(--gece-2); color: var(--un); font-size: .92em; }
.blog-geri { margin-top: var(--b16); padding-top: var(--b6); border-top: 1px solid var(--cizgi-2); font-size: 15px; }
::selection { background: rgba(10, 107, 201, .45); color: #fff; }

@media (max-width: 720px) {
  .blog { padding-top: calc(64px + var(--b10)); }
  .blog-kart { grid-template-columns: 1fr; padding: var(--b5); }
  .blog-no { grid-row: auto; line-height: 1.4; margin-bottom: var(--b2); }
  .blog-yazi { font-size: 16.5px; }
}