/* =====================================================================
   KREVA STUDIO — TEST KATMANI (styles.css'in üzerine yüklenir)
   1 Tipografi  2 Renk ve yüzey  3 Yerleşim  4 Durumlar ve erişilebilirlik
   5 Hareket sistemi
   ===================================================================== */

/* ---------- 1. Tipografi ---------- */
:root {
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* hareket belirteçleri */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .18s;
  --t-mid: .45s;
  --t-slow: .9s;
}
body { font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; }
.mono { font-size: .6875rem; font-weight: 500; letter-spacing: .07em; }
.display, .h2, .h3, .cat-meta h3, .card-meta h3, .steps h3 { text-wrap: balance; }
.lede, .body, .desc, .steps p, .ftr-note, .notice { text-wrap: pretty; }
.display { letter-spacing: -.032em; }
.h2 { letter-spacing: -.026em; }
.lede { max-width: 44ch; }
.price, .cart-n, .qty output, .line-price, .sum, .card-meta .mono, #count, .chip .n, .stage-top { font-variant-numeric: tabular-nums; }
.btn { font-weight: 500; letter-spacing: -.01em; }
.nav > a, .nav-item > a { font-weight: 450; }

/* Satırlara bölünmüş başlıklar (hareket olmasa da satır yapısı korunur) */
.ln { display: block; overflow: hidden; overflow: clip; padding: 0 .08em .12em 0; margin-bottom: -.12em; }
.ln-in { display: inline-block; }

/* ---------- 3. Yerleşim ---------- */
/* Geniş ekranlarda içerik 1440 px'te toplanır, zeminler tam genişlikte kalır */
:root { --pad: max(clamp(1rem, 4vw, 3rem), calc((100vw - 1440px) / 2)); }

/* Kategoriler: üç eşit sütun yerine asimetrik düzen */
.cats { grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: clamp(.75rem, 1.5vw, 1.25rem) clamp(1rem, 2vw, 1.75rem); }
.cat { display: flex; flex-direction: column; min-width: 0; }
.cat:first-child { grid-row: 1 / span 2; }
.cat:first-child .ph { aspect-ratio: 4 / 5; }
.cat:not(:first-child) .ph { aspect-ratio: auto; flex: 1; min-height: 13rem; }
.cat-meta { padding: 1rem 0 .25rem; }
@media (max-width: 760px) {
  .cats { grid-template-columns: 1fr; grid-template-rows: none; }
  .cat:first-child { grid-row: auto; }
  .cat:not(:first-child) .ph { aspect-ratio: 16 / 11; flex: none; min-height: 0; }
}

/* Optik dikey ritim: alt boşluk biraz daha geniş */
.section { padding-top: clamp(4.5rem, 9vw, 8rem); padding-bottom: clamp(5.5rem, 11vw, 10rem); }
.rail-section { padding-left: 0; padding-right: 0; }

/* Yarıçap hiyerarşisi: kapsayıcılar yumuşak, içteki öğeler daha sıkı */
:root { --r: 16px; }
.thumb, .thumb .ph, .line-img { border-radius: 8px; }
.field input, .field textarea, .field select { border-radius: 10px; }

/* Süreç adımları: üst çizgi bir sözde öğeye taşındı (çizilerek gelir) */
.steps li { border-top: 0; }
.steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--navy); transform-origin: left center; }

/* ---------- 4. Durumlar ve erişilebilirlik ---------- */
.skip { position: fixed; top: .75rem; left: .75rem; z-index: 100; padding: .75rem 1.125rem; border-radius: 999px; background: var(--navy); color: var(--ice); font-size: .9375rem; transform: translateY(-160%); transition: transform var(--t-mid) var(--ease-out); }
.skip:focus-visible { transform: none; outline-color: var(--green); }
a, button, .chip, .thumb { touch-action: manipulation; }
html { scroll-padding-top: calc(var(--hdr) + 1rem); }

/* Bağlantı oku: üzerine gelince küçük bir itme */
.link-arrow { display: inline-flex; align-items: center; gap: .25rem; }
.link-arrow:hover { color: var(--blue); }

/* Vitrin: otomatik geçiş için durdur düğmesi */
.stage-pause { flex: none; display: grid; place-items: center; width: 3rem; min-height: 3rem; padding: 0; border: 0; border-left: 1px solid rgba(237, 241, 255, .1); background: none; color: #8C9BD0; cursor: pointer; transition: color .2s, background .2s; }
.stage-pause svg { width: 14px; height: 14px; fill: currentColor; }
.stage-pause:hover { color: var(--ice); background: rgba(237, 241, 255, .05); }
.stage-pause:active svg { transform: scale(.88); }
.stage.paused .stage-tab.on::after, .stage.offscreen .stage-tab.on::after, .stage.hidden-tab .stage-tab.on::after { animation-play-state: paused; }

/* Test sürümü etiketi */
.test-pill { position: fixed; left: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem; border-radius: 999px; background: var(--navy); color: var(--ice); font-family: var(--mono); font-size: .625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 10px 30px -10px rgba(10, 22, 54, .6); }
.test-pill i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); }
.test-pill:hover { background: var(--blue); }

