/* NewLineCollection — "New Line TV Battaniyeleri" koleksiyon lansmani.
 * Spec: specs/anasayfa-newline-koleksiyon.md §6 + §17 (2026-09-21 izgara
 * revizyonu, uygulanan hal — birebir uygulanir).
 *
 * Kirilma noktasi 1024px: DOM sirasi tek, mobil/masaustu farki yalnizca CSS.
 * Yatay dolgu adimi 768px'te degisir (§6.3) — 1024'te AYRI bir deger yok.
 *
 * §17: masaustunde `__products` (satir basligi + izgara) artik `__panel`in
 * ICINDE, `__panel-inner`in SIBLING'i olarak render ediliyor — ayni krem
 * kart, tek dikey akis. Mobilde ayni DOM konumunda kalmasi gerektigi icin
 * (panelin 0-dolgulu kutusundan) opak zeminle "kirilip" ayri bir serit gibi
 * gosteriliyor (bkz. §17-A asagida). Ikinci bir IkasComponentRenderer YOK —
 * tek `.track`, CSS `display:flex` (mobil) / `display:grid` (masaustu).
 *
 * Kart olculeri (296px masaustu ust sinir 157/150px, scroll-snap, 2:3
 * cerceve, yaricap, hover) NewLineColorItem/styles.css'te; kap olculeri
 * (grid/serit, aralik, dolgu) burada. */

/* Kart gorsel orani — TEK degisken, tek yerden degistirilebilir (spec §15.1).
 * Karar: 2/3 (magaza fotograflari 1080x1620 olcumuyle uyumlu; 4:5 %16,7
 * kirpardi). §17.3: lifestyle gorseli de artik 2/3 — asagida ayri kural. */
.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection {
  --mh-newline-card-ar: 2 / 3;

  background-color: var(--mh-surface);
  /* Krem panel bolumun ICINDEKI bir kolon, "renkli bant" degil — bu yuzden
   * --mh-section-py degil, yarim ritim (--mh-section-gap) kullanilir. */
  padding-top: var(--mh-section-gap);
  padding-bottom: var(--mh-section-gap);
}

/* ===== Ust: editoryal bolme (lifestyle gorsel + krem panel) ===== */

.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__hero {
  display: block;
}

/* §17.3: 2:3 — hem masaustu hem mobil (tek kural, tek kaynak dosya yetiyor,
 * magaza fotograflari zaten 1080x1620 = 2:3, kart oranıyla da ayni). */
.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__media {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--mh-surface-variant);
}

.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gizli varyant kurali (HeroSliderItem kalibi, spec §9): CSS ile gizlenen
 * kopya `sizes="1px"` alir, boylece srcset'ten hicbir kaynak indirilmez. */
.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__media-img--desktop {
  display: none;
}

/* §17: `__panel` artik SADECE zemin — dolgu cocuklara (`__panel-inner`,
 * `__products`) tasindi, boylece masaustunde ikisi tek bir krem kart gibi
 * birlesir, mobilde ise `__products` kendi opak zeminiyle "kirilip" ayrisir. */
.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__panel {
  background-color: var(--mh-surface-bone);
  display: flex;
  flex-direction: column;
}

.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__panel-inner {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 40px 16px;
}

.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__eyebrow {
  margin: 0 0 16px;
  font-family: var(--mh-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mh-outline-text);
}

.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__title {
  margin: 0 0 16px;
  font-family: var(--mh-font-display);
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  color: var(--mh-primary);
}

.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__lead {
  margin: 0 0 10px;
  font-family: var(--mh-font-display);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--mh-on-surface);
}

.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__desc {
  margin: 0 0 24px;
  font-family: var(--mh-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--mh-on-surface-variant);
}

/* Palet satiri. Daire 44px oldugu icin aralik artik gercek bosluk
 * (eskiden daireler 24px'lik gorunmez kutulardaydi, gap 2px yeterdi).
 * Mobil: 6*44 + 5*12 = 324px, 358px ic genislige sigiyor.
 * Masaustu: 6*44 + 5*16 = 344px, 504px ic genislige sigiyor. */
.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__dots {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
}

/* `.mh-newline-dot` kurallari 2026-09-21'de NewLineColorItem/styles.css'ten
 * BURAYA tasindi: paleti artik cocuk degil BU bilesen ciziyor. Kural
 * cocukta kalsaydi CSS yalnizca cocuk sayfada oldugu icin tesadufen
 * yuklenirdi; cocuk listesi bosalsa palet bicimsiz kalirdi
 * (CLAUDE.md, "CSS @import — sablonun en yaygin hatasi"). */
/* ===== Renk paleti ogesi (dot) =====
 * 2026-09-21: gorunen daire 14px'ten 44px'e buyudu — kullanici ustteki
 * renk satirinin "gosterge" degil "renk paleti" gibi okunmasini istedi.
 * Yan etki: 44px zaten WCAG 2.5.5 dokunma hedefini karsiliyor, bu yuzden
 * eski 24x24 gorunmez hit-area (::before ile ortalanan kucuk daire)
 * numarasina gerek kalmadi — daire artik bagin KENDISI.
 * Renk `--nl-dot-color` custom property'sinden geliyor. */
.cc_t2dowgyg_oHC3zvZyRb .mh-newline-dot {
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 999px;
  text-decoration: none;
  background: var(--nl-dot-color, var(--mh-surface-variant));
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--mh-on-surface) 12%, transparent);
  transition: box-shadow 280ms ease-out;
}

/* Hover/odak: ic cizgi koyulasip disariya ince bir halka cikiyor.
 * Buyume YOK — palet dizilimi yerinden oynamasin. */
.cc_t2dowgyg_oHC3zvZyRb .mh-newline-dot:hover, .cc_t2dowgyg_oHC3zvZyRb .mh-newline-dot:focus-visible {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--mh-on-surface) 28%, transparent),
    0 0 0 2px var(--mh-surface),
    0 0 0 3px color-mix(in srgb, var(--mh-on-surface) 32%, transparent);
}

.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__price {
  margin: 0 0 24px;
  font-family: var(--mh-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--mh-on-surface-variant);
}

.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__price-amount {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: var(--mh-primary);
}

/* ===== Alt: urun satiri / mobil serit (§17: masaustunde panelin icine
 * tasindi, bu blok artik `__panel`in dogrudan cocugu — DOM'da tek yerde). */

/* Mobil/tablet (<1024): `__panel`in 0-dolgulu kutusundan opak zeminle
 * "kirilip" ayri, krem-olmayan bir serit gibi gorunur — §17.4, DOM
 * degismedi, sadece kendi zemini panelin krem rengini orter. Yatay dolgu
 * yok: `__row-header`/`__track` kendi 1rem/1.5rem dolgusunu tasir (mobil
 * gorunum §6 ile piksel-esdeger kalir). */
.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__products {
  padding-top: var(--mh-section-py);
  background-color: var(--mh-surface);
}

.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 1rem;
  margin-bottom: var(--mh-section-title-gap);
}

.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__row-title {
  margin: 0;
  font-family: var(--mh-font-display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: var(--mh-primary);
}

.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__view-all {
  font-family: var(--mh-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--mh-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* Mobil/tablet serit: yatay kaydirma + scroll-snap. 390'da 1,3 kart
 * gorunur — sagdaki kirpilmis kart "devami var" sinyalidir (§6.2). */
.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__track {
  display: flex;
  gap: 12px;
  padding: 0 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__track::-webkit-scrollbar {
  display: none;
}

/* ===== ≥768px: yatay dolgu adimi (§6.3 — 1024'te ayri bir deger yok) ===== */
@media (min-width: 768px) {
  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__row-header, .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__track {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    scroll-padding-left: 1.5rem;
  }
}

/* ===== ≥1024px: masaustu duzeni ===== */
@media (min-width: 1024px) {
  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__hero {
    display: flex;
    align-items: stretch;
  }

  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__media {
    flex: 0 0 55%;
  }

  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__media-img--desktop {
    display: block;
  }

  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__media-img--mobile {
    display: none;
  }

  /* §17: panel artik iki dikey blok tasiyor (`panel-inner` + `products`) ve
   * bunlari BIRLIKTE panelin stretch edilmis yuksekligi icinde dikeyde
   * ortalar ("icerik dikeyde ortali") — flex-direction column'a donuyor,
   * dolgu yok (cocuklarda). */
  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__panel {
    flex: 0 0 45%;
    justify-content: center;
  }

  /* max-width KALKTI: panel-inner artik panelin tam ic genisligini
   * kullanir (1440'ta 504px, 1024'te 316px — §17.2 olcumu), izgara da bu
   * genislige gore auto-fit kolonlanir. Ust dolgu var, alt dolgu YOK —
   * kartin krem-kapanisi artik `__products`in alt dolgusunda (56px). */
  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__panel-inner {
    padding: 56px 72px 0;
  }

  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__eyebrow {
    margin-bottom: 20px;
  }

  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__title {
    margin-bottom: 20px;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: -0.02em;
  }

  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__lead {
    margin-bottom: 12px;
  }

  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__desc {
    margin-bottom: 28px;
    max-width: 400px;
  }

  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__dots {
    gap: 16px;
    margin-bottom: 28px;
  }

  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__price {
    margin-bottom: 28px;
  }

    /* §17: `__products` artik panelin krem kartina AIT — mobildeki opak
   * "kirilma" zemini burada iptal edilir (transparent = panelin krem
   * rengini miras alir), ust bosluk artik section-py degil rowTitle'in
   * kendi margin-top'u (32px), alt dolgu (56px) kartin kapanisi. Yatay
   * dolgu panel-inner ile HIZALANMASI icin ayni deger (72px). */
  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__products {
    padding: 0 72px 56px;
    background-color: transparent;
  }

  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__row-header, .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__track {
    padding-left: 0;
    padding-right: 0;
  }

  /* Spec §17.1: "Satir basligi blogu ... Ust bosluk 32px, alt 16px." */
  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__row-header {
    gap: 24px;
    margin-top: 32px;
    margin-bottom: 16px;
  }

  /* §17.2: yeni breakpoint YOK — `auto-fit` panel genisligine gore
   * kendiliginden 3 (1440, 504px ic genislik) ya da 2 (1024, 316px ic
   * genislik) kolona dusuyor. Aralik spec'te tek deger: 16px.
   *
   * Kolon alt siniri SABIT 140px OLAMAZ: auto-fit kolon sayisini ustten
   * sinirlamaz, sadece "sigdigi kadar" doldurur. 140px ile 1920'de panel
   * ic genisligi 720px olunca DORT kolon sigiyor (4+2 oksuz satir),
   * 2560'ta ALTI (6x1). Onaylanan yerlesim 3x2.
   * Alt siniri `max(140px, (100% - 32px) / 3)` yapinca kolon genisligi
   * hicbir zaman container'in ucte birinin altina inmiyor -> en fazla 3
   * kolon. Dar ekranda (1024: (316-32)/3 = 94.7px < 140px) 140px devreye
   * giriyor ve kolon sayisi 2'ye dusuyor. 32px = iki gap.
   * Olculen: 1024->2, 1280->2, 1440->3, 1920->3, 2560->3. */
  .cc_t2dowgyg_oHC3zvZyRb .mh-newline-collection__track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(140px, (100% - 32px) / 3), 1fr));
    gap: 16px;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}