/*
 * Giriş ve Kayıt sayfası — canlı miniso.com.tr /account/login ve
 * /account/register sayfalarından ölçüldü. Bütün ölçüler: data/hesap.md
 *
 * Kırılım burada 1024 (canlıdaki `lg`). Sol kolon, zemin rengi, sekme
 * boyutu ve form yerleşimi hep bu tek kırılımda değişiyor.
 *
 * `MinisoAuthForm` alt component'inin CSS'i de BU DOSYADA — alt
 * component'lerin kendi styles.css'i yüklenmiyor (bkz. DEVAM.md tuzak 11:
 * kart kuralları başka bölümde scope'lu kaldığı için hiç yüklenmemişti).
 */

/* ---- kabuk ------------------------------------------------------------ */

/*
 * `box-sizing: border-box` — canlıda Tailwind preflight'tan geliyor, bu
 * projenin global köprüsünde YOK (orada yalnızca border ve tipografi var).
 * Yerel koşumda ölçülen etki: input 464×56 yerine 498×74, sekme satırı 36
 * yerine 38, sağ kolon 900 yerine 1036 (100vh + 136 padding). Kural bölüme
 * scope'lu tutuldu; global.css'e yazılan bir şey yayınlanmadan
 * doğrulanamıyor (DEVAM.md tuzak 8).
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs, .cc_jcmnugos_k2NfVeJSSq .ms-hs *, .cc_jcmnugos_k2NfVeJSSq .ms-hs *::before, .cc_jcmnugos_k2NfVeJSSq .ms-hs *::after {
  box-sizing: border-box;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .cc_jcmnugos_k2NfVeJSSq .ms-hs {
    background-color: var(--ms-gri-alan-4, rgb(248, 246, 247));
  }
}

/* ---- sol kolon (yalnızca ≥1024) --------------------------------------- */

/*
 * Genişlik: `w-1/2 min-w-448 max-w-681`. w1440'ta 720 → 681'e kırpılır,
 * w1024'te 512 istenir ama sağ kolonla toplam 1038 > 1024 olduğu için flex
 * basıs oranında kısıp 505.09 verir. Ölçülen sayıları yazma; bu üç kural
 * onları kendiliğinden üretiyor.
 *
 * `align-items: flex-end` — iç kutu sağa yaslı, solda boşluk kalıyor.
 * "Geri Dön" ikonu tam o boşluğa oturuyor (w1440'ta 143, w1024'te 57 var).
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-sol {
  display: none;
}

@media (min-width: 1024px) {
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-sol {
    display: flex;
    z-index: 5;
    flex-direction: column;
    align-items: flex-end;
    width: 50%;
    min-width: 448px;
    max-width: 681px;
    height: 100vh;
    overflow: hidden;
    background-color: var(--ms-beyaz, rgb(255, 255, 255));
  }
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-sol-ic {
  display: flex;
  flex-direction: column;
  width: 79%;
  min-width: 448px;
  height: 100%;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-sol-ust {
  position: relative;
  padding-top: 48px;
  background-color: var(--ms-beyaz, rgb(255, 255, 255));
}

/* ---- logo ------------------------------------------------------------- */

/*
 * Canlıda ölçü inline yazılı: `width:50px; aspect-ratio:1`. Prop'tan
 * geldiği için değişkene alındı. Görsel mutlak dolduruyor (`contain`).
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-logo {
  position: relative;
  width: var(--ms-hs-logo-g, 50px);
  max-width: 100%;
  aspect-ratio: var(--ms-hs-logo-oran, 1);
  cursor: pointer;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-logo-bag {
  position: absolute;
  inset: 0;
  display: block;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-logo-gorsel {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Sol kolondaki logo — altında 48 boşluk, yalnızca masaüstünde. */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-logo--web {
  display: none;
  margin-bottom: 48px;
}

/* Sağ kolonun tepesindeki logo — ortalı, üstünde/altında 8, yalnızca mobil.
   Canlıda gerçekten İKİ ayrı düğüm var; tek kopya bir düzende kayboluyor. */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-logo--mobil {
  margin: 8px auto;
}

@media (min-width: 1024px) {
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-logo--web {
    display: block;
  }
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-logo--mobil {
    display: none;
  }
}

/* ---- "Geri Dön" ikonu (canlıda YOK — müşteri isteği) ------------------- */

/*
 * Logonun soluna MUTLAK konumlandırıldı: ölçülen hiçbir kutuyu kaydırmıyor,
 * `kontrol-hesap.mjs` tablosu ikonla birlikte de geçerli kalıyor.
 *
 * Tıklama alanı 40×40, ikon 24×24 ortalı. Kutunun sağ kenarı logonun 4px
 * solunda → ikonun sağ kenarı 12px solunda (40 kutuda ikon 8 içeride).
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-geri {
  position: absolute;
  top: 50%;
  right: calc(100% + 4px);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ms-metin-koyu, rgb(43, 43, 56));
  cursor: pointer;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-geri svg {
  width: 24px;
  height: 24px;
}

/* ---- sol kolon metni --------------------------------------------------- */

