/* Kahvaltı sayfası — serpme bileşeni sayfanın ana olayı, nefes alsın.
   Kaynak: design/Kahvaltı.dc.html */

/* Serpme anlatımı: solda metin + fiyat + CTA, sağda üçlü görsel, altta
   numaralı grup çipleri (design/Kahvaltı.dc.html). */
.blok-serpme-ozet {
  display: grid; gap: clamp(28px, 5vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}
.blok-serpme-ozet > * { min-width: 0; }
.ozet-metin .serpme-fiyat { margin: var(--b5) 0 0; text-align: left; }
.ozet-metin .serpme-fiyat strong { display: inline; font-size: 30px; }
.ozet-metin .serpme-kosul { padding: 0; margin: var(--b2) 0 0; background: none; }
.ozet-eylem { margin-top: var(--b6); }
.ozet-gorsel { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 165px; gap: var(--b3); }
.ozet-gorsel .mg-kare { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.ozet-gorsel .mg-kare:first-child { grid-row: span 2; }
.ozet-gruplar { grid-column: 1 / -1; text-align: center; }
.grup-cipler { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.grup-cip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--zemin-kart); border: var(--cizgi); border-radius: var(--r-cip);
  padding: 10px 18px; font-size: 13.5px; font-weight: 700;
}
.grup-no { font-size: 10px; color: var(--aksan-ikinci); }
.ozet-not { margin-top: var(--b5); font-size: 13px; color: var(--metin-soluk); }

.blok-serpme { background: var(--zemin-alt) !important; }
.blok-serpme .serpme { max-width: 900px; margin-inline: auto; }
.blok-serpme .serpme-ust { padding: 26px var(--b6) 20px; }
.blok-serpme .serpme-fiyat strong { font-size: 32px; }

/* Grup çipleri kahvaltı sayfasında yapışkan değil — sayfa uzun değil,
   çipler yalnız gruba atlamak için. Menü sayfasında yapışkan olan
   sekmelerdir (menu.css). */
.blok-serpme .cipler { padding: var(--b4) var(--b6); border-top: var(--cizgi); }
.blok-serpme .serpme-grup { padding: var(--b5) var(--b6); }
.blok-serpme .grup-ust h4 { font-size: 14px; }

/* Terrakota ikinci aksan: alerjen rozetleri zeytin yeşiliyle karışmasın. */
.blok-serpme .alerjen { color: var(--aksan-ikinci); }