/* ==========================================================================
   MS · ANA SAYFA MANŞET SEKMELERİ — UYG-MSB · 20.10.2026 Sunai · maket B "Sessiz vitrin" (patron 20.10 ~01:0x seçti)
   Şablon includes/manset_sekme_gorunum.php · davranış js/manset-sekme.js · tokenlar css/anasayfa-v3.css :root (bu dosya yeni renk getirmez).
   İMZA: yuvarlak "tabak" küçük görseller; koyu halkanın üstünde turuncu SAYAÇ HALKASI ürün süresince dolar; sekme bitince sıradaki
   sekmeye geçilir (patron 20.10 ~01:1x). Halka yalnız GÖSTERGE; geçişi JS zamanlayıcısı yapar → reduced-motion'daki küresel
   "animation-duration: 0ms !important" kuralı döngüyü hızlandıramaz.
   CLS 0: sekme satırı 44 px + 1 px çizgi sabit · bütün panellerde kart yüksekliği = tabak (ad tek satır) · küçük görsel satırı 44 px ·
   dönüş yalnız transform/opacity/stroke-dashoffset.
   Renk/kontrast (beyaz zeminde): mürekkep #0f172a 17,8:1 · etiket #475569 7,2:1 · kazanç #15803d 5,0:1 (rozet zemininde 4,8:1) ·
   turuncu-koyu #c2410c 5,2:1 · sekme etiket #475569 7,2:1 / etkin #0f172a 17,8:1 · raf çıtası #ea580c 3,6:1 (≥3:1 bileşen) · bileşen kenarı #7c8ba1 3,46:1.
   UYG-MSB2 · 20.10.2026 Sunai (patron ~13:4x/~13:5x): sekme şeridi maket A · tabaktaki araba yer tutucusu yok · "Tüm …" bağlantısı yok ·
   görünür başlık yok (h2 .sr). Sekme saati kaldırıldı; döngünün göstergesi küçük görsellerdeki sayaç halkası.
   UYG-1190 · 25.10.2026 Zekai: sekme adları kısaldı (Kahvaltı · Mutfak · Manav · Temizlik · Kasap, 31 karakter) → 440 px masaüstü sütununa
   sığar (UYG-1186: eski adlarda 5. sekme "Et &" kesiliyordu); şerit kuralı değişmedi. .ms-en-g + .ms-haric eklendi.
   ========================================================================== */
.ms { position: relative; margin-top: 36px; --donus: 2000ms; --kayis: cubic-bezier(.2, .8, .2, 1); }

/* ---- sekme satırı · UYG-MSB2: maket A "Raf etiketi" (_planlar/manset_maket/A.html) — yazı sekmeler, ince taban çizgisi,
   etkin sekmenin altında markanın turuncu raf çıtası. Mobilde taşan şerit yana kayar, kenarlarda solma (JS .sol/.sag). ---- */
.ms-sekme-kap {
  position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  margin-inline: calc(var(--kenar) * -1); padding-inline: var(--kenar);
}
.ms-sekme-kap::-webkit-scrollbar { display: none; }
.ms-sekme-kap.sag { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.ms-sekme-kap.sol { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.ms-sekme-kap.sol.sag { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.ms-sekmeler { position: relative; display: flex; gap: 2px; width: max-content; border-bottom: 1px solid var(--cizgi); }
.ms-sekme {
  --pl: 12px; --pr: 12px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 44px; margin: 0;
  padding: 0 var(--pr) 0 var(--pl); border: 0; border-radius: 0; background: none; color: var(--etiket);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color var(--sure) ease;
}
.ms-sekme:first-child { --pl: 2px; }
.ms-sekme:hover { color: var(--murekkep); }
.ms-sekme[aria-selected="true"] { color: var(--murekkep); font-weight: 600; }
/* raf çıtası: yalnız yazının genişliğinde (dolgular hariç), taban çizgisinin üstüne oturur */
.ms-sekme[aria-selected="true"]::after {
  content: ""; position: absolute; left: var(--pl); right: var(--pr); bottom: -1px; height: 3px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, #fb923c, var(--turuncu-orta)); box-shadow: 0 1px 0 rgb(154 52 18 / .3);
}
/* odak halkası içeride: şerit overflow:hidden olduğu için dışa taşan halka kırpılırdı */
.ms-sekme:focus-visible { outline: 2px solid var(--turuncu-orta); outline-offset: -2px; border-radius: 6px; }
/* kalın/ince geçişte genişlik oynamasın: görünmez 600 kopya yer tutar */
.ms-sekme-m { display: inline-flex; flex-direction: column; align-items: center; }
.ms-sekme-m::after { content: attr(data-t); height: 0; visibility: hidden; overflow: hidden; font-weight: 600; user-select: none; pointer-events: none; }

/* ---- paneller ---- */
.ms-paneller { margin-top: 12px; }
.ms-panel[hidden] { display: none; }
.ms-panel-bas { display: none; }
.ms-panel.ms-giris { animation: ms-gir 220ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes ms-gir { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }

/* pist: kartlar yan yana (scroll-snap) → parmakla kaydırma JS'siz. Odak halkası kırpılmasın diye 12 px dolgu, eksi kenarla yerleşim aynı */
.ms-pist {
  display: flex; gap: 24px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; padding: 6px 12px 8px; margin: -6px -12px -8px; scroll-padding-inline: 12px; outline: none;
}
.ms-pist::-webkit-scrollbar { display: none; }
.ms-slayt { flex: 0 0 100%; min-width: 0; display: flex; scroll-snap-align: center; scroll-snap-stop: always; }

/* ---- kart: çerçevesiz; derinliği yalnız tabak verir ---- */
.ms-kart {
  position: relative; width: 100%; display: grid; grid-template-columns: var(--g) minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 20px; row-gap: 12px; align-items: center; padding: 8px 0 0; --g: 132px;
}
.ms-ad { grid-column: 1 / -1; margin: 0; min-width: 0; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-link { color: var(--murekkep); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ms-link::after { content: ""; position: absolute; inset: -4px -8px; z-index: 2; border-radius: 24px; }
.ms-link:focus-visible { outline: none; }
.ms-link:focus-visible::after { outline: 2px solid var(--turuncu-orta); outline-offset: 2px; }
.ms-kart:hover .ms-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ms-kart:active { transform: scale(.985); transition: transform 120ms ease; }
.ms-gorsel {
  position: relative; width: var(--g); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #fff 0, var(--gorsel-zemin) 62%, #eef2f7 100%); box-shadow: inset 0 0 0 1px rgb(15 23 42 / .06);
}
.ms-gorsel img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; mix-blend-mode: multiply; }
.ms-gorsel img[hidden], .ms-kucuk img[hidden] { display: none; }   /* yüklenemeyen görsel: boş tabak (JS) */
.ms-govde { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.ms-en { display: flex; align-items: center; gap: 10px; height: 34px; min-width: 0; margin: 0; overflow: hidden; }
.ms-logo { display: inline-flex; align-items: center; height: 100%; min-width: 0; }
.ms-logo .mlogo { display: block; width: auto; height: 24px; max-width: 112px; object-fit: contain; object-position: left center; }
.ms-en--cok .ms-logo .mlogo { height: 20px; max-width: 72px; }
.ms-logo .mlogo-ad { font-size: 15px; font-weight: 700; color: var(--murekkep); white-space: nowrap; }
.ms-arti { font-size: 13px; font-weight: 600; color: var(--etiket); white-space: nowrap; }
/* UYG-1190: en ucuz satırının görsel kısmı (metin .sr cümlede, UYG-1185) · "A101 hariç" satırı (yalnız A101 kıyastan çıkınca) */
.ms-en-g { display: flex; align-items: center; gap: 10px; height: 100%; min-width: 0; }
.ms-haric { margin: 0; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--etiket); white-space: nowrap; }
.ms .ms-fiyat { display: block; font-size: 32px; line-height: 1; white-space: nowrap; }
.ms .ms-fiyat .fiyat-g { font-weight: 800; letter-spacing: -.03em; }
.ms .ms-fiyat .fiyat-k, .ms .ms-fiyat .fiyat-tl { font-size: .52em; margin-top: .16em; font-weight: 700; letter-spacing: -.01em; }
.ms-rozet-yer { min-height: 24px; display: flex; align-items: center; margin: 0; }
.ms-rozet {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; background: var(--kazanc-zemin);
  color: var(--kazanc); font-size: 13px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ms-say { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--etiket); white-space: nowrap; }
.ms-say-ik { width: 14px; height: 14px; fill: currentColor; flex: none; }

/* ---- alt satır: tabak küçük görseller + sayaç halkası + duraklat ---- */
.ms-alt { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.ms-kucukler { display: flex; gap: 8px; min-width: 0; }
.ms-kucuk {
  position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 120ms ease;
}
.ms-kucuk img {
  position: absolute; inset: 5px; width: 34px; height: 34px; padding: 3px; border-radius: 50%; background: var(--gorsel-zemin);
  object-fit: contain; opacity: .72; transition: opacity var(--sure) ease;
}
.ms-kucuk[aria-current="true"] img, .ms-kucuk:hover img { opacity: 1; }
.ms-kucuk:active { transform: scale(.97); }
.ms-kucuk:focus-visible { outline: 2px solid var(--turuncu-orta); outline-offset: 2px; }
.ms-halka { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.ms-halka circle { fill: none; stroke-width: 2; }
.ms-halka-iz { stroke: var(--cizgi); transition: stroke var(--sure) ease; }
.ms-kucuk[aria-current="true"] .ms-halka-iz { stroke: var(--murekkep); }
.ms-halka-dol { stroke: var(--turuncu-orta); stroke-dasharray: 100 100; stroke-dashoffset: 100; stroke-linecap: round; visibility: hidden; }
.ms-kucuk.ms-oynuyor .ms-halka-dol { visibility: visible; animation: ms-halka var(--donus) linear forwards; animation-play-state: paused; }
.ms--akar .ms-kucuk.ms-oynuyor .ms-halka-dol { animation-play-state: running; }
@keyframes ms-halka { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.ms-dur {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: auto; padding: 0;
  border: 1px solid var(--cizgi-guclu); border-radius: 50%; background: var(--fis); color: var(--etiket); cursor: pointer; visibility: hidden;
  transition: background var(--sure) ease, color var(--sure) ease, border-color var(--sure) ease;
}
.ms--hazir .ms-dur { visibility: visible; }
.ms-dur:hover { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }
.ms-dur:focus-visible { outline: 2px solid var(--turuncu-orta); outline-offset: 2px; }
.ms-dur-ik { width: 14px; height: 14px; fill: currentColor; }
.ms-dur-ik--oynat, .ms-dur[data-durum="durdu"] .ms-dur-ik--dur { display: none; }
.ms-dur[data-durum="durdu"] .ms-dur-ik--oynat { display: block; }


/* ---- masaüstü: hero sağ sütunu (eski .kahraman-etiket yeri) ---- */
@media (min-width: 640px) { .ms { max-width: 460px; } }
@media (min-width: 1024px) {
  .ms { grid-column: 2; grid-row: 1; justify-self: end; width: 100%; max-width: 440px; margin-top: 0; }
  .ms-sekme-kap { margin-inline: 0; padding-inline: 0; }
  .ms-sekmeler { gap: 0; }
  .ms-sekme { --pl: 7px; --pr: 7px; }
  .ms-sekme:first-child { --pl: 0px; }
  .ms-kart { --g: 168px; column-gap: 28px; row-gap: 16px; }
  .ms-ad { font-size: 20px; }
  .ms-en { height: 40px; }
  .ms-logo .mlogo { height: 30px; max-width: 140px; }
  .ms-en--cok .ms-logo .mlogo { height: 24px; max-width: 88px; }
  .ms .ms-fiyat { font-size: 44.8px; }   /* lira 56 px (.fiyat-l 1.25em) */
}

/* ---- hareket azaltma: döngü JS'te başlamaz; göstergeler gizli, geçişler anlık, durum renkle/ağırlıkla görünür kalır ---- */
@media (prefers-reduced-motion: reduce) {
  .ms-pist { scroll-behavior: auto; }
  .ms-panel.ms-giris { animation: none; }
  .ms-halka-dol { visibility: hidden !important; }
  .ms-sekme, .ms-kucuk, .ms-kucuk img, .ms-halka-iz, .ms-dur { transition: none; }
  .ms-kucuk:active, .ms-kart:active { transform: none; }
}

/* ---- JS yok: sekme satırı ve kontroller gizli, bütün paneller alt alta, her biri kendi başlığıyla (içerik kaybolmaz) ---- */
@media (scripting: none) {
  .ms-sekme-kap, .ms-alt { display: none; }
  .ms-panel[hidden] { display: block !important; }   /* anasayfa-v3.css: [hidden] { display: none !important } */
  .ms-panel + .ms-panel { margin-top: 20px; }
  .ms-panel-bas { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--etiket); }
}