/* ---------- 5. Hareket sistemi ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* 5.1 Açılış koreografisi (nadir olay: ifadeli olabilir) */
  html.js .hero .ln-in, html.js .page-head .ln-in, html.js .thanks .ln-in { transform: translateY(108%); }
  html.js.intro-go .hero .ln-in, html.js.intro-go .page-head .ln-in, html.js.intro-go .thanks .ln-in {
    transform: none;
    transition: transform 1.1s var(--ease-out) calc(.12s + var(--l, 0) * .09s);
  }
  html.js .hero .idx, html.js .hero .lede, html.js .hero .hero-cta,
  html.js .page-head .idx, html.js .thanks .lede, html.js .thanks .hero-cta, html.js .filters {
    opacity: 0; transform: translateY(10px); filter: blur(6px);
  }
  html.js.intro-go .hero .idx, html.js.intro-go .page-head .idx { opacity: 1; transform: none; filter: none; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), filter .7s var(--ease-out); }
  html.js.intro-go .hero .lede, html.js.intro-go .thanks .lede { opacity: 1; transform: none; filter: none; transition: opacity .8s var(--ease-out) .42s, transform 1s var(--ease-out) .42s, filter .8s var(--ease-out) .42s; }
  html.js.intro-go .hero .hero-cta, html.js.intro-go .thanks .hero-cta { opacity: 1; transform: none; filter: none; transition: opacity .8s var(--ease-out) .56s, transform 1s var(--ease-out) .56s, filter .8s var(--ease-out) .56s; }
  html.js.intro-go .filters { opacity: 1; transform: none; filter: none; transition: opacity .6s var(--ease-out) .35s, transform .8s var(--ease-out) .35s, filter .6s var(--ease-out) .35s; }
  html.js .hero .stage { opacity: 0; transform: translateY(24px) scale(.97); filter: blur(10px); }
  html.js.intro-go .hero .stage { opacity: 1; transform: none; filter: none; transition: opacity 1s var(--ease-out) .25s, transform 1.3s var(--ease-out) .25s, filter 1s var(--ease-out) .25s; }

  /* 5.2 Kaydırınca gelenler: opaklık + 14px yükselme + bulanıktan netleşme */
  html.js .reveal { opacity: 0; transform: translateY(14px); filter: blur(5px); transition: opacity .8s var(--ease-out) var(--d, 0s), transform 1s var(--ease-out) var(--d, 0s), filter .8s var(--ease-out) var(--d, 0s); }
  html.js .reveal.in { opacity: 1; transform: none; filter: none; }

  /* Görsel kutuları içten açılır (clip-path), içerik hafifçe yerine oturur */
  html.js .reveal .ph, html.js .feature > a .ph { clip-path: inset(6% 6% 6% 6% round var(--r)); transition: clip-path 1.2s var(--ease-out) var(--d, 0s), transform .25s var(--ease); }
  html.js .reveal.in .ph, html.js .feature > a.in .ph { clip-path: inset(0 0 0 0 round var(--r)); }
  html.js .reveal .ph > svg, html.js .reveal .ph > img { scale: 1.08; transition: scale 1.4s var(--ease-out) var(--d, 0s), transform .7s var(--ease); }
  html.js .reveal.in .ph > svg, html.js .reveal.in .ph > img { scale: 1; }

  /* Bölüm başlıkları: satır maskesinden yükselir */
  html.js .mask .ln-in { transform: translateY(108%); transition: transform 1s var(--ease-out) calc(var(--l, 0) * .08s); }
  html.js .mask.in .ln-in { transform: none; }

  /* Süreç: çizgi soldan çizilir, nokta yerine oturur */
  html.js .steps li::before { transform: scaleX(0); transition: transform 1.2s var(--ease-io) var(--d, 0s); }
  html.js .steps li.in::before { transform: scaleX(1); }
  html.js .steps .dot { transform: scale(.4); opacity: 0; transition: transform .6s var(--ease-out) calc(var(--d, 0s) + .25s), opacity .3s calc(var(--d, 0s) + .25s); }
  html.js .steps li.in .dot { transform: none; opacity: 1; }

  /* Alt bilgi: dev "kreva" harf harf yükselir (yalnızca bir kez, sayfanın sonunda) */
  .ftr-big span { display: inline-block; }
  html.js .ftr-big.mask span { opacity: 0; transform: translateY(38%) rotate(4deg); transform-origin: left bottom; transition: opacity .9s var(--ease-out) calc(var(--i) * 70ms), transform 1.3s var(--ease-out) calc(var(--i) * 70ms); }
  html.js .ftr-big.mask.in span { opacity: 1; transform: none; }

  /* 5.3 Vitrin geçişi: giren netleşerek gelir, çıkan daha sessiz ayrılır */
  .stage-slide { opacity: 0; filter: blur(8px); transform: scale(1.025); transition: opacity .35s var(--ease-in), filter .35s var(--ease-in), transform .6s var(--ease-in); }
  .stage-slide.on { opacity: 1; filter: none; transform: none; transition: opacity .7s var(--ease-out) .12s, filter .7s var(--ease-out) .12s, transform 1.1s var(--ease-out) .12s; }

  /* 5.4 Üzerine gelme: fotoğraflar çok az yaklaşır, oklar ilerler */
  a:hover .ph.has-img img { transform: scale(1.035); }
  .ph.has-img img { transition: transform 1s var(--ease-out); }
  .link-arrow, .btn { transition: background .25s, color .25s, border-color .25s, transform .2s var(--ease-out), letter-spacing .3s var(--ease-out); }
  .rail-btn:hover svg { transform: translateX(var(--nudge, 0)); }
  .rail-btn[data-dir="1"] { --nudge: 2px; }
  .rail-btn[data-dir="-1"] { --nudge: -2px; }
  .rail-btn svg { transition: transform .25s var(--ease-out); }

  /* Menü alt çizgisi soldan büyür */
  .nav > a::before, .nav-item > a::before { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px; border-radius: 2px; background: currentColor; opacity: .35; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
  .nav > a:hover::before, .nav-item > a:hover::before { transform: scaleX(1); }
  .nav > a.active::before, .nav-item > a.active::before { display: none; }

  /* 5.5 Sepet çekmecesi: açılırken satırlar sırayla gelir (güncellemelerde değil) */
  .drawer { transition: transform .55s var(--ease-out), visibility 0s .55s; }
  .drawer.open { transition: transform .55s var(--ease-out), visibility 0s; }
  .drawer.entering .line, .drawer.entering .drawer-empty { animation: line-in .6s var(--ease-out) backwards; animation-delay: calc(.12s + var(--i, 0) * 55ms); }
  @keyframes line-in { from { opacity: 0; transform: translateX(18px); filter: blur(4px); } }

  /* 5.6 Sayfalar arası geçiş (destekleyen tarayıcılarda): kısa çapraz geçiş, başlık sabit */
  @view-transition { navigation: auto; }
  .hdr { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: vt-out .22s var(--ease-in) both; }
  ::view-transition-new(root) { animation: vt-in .42s var(--ease-out) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
}

/* Mobilde menü bağlantı çizgisi yok; sık kullanılan öğeler sade kalır */
@media (max-width: 900px) { .nav > a::before, .nav-item > a::before { display: none; } }

/* Azaltılmış hareket: yalnızca kısa opaklık geçişleri, gizli başlangıç durumu yok */
@media (prefers-reduced-motion: reduce) {
  .stage-slide { filter: none; }
  .ftr-big span { display: inline; }
}

/* Vitrin sekmeleri: tek satırda kalır, dar ekranda sıkılaşır */
.stage-tab { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) {
  .stage-tab { padding: 0 .625rem; letter-spacing: .04em; }
  .stage-pause { width: 2.75rem; }
}
/* Stokta olan parçalar yeşil etiketle */
.st-instock { color: var(--green-tx); }

/* Vitrin durdur/başlat: artık yalnızca düğme (ve ekran dışı/gizli sekme) duraklatır.
   Üzerine gelmek ya da düğmeye odaklanmak geçişi kilitlemez. */
.stage:hover .stage-tab.on::after, .stage:focus-within .stage-tab.on::after { animation-play-state: running; }
.stage.paused .stage-tab.on::after, .stage.offscreen .stage-tab.on::after, .stage.hidden-tab .stage-tab.on::after { animation-play-state: paused; }

/* İletişim formu durumları */
.form-status a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.form.sent .form-status { color: var(--green-tx); font-weight: 500; }
.form .btn:disabled { opacity: .6; }

/* Sepet: masaüstünde yazı, mobilde simge (yazı ekran okuyucuda kalır) */
.cart-ic { display: none; width: 20px; height: 20px; }
@media (max-width: 900px) {
  .cart { min-width: 44px; justify-content: center; gap: .25rem; }
  .cart > span:first-child { display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cart-ic { display: block; color: var(--navy); }
}

/* Mobil satın alma çubuğu */
.buybar { display: none; }
@media (max-width: 900px) {
  .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem var(--pad) calc(.75rem + env(safe-area-inset-bottom)); background: rgba(237, 241, 255, .92); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: 0 -1px 0 var(--line), 0 -12px 30px -18px rgba(10, 22, 54, .35); transform: translateY(110%); transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
  .buybar.on { transform: none; }
  .buybar-info { display: grid; min-width: 0; }
  .buybar-name { font-family: var(--serif); font-size: 1.25rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buybar-price { color: var(--mute); font-size: .875rem; font-variant-numeric: tabular-nums; }
  .buybar .btn { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .buybar { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .buybar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }