/*
 * Ürün açıklaması sekmeleri — canlı miniso.com.tr'den ölçüldü.
 * Kaynak: cikti/miniso.com.tr/brief/PRODUCT-02-05758e45.md
 *
 *                    w360                w1440
 *   zemin (s245/1215) #F9F9F9, py 4      #F9F9F9, py 24
 *   şerit (s247/1217) 44 yüksek          40 yüksek, px 80
 *   sekme (s249/1219) 12/16, p 4px 5     14/20, p 8px 24
 *   içerik(s253/1221) mt 8, px 16        mt 8, px 80
 *
 * Sekme şeridi alt kenarlığı 2px; aktif sekme kendi 2px'ini şeridin üstüne
 * bindiriyor (canlıda `mb-[-2px]`, ölçümde margin-bottom -2).
 */

.cc_jcmnugos_YXPXxGHh58 .ms-us {
  width: 100%;
  margin-top: var(--ms-us-must, 0px);
}

.cc_jcmnugos_YXPXxGHh58 .ms-us-zemin {
  width: 100%;
  padding: 4px 0;
  background-color: rgb(249, 249, 249);
}

.cc_jcmnugos_YXPXxGHh58 .ms-us-govde {
  position: relative;
  width: 100%;
}

.cc_jcmnugos_YXPXxGHh58 .ms-us-serit {
  display: flex;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  border-bottom: 2px solid var(--ms-kenarlik-kucuk, rgb(221, 221, 221));
}

.cc_jcmnugos_YXPXxGHh58 .ms-us-serit-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-bottom: 2px;
  overflow: hidden;
}

/* `w-min` — sekme genişliği min-content (ölçüldü: w360'ta 77, auto ile
   92.6 çıkıyordu). */
.cc_jcmnugos_YXPXxGHh58 .ms-us-sekme {
  display: block;
  width: min-content;
  margin-bottom: -2px;
  padding: 4px 5px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ms-metin-soluk-2);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-transform: uppercase;
  cursor: pointer;
}

.cc_jcmnugos_YXPXxGHh58 .ms-us-sekme--aktif {
  border-bottom-color: rgb(51, 51, 51);
  color: rgb(51, 51, 51);
  font-weight: 500;
}

.cc_jcmnugos_YXPXxGHh58 .ms-us-icerik {
  width: 100%;
  max-width: 1480px;
  margin: 8px auto 0;
  padding: 0 16px;
}

.cc_jcmnugos_YXPXxGHh58 .ms-us-baslik {
  margin: 16px 0 8px;
  color: rgb(17, 17, 17);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.cc_jcmnugos_YXPXxGHh58 .ms-us-metin {
  color: var(--ms-metin-2);
  font-size: 16px;
  line-height: 28px;
}

/* Ölçülen madde listesi: nokta ayrı bir <span>, işaretçi yok */
.cc_jcmnugos_YXPXxGHh58 .ms-us-metin ul {
  margin: 0;
  padding-left: 0;
  color: rgb(51, 51, 51);
  line-height: 28px;
  list-style: none;
}

.cc_jcmnugos_YXPXxGHh58 .ms-us-metin li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0;
  padding-left: 6px;
  line-height: 25.6px;
}

@media (min-width: 1024px) {
  .cc_jcmnugos_YXPXxGHh58 .ms-us {
    margin-top: var(--ms-us-ust, 0px);
  }

  .cc_jcmnugos_YXPXxGHh58 .ms-us-zemin {
    padding: 24px 0;
  }

  .cc_jcmnugos_YXPXxGHh58 .ms-us-serit {
    padding: 0 80px;
  }

  /* nowrap YALNIZCA lg'de: mobilde sekme metni iki satıra kırılıyor ve
     düğme 26 değil 42 yüksek oluyor (ölçüldü, s249). */
  .cc_jcmnugos_YXPXxGHh58 .ms-us-sekme {
    padding: 8px 24px;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    width: auto;
  }

  .cc_jcmnugos_YXPXxGHh58 .ms-us-icerik {
    padding: 0 80px;
  }
}

/* ==========================================================================
   MOBİL: SEKME DEĞİL AKORDEON
   Ölçümler: `data/mobil-urun-detay.md` (mobil.pdf s25/s26, blok G).

   Tasarımda dört satır tek bir beyaz kartın içinde, her satırda ikon +
   başlık + aşağı ok; hepsi kapalı başlıyor.

   | kalem        | ölçülen                   | uygulanan |
   |--------------|---------------------------|-----------|
   | kart         | 343.88 × 56.38 (4 satır)  | kenar 12, köşe 8, 1px #EDEDED |
   | satır        | ~13.6                     | **48** — liste satırı kuralı (data/mobil-standart.md) |
   | ikon         | 6.48 × 6.96 (≈ punto)     | **16** (bir tur 20'ydi) |
   | başlık       | 6.8 (×2 = 13.6)           | 14 / 20 |
   | ok           | 5.52 × 3.60               | **12** (bir tur 16'ydı) |

   İKON ORANI — marka maddesi GÖRSEL 7 (2026-08-20), "tasarıma göre aynı
   değil". Tasarımda ikon ve ok başlık PUNTOSU kadar: ikon/punto 1.02,
   ok/punto 0.81. Bizde 20/14 = 1.43 ve 16/14 = 1.14 idi — yani ikonlar
   yazıya göre yarı yarıya büyüktü ve satır "ikon listesi" gibi duruyordu.
   16/12 ile oranlar 1.14 ve 0.86'ya iniyor. Tam 14/12 yazılmadı: 14'lük
   çizgisel SVG 1x ekranda bulanıklaşıyor, 16 ızgaraya da oturuyor.

   BÜYÜK HARF — başlıklar mağazanın öznitelik adlarından geliyor ve
   karışık geliyordu ("Ürün Açıklaması" ile "SİPARİŞ & TESLİMAT" yan yana).
   Tasarımda dördü de cümle düzeninde. Kaynak metin `index.tsx`'te Türkçe
   yerele göre cümle düzenine çevriliyor; masaüstü canlıdaki büyük harfi
   kaybetmesin diye büyütme CSS'te (aşağıda) — düğme yazılarında da aynı
   kalıp kullanıldı (data/mobil-urun-detay.md).

   Kap ve şerit `display: contents`: butonlar ile içerik AYNI esnek akışa
   iniyor, `order` ile içerik açık satırın hemen altına oturuyor. Böylece
   DOM'a ikinci bir ağaç eklemeden akordeon çıkıyor — masaüstü sekme
   şeridi olduğu gibi duruyor.
   ========================================================================== */

@media (max-width: 1023.98px) {
  .cc_jcmnugos_YXPXxGHh58 .ms-us-zemin {
    padding: 0 12px;
    background: none;
  }

  .cc_jcmnugos_YXPXxGHh58 .ms-us-govde {
    display: flex;
    flex-direction: column;
    border: 1px solid #ededed;
    border-radius: 8px;
    background-color: var(--ms-beyaz, #fff);
    overflow: hidden;
  }

  .cc_jcmnugos_YXPXxGHh58 .ms-us-serit, .cc_jcmnugos_YXPXxGHh58 .ms-us-serit-ic {
    display: contents;
  }

  /* Masaüstünde sekme, şeridin 2px alt kenarlığına binsin diye
     `margin-bottom: -2px` taşıyor; akordeonda bu satırları üst üste
     bindiriyordu (ölçüldü: her satır komşusunun 2px içine giriyordu). */
  .cc_jcmnugos_YXPXxGHh58 .ms-us-sekme {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    background: none;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    /* Tasarımda dört başlık da cümle düzeninde; kaynak metin öyle geliyor. */
    text-transform: none;
    cursor: pointer;
  }

  /* Satır ayracı: son satırda çizilmiyor, içerik açıkken de kalıyor. */
  .cc_jcmnugos_YXPXxGHh58 .ms-us-sekme + .ms-us-sekme, .cc_jcmnugos_YXPXxGHh58 .ms-us-icerik + .ms-us-sekme {
    border-top: 1px solid #ededed;
  }

  .cc_jcmnugos_YXPXxGHh58 .ms-us-sekme-ikon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #202532;
  }

  .cc_jcmnugos_YXPXxGHh58 .ms-us-sekme-ikon svg {
    width: 100%;
    height: 100%;
  }

  .cc_jcmnugos_YXPXxGHh58 .ms-us-sekme-ad {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Ölçü SVG'nin kendisinde: kap `<span>` bir dokunma hedefi değil, çizim.
     Denetçi sınıf adına değil, `svg` kuralına bakıyor. */
  .cc_jcmnugos_YXPXxGHh58 .ms-us-sekme-ok {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #5d5e5c;
    transition: transform 0.15s ease;
  }

  .cc_jcmnugos_YXPXxGHh58 .ms-us-sekme-ok svg {
    width: 12px;
    height: 12px;
  }

  .cc_jcmnugos_YXPXxGHh58 .ms-us-sekme--acik .ms-us-sekme-ok {
    transform: rotate(180deg);
  }

  /* Masaüstündeki "aktif sekme" vurgusu akordeonda anlamsız. */
  .cc_jcmnugos_YXPXxGHh58 .ms-us-sekme--aktif {
    border-bottom: 0;
  }

  .cc_jcmnugos_YXPXxGHh58 .ms-us-icerik {
    margin: 0;
    padding: 0 12px 12px;
  }

  .cc_jcmnugos_YXPXxGHh58 .ms-us-icerik--kapali {
    display: none;
  }
}

/* Akordeonun getirdiği yeni öğeler masaüstünde çizilmiyor — orada sekme
   yazısı düz metin, ikon ve ok yok. */
@media (min-width: 1024px) {
  .cc_jcmnugos_YXPXxGHh58 .ms-us-sekme-ikon, .cc_jcmnugos_YXPXxGHh58 .ms-us-sekme-ok {
    display: none;
  }

  /* Canlı masaüstünde sekmeler BÜYÜK HARF ("ÜRÜN AÇIKLAMASI, SİPARİŞ &
     TESLİMAT, …"). Kaynak metin cümle düzeninde tutuluyor çünkü CSS büyük
     harfi küçültemiyor, tersini yapabiliyor — mobil akordeon tasarımdaki
     cümle düzenini alıyor, masaüstü canlıdaki büyük harfi. */
  .cc_jcmnugos_YXPXxGHh58 .ms-us-sekme {
    text-transform: uppercase;
  }
}