/* H-265: image blocks split out of arayuz-h116.css (rules unchanged, only the file is new). Loaded by Seo:ImagesH176, Seo:ImagesH178 (head) and Seo:ImagesH179 (/kimler-icin pages), independent of Seo:UiH116.
   Every selector is scoped to the image classes (.prf-persona-sec, .x176-*, .x178-*, .section-banner.layout-04 picture.x176-pic, .pcrm-step-img picture.x176-pic), so load order against arayuz-h116.css does not matter. */

/* ===== H-179 BEGIN (persona picture under the /kimler-icin/* page hero; separate block, markup only with Seo:ImagesH179 on) ===== */
/* One AI-generated, neutral illustration (not a testimonial: no name, no quote). Everything is scoped under .prf-persona-sec so no other page or image rule is touched.
   The picture has soft white edges, so it sits on a white card; the tag above it reuses the round #eaf2fb icon look of the other Sala cards. */
html body .prf-persona-sec { padding-top: 28px; padding-bottom: 8px; }
html body .prf-persona-sec .prf-persona { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 auto; max-width: 480px; padding: 20px 20px 16px; box-sizing: border-box; border: 1px solid #d5deea; border-radius: 12px; background: #fff; }
html body .prf-persona-sec .prf-persona--wide { max-width: 760px; }
html body .prf-persona-sec .prf-persona-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: #0f2a4a; }
html body .prf-persona-sec .prf-persona-tag > i { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 50%; background: #eaf2fb; color: #0b4f9c; font-size: 16px; line-height: 1; }
html body .prf-persona-sec .prf-persona picture { display: block; width: 100%; }
html body .prf-persona-sec .prf-persona img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; border: 0; border-radius: 8px; background: #fff; }
html body .prf-persona-sec .prf-persona figcaption { margin: 0; font-size: 14px; line-height: 1.5; color: #4b5563; text-align: center; }
@media (max-width: 480px) {
    html body .prf-persona-sec .prf-persona { padding: 16px 14px 14px; }
}
/* ===== H-179 END ===== */

/* ===== H-176 BEGIN (converted mobile / app screenshots behind Seo:ImagesH176; separate block, safe to merge next to other edits) ===== */
/* The new <picture> (AVIF + WebP, width/height attributes) keeps the layout classes of the old img. The picture itself adds no box; the img keeps the width / max-width of the class it carries and its ratio (height auto). */
html body picture.x176-pic { display: contents; }
html body picture.x176-pic > img { height: auto; }
/* Home "download the app" band: the new phone-in-hand picture is portrait (the old one was square), so it is set by height (400 px, a little taller than the 340 px band, bottom aligned) instead of by the old square width. */
html body .section-banner.layout-04 .banner-right picture.x176-pic > img { width: auto; max-width: none; height: 400px; }
/* The phone screens are transparent PNG-derived images: the step image of /telefon-crm-entegrasyonu casts a shadow that follows the phone, not a square box. */
html body .pcrm-step-img picture.x176-pic > img { box-shadow: none; border-radius: 0; filter: drop-shadow(0 18px 30px rgba(2,32,65,.20)); }
/* /ozellikler/mobil-uygulama figure: one centred device image, caption underneath (the 1600 px source is shown at most 960 px wide). */
html body .x176-figure { margin: 0 auto; text-align: center; }
html body .x176-figure picture.x176-pic > img { display: block; margin: 0 auto; width: auto; max-width: min(100%, 960px); border-radius: 12px; }
html body .x176-figure figcaption { margin-top: 10px; font-size: .95rem; color: #51657d; }
/* ===== H-176 END ===== */

/* ===== H-178 BEGIN (feature page images behind Seo:ImagesH178; separate block, safe to merge next to other edits) ===== */
/* One illustration under the lead of a /ozellikler page: a centred 16:9 card, rounded like the Sala cards, caption underneath. The picture adds no box. */
html body picture.x178-pic { display: contents; }
html body .x178-figure { margin: 0 auto; max-width: 960px; text-align: center; }
html body .x178-figure picture.x178-pic > img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid #e3ebf4; box-shadow: 0 8px 24px rgba(2,32,65,.08); }
html body .x178-figure figcaption { margin-top: 10px; font-size: .95rem; color: #51657d; }
/* ===== H-178 END ===== */