/*
 * Canlıda Tailwind `prose`. Satır yüksekliği ORANSAL (1.75), piksel değil:
 * 16px metin 28, içindeki 32px başlık 56 ölçüldü. 28 yazılsaydı başlık da
 * 28 kalırdı.
 *
 * `ms-ham` sınıfı wrapper'da: global.css'teki tipografi köprüsü bu ağacı
 * dışarıda bırakıyor, altındaki iki kural ikas Studio'nun eleman
 * sıfırlamasını geri alıyor (bkz. MinisoBlogCarousel/styles.css).
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-metin {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ms-metin-2, rgb(55, 65, 81));
}

.cc_jcmnugos_k2NfVeJSSq :where(.ms-hs-metin) :where(h1, h2, h3, h4, h5, h6, button, input, select, textarea) {
  font-family: inherit;
  line-height: inherit;
}

.cc_jcmnugos_k2NfVeJSSq :where(.ms-hs-metin) :where(h1, h2, h3, h4, h5, h6) {
  display: block;
  line-height: 1.6;
}

/*
 * KARAR: tüm tasarımda (web + mobil) Gilroy kullanılacak.
 *
 * `ms-ham` ağacı global tipografi köprüsünün DIŞINDA — merchant'ın kendi
 * `font-family` bildirimleri devralma yoluyla çalışsın diye böyle. O karar
 * öncesinde doğruydu; artık tam tersi lazım: eski temadan taşınan RICH_TEXT
 * içeriklerinde inline `font-family: Poppins,…` var ve temada Poppins
 * olmadığı için metin Gilroy'a değil Arial'a düşüyor.
 *
 * İçeriği yapıştırmadan önce temizlemek yetmiyor — bir dahaki içerik yine
 * kirli gelebilir. Kural burada, inline style'ı yenmesi gerektiği için
 * `!important` ile. Yalnızca `font-family`; `line-height`, renk ve punto
 * merchant'ta kalıyor.
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-metin, .cc_jcmnugos_k2NfVeJSSq .ms-hs-metin *, .cc_jcmnugos_k2NfVeJSSq .ms-hs-onay-metin, .cc_jcmnugos_k2NfVeJSSq .ms-hs-onay-metin * {
  font-family: "cc_jcmnugos_gilroy", ui-sans-serif, system-ui, sans-serif !important;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-metin > :first-child {
  margin-top: 0;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-metin > :last-child {
  margin-bottom: 0;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-metin p {
  margin: 1.25em 0;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-metin ul {
  margin: 1.25em 0;
  padding-left: 1.625em;
  list-style-type: disc;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-metin li {
  display: list-item;
  margin: 0.5em 0;
  padding-left: 0.375em;
}

/* İşaretçi rengi metinden AÇIK — ayrı ölçüldü. */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-metin li::marker {
  color: rgb(209, 213, 219);
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-metin a {
  color: rgb(17, 24, 39);
  font-weight: 500;
  text-decoration: underline;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-metin b, .cc_jcmnugos_k2NfVeJSSq .ms-hs-metin strong {
  font-weight: 700;
}

/* ---- sol kolon görsel bandı ------------------------------------------- */

/*
 * Zemin dikeyde sonsuz kayıyor. `background-size` yüksekliği 832 ve
 * keyframe tam 832 kaydırıyor — repeat-y ile dikişsiz döngü. İki sayı
 * birbirine bağlı, biri değişirse diğeri de değişmeli.
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-bant {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  width: 100%;
  background-image: var(--ms-hs-bant);
  background-repeat: repeat-y;
  background-size: 343px 832px;
  animation: cc_jcmnugos_k2NfVeJSSq_ms-hs-bant-kay 20s linear infinite forwards;
}

@keyframes cc_jcmnugos_k2NfVeJSSq_ms-hs-bant-kay {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -832px;
  }
}

/* Bandın tepesindeki beyaza eriyen perde — üstteki metin bloğuyla birleşsin
   diye 4px yukarı taşıyor (`-top-1`). */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-bant-perde {
  position: absolute;
  top: -4px;
  z-index: 2;
  width: 100%;
  height: 120px;
  background: linear-gradient(
    rgb(255, 255, 255),
    rgba(255, 255, 255, 0.518) 52%,
    rgba(255, 255, 255, 0)
  );
}

@media (prefers-reduced-motion: reduce) {
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-bant {
    animation: none;
  }
}

/* ---- sağ kolon --------------------------------------------------------- */

/*
 * Masaüstünde genişlik sınıfı YOK; 61 (form sol boşluğu) + 464 (form) + 1
 * (kenarlık) = 526 içerikten çıkıyor. `overflow-x: auto` w1024'te forma
 * yetmeyen 7 pikseli kurtarıyor — canlıda da öyle.
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-sag {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 1024px) {
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-sag {
    width: auto;
    height: 100vh;
    padding-top: 120px;
    padding-bottom: 16px;
    border-left: 1px solid var(--ms-kenarlik-hesap, rgb(229, 229, 229));
    background-color: var(--ms-gri-alan-4, rgb(248, 246, 247));
    overflow-x: auto;
  }
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-form-kap {
  padding: 0 16px 16px;
  overflow: auto;
}

@media (min-width: 1024px) {
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-form-kap {
    width: 464px;
    margin-left: 61px;
    padding: 0;
    overflow: visible;
  }
}

/* ---- form ızgarası ----------------------------------------------------- */

/*
 * Satır yüksekliklerini YAZMA — hepsi içerikten çıkıyor. Ölçülen sırayla:
 *   giriş  44 56 56 50 24|44 17 108   (5. satır w360'ta sarıp 44 oluyor)
 *   kayıt  44 56 56 56 56 <değişken> 17 108
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  width: 100%;
}

/* ---- sekmeler ---------------------------------------------------------- */

/*
 * Mobilde iki sekme eşit paylaşıyor ve `-mx-4` ile kabın padding'inin
 * DIŞINA taşıp ekran genişliğine yayılıyor. Masaüstünde içerik genişliğinde,
 * soldan, aralarında 47.
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-sekmeler {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -16px 8px;
}

/*
 * `text-decoration: none` YAZILMAK ZORUNDA. Canlıda Tailwind preflight
 * `a { text-decoration: inherit }` yazıyor; bu projenin global köprüsünde o
 * kural yok, dolayısıyla tarayıcı varsayılanı devreye giriyor. Etkisi
 * ölçüldü: pasif sekmenin altında 2px gri çizgiye EK olarak metin altı
 * çizgisi, "Hemen Kayıt Ol" / "Şifremi Unuttum"da çift çizgi çıkıyordu.
 * Sol kolon metnindeki bağlantılar bunun DIŞINDA — orada altı çizili doğru.
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-sekme {
  text-decoration: none;
  width: 100%;
  height: 36px;
  border-bottom: 2px solid transparent;
  font-size: 16px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: 0.02em;
  text-align: center;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-sekme--aktif {
  border-bottom-color: rgb(43, 43, 56);
  color: rgb(43, 43, 56);
}

/* Pasif sekmenin çizgisi mobilde DURUYOR, masaüstünde kayboluyor. */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-sekme--pasif {
  border-bottom-color: rgb(208, 209, 211);
  color: rgb(153, 153, 153);
}

@media (min-width: 1024px) {
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-sekmeler {
    justify-content: flex-start;
    gap: 47px;
    margin-left: 0;
    margin-right: 0;
  }
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-sekme {
    width: auto;
    font-size: 24px;
    text-align: left;
  }
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-sekme--pasif {
    border-bottom-color: transparent;
  }
}

/* ---- alanlar ----------------------------------------------------------- */

.cc_jcmnugos_k2NfVeJSSq .ms-hs-fieldset {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-alan {
  position: relative;
  width: 100%;
}

/*
 * `appearance: none` — canlıda `@tailwindcss/forms` tabanından geliyor,
 * bu projede o taban YOK. Metin alanında masaüstünde görünmez ama iOS
 * Safari native input kromunu (yuvarlatma + iç gölge) geri getiriyor;
 * `select`te ise ölçülebilir fark üretiyor (aşağıya bak).
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs input.ms-hs-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 56px;
  padding: 8px 16px;
  border: 1px solid rgb(187, 187, 187);
  border-radius: 4px;
  background-color: var(--ms-beyaz, rgb(255, 255, 255));
  color: var(--ms-siyah, rgb(0, 0, 0));
  font-size: 16px;
  line-height: 24px;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs input.ms-hs-input::placeholder {
  color: rgb(43, 43, 56);
  opacity: 1;
}

/* Canlıda `focus:border-black focus:ring-transparent`: kenarlık siyaha
   döner, halka saydam kalır. Tailwind'in `outline-none`u outline'ı yok
   ETMİYOR, saydam 2px yapıyor — yüksek kontrast modunda odak kaybolmasın
   diye. Aynısı yazıldı. */
.cc_jcmnugos_k2NfVeJSSq .ms-hs input.ms-hs-input:focus {
  border-color: var(--ms-siyah, rgb(0, 0, 0));
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px transparent;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs input.ms-hs-input--hata {
  border-color: var(--ms-kirmizi, rgb(235, 42, 55));
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-hata {
  color: var(--ms-kirmizi, rgb(235, 42, 55));
  font-size: 12px;
  line-height: 16px;
}

/* Göz düğmesi — canlıda `right-3.5 top-1/2 -translate-y-1/2`, ikon 16×16. */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-goz {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: currentColor;
  cursor: pointer;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-goz svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Ad + Soyad — w360 156+156, w768 360+360, ≥1024 224+224 (hep eşit ikili). */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-ikili {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/*
 * Telefon satırı: alan kodu 96 sabit, telefon alanı ESNEMİYOR — canlıda her
 * genişlikte 202. `flex: 1` verilirse satırı doldurur ve canlıdan sapar.
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-telefon {
  display: flex;
  gap: 8px;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs .ms-hs-telefon .ms-hs-fieldset {
  width: 202px;
  max-width: 100%;
}

/*
 * Alan kodu seçici. Canlıda `@tailwindcss/forms` tabanı `appearance: none`
 * yazıyor ve oku KENDİ çiziyor (background-image, SVG data URI). Bu proje
 * o tabanı taşımıyordu; native `select` bırakılınca iki şey bozuluyordu:
 *
 *   1. Yazı dikeyde oturmuyordu. Chrome'un UA sayfası native select'e
 *      `line-height: normal` dayatıyor ve `appearance: auto` iken yazılan
 *      20px hiç uygulanmıyor — ölçümde `line-height` `normal` çıkıyordu.
 *   2. Sağda macOS'un kendi çift oklu native düğmesi çiziliyordu; canlıda
 *      tek, ince, gri bir chevron var.
 *
 * Ok ikonu ve konumu canlıdan birebir: 21×21, sağdan 8px, dikey ortalı.
 * `print-color-adjust: exact` da tabandan — yazdırmada ok kaybolmasın diye.
 */
/*
 * DİKKAT — buradaki `padding` ve `line-height` canlıdakinden BİLEREK farklı.
 *
 * Canlıda `padding: 8px 12px` + `line-height: 20px`. Bu, seçili yazının
 * dikeyde ortalanmasını tarayıcının `select` iç yerleşimine bırakıyor:
 * 20px'lik satır kutusu 38px'lik içerik kutusunun neresine oturacak? Chrome
 * (headless dahil, yedi varyantla denendi) ortalıyor — ama kullanıcının
 * editöründe TEPEYE yaslandı; chevron ortada kaldığı için yazı yukarıda,
 * ok aşağıda göründü.
 *
 * Çözüm: satır kutusunu içerik yüksekliğine eşitle (56 − 2 kenarlık = 54,
 * dikey padding 0). Tek satırlık kutu içerik kutusunu tam doldurduğu için
 * "ortala" ile "tepeye yasla" AYNI sonucu veriyor — hangi tarayıcı olursa
 * olsun yazı aynı yere düşüyor.
 *
 * Dışarıdan ölçülen hiçbir şey değişmiyor: kutu 96×56, yazı 14px, glifler
 * canlıyla aynı pikselde. Değişen yalnızca hangi bildirimin işi yaptığı.
 * `kontrol-hesap.mjs` bu yüzden `line-height` 20 değil 54 bekliyor.
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs select.ms-hs-kod {
  appearance: none;
  -webkit-appearance: none;
  width: 96px;
  height: 56px;
  padding: 0 12px;
  border: 1px solid rgb(187, 187, 187);
  border-radius: 4px;
  background-color: var(--ms-beyaz, rgb(255, 255, 255));
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: calc(100% - 8px) 50%;
  background-repeat: no-repeat;
  background-size: 21px 21px;
  background-origin: padding-box;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  color: var(--ms-siyah, rgb(0, 0, 0));
  font-size: 14px;
  line-height: 54px;
}

/* Canlıda select'in odak halkası mavi kalmış (`focus:ring-transparent`
   yalnızca metin alanlarına yazılmış) — olduğu gibi bırakıldı. */
.cc_jcmnugos_k2NfVeJSSq .ms-hs select.ms-hs-kod:focus {
  border-color: rgb(31, 41, 55);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgb(37, 99, 235);
}

/* ---- onay kutuları ------------------------------------------------------ */

.cc_jcmnugos_k2NfVeJSSq .ms-hs-onaylar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-onay {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--ms-siyah, rgb(0, 0, 0));
  user-select: none;
  cursor: pointer;
}

/* İlk satırda üst boşluk var, alt boşluk yok — canlıda `mt-2`, diğerleri `mb-2`. */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-onay--ilk {
  margin-top: 8px;
  margin-bottom: 0;
}

/*
 * Onay kutusu da aynı tabandan geliyor: `appearance: none` + işaret SVG'si
 * arka plan görseli olarak. Önce `accent-color` ile yazılmıştı — o native
 * kutuyu boyar, canlıdaki kutu ise tamamen özel: işaretliyken zemin
 * kırmızı, kenarlık saydam, tik beyaz ve kutuyu tam kaplıyor
 * (`background-size: 100% 100%`).
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs input.ms-hs-kutu {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ms-kenarlik, rgb(210, 210, 210));
  border-radius: 2px;
  background-color: var(--ms-beyaz, rgb(255, 255, 255));
  background-origin: border-box;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  color: var(--ms-kirmizi, rgb(235, 42, 55));
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs input.ms-hs-kutu:checked {
  border-color: transparent;
  background-color: currentColor;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs input.ms-hs-kutu--hata {
  border-color: var(--ms-kirmizi, rgb(235, 42, 55));
  outline: 1px solid var(--ms-kirmizi, rgb(235, 42, 55));
}

/*
 * Metin merchant'ın RICH_TEXT'i — kendi inline font/renk bildirimleri var.
 *
 * Satır yüksekliği 20 YAZILMAK ZORUNDA: canlıda `text-sm` = 14px/20px, ama
 * `ms-ham` ağacı global tipografi köprüsünün dışında olduğu için buradan
 * bir değer verilmezse kök wrapper'ın 24'ünü devralır. Ölçülen fark: satır
 * 21 yerine 25, ilk onay bloğu 63 yerine 75, onay kolonu 203 yerine 223.
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-onay-metin {
  font-size: 14px;
  line-height: 20px;
}

.cc_jcmnugos_k2NfVeJSSq :where(.ms-hs-onay-metin) :where(h1, h2, h3, h4, h5, h6, button, input, select, textarea) {
  font-family: inherit;
  line-height: inherit;
}

/* Canlıdaki preflight kuralının aynısı: altı çizgi `<u>`dan gelsin, `<a>`
   kendi başına çizgi eklemesin. */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-onay-metin a {
  text-decoration: inherit;
  color: inherit;
}

/* ---- düğmeler ----------------------------------------------------------- */

/*
 * `.btn` / `.btn2` canlıda tema sınıfı. Harf aralığı ikisinde de `.05em` ama
 * yazı boyu farklı olduğu için piksel karşılığı farklı: 20px'te 1, 16px'te 0.8.
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-gonder-kap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 10px 20px;
  overflow: hidden;
  border: 1px solid var(--ms-kirmizi, rgb(235, 42, 55));
  border-radius: 4px;
  background-color: var(--ms-kirmizi, rgb(235, 42, 55));
  color: var(--ms-beyaz, rgb(255, 255, 255));
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-ayrac {
  width: 100%;
  height: 1px;
  margin: 8px 0;
  background-color: rgb(208, 209, 211);
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-sosyal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-btn2 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 46px;
  padding: 10px 20px;
  overflow: hidden;
  border: 1px solid var(--ms-siyah, rgb(0, 0, 0));
  border-radius: 4px;
  background-color: var(--ms-beyaz, rgb(255, 255, 255));
  color: var(--ms-siyah, rgb(0, 0, 0));
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* İki ikon farklı yükseklikte ölçüldü (13 ve 12) ve viewBox'ları kare
   değil — genişlik oranı korusun diye `auto`. */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-ikon {
  display: flex;
  align-items: center;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-ikon svg {
  display: block;
  width: auto;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-ikon--fb svg {
  height: 13px;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-ikon--g svg {
  height: 12px;
}

/* ---- giriş: linkler satırı ---------------------------------------------- */

/*
 * w360'ta sarıyor (satır 44), 768 ve üstünde tek satır (24). `flex-wrap`
 * kaldırılırsa mobilde "Şifremi Unuttum" taşar.
 */
.cc_jcmnugos_k2NfVeJSSq .ms-hs-linkler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-link-metin {
  font-size: 14px;
  line-height: 1;
}

.cc_jcmnugos_k2NfVeJSSq .ms-hs-link {
  text-decoration: none;
  border-bottom: 2px solid rgb(43, 43, 56);
  color: rgb(43, 43, 56);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ==========================================================================
 * MOBİL TASARIM — üye girişi (s17) ve üye ol (s16)
 * Kaynak: MOBİL-33 SAYFA.pdf. Ölçüm ve sapmalar: `data/mobil-uyelik.md`.
 *
 * Yukarısı canlı miniso.com.tr'den ölçüldü ve MASAÜSTÜNDE aynen kalıyor;
 * bu blok yalnız <1024'te iş yapıyor. Tasarımın iki ekranı kendi içinde
 * TUTARSIZ çizilmiş (sekme biçimi, alan yüksekliği, punto ölçeği farklı);
 * ortak kabuk s17'nin diline göre birleştirildi — gerekçe belgede.
 *
 * Puntolar `data/mobil-standart.md` ölçeğine oturtuldu (ölçülen ~10px form
 * metni → 16 input tabanı), dokunma hedefleri 44'e çıkarıldı.
 * ========================================================================== */

@media (max-width: 1023.98px) {
  /* ---- geri oku --------------------------------------------------------- */

  /*
   * ÖLÇÜLEN: ok sayfanın SOL kenarında (glif 28.25–41.25, dikey merkez ~32),
   * logo ise ortada. Temel kural oku logonun 4px soluna yapıştırıyor —
   * canlı masaüstünde doğru, mobilde ok ekranın ortasına yakın kalıyordu.
   *
   * Konum kabı mobilde sağ kolona alınıyor; bunun için logo kutusu ve
   * içindeki görsel akışa döndürülüyor (ikisi de canlıda mutlak).
   * Vuruş alanı 44, ikon 24 ortalı → ikonun sol kenarı 26'ya düşüyor,
   * ölçülen 28.25'in yarım ızgara içinde.
   */
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-sag {
    position: relative;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-logo {
    position: static;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-logo-bag, .cc_jcmnugos_k2NfVeJSSq .ms-hs-logo-gorsel {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-geri {
    top: 8px;
    right: auto;
    left: 16px;
    width: 44px;
    height: 44px;
    transform: none;
  }

  /*
   * LOGO 44 YÜKSEK — ölçülen tasarım s17: logo kutusu 7.5 → 51.25, yani
   * 43.75 ve `data/mobil-uyelik.md` de "44 yüksek, ortalı" diyor. Yayında
   * 58.88 çıkıyordu: kutu GENİŞLİKTEN (50px) ve görselin oranından
   * türetiliyor, yüksekliği kimse sabitlememişti.
   *
   * Yükseklik sabitlenip genişlik orana bırakıldı — marka logoyu
   * değiştirse de 44 kalır. Yan etkisi: geri oku (8 → 52) ile logo
   * (8 → 51.6) artık dikeyde hizalı; 58.88'de ok logonun 8px yukarısında
   * duruyordu.
   */
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-logo--mobil {
    flex: none;
    width: auto;
    height: 44px;
  }

  /* ---- karşılama (yalnız giriş ekranı) --------------------------------- */

  /* ÖLÇÜLEN başlık 20.4 Bold, alt metin 12; maskot 143×102, sağ kenara
     dayanıyor. UYGULANAN 24/32 ve 14/20 — oran (1.7) korundu. */
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-karsilama {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px 0;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-karsilama-metin {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-karsilama-baslik {
    margin: 0;
    color: var(--ms-metin-koyu);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-karsilama-alt {
    color: rgb(107, 107, 107);
    font-size: 14px;
    line-height: 20px;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-karsilama-gorsel {
    flex: none;
    width: 144px;
    height: auto;
    margin-right: -16px;
    object-fit: contain;
  }

  /* ---- sekmeler --------------------------------------------------------- */

  /* Tasarımda aktif sekme KIRMIZI ve altı 2px kırmızı; satırın altında
     ince gri çizgi tam genişlikte. Sekme 48 yüksek (dokunma hedefi). */
  /*
   * ÜST BLOKLA ARASINDAKİ 24 KALDIRILDI.
   *
   * Ölçüldü (tasarım s17 ↔ yayın, mürekkep):
   *   maskotun altı → sekme yazısının üstü   tasarım 4.2   bizde 39
   * Aradaki farkın 24'ü buranın `margin-top`uydu; kalan 15 sekme kutusunun
   * 48'e çıkarılmasından geliyor (dokunma hedefi) ve bilinçli.
   *
   * Karşılama bloğunun altı zaten beyaza yakın (maskot kırpımının son
   * satırı 254,253,253), o yüzden sekmeler ona dayanınca dikiş görünmüyor.
   * Kayıt ekranında karşılama YOK; orada logonun altı → sekme yazısı
   * tasarımda 25.6, bu değişiklikten sonra bizde 23.
   */
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-sekmeler {
    margin: 0 -16px 8px;
    border-bottom: 1px solid var(--ms-kenarlik-hesap);
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-sekme {
    height: 48px;
    margin-bottom: -1px;
    font-size: 16px;
    line-height: 46px;
    letter-spacing: 0;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-sekme--aktif {
    border-bottom-color: var(--ms-kirmizi);
    color: var(--ms-kirmizi);
    font-weight: 700;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-sekme--pasif {
    border-bottom-color: transparent;
    color: var(--ms-metin-soluk);
  }

  /* ---- alanlar ---------------------------------------------------------- */

  /* ÖLÇÜLEN alan 33 (giriş) / 40 (kayıt) yüksek, yer tutucu ~10.3px.
     UYGULANAN 48 (form alanı standardı) ve 16px — input 16'nın altına
     inemez, iOS odaklanınca sayfayı zumluyor. */
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-etiket {
    display: block;
    color: var(--ms-metin-koyu);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-fieldset {
    gap: 8px;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs input.ms-hs-input {
    height: 48px;
    padding: 8px 16px;
    border-color: var(--ms-kenarlik-hesap);
    border-radius: 12px;
    background-color: var(--ms-gri-alan-3);
    font-size: 16px;
    line-height: 24px;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs input.ms-hs-input::placeholder {
    color: rgb(150, 150, 150);
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs .ms-hs-alan--ikonlu input.ms-hs-input {
    padding-left: 48px;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-oncu {
    display: flex;
    position: absolute;
    top: 50%;
    left: 16px;
    align-items: center;
    color: rgb(122, 122, 122);
    transform: translateY(-50%);
    pointer-events: none;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-oncu svg {
    width: 20px;
    height: 20px;
  }

  /* Göz düğmesi: görsel kutu 24, vuruş alanı 44. */
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-goz {
    display: flex;
    right: 12px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-goz::before {
    content: "";
    position: absolute;
    inset: -10px;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-goz svg {
    width: 20px;
    height: 20px;
  }

  /* Telefon: tasarımda alan kodu solda sabit, numara kalan genişliği
     dolduruyor (canlıdaki 202px sabit genişlik mobilde taşıyordu). */
  .cc_jcmnugos_k2NfVeJSSq .ms-hs .ms-hs-telefon .ms-hs-fieldset {
    flex: 1;
    width: auto;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs select.ms-hs-kod {
    height: 48px;
    border-color: var(--ms-kenarlik-hesap);
    border-radius: 12px;
    background-color: var(--ms-gri-alan-3);
    font-size: 16px;
  }

  /* ---- onaylar ---------------------------------------------------------- */

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-onay-metin {
    font-size: 13px;
    line-height: 18px;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs input.ms-hs-kutu {
    width: 20px;
    height: 20px;
    border-radius: 4px;
  }

  /* ---- düğmeler --------------------------------------------------------- */

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-btn {
    height: 48px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-btn2 {
    gap: 8px;
    height: 48px;
    border-color: var(--ms-kenarlik-hesap);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-sosyal {
    gap: 8px;
  }

  /*
   * Sosyal ikonlar aynı boyda DEĞİLDİ: canlıdan gelen kurallar Facebook'a
   * 13, Google'a 12 yükseklik ve `width: auto` veriyor. İki logonun viewBox
   * oranı da farklı (fb 512×512 içinde glif ortada dar, google 488×512),
   * dolayısıyla hem boyları hem genişlikleri tutmuyor, metinler farklı
   * yerden başlıyordu.
   *
   * Mobilde ikon kutusu SABİT KARE; svg kutuyu dolduruyor ve
   * `preserveAspectRatio` gliflerini ortalıyor. Tasarımda üç sosyal
   * satırın ikonu da 12.25 yüksek, yani eşit (ölçüldü).
   *
   * Seçici `--fb`/`--g` kadar özgül olmak ZORUNDA; `.ms-hs-ikon svg`
   * yazılırsa temel kurallar kazanıyor ve kural hiç işlemiyor.
   */
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-btn2 {
    gap: 12px;
  }

  /*
   * İKONLARI HİZALA — marka maddesi: "sosyal ile giriş yap alanlarındaki
   * ikonlar aynı hizada değil".
   *
   * Sebep ÖLÇÜLDÜ, tahmin değil: düğme `justify-content: center` ve
   * etiketler farklı genişlikte ("Facebook ile Devam Et" ötekinden 17.76px
   * geniş). Her düğme KENDİ içeriğini ortaladığı için ikon kutuları 8.88px
   * kayıyordu. Yukarıdaki 18×18 sabit kutu bunu ÇÖZMEZ — sorun ikonun boyu
   * değil, grubun genişliği. (Denetçi de bunu kaçırmıştı: svg kutusunu
   * ölçüyordu, kutu zaten eşitti.)
   *
   * Çözüm: etiket kutusu en geniş etikete göre sabitleniyor. Böylece bütün
   * düğmelerin içeriği aynı genişlikte oluyor ve ortalanınca ikonlar aynı
   * x'e düşüyor. Grup ortada kalıyor — tasarımda da ortalı.
   *
   * 160 ÖLÇÜLDÜ: altı etiketin en genişi "Facebook ile Devam Et" 158.31px
   * (Gilroy 15/500). En dar ekranda (320) etikete kalan yer 218px, yani
   * 60px pay var. Yeniden ölçmek için `tools/tasarim/_olc-etiket.mjs`.
   *
   * SINIR: etiketler editörden değiştirilebilir prop. Marka 160px'i aşan
   * bir metin yazarsa o düğmenin grubu genişler ve hizalama yine bozulur.
   */
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-btn2 .ms-hs-ikon + span {
    min-width: 160px;
    text-align: left;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-btn2 .ms-hs-ikon {
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-ikon--fb svg, .cc_jcmnugos_k2NfVeJSSq .ms-hs-ikon--g svg {
    width: 100%;
    height: 100%;
  }

  /* "veya" çizginin ortasında. Masaüstünde metin gizli, çizgi aynen kalıyor. */
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-ayrac {
    display: flex;
    align-items: center;
    gap: 12px;
    height: auto;
    margin: 0;
    background: none;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-ayrac::before, .cc_jcmnugos_k2NfVeJSSq .ms-hs-ayrac::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--ms-kenarlik-hesap);
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-ayrac-metin {
    color: rgb(107, 107, 107);
    font-size: 12px;
    line-height: 16px;
  }

  /* ---- güven şeridi (yalnız giriş) -------------------------------------- */

  /*
   * ÖLÇÜLEN 317×94, zemin #FDF7F7, üç sütun ayraçlı; başlık 8.2 Bold,
   * açıklama 7.9. UYGULANAN 12/16 ve 11/15 — 13/12'de "Güvenli Alışveriş"
   * üç sütunlu şeritte sarıyordu.
   *
   * Öğeler COMPONENT_LIST: marka kendi dolduruyor (madde: "en alttaki ikon
   * ve yazılar için component rica ediyoruz"). Çocuklar anasayfadaki hizmet
   * şeridiyle aynı bileşen, yani sınıflar `ms-hz-*`.
   *
   * DİKKAT: ikas her COMPONENT_LIST çocuğunu `display: contents` iki sarmala
   * sarıyor; `>` ve `+` seçicileri gerçek öğeye ULAŞMAZ (data/README.md
   * 4 numaralı tuzak). Sütun ayraçları bu yüzden kardeş seçiciyle değil,
   * kabın zemin gradyanıyla çiziliyor — üç sütuna göre.
   */
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-guven {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* ÜSTTEN hizalı: `stretch` olursa öğe kutusu satır boyuna uzuyor,
       içindeki `align-items: center` yüzünden metni uzun olan sütunun
       ikonu aşağı kayıyor (hizmet şeridinde de aynı not var). */
    align-items: start;
    padding: 16px 4px;
    border-radius: 12px;
    background-color: rgb(253, 247, 247);
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07)),
      linear-gradient(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07));
    background-repeat: no-repeat;
    background-position: 33.33% 50%, 66.67% 50%;
    background-size: 1px 64%, 1px 64%;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-guven .ms-hz-oge {
    align-content: start;
    gap: 6px;
    padding: 0 4px;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-guven .ms-hz-ikon {
    max-width: 28px;
  }

  /* Hizmet şeridinde başlık KIRMIZI 16px; tasarımda burada koyu ve küçük. */
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-guven .ms-hz-baslik {
    color: var(--ms-metin-koyu);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-guven .ms-hz-aciklama {
    color: rgb(107, 107, 107);
    font-size: 11px;
    line-height: 15px;
  }

  /* ---- KVKK notu -------------------------------------------------------- */

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-not {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgb(140, 140, 140);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-not-ikon {
    display: flex;
    flex: none;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-not-ikon svg {
    width: 16px;
    height: 16px;
  }

  /* ---- sıra ------------------------------------------------------------- */

  /*
   * Tasarımın sırası DOM sırasından farklı: "Şifremi Unuttum" düğmenin
   * ÜSTÜNDE, "Hesabın yok mu" ise güven şeridinin ALTINDA. DOM'a
   * dokunulmadı (masaüstü ölçümü bozulmasın), sıra `order` ile veriliyor;
   * `.ms-hs-linkler` iki çocuğunu ayrı ayrı sıralayabilmek için
   * `display: contents`.
   */
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-form > * {
    order: 2;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-sekmeler {
    order: 1;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-linkler {
    display: contents;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-linkler > a {
    order: 3;
    align-self: flex-end;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-linkler > div {
    order: 8;
    align-self: center;
    text-align: center;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-gonder-kap {
    order: 4;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-ayrac {
    order: 5;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-sosyal {
    order: 6;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-guven {
    order: 7;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-not {
    order: 9;
  }

  /* Tasarımda hem "Şifremi Unuttum?" hem "Hemen Kayıt Ol" KIRMIZI ve ince
     altı çizili; masaüstünde ölçülen koyu/2px hâli duruyor. */
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-link, .cc_jcmnugos_k2NfVeJSSq .ms-hs-link-metin {
    font-size: 14px;
    line-height: 20px;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs-link {
    border-bottom-width: 1px;
    border-bottom-color: currentColor;
    color: var(--ms-kirmizi);
  }

  /* Onay kutusu ilk METİN SATIRIYLA hizalı olmalı; ortalanınca iki satırlık
     onayda kutu ikinci satıra kayıyordu. */
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-onay {
    align-items: flex-start;
  }

  .cc_jcmnugos_k2NfVeJSSq .ms-hs input.ms-hs-kutu {
    margin-top: 1px;
  }
}

/* Mobil tasarımın ekleri masaüstünde YOK — canlıdan ölçülen ekran aynen
   kalsın diye hepsi burada kapatılıyor. */
@media (min-width: 1024px) {
  .cc_jcmnugos_k2NfVeJSSq .ms-hs-karsilama, .cc_jcmnugos_k2NfVeJSSq .ms-hs-guven, .cc_jcmnugos_k2NfVeJSSq .ms-hs-not, .cc_jcmnugos_k2NfVeJSSq .ms-hs-etiket, .cc_jcmnugos_k2NfVeJSSq .ms-hs-oncu, .cc_jcmnugos_k2NfVeJSSq .ms-hs-ayrac-metin, .cc_jcmnugos_k2NfVeJSSq .ms-hs-linkler--kayit {
    display: none;
  }
}