/* Ana sayfa alt bölümleri (2026-10-22, Burak: Masaustu_Alt_Bolumler_Claude_Master_Promptu; akşam: "Z fold ve mobilede uyarla" ile tüm genişliklere açıldı). Yalnız index.html'e bağlanır.
   Eski bölümler her genişlikte gizli (DOM'da durur). Renkler: zemin #fff, foto #f7f7f7, metin #242424/#666, düğme #333/#454545, ayırıcı #e8e8e8, altbilgi #1b1d20. */
.ms, .ms-alt { display: block; }

/* 2026-10-22 (akşam), Burak: "Z fold ve mobilede uyarla" — yeni bölümler TÜM genişliklerde; aşağıdaki değerler masaüstü, <=1023 px için sondaki bloklar ezer */
@media all {
  /* eski bölümler (DOM'da durur) her genişlikte gizli: çift görünüm yok, gizli içerik odak almaz */
  body.ms-ana #yeni-gelenler, body.ms-ana #urunler, body.ms-ana main > .galeri, body.ms-ana #sss, body.ms-ana > footer.alt { display: none; }
  body.ms-ana, body.ms-ana main { background: #fff; color: #242424; }
  .ms { display: block; padding-bottom: 76px; background: #fff; color: #242424; }
  .ms-alt { display: block; }

  .ms-kap { width: min(1280px, 100% - 64px); margin-inline: auto; }
  .ms-bolum { margin: 0; padding: 0; background: #fff; }
  .ms-bolum + .ms-bolum { margin-top: 76px; }
  .ms-urunler { margin-top: 28px; }
  .ms h2 { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: 0; color: #242424; }
  .ms h3 { letter-spacing: 0; }
  .ms-gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ms a:focus-visible, .ms button:focus-visible, .ms-alt a:focus-visible { outline: 2px solid #242424; outline-offset: 3px; border-radius: 3px; }
  .ms-alt a:focus-visible { outline-color: #fff; }

  /* ---- başlık + sekmeler */
  .ms-bas { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 40px; margin-bottom: 26px; scroll-margin-top: 4px; }   /* html{scroll-padding-top} zaten başlık yüksekliği+14 px; +4 = başlığın ~18 px altı */
  .ms-sekmeler { display: flex; gap: 28px; }
  .ms-sekme { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 0 5px; font: inherit; font-size: 16px; line-height: 1.4; color: #666; cursor: pointer; }
  .ms-sekme:hover { color: #242424; }
  .ms-sekme[aria-selected="true"] { color: #242424; font-weight: 600; border-bottom-color: #242424; }
  .ms-hepsi, .ms-baglanti { font-size: 16px; font-weight: 600; color: #242424; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .ms-hepsi { margin-left: auto; }
  .ms-hepsi:hover, .ms-baglanti:hover { text-decoration-thickness: 2px; }

  /* iki panel aynı hücrede üst üste: bölüm yüksekliği sekme değişince zıplamaz; görünmeyen panel visibility:hidden (odak almaz, erişilebilirlik ağacında yok) */
  .ms-paneller { display: grid; }
  .ms-panel { grid-area: 1 / 1; visibility: hidden; }
  .ms-panel.ms-aktif { visibility: visible; }

  /* ---- ürün ızgarası + kart (yalnız ana sayfa masaüstü) */
  .ms-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
  .ms-kart { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; background: #fff; }
  .ms-foto { display: block; aspect-ratio: 1 / 1; background: #f7f7f7; border-radius: 6px; overflow: hidden; }
  .ms-foto img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }   /* beyaz zeminli fotoğraflar #f7f7f7 alanda bant oluşturmasın; ürün şekli/oranı değişmez */
  .ms-metin { flex: 1 1 auto; padding-top: 14px; }
  .ms-marka { margin: 0 0 4px; font-size: 12.5px; line-height: 1.4; color: #666; }
  .ms-ad { margin: 0; font-size: 16.5px; line-height: 1.35; font-weight: 600; min-height: 2.7em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .ms-ad a { color: #242424; text-decoration: none; }
  .ms-ad a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .ms-ozellik { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: #666; min-height: 21px; }
  .ms-fiyat { margin: 10px 0 0; font-size: 14px; line-height: 1.3; color: #666; }
  .ms-fiyat strong { font-size: 22px; font-weight: 600; color: #242424; }
  .ms-birim { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: #666; }
  .ms-dugme { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 44px; margin: 14px 0 0; padding: 0 16px; background: #333; color: #fff; border: 1px solid #333;
    border-radius: 6px; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
  .ms-dugme:hover { background: #454545; border-color: #454545; }
  .ms-dugme-ince { background: #fff; color: #333; }
  .ms-dugme-ince:hover { background: #f4f4f4; color: #242424; border-color: #333; }
  .ms-tukendi { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; margin-top: 14px; border: 1px solid #e8e8e8; border-radius: 6px; font-size: 15px; color: #666; }

  /* ---- hızlı keşfet */
  .ms-hizli { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-top: 44px; padding-top: 24px; border-top: 1px solid #e8e8e8; }
  .ms-hizli-ad { font-size: 14px; font-weight: 600; color: #666; }
  .ms-hizli ul { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
  .ms-hizli a { font-size: 16px; color: #242424; text-decoration: none; }
  .ms-hizli a:hover { text-decoration: underline; text-underline-offset: 4px; }

  /* ---- seri / kullanım sahnesi */
  .ms-seri-ust { display: grid; grid-template-columns: 55fr 45fr; gap: 48px; align-items: center; margin-bottom: 40px; }
  .ms-seri-foto { aspect-ratio: 3 / 2; background: #f7f7f7; border-radius: 6px; overflow: hidden; }
  .ms-seri-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ms-seri-metin { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-right: 24px; }
  .ms-seri-metin p { margin: 0; max-width: 42ch; font-size: 16px; line-height: 1.5; color: #666; }

  /* ---- iki marka vitrini */
  .ms-marka-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .ms-marka-kart { min-width: 0; }
  .ms-marka-foto-bag { display: block; }
  .ms-marka-foto { aspect-ratio: 16 / 9; background: #f7f7f7; border-radius: 6px; overflow: hidden; }
  .ms-marka-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ms-marka-kart h2 { margin: 18px 0 0; font-size: 24px; }
  .ms-marka-kart p { margin: 6px 0 14px; font-size: 16px; line-height: 1.5; color: #666; }

  /* ---- hizmet satırı */
  .ms-hizmet-liste { list-style: none; margin: 0; padding: 32px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 48px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }
  .ms-hizmet-liste h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; font-weight: 600; color: #242424; }
  .ms-hizmet-liste p { margin: 0; font-size: 15px; line-height: 1.5; color: #666; }

  /* ---- kısa SSS */
  .ms-sss-liste { margin-top: 24px; border-top: 1px solid #e8e8e8; }
  .ms-sss-oge { border-bottom: 1px solid #e8e8e8; }
  .ms-sss-oge h3 { margin: 0; font-size: inherit; font-weight: inherit; }
  .ms-sss-dugme { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; width: 100%; min-height: 60px; padding: 0; background: none; border: 0;
    font: inherit; font-size: 17px; font-weight: 500; line-height: 1.4; color: #242424; text-align: left; cursor: pointer; }
  .ms-sss-dugme svg { flex: none; width: 20px; height: 20px; color: #666; }
  .ms-sss-dugme[aria-expanded="true"] svg { transform: rotate(180deg); }
  .ms-sss-cevap { padding: 0 0 20px; }
  .ms-sss-cevap p { margin: 0; max-width: 76ch; font-size: 16px; line-height: 1.6; color: #666; }
  .ms-sss-cevap a { color: #242424; text-decoration: underline; text-underline-offset: 3px; }
  .ms-sss-alt { margin: 24px 0 0; }

  /* ---- antrasit altbilgi */
  .ms-alt { background: #1b1d20; color: #f4f4f4; font-size: 15px; line-height: 1.5; }
  .ms-alt-kap { width: min(1280px, 100% - 64px); margin-inline: auto; }
  .ms-alt > .ms-alt-kap { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.25fr; gap: 48px; padding: 56px 0 44px; }
  .ms-alt-logo { margin: 0 0 12px; font-size: 22px; font-weight: 600; color: #f4f4f4; }
  .ms-alt p { margin: 0; color: #d1d5db; }
  .ms-alt h2 { margin: 0 0 16px; font-size: 16px; font-weight: 600; color: #f4f4f4; }
  .ms-alt ul { list-style: none; margin: 0; padding: 0; }
  .ms-alt li { margin: 0 0 10px; color: #d1d5db; }
  .ms-alt a { color: #d1d5db; text-decoration: none; }
  .ms-alt a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .ms-alt-sosyal { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px !important; }
  .ms-alt-sosyal a { display: inline-flex; align-items: center; gap: 8px; }
  .ms-alt-sosyal svg { width: 20px; height: 20px; fill: currentColor; }
  .ms-alt-iletisim { margin-bottom: 18px !important; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .ms-alt-alt { border-top: 1px solid rgba(255, 255, 255, .12); }
  .ms-alt-alt .ms-alt-kap { display: flex; justify-content: flex-start; gap: 32px;   /* sağ alttaki sabit marka imzasıyla yazı çakışmasın */
    padding: 20px 0; font-size: 13.5px; color: #d1d5db; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .ms-seri-ust { gap: 32px; }
  .ms-alt > .ms-alt-kap { gap: 32px; }
  .ms-hizmet-liste { gap: 24px 32px; }
}

/* ---- Z Fold / mobil (AGENTS.md: 344 kapalı Z Fold, 390 telefon, 750-884 açık Z Fold; sıkı ölçüler: yazı ~13 px, düğme ~36 px, dar boşluk) */
@media (max-width: 1023px) {
  .ms { padding-bottom: 40px; }
  .ms-kap, .ms-alt-kap { width: calc(100% - 48px); }
  .ms-bolum + .ms-bolum { margin-top: 44px; }
  .ms-urunler { margin-top: 12px; }
  .ms h2 { font-size: 22px; }
  .ms-bas { gap: 6px 20px; margin-bottom: 16px; }
  .ms-sekme { font-size: 14px; padding: 4px 0 3px; }
  .ms-sekmeler { gap: 18px; }
  .ms-hepsi, .ms-baglanti { font-size: 14px; }
  .ms-izgara { gap: 22px 14px; }
  .ms-metin { padding-top: 9px; }
  .ms-marka { font-size: 11.5px; margin-bottom: 2px; }
  .ms-ad { font-size: 14px; line-height: 1.3; }
  .ms-ozellik { font-size: 12.5px; margin-top: 4px; min-height: 18px; }
  .ms-fiyat { margin-top: 6px; font-size: 12.5px; }
  .ms-fiyat strong { font-size: 18px; }
  .ms-birim { font-size: 11.5px; margin-top: 2px; }
  .ms-dugme, .ms-tukendi { min-height: 38px; margin-top: 10px; font-size: 13.5px; padding: 0 10px; border-radius: 5px; }
  .ms-hizli { margin-top: 28px; padding-top: 16px; gap: 6px 16px; }
  .ms-hizli-ad { font-size: 12.5px; }
  .ms-hizli ul { gap: 6px 16px; }
  .ms-hizli a { font-size: 14px; }
  .ms-seri-ust { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
  .ms-seri-metin { gap: 10px; padding-right: 0; }
  .ms-seri-metin p { font-size: 14px; max-width: none; }
  .ms-marka-izgara { gap: 14px; }
  .ms-marka-kart h2 { font-size: 17px; margin-top: 10px; }
  .ms-marka-kart p { font-size: 13.5px; margin: 4px 0 8px; }
  .ms-hizmet-liste { padding: 18px 0; gap: 14px 24px; }
  .ms-hizmet-liste h3 { font-size: 15px; margin-bottom: 3px; }
  .ms-hizmet-liste p { font-size: 13px; }
  .ms-sss-liste { margin-top: 14px; }
  .ms-sss-dugme { min-height: 48px; font-size: 14.5px; gap: 12px; }
  .ms-sss-dugme svg { width: 18px; height: 18px; }
  .ms-sss-cevap { padding-bottom: 14px; }
  .ms-sss-cevap p { font-size: 13.5px; line-height: 1.5; }
  .ms-sss-alt { margin-top: 14px; }
  .ms-alt { font-size: 13.5px; }
  .ms-alt > .ms-alt-kap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; padding: 28px 0 22px; }
  .ms-alt-marka { grid-column: 1 / -1; }
  .ms-alt-logo { font-size: 19px; margin-bottom: 6px; }
  .ms-alt h2 { font-size: 14px; margin-bottom: 8px; }
  .ms-alt li { margin-bottom: 6px; overflow-wrap: anywhere; }
  .ms-alt-sosyal { margin-top: 10px !important; gap: 6px 16px; }
  .ms-alt-sosyal svg { width: 18px; height: 18px; }
  .ms-alt-iletisim { margin-bottom: 10px !important; padding-bottom: 4px; }
  .ms-alt-alt .ms-alt-kap { flex-wrap: wrap; gap: 4px 20px; padding: 14px 0; font-size: 12px; }
}
@media (max-width: 719px) {
  .ms-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-kap, .ms-alt-kap { width: calc(100% - 32px); }
  .ms-alt-sutun:last-child { grid-column: 1 / -1; }
  .ms-marka-izgara { grid-template-columns: 1fr; gap: 22px; }
  .ms-hizmet-liste { grid-template-columns: 1fr; gap: 10px; }
  .ms-hizmet-liste li { padding-top: 10px; border-top: 1px solid #e8e8e8; }
  .ms-hizmet-liste li:first-child { padding-top: 0; border-top: 0; }
}
@media (max-width: 380px) {
  .ms-kap, .ms-alt-kap { width: calc(100% - 24px); }
  .ms-izgara { gap: 18px 10px; }
  .ms-ad { font-size: 13px; }
  .ms-fiyat strong { font-size: 16.5px; }
  .ms-dugme, .ms-tukendi { font-size: 13px; padding: 0 6px; }
  .ms-sekmeler { gap: 14px; }
  .ms-sekme { font-size: 13px; }
  .ms-alt > .ms-alt-kap { gap: 20px 14px; }
}

/* 2026-10-22 (gece), Burak: GrossenGross_Kategori_Listeleri_ve_2x3_Gorsel_Claude_Promptu — ürün fotoğrafı: kare yerleşim yuvası (yükseklik AYNI, beyaz, görünmez) + içinde
   yatay ortalı 2:3 görünür çerçeve (yuva genişliğinin 2/3'ü). Yalnız masaüstü (>=1024 px); <=1023 px'te kare/gri yuva değişmez. 2:3 kuralı YALNIZ ürün kartları içindir
   (kategori kartları, vitrin, seri sahnesi, marka görselleri oranlarına dokunulmaz). Görsel contain: kırpma/esnetme/filtre yok. KARE/GRİ KUTUYA GERİ DÖNME (tasarım kararı). */
@media (min-width: 1024px) {
  .ms-foto { display: flex; justify-content: center; background: #fff; }
  .ms-foto img { flex: none; width: 66.6667%; height: 100%; object-fit: contain; mix-blend-mode: normal; background: #fff; }
  /* 2026-10-22, Burak: "ürün resimleri ile altındaki yazılar asimetrik duruyo" — ortalı 2:3 fotoğrafın altındaki yazılar da ortalı (masaüstü) */
  .ms-metin { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .ms *, .ms-alt * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }