/* =====================================================================
   R0 prototip 3/3 · "Gülümse!" açılışı
   Dev başlık + beyaz çerçeveli baskıda oynayan seri çekim + kırmızı halka.
   GSAP'in animasyonladığı öğelerde (başlık harfleri, ünlem, baskı, eğim kabı,
   çevre baskıları) CSS translate/rotate/scale KULLANILMAZ — GSAP onları kendi
   dönüşümüne katıp sıfırlar. İmleç paralaksı ayrı iç katmanlarda (CSS değişkeni).
   JS yoksa son kare + çizili halka + son slogan sözcüğü görünür.
   ===================================================================== */

.smile {
  position: relative; overflow: hidden;
  min-height: calc(100svh - var(--header-h));
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding: clamp(24px, 4vw, 56px) var(--gutter) 72px;
  background: var(--bg); color: var(--fg);
}

/* ---- Başlık + slogan ---- */
/* --sy = sayfa kaydırması (smile.js): yazı yavaş iner, çevre baskıları hızlı kalkar → derinlik */
.smile__copy { position: relative; z-index: 3; translate: calc(var(--mx, 0) * -.25px) calc(var(--my, 0) * -.25px + var(--sy, 0) * .22px); }
.smile__title {
  margin: 0; display: flex; align-items: baseline; white-space: nowrap;
  font-family: var(--f-display); font-weight: 400; font-stretch: 62.5%;
  font-size: clamp(4.6rem, 15.5vw, 15.5rem); line-height: .86; letter-spacing: -.03em;
}
.smile__word { display: inline-block; overflow: hidden; padding: .06em .02em .12em; margin-bottom: -.12em; }
.smile__word .ch { display: inline-block; will-change: transform; }
.smile__bang { display: inline-block; color: var(--loop); transform-origin: 50% 100%; will-change: transform; }
.smile__lead { margin: 22px 0 0; max-width: 30ch; font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.4; }
.smile__rot { position: relative; display: inline-grid; vertical-align: bottom; overflow: hidden; color: var(--loop); font-family: var(--f-display); font-style: italic; font-size: 1.12em; line-height: 1.25; }
.smile__w { grid-area: 1 / 1; white-space: nowrap; }
.smile__w:not(.is-on) { opacity: 0; }
.smile__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---- Seri çekim baskısı ---- */
.smile__shot { position: relative; z-index: 2; margin: 0; justify-self: center; width: min(100%, 430px); display: grid; gap: 16px; will-change: transform; }
.smile__tilt { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.smile__tilt:focus-visible { outline: 2px solid var(--loop); outline-offset: 8px; }
.smile__paper--big { transition: box-shadow var(--d-base) var(--e-settle); }
.smile__tilt:hover .smile__paper--big { box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 40px 90px rgba(30,18,10,.34); }
/* İpucu: ilk seri bitince belirir; kırmızı kayıt noktası yanıp söner */
.smile__hint { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transition: opacity .8s var(--e-settle); }
.smile__hint.is-shown { opacity: 1; }
.smile__hint-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--loop); animation: smile-rec 1.6s ease-in-out infinite; }
@keyframes smile-rec { 50% { opacity: .25; } }
.motion-reduced .smile__hint-dot { animation: none; }
.smile__paper { position: relative; background: #FFFFFF; padding: 4%; box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 18px 44px rgba(30,18,10,.2); }
.smile__paper--big { padding: 3.4% 3.4% 14%; box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 30px 70px rgba(30,18,10,.28); }
.smile__frames { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #DCD6CC; }
.smile__frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.smile__frames img.is-final, .smile__frames img.is-on { opacity: 1; }
.smile.is-soft .smile__frames img { transition: opacity .22s linear; }   /* sade hareket: yerinde geçiş */
.smile__frames img { will-change: transform; transform-origin: 50% 40%; }
.smile__flash { position: absolute; inset: 0; background: #FFFFFF; opacity: 0; pointer-events: none; }
.smile__ring { position: absolute; left: -15%; top: -10%; width: 130%; height: 120%; overflow: visible; pointer-events: none; }
/* Çizim (dasharray/dashoffset) JS'te ekran pikseliyle ölçülür: non-scaling-stroke + pathLength
   birlikte Chrome'da kesik çizer. JS yokken halka tam ve kesintisiz görünür. */
.smile__ring path { fill: none; stroke: var(--loop); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.smile__cap { display: flex; justify-content: center; gap: 8px; color: var(--muted); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.smile__cap [data-smile-counter] { font-variant-numeric: tabular-nums; color: var(--fg); }

/* ---- Çevredeki eğik baskılar (dış kap GSAP; iç kap paralaks) ---- */
.smile__around { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.smile__print { position: absolute; margin: 0; will-change: transform; }
.smile__depth { translate: calc(var(--mx, 0) * var(--d, .5) * 1px) calc((var(--my, 0) - var(--sy, 0) * .6) * var(--d, .5) * 1px); }
.smile__print .smile__paper { padding: 5%; }
.smile__print img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.smile__print--0 { left: 2%;  top: 70%; width: clamp(80px, 8.5vw, 150px); --d: .9; }
.smile__print--1 { left: 41%; top: 5%;  width: clamp(64px, 6.2vw, 112px); --d: .45; }
.smile__print--2 { right: 3%; top: 6%;  width: clamp(76px, 8vw, 140px);   --d: .7; }
.smile__print--3 { right: 2%; top: 64%; width: clamp(84px, 9vw, 160px);   --d: 1.1; }
.smile__print--4 { left: 50%; top: 80%; width: clamp(60px, 6.6vw, 118px); --d: .55; }
.smile__print--5 { left: 4%;  top: 6%;  width: clamp(58px, 5.8vw, 104px); --d: .35; }


@media (max-width: 800px) {
  .smile { grid-template-columns: 1fr; align-content: start; gap: 28px; padding-bottom: 32px; }
  .smile__title { font-size: 24vw; }
  .smile__lead { margin-top: 14px; }
  .smile__cta { margin-top: 20px; }
  .smile__shot { width: min(64vw, 340px); }
  .smile__print--1, .smile__print--2, .smile__print--3, .smile__print--4, .smile__print--5 { display: none; }
  .smile__print--0 { left: auto; right: 3%; top: 54%; }
}