/* ==========================================================================
   T-319: yan görsel bileşeni (SSS bölümü + sipariş takip sayfası) ve SSS akordeonu.
   Kullanım: <div class="mos-side [mos-side--has mos-side--left|right mos-side--mobile mos-side--narrow mos-side--center]">
               <figure class="mos-side__media">…</figure>  <div class="mos-side__main">…</div></div>
   Sınıfları üreten kural: Service/SideMedia/SideMediaRules.WrapperClass. Yalnız tema tokenları.
   Görsel DOM'da içerikten ÖNCE gelir: mobilde (≤767px) varsayılan gizli, --mobile ise sorulardan önce ince 16:9 şerit;
   ≥768px'te iki sütun (görsel ~%40, içerik ~%60), --right ise görsel sağda. Yüksek içerikte görsel yapışkan (sticky) kalır.
   ========================================================================== */

/* Görsel yokken: tek sütun, makul genişlikte ortalı (boydan boya uzamaz, dar da kalmaz) */
.mos-side { width: 100%; max-width: 880px; margin-inline: auto; min-width: 0; }
.mos-side--narrow { max-width: 560px; }
.mos-side__main { min-width: 0; }
.mos-side__media { display: none; margin: 0; min-width: 0; }
.mos-side__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: var(--radius-lg); background: var(--color-secondary); border: 1px solid var(--color-border); }

/* Görsel varken */
.mos-side--has { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: stretch; }
.mos-side--has.mos-side--narrow { max-width: 1040px; }
.mos-side--center { align-items: center; }

/* Mobil: yalnız "mobilde göster" açıkken, sorulardan önce ince 16:9 şerit */
.mos-side--mobile .mos-side__media { display: block; aspect-ratio: 16 / 9; }
.mos-side--mobile .mos-side__img { aspect-ratio: 16 / 9; }

@media (min-width: 768px) {
  .mos-side--has { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-8, 32px); }
  .mos-side--has.mos-side--right { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .mos-side--has .mos-side__media { display: block; aspect-ratio: auto; min-height: 420px; }
  .mos-side--right .mos-side__media { order: 2; }
  /* Görsel içerikle aynı yüksekliğe uzar (kısa içerikte devasa görsel/boş sütun olmaz; en az 420px). height:0 + min-height:min(100%, ekran) görselin
     kendi boyutunun satır yüksekliğini şişirmesini önler; içerik ekrandan uzunsa görsel ekran yüksekliğinde kalır ve yapışkan (sticky) olarak eşlik eder. */
  .mos-side--has .mos-side__img { position: sticky; top: calc(var(--header-h-condensed, 56px) + var(--space-4)); height: 0; aspect-ratio: auto;
    min-height: min(100%, calc(100vh - var(--header-h-condensed, 56px) - 2 * var(--space-4))); min-height: min(100%, calc(100dvh - var(--header-h-condensed, 56px) - 2 * var(--space-4))); }
  /* Ortalanan düzen (sipariş takip formu): görsel kendi oranında (4:5), yapışkan değil */
  .mos-side--center .mos-side__media { min-height: 0; }
  .mos-side--center .mos-side__img { position: static; height: auto; min-height: 0; aspect-ratio: 4 / 5; }
}

/* ---------- SSS akordeonu (home.css'ten taşındı; ana sayfa bloğu, Hakkımızda ve eski bileşen ortak) ---------- */
.hs__faq { display: flex; flex-direction: column; gap: var(--space-2); }
.hs__qa { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.hs__qa summary { cursor: pointer; padding: var(--space-4); min-height: 44px; font-weight: 600; display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.hs__qa summary::-webkit-details-marker { display: none; }
.hs__qa summary i { color: var(--color-primary-text); }
.hs__qa summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hs__qa[open] summary { background: var(--color-primary-tint); color: var(--color-primary-text); }
.hs__qa div { padding: var(--space-4); color: var(--color-muted); }