ماست و پنیر رسماً کالای لوکس شد! + جزئیات

/* ——— ساختار: دسکتاپ ویدیو چپ / متن راست — موبایل ویدیو بالا ——— */
.br-ad-wrap { width: ۱۰۰%; margin: ۱۶px ۰; }
.br-ad-card {
display: flex;
direction: ltr;
flex-direction: row;
align-items: stretch;
gap: ۱۶px;
background: #fff;
border: ۱px solid rgba(۰,۰,۰,.۰۶);
border-radius: ۱۲px;
padding: ۱۶px;
box-shadow: ۰ ۲px ۱۰px rgba(۰,۰,۰,.۰۴);
}
.br-ad-card * { box-sizing: border-box; }

.br-ad-media { flex: ۰ ۰ ۴۲۰px; max-width: ۵۰%; }
.br-video-wrap { position: relative; }
.br-ad-video {
display: block;
width: ۱۰۰%;
height: auto;
border-radius: ۱۰px;
outline: none;
}

/* دکمه پلی جدید */
.br-play-btn {
position: absolute;
inset: ۰;
margin: auto;
width: ۷۰px;
height: ۷۰px;
border: none;
border-radius: ۵۰%;
background: rgba(۰,۰,۰,۰.۶);
color: #fff;
font-size: ۲۸px;
display: grid;
place-items: center;
cursor: pointer;
transition: background .۲s ease;
z-index: ۵;
}
.br-play-btn:hover { background: rgba(۰,۰,۰,۰.۸); }

/* برچسب راهنمای صدا */
.br-audio-hint {
position: absolute;
left: ۱۰px; bottom: ۱۰px;
display: inline-flex;
align-items: center;
gap: ۸px;
padding: ۸px ۱۰px;
border-radius: ۹۹۹px;
background: rgba(۰,۰,۰,.۵۵);
color: #fff;
font-size: ۱۲px;
line-height: ۱;
pointer-events: none;
}
.br-ic-speaker { color: #fff; }

.br-video-wrap:hover .br-audio-hint,
.br-ad-video:focus-visible + .br-audio-hint {
opacity: ۰;
transition: opacity .۲s ease;
}

/* محتوای متنی */
.br-ad-content {
direction: rtl;
flex: ۱ ۱ auto;
display: flex;
flex-direction: column;
justify-content: center;
gap: ۱۲px;
text-align: right;
}
.br-ad-title { margin: ۰; font-size: ۲۰px; line-height: ۱.۵; font-weight: ۷۰۰; color: #۲۲۲; }
.br-ad-text { margin: ۰; font-size: ۱۵px; line-height: ۱.۹; color: #۴۴۴; }
.br-ad-btn {
display: inline-block; align-self: flex-start;
padding: ۱۰px ۱۶px; border-radius: ۸px;
background: #e۶۳۹۴۶; color: #fff !important;
text-decoration: none !important; font-weight: ۷۰۰; font-size: ۱۴px;
transition: transform .۱۵s ease;
}
.br-ad-btn:hover { transform: translateY(-۱px); }

@media (max-width: ۷۶۸px) {
.br-ad-card { flex-direction: column; padding: ۱۲px; }
.br-ad-media { flex: ۰ ۰ auto; max-width: ۱۰۰%; }
.br-ad-title { font-size: ۱۸px; }
.br-ad-text { font-size: ۱۴px; }
.br-ad-btn { width: ۱۰۰%; text-align: center; }
}

.br-ad-card img, .br-ad-card video { max-width: ۱۰۰%; height: auto; }