/** Shopify CDN: Minification failed

Line 309:7 Expected identifier but found whitespace
Line 309:8 Unexpected "500"

**/
/* Cendrino · kombin sayfası (look-film). Prototipten (yerel/look-film-v2) — bütün kurallar .cl-look altında, temaya karışmaz. */
/* --accent her look'ta parçaların renk adından gelir (7 Eki; sections/cendrino-look.liquid "VURGU RENGİ", .cl-look'a satır içi yazılır).
   Buradaki şeftali yalnız yedek. */
.cl-look {
    --ink: #120d0a; --ink-2: #1c1511; --paper: #f3e9e1; --soft: rgb(243 233 225 / .64); --faint: rgb(243 233 225 / .18);
    --accent: #e0a882; --serif: 'Newsreader', Georgia, serif; --sans: 'Red Hat Text', system-ui, sans-serif;
    --ease: cubic-bezier(.16, 1, .3, 1); --pad: clamp(20px, 4vw, 64px);
  }
.cl-look * { box-sizing: border-box; }
.cl-look { background: var(--ink); }
.cl-look { margin: 0; color: var(--paper); font: 400 15px/1.55 var(--sans); background: var(--ink); -webkit-font-smoothing: antialiased; }
/* FISILTI (1 Eki, Emre): videonun arkasında/yanında belirip kaybolan kelimeler — farklı yazı aileleri, düşük opaklık,
     yalnız opacity + transform (takılma yok), boş alanda; ürün panelinin ve videonun ortasının üstüne binmez. */
.cl-look .fis { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.cl-look .fis i { position: absolute; left: 0; top: 0; font-style: normal; white-space: nowrap; color: var(--paper); opacity: 0; will-change: opacity, transform; line-height: 1; }
.cl-look .fis .f1 { font-family: 'Bodoni Moda', serif; font-style: italic; font-weight: 400; }
.cl-look .fis .f2 { font-family: 'Italiana', serif; text-transform: uppercase; letter-spacing: .32em; }
.cl-look .fis .f3 { font-family: 'Pinyon Script', cursive; color: var(--accent); }
.cl-look .fis .f4 { font-family: 'Syne', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; }
.cl-look .fis .f5 { font-family: 'Newsreader', serif; font-weight: 200; font-style: italic; }
.cl-look .fis .dik { writing-mode: vertical-rl; }
.cl-look ::selection { background: var(--accent); color: var(--ink); }
/* WebGL stage (fixed, behind everything) */
.cl-look #gl { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; z-index: 0; }
.cl-look .fallback { position: fixed; inset: 0; z-index: 0; display: none; }
.cl-look .fallback img { width: 100%; height: 100%; object-fit: cover; }
.cl-look .no-gl .fallback { display: block; }
/* Chrome */
.cl-look .top { position: fixed; z-index: 30; inset: 0 0 auto; height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--pad);
    font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--paper); text-shadow: 0 0 14px rgb(18 13 10 / .45); }
.cl-look .top a { color: inherit; text-decoration: none; }
.cl-look .top__mark { font: 300 21px/1 var(--serif); letter-spacing: .32em; text-transform: uppercase; padding-left: .32em; }
.cl-look .top__bag { justify-self: end; }
.cl-look .top__bag b { font-weight: 500; display: inline-block; min-width: 1.2em; text-align: center; }
.cl-look .top__bag.bump b { animation: bump .6s var(--ease); }
@keyframes bump { 40% { transform: translateY(-5px); } }
/* Loader */
.cl-look .load { position: fixed; inset: 0; z-index: 50; background: var(--ink); display: grid; place-items: center; transition: opacity 1s var(--ease), visibility 1s; }
.cl-look .load.done { opacity: 0; visibility: hidden; }
.cl-look .load__in { width: min(260px, 60vw); text-align: center; }
.cl-look .load__mark { font: 300 26px/1 var(--serif); letter-spacing: .32em; text-transform: uppercase; padding-left: .32em; }
.cl-look .load__bar { margin-top: 22px; height: 1px; background: var(--faint); overflow: hidden; }
.cl-look .load__bar i { display: block; height: 100%; width: 100%; background: var(--paper); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .3s var(--ease); }
.cl-look main { position: relative; z-index: 10; }
.cl-look .sc { position: relative; }
.cl-look .pin { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
/* Scene 1: opening */
.cl-look .sc--open { height: 240vh; }
.cl-look .open { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(28px, 7vh, 72px); }
.cl-look .kick { margin: 0 0 14px; font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.cl-look .title { margin: 0; font: 300 clamp(64px, 12.5vw, 220px)/.86 var(--serif); letter-spacing: -.035em; }
.cl-look .title .ln { display: block; overflow: hidden; padding: .16em 0 .08em; margin-top: -.16em; }
.cl-look .title .ln:first-child { margin-top: 0; }   /* 6 Eki: 'A CENDRINO LOOK' başlığın tepesine değiyordu */
.cl-look .title .ln > span { display: inline-block; }
.cl-look .title em { font-style: italic; font-weight: 300; color: var(--accent); }
.cl-look .ch { display: inline-block; will-change: transform; }
.cl-look .w { display: inline-block; white-space: nowrap; }   /* kelime bütün kalır */
.cl-look .open__sub { margin: 22px 0 0; max-width: 30ch; font: 300 clamp(17px, 1.5vw, 22px)/1.4 var(--serif); color: var(--soft); }
/* Piece scenes */
.cl-look .sc--piece { height: 320vh; }
.cl-look .chap { position: absolute; top: 0; bottom: 0; width: min(520px, 40vw); display: flex; flex-direction: column; justify-content: center; }
.cl-look .chap--left { left: var(--pad); }
.cl-look .chap--right { right: var(--pad); }
.cl-look .chap__name { margin: 0; font: 300 clamp(40px, 4.6vw, 76px)/.98 var(--serif); letter-spacing: -.02em; }
.cl-look .chap__name .ln { display: block; overflow: hidden; padding: .1em 0 .06em; margin-top: -.1em; }
.cl-look .chap__name .ln > span { display: inline-block; }
.cl-look .chap__line { margin: 20px 0 0; max-width: 34ch; font: 300 18px/1.45 var(--serif); color: var(--soft); }
.cl-look .chap__buy { margin-top: 28px; display: grid; gap: 16px; }
.cl-look .price { font: 300 30px/1 var(--serif); font-variant-numeric: tabular-nums; }
.cl-look .sizes { display: flex; gap: 6px; flex-wrap: wrap; border: 0; margin: 0; padding: 0; }
.cl-look .sizes legend { font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); margin-bottom: 10px; padding: 0; }
.cl-look .sz input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cl-look .sz span { display: inline-grid; place-items: center; min-width: 50px; height: 42px; padding: 0 12px; font-size: 13px; border: 1px solid var(--faint); cursor: pointer;
    background: rgb(18 13 10 / .55); transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease), transform .15s var(--ease); }
.cl-look .sz:hover span { border-color: var(--paper); }
.cl-look .sz input:active + span { transform: scale(.96); }
.cl-look .sz input:checked + span { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cl-look .sz input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: 3px; }
.cl-look .add { justify-self: start; padding: 0; border: 0; background: none; color: var(--paper); font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
    display: inline-flex; gap: 12px; align-items: center; }
.cl-look .add::before { content: ''; width: 36px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.cl-look .add:hover::before { width: 56px; }
.cl-look .add[data-need] { color: var(--accent); }
/* Callouts drawn onto the frame */
.cl-look .call { position: fixed; z-index: 12; left: 0; top: 0; pointer-events: none; opacity: 0; }
.cl-look .call__dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 6px rgb(243 233 225 / .16); }
.cl-look .call__line { position: absolute; top: 0; height: 1px; background: var(--paper); transform-origin: left; }
.cl-look .call__txt { position: absolute; top: -9px; white-space: nowrap; font: 500 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.cl-look .call--l .call__line { right: 0; transform-origin: right; }
.cl-look .call--l .call__txt { right: calc(100% + 0px); }
/* Scene 4: finale (the turn scene between the last piece and the finale was removed 6 Oct) */
/* Final, son parçanın son ekranının üstüne biner (6 Eki): parça paneli çekilir çekilmez "Wear the whole look" gelir, arada boş film
   kalmaz (önce ~1,4 ekrandı). Üst üste binerken final son parçanın düğmelerini örtmesin: final katmanı tıklamayı geçirir, yalnız
   görünür olan satır alır (JS'te autoAlpha). */
.cl-look .sc--final { height: 220vh; margin-top: -100vh; pointer-events: none; }
.cl-look .fin__row { pointer-events: auto; }
.cl-look .fin { position: absolute; top: 0; bottom: 0; right: var(--pad); width: min(520px, 40vw); display: grid; align-content: center; }
.cl-look .fin__head { font: 300 clamp(48px, 5.4vw, 92px)/.95 var(--serif); letter-spacing: -.03em; margin: 0; }
.cl-look .fin__head em { color: var(--accent); }
.cl-look .fin__row { margin-top: 26px; display: grid; gap: 22px; border-top: 1px solid var(--faint); padding-top: 18px; }
/* Parçaların hayalet fotoları (7 Eki, Emre: "buraya gelince ürünlerin hayalet fotosu da gelmeli, güzelce ayarla"): başlıkla liste
   arasında, yan yana, tabanları hizalı, listedeki sırayla. Kutu, zemin, hale yok; yalnız ince ışık kenarı (küçük görseller gibi).
   Ekran alçaldıkça küçülür; 4 parça da sütuna sığar. Gelişleri JS'te (başlıktan sonra tek tek yükselerek). */
.cl-look .fin__parcalar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, min(108px, 11.5vh)); justify-content: start; align-items: end;
  gap: clamp(12px, 1.4vw, 22px); margin: 28px 0 0; }
.cl-look .fin__p { display: block; aspect-ratio: 3 / 5; }
.cl-look .fin__p img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; filter: drop-shadow(0 0 1px rgb(243 233 225 / .2)); }
.cl-look .fin__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cl-look .fin__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 24px; align-items: baseline; font-size: 14px; }
.cl-look .fin__list .nm { font: 300 20px/1.2 var(--serif); }
/* Final satırı (7 Eki): üstte ad + fiyat, altta beden + tek parça ekle. Bedenler parça panelindekilerin küçüğü; eksik beden olunca
   satırın bedenleri vurgu rengiyle çizilir (sayfa kaymaz). */
.cl-look .fin__list { gap: 0; }
.cl-look .fin__list li.fin__item { grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 9px; align-items: center; padding: 12px 0; border-top: 1px solid var(--faint); }
.cl-look .fin__list li.fin__item:first-child { border-top: 0; padding-top: 0; }
.cl-look .fin__list .fin__item .nm { font-size: 18px; }
.cl-look .fin__fiyat { justify-self: end; font: 400 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.cl-look .fin__sizes { gap: 5px; }
.cl-look .fin__sizes .sz span { min-width: 38px; height: 32px; padding: 0 9px; font-size: 12px; }
.cl-look .fin__add { justify-self: end; font-size: 10px; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.cl-look .fin__add::before { width: 18px; }
.cl-look .fin__add:hover::before { width: 30px; }
.cl-look .fin__item[data-need] .sz span { border-color: var(--accent); }
.cl-look .fin__item[data-need] .fin__add { color: var(--accent); }
/* 3–4 parçalı look'larda final ekrana sığsın: başlık ve fotolar küçülür */
.cl-look .fin:has(.fin__item:nth-child(3)) .fin__head { font-size: clamp(40px, 4.2vw, 70px); }
.cl-look .fin:has(.fin__item:nth-child(3)) .fin__parcalar { grid-auto-columns: minmax(0, min(84px, 9vh)); margin-top: 22px; }
.cl-look .fin:has(.fin__item:nth-child(3)) .fin__list li.fin__item { padding: 10px 0; row-gap: 8px; }
@media (max-height: 760px) and (min-width: 900px) {
  .cl-look .fin__parcalar { grid-auto-columns: minmax(0, min(84px, 10vh)); margin-top: 20px; }
  .cl-look .fin__row { margin-top: 22px; padding-top: 18px; gap: 20px; }
  /* alçak ekranda 3–4 parça: satırlar ve fotolar daha da sıkı (1280×720'de başlık menüye değiyordu) */
  .cl-look .fin:has(.fin__item:nth-child(3)) .fin__parcalar { grid-auto-columns: minmax(0, min(56px, 7.5vh)); margin-top: 16px; }
  .cl-look .fin:has(.fin__item:nth-child(3)) .fin__row { margin-top: 16px; padding-top: 12px; gap: 16px; }
  .cl-look .fin:has(.fin__item:nth-child(3)) .fin__list li.fin__item { padding: 7px 0; row-gap: 6px; }
  .cl-look .fin:has(.fin__item:nth-child(3)) .fin__sizes .sz span { height: 28px; }
}
.cl-look .fin__buy { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.cl-look .fin__total { font: 300 44px/1 var(--serif); font-variant-numeric: tabular-nums; }
.cl-look .cta { position: relative; min-width: 0; width: 100%; height: 62px; border: 0; background: var(--accent); color: var(--ink); cursor: pointer; overflow: hidden;
    font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; transition: transform .15s var(--ease); }
.cl-look .cta::after { content: ''; position: absolute; inset: 0; background: var(--paper); transform: translateY(101%); transition: transform .5s var(--ease); }
.cl-look .cta:hover::after { transform: none; }
.cl-look .cta span { position: relative; z-index: 1; }
.cl-look .cta:active { transform: scale(.985); }
.cl-look .cta[data-wait] { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); }
.cl-look .cta[data-wait]::after { display: none; }
.cl-look .cta:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
/* Gallery strip in each piece */
.cl-look .thumbs { display: flex; gap: 8px; }
.cl-look .thumb { position: relative; width: 58px; aspect-ratio: 3 / 4; padding: 0; border: 0; background: var(--ink-2); cursor: zoom-in; overflow: hidden;
    outline: 1px solid var(--faint); outline-offset: 0; transition: outline-color .3s var(--ease), transform .4s var(--ease); }
.cl-look .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease), opacity .3s var(--ease); opacity: .82; }
.cl-look .thumb:hover { outline-color: var(--paper); transform: translateY(-3px); }
.cl-look .thumb:hover img { transform: scale(1.08); opacity: 1; }
.cl-look .thumb:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
/* Lightbox: the tapped photo grows from its thumbnail */
.cl-look .lb { position: fixed; inset: 0; z-index: 120; }   /* temanın sabit üst çubuğu (.cu-ust, z 90) galerinin altında kalsın */
.cl-look .lb[hidden] { display: none; }
.cl-look .lb__bg { position: absolute; inset: 0; background: #0c0907; opacity: 0; }
.cl-look .lb__img { position: fixed; left: 0; top: 0; object-fit: cover; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; touch-action: pan-y; }
.cl-look .lb__img--next { opacity: 0; pointer-events: none; }
.cl-look .lb__top, .cl-look .lb__foot { position: absolute; left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; align-items: center; opacity: 0; }
.cl-look .lb__top { top: 0; height: 64px; }
.cl-look .lb__name { font: 300 20px/1 var(--serif); }
.cl-look .lb__x, .cl-look .lb__nav { border: 0; background: none; color: var(--paper); cursor: pointer; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 10px 0; }
.cl-look .lb__x:hover { color: var(--accent); }
.cl-look .lb__nav { position: absolute; top: 50%; transform: translateY(-50%); font: 300 34px/1 var(--serif); letter-spacing: 0; padding: 20px; opacity: 0; transition: color .25s var(--ease); }
.cl-look .lb__nav:hover { color: var(--accent); }
.cl-look .lb__nav--prev { left: calc(var(--pad) - 20px); }
.cl-look .lb__nav--next { right: calc(var(--pad) - 20px); }
.cl-look .lb__foot { bottom: 18px; gap: 24px; }
.cl-look .lb__cap { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.cl-look .lb__rail { display: flex; gap: 6px; }
.cl-look .lb__rail button { width: 36px; aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer; opacity: .45; outline: 1px solid transparent; transition: opacity .25s var(--ease), outline-color .25s var(--ease); }
.cl-look .lb__rail button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-look .lb__rail button[aria-current="true"] { opacity: 1; outline-color: var(--paper); }
.cl-look .lb__rail button:hover { opacity: 1; }
.cl-look .lb button:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
@media (max-width: 899px) {.cl-look .thumb { width: 52px; }
.cl-look .lb__nav { display: none; }
.cl-look .lb__foot { flex-direction: column; align-items: flex-start; gap: 10px; }
 }
.cl-look .toast { position: fixed; z-index: 40; left: 50%; bottom: 28px; transform: translate(-50%, calc(100% + 48px)); padding: 14px 22px; background: var(--paper); color: var(--ink);
    font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: transform .6s var(--ease); }
.cl-look .toast.on { transform: translate(-50%, 0); }
/* Readability scrim on phones */
.cl-look .scrim { position: fixed; inset: auto 0 0; height: 70vh; z-index: 5; pointer-events: none; background: linear-gradient(to top, rgb(18 13 10 / .88), rgb(18 13 10 / 0)); opacity: 0; }
@media (max-width: 899px) {.cl-look .scrim { opacity: 1; }
.cl-look .chap, .cl-look .chap--left, .cl-look .chap--right { left: var(--pad); right: var(--pad); width: auto; top: auto; bottom: clamp(24px, 5vh, 48px); justify-content: flex-end; }
.cl-look .chap__name { font-size: clamp(40px, 11vw, 56px); }
.cl-look .chap__line { font-size: 16px; }
.cl-look .fin { left: var(--pad); width: auto; align-content: end; padding-bottom: clamp(24px, 5vh, 48px); }
.cl-look .fin__parcalar { grid-auto-columns: minmax(0, min(78px, 9.5vh)); margin-top: 20px; }
.cl-look .fin:has(.fin__item:nth-child(3)) .fin__parcalar { grid-auto-columns: minmax(0, min(56px, 7vh)); margin-top: 16px; }
.cl-look .fin__buy { grid-template-columns: 1fr; }
.cl-look .cta { min-width: 0; width: 100%; }
.cl-look .call { display: none; }

  }
@media (prefers-reduced-motion: reduce) {.cl-look .title .ch, .cl-look .chap__name .ln > span { transform: none !important; }

  }


/* Tema içinde (1 Eki): sayfa zemini koyu, fiyat altı üstü çizili, flat lay küçüğü, bildirim. */
html.cl-look-sayfa, html.cl-look-sayfa body { background: #120d0a; }
.cl-look .fin__was { font: 400 14px/1 var(--sans); color: var(--soft); text-decoration: line-through; margin: -6px 0 14px; min-height: 14px; }
.cl-look .thumbs { display: inline-flex; gap: 8px; margin: 0 0 16px; text-decoration: none; }
/* parça küçüğü hayalet manken önü, kâğıtsız (6 Eki, Emre: "ürünler hayalet foto olmalı"; menüdeki pencereyle aynı dil): şeffaf PNG koyu
   zeminde; koyu giysi kaybolmasın diye arkasında çok hafif ışık havuzu, kenarında kıl kadar ince ışık */
.cl-look .thumb--flat { display: block; width: 92px; aspect-ratio: 3 / 5; background: radial-gradient(ellipse 62% 48% at 50% 52%, rgb(243 233 225 / .07), rgb(243 233 225 / .02) 60%, transparent 78%); }
.cl-look .thumb--flat img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 0 1px rgb(243 233 225 / .2)); }
.cl-look .toast.on { transform: translate(-50%, 0); }
.cl-look .sz input:disabled + span { opacity: .3; text-decoration: line-through; }

/* Tema içinde (2 Eki): film tuvali sabit (prototipte #gl kimliğiyle sabitti); kombin sayfasında temanın üst menüsü filmin üstünde,
   şeffaf ve krem yazıyla; duyuru şeridi yok. html:has(.cl-look) — JS beklemeden, beyaz menü bir an bile görünmez. */
.cl-look .cl-gl { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; z-index: 0; }
html:has(.cl-look) { background: #120d0a; }
html:has(.cl-look) body { background: #120d0a; }
html:has(.cl-look) [id*="__header_announcements"] { display: none; }
html:has(.cl-look) header.header-section { position: fixed !important; inset: 0 0 auto !important; }
html:has(.cl-look) #header-group, html:has(.cl-look) #header-group header, html:has(.cl-look) .header__underlay { background: transparent !important; }
html:has(.cl-look) #header-group, html:has(.cl-look) #header-group a, html:has(.cl-look) #header-group button, html:has(.cl-look) #header-group svg { color: #f3e9e1 !important; }
html:has(.cl-look) .header__row { background: linear-gradient(rgb(18 13 10 / .55), rgb(18 13 10 / 0)) !important; }

/* 2 Eki: uzun ürün adı (4 satır) üst menünün altına girmesin; alt bilgi kombin sayfasında koyu ve filmin üstünde. */
.cl-look .chap { padding-top: 76px; padding-bottom: 20px; }
.cl-look .chap__name { font-size: clamp(30px, 3.6vw, 58px); }
html:has(.cl-look) [id*="__footer"] { position: relative; z-index: 12; background: #120d0a; color: #f3e9e1; }
html:has(.cl-look) [id*="__footer"] a, html:has(.cl-look) [id*="__footer"] p, html:has(.cl-look) [id*="__footer"] h2, html:has(.cl-look) [id*="__footer"] svg { color: #f3e9e1 !important; }
html:has(.cl-look) [id*="__footer"] input { background: transparent !important; color: #f3e9e1 !important; border-color: rgb(243 233 225 / .35) !important; }
html:has(.cl-look) [id*="__footer"] * { background-color: transparent !important; }
html:has(.cl-look) [id*="__footer"] .email-signup__input-group { border: 1px solid rgb(243 233 225 / .35) !important; }
html:has(.cl-look) [id*="__footer"] * { color: #f3e9e1; border-color: rgb(243 233 225 / .2); }

/* Kombin sayfasında temanın alt bilgisi yok: sayfa SON bölümüyle biter (dev CENDRINO → sonraki look; yasal bağlantılar orada, 7 Eki). */
html:has(.cl-look) [id*="__footer"] { display: none !important; }
.cl-look .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* BÜYÜK HÂL (6 Eki, Emre: "hover ile büyütülmüş hâli güzel açılış kapanış efektleriyle"): kutusuz büyük hayalet, küçüğün yanında
   panelin kendi yazılarının üstünde (filmin üstüne taşmaz); açılırken maske alttan yumuşak kenarla süpürür, görsel hafifçe yükselir
   ve 1.06'dan yerine oturur (ana sayfa kartlarının ve menü penceresinin dili); kapanırken üstten dibe erir. Açıkken panelin öbür
   yazıları söner ki büyük görsel yazıların üstüne binmesin. 7 Eki: arkasındaki koyu duman ve ışık havuzu kalktı (Emre: "etrafındaki
   siyah smoke hale hale duruyor, smooth değil"; birkaç duraklı radyal geçiş koyu zeminde halka halka görünüyordu). Zemin yok; yazılar
   tamamen söner, görsel filmin karanlığının üstünde tek başına durur. */
.cl-look .thumbs { position: relative; justify-self: start; width: max-content; }   /* satın alma ızgarasında genişliğe yayılıyordu: büyük hâl filmin üstüne düşüyordu */
.cl-look .thumb.thumb--flat { outline: 0; overflow: visible; }
.cl-look .thumb.thumb--flat img { opacity: 1; }
.cl-look .thumbs:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.cl-look .thumb--flat img { transition: transform .8s var(--ease), filter .5s var(--ease); }
.cl-look .thumbs:hover .thumb--flat img { transform: scale(1.04); }
/* 6 Eki, Emre: 'biraz daha sağda ve daha büyük': panel ile film arasındaki boşlukta; sağdaki panelde ekrandan taşmasın diye kendi payıyla */
.cl-look .zoom { position: absolute; z-index: 40; left: calc(100% + clamp(40px, 5vw, 96px)); top: 50%; width: min(30vw, 420px, calc((100dvh - 150px) * .6)); aspect-ratio: 3 / 5;
  translate: 0 -50%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 50%, transparent 62%); mask-image: linear-gradient(to top, #000 0, #000 50%, transparent 62%);
  -webkit-mask-size: 100% 200%; mask-size: 100% 200%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 -24%; mask-position: 0 -24%;
  transform: translateY(18px) scale(.97); transform-origin: 50% 100%;
  transition: -webkit-mask-position .5s var(--ease), mask-position .5s var(--ease), transform .55s var(--ease); }
.cl-look .zoom img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 0 1px rgb(243 233 225 / .22)); transform: scale(1.06); transition: transform .6s var(--ease); }
.cl-look .thumbs:hover .zoom, .cl-look .thumbs:focus-visible .zoom { -webkit-mask-position: 0 100%; mask-position: 0 100%; transform: none;
  transition: -webkit-mask-position 1.1s var(--ease) .1s, mask-position 1.1s var(--ease) .1s, transform 1.2s var(--ease) .1s; }
.cl-look .thumbs:hover .zoom img, .cl-look .thumbs:focus-visible .zoom img { transform: none; transition: transform 2s var(--ease) .1s; }
.cl-look .chap :is(.chap__name, .price, .sizes, .add) { transition: opacity .4s var(--ease); }
.cl-look .chap__line { transition: color .4s var(--ease); }
.cl-look .chap:has(.thumbs:hover, .thumbs:focus-visible) :is(.chap__name, .price, .sizes, .add) { opacity: 0; transition: opacity .5s var(--ease) .08s; }
.cl-look .chap:has(.thumbs:hover, .thumbs:focus-visible) .chap__line { color: transparent; }
.cl-look .chap--right .zoom { left: calc(100% + 24px); width: min(28vw, 400px, calc((100dvh - 150px) * .6)); }
@media (hover: none) { .cl-look .zoom { display: none; } }

/* SON (7 Eki, Emre: "jenerik kısmını istemiyorum; Cendrino yazısı gelsin, ondan sonra full screen bir sonraki look'a geç ekranı;
   geçişleri inanılmaz iyi yap"). Uzun bölüm, içinde sabit tam ekran sahne: dev CENDRINO (tuval) → harflerin içinde sonraki look'un
   filmi → "I"nın içine zum → sonraki look tam ekran (gerçek video). Yazı açılıştaki başlığın dilinde, sonraki look'un kendi renginde.
   Bkz. sections/cendrino-look.liquid "SON", assets/cendrino-look.js "SON". */
.cl-look .son { position: relative; z-index: 10; }
.cl-look .son__sahne { position: relative; height: 360vh; }
.cl-look .son__pin { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
.cl-look .son__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform-origin: 50% 50%; }
.cl-look .son__harf { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* yazının arkasında alttan koyulaşan geçiş: duraklar yumuşak (bantlanmasın), yalnız ekran açıkken */
.cl-look .son__pin::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease);
  background: linear-gradient(to top, rgb(18 13 10 / .8) 0%, rgb(18 13 10 / .6) 18%, rgb(18 13 10 / .34) 38%, rgb(18 13 10 / .14) 56%, rgb(18 13 10 / .04) 70%, rgb(18 13 10 / 0) 82%),
              linear-gradient(to right, rgb(18 13 10 / .62) 0%, rgb(18 13 10 / .46) 22%, rgb(18 13 10 / .24) 42%, rgb(18 13 10 / .08) 58%, rgb(18 13 10 / 0) 72%); }
@media (max-width: 899px) { .cl-look .son__pin::after { background: linear-gradient(to top, rgb(18 13 10 / .86) 0%, rgb(18 13 10 / .7) 24%, rgb(18 13 10 / .42) 46%, rgb(18 13 10 / .16) 64%, rgb(18 13 10 / 0) 80%); } }
.cl-look .son.acik .son__pin::after { opacity: 1; }
.cl-look .son__git { position: absolute; z-index: 3; left: var(--pad); bottom: clamp(76px, 13vh, 150px); max-width: min(820px, 72vw); display: grid; justify-items: start;
  color: var(--paper); text-decoration: none; }
/* ekran açılmadan bağlantı tıklanmaz, odak almaz; kapanırken yazılar sönene dek görünür kalır */
.cl-look .son__git { visibility: hidden; transition: visibility 0s linear .45s; }
.cl-look .son.acik .son__git { visibility: visible; transition: visibility 0s; }
.cl-look .son__kick, .cl-look .son__ad1, .cl-look .son__ad2, .cl-look .son__intro, .cl-look .son__cta { visibility: hidden; }   /* JS: ekran açılınca gelir */
.cl-look .son__kick { font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
.cl-look .son__ad { font: 300 clamp(56px, 8.2vw, 156px)/.92 var(--serif); letter-spacing: -.03em; }
.cl-look .son__ad1, .cl-look .son__ad2 { display: inline-block; }
.cl-look .son__ad2 { font-style: italic; color: var(--accent); }
.cl-look .son__intro { margin: 24px 0 0; max-width: 34ch; font: 300 clamp(17px, 1.4vw, 21px)/1.45 var(--serif); color: var(--soft); }
.cl-look .son__cta { margin-top: 30px; display: inline-flex; align-items: center; gap: 14px; font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.cl-look .son__cta::before { content: ''; width: 36px; height: 1px; background: currentColor; transition: width .5s var(--ease); }
.cl-look .son__git:hover .son__cta::before, .cl-look .son__git:focus-visible .son__cta::before { width: 72px; }
.cl-look .son__git:focus-visible { outline: 1px solid var(--accent); outline-offset: 10px; }
  font: 500 9.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgb(243 233 225 / .45); }
@media (max-width: 899px) {
  .cl-look .son__git { right: var(--pad); bottom: 96px; max-width: none; }
  .cl-look .son__ad { font-size: clamp(44px, 12.5vw, 72px); }
}
/* Sonraki look'a geçerken tarayıcı iki sayfayı yumuşakça birleştirir (destekleyen tarayıcılarda; iki taraf da look sayfası). */
@view-transition { navigation: auto; }

/* FOTOĞRAF ŞABLONU (7 Eki; sections/cendrino-look.liquid "İKİ ŞABLON", assets/cendrino-look.js "FOTOĞRAF ŞABLONU", "GALERİ").
   Sahne filmin yerine look'un fotoğrafları; açılışta bütün fotoğraflara giden ince bağlantı, sahnedeki fotoğrafın üstünde büyüteç,
   galeri şeridi 9:16 küçük kareler. */
.cl-look .open__foto { margin-top: 26px; padding: 0; border: 0; background: none; color: var(--paper); cursor: pointer; display: inline-flex; align-items: center; gap: 14px;
  font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.cl-look .open__foto::before { content: ''; width: 36px; height: 1px; background: currentColor; transition: width .5s var(--ease); }
.cl-look .open__foto:hover::before, .cl-look .open__foto:focus-visible::before { width: 64px; }
.cl-look .open__foto:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
.cl-look.foto-imlec main { cursor: zoom-in; }
.cl-look .lb__rail { max-width: min(100%, 720px); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.cl-look .lb__rail::-webkit-scrollbar { display: none; }
.cl-look .lb__rail button { flex: none; width: 30px; aspect-ratio: 9 / 16; }
.cl-look .lb__img { object-fit: cover; }
/* Finalde bütün fotoğraflar oklarla (7 Eki): karenin iki yanında ince oklar, altında sayaç; yerleri JS'ten (--fx/--fy/--fw/--fh = sahnedeki
   kare). Final açılınca (.fin-acik) yazılardan biraz sonra gelir. Telefonda kare tam ekran: oklar kenarda, panelin üstünde. */
.cl-look .fin__galeri { position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s linear .5s; }
.cl-look .sc--final.fin-acik .fin__galeri { opacity: 1; visibility: visible; transition: opacity .9s var(--ease) .45s, visibility 0s; }
.cl-look .sc--final .pin { touch-action: pan-y; }
.cl-look .fin__ok { position: absolute; top: calc(var(--fy, 0px) + var(--fh, 100dvh) / 2); translate: 0 -50%; pointer-events: auto; padding: 18px; border: 0; background: none;
  color: var(--paper); cursor: pointer; font: 300 34px/1 var(--serif); transition: color .25s var(--ease), transform .45s var(--ease); }
.cl-look .fin__ok--geri { left: calc(var(--fx, 0px) - 66px); }
.cl-look .fin__ok--ileri { left: calc(var(--fx, 0px) + var(--fw, 0px) + 4px); }
.cl-look .fin__ok:hover { color: var(--accent); }
.cl-look .fin__ok--geri:hover { transform: translateX(-4px); }
.cl-look .fin__ok--ileri:hover { transform: translateX(4px); }
.cl-look .fin__ok:focus-visible { outline: 1px solid var(--accent); outline-offset: -6px; }
.cl-look .fin__sayac { position: absolute; left: var(--fx, 0px); width: var(--fw, 0px); top: calc(var(--fy, 0px) + var(--fh, 100dvh) - 44px); margin: 0; text-align: center;
  font: 500 10px/1 var(--sans); letter-spacing: .26em; color: rgb(243 233 225 / .85); text-shadow: 0 1px 10px rgb(18 13 10 / .6); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  /* telefonda oklar sayacın iki yanında (7 Eki): 30vh'de iki satıra kırılan "Wear the whole look" başlığının hemen altına sıkışıyordu.
     Sayaç 84 px'te 10 px yazı → orta çizgisi ~89 px; ok kutusu (26 px + 2×14 dolgu) bu çizgiye ortalanır, sayacın iki yanından 104 px. */
  .cl-look .fin__ok { top: 89px; padding: 14px; font-size: 26px; text-shadow: 0 1px 12px rgb(18 13 10 / .55); }
  .cl-look .fin__ok--geri { left: calc(50% - 104px); }
  .cl-look .fin__ok--ileri { left: auto; right: calc(50% - 104px); }
  .cl-look .fin__sayac { left: 0; width: 100%; top: 84px; }
}

/* KAYDIRMA HİSSİ · TELEFON (7 Eki, Emre: "anasayfadaki gibi bir hissiyat istiyorum"): ana sayfanın ritmi — sahneler kısa (parça 3,2 →
   2 ekran), sabit katmanlar svh ile (adres çubuğu açılıp kapanınca boy değiştirip zıplamaz). Davranış tarafı: cendrino-look.js. */
@media (max-width: 899px) {
  .cl-look .pin, .cl-look .son__pin { height: 100svh; }
  .cl-look .sc--open { height: 160svh; }
  .cl-look .sc--piece { height: 200svh; }
  .cl-look .sc--final { height: 200svh; margin-top: -100svh; }
  .cl-look .son__sahne { height: 260svh; }
}