/* Quiet motion: scroll reveal on the home sections, image shimmer while a photo loads, and a navigation loader.
   Every hidden state is added by kpt-motion.js only, so without JS (or with reduced motion) nothing is hidden. */

/* Scroll reveal: the section rises (no scroll container inside it moves), its cards fade in one after another.
   `translate` is used instead of `transform` so card/hover transforms are never overridden. */
html.kpt-motion .kpt-rv-sec { opacity: 0; translate: 0 24px; }
html.kpt-motion .kpt-rv { opacity: 0; }
html.kpt-motion .kpt-rv-sec.kpt-rv-in { opacity: 1; translate: 0 0; transition: opacity .8s cubic-bezier(.2,.7,.2,1), translate .8s cubic-bezier(.2,.7,.2,1); }
html.kpt-motion .kpt-rv.kpt-rv-in { opacity: 1; transition: opacity .6s ease-out; transition-delay: calc(120ms + var(--kpt-rv-i, 0) * 80ms); }

/* Photo placeholder: a soft sweep until the image has arrived (slow connections only ever see it). */
html.kpt-motion .kpt-img-wait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%) -150% 0 / 60% 100% no-repeat;
  animation: kpt-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes kpt-shimmer { to { background-position: 250% 0; } }

/* Arrival loader: this stylesheet is in <head>, so a slow page shows the bar while it is still arriving
   (before any script runs). Fast loads finish before the 400 ms delay and never see it; kpt-motion.js
   removes it at `load` (bar) and DOMContentLoaded (pill); without JS it fades out on its own. */
html:not(.kpt-ready)::before {
  content: "";
  position: fixed; top: 0; left: 0; z-index: 2147483000;
  width: 100%; height: 3px; background: #f6e7c8; box-shadow: 0 0 6px rgba(246,231,200,.7);
  transform-origin: 0 50%; pointer-events: none;
  animation: kpt-arrive 14s linear .4s both;
}
html:not(.kpt-dom)::after {
  content: "Yükleniyor…";
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 2147483000;
  padding: 15px 22px; border-radius: 999px; background: #1a1a1a; color: #fff;
  font: 700 13px/1 Manrope, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.18);
  translate: -50% 0; pointer-events: none;
  animation: kpt-arrive-pill 20s linear 2.5s both;
}
@keyframes kpt-arrive { 0% { transform: scaleX(0); opacity: 1; } 6% { transform: scaleX(.35); } 30% { transform: scaleX(.65); } 90% { transform: scaleX(.9); opacity: 1; } 100% { transform: scaleX(.9); opacity: 0; } }
@keyframes kpt-arrive-pill { 0% { opacity: 0; } 2% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }

/* Navigation loader: thin accent bar at the top, then a pill if the wait gets long. */
.kpt-loadbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  width: 100%;
  height: 3px;
  background: #f6e7c8;
  box-shadow: 0 0 6px rgba(246,231,200,.7);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
}
.kpt-loadbar.is-active { opacity: 1; transform: scaleX(.85); transition: transform 6s cubic-bezier(.05,.8,.2,1), opacity .2s; }
.kpt-loadbar.is-done { opacity: 0; transform: scaleX(1); transition: transform .25s ease-out, opacity .3s .2s; }

.kpt-loadpill {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff;
  font: 700 13px/1 Manrope, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0;
  translate: -50% 12px;
  transition: opacity .25s, translate .25s;
  pointer-events: none;
}
.kpt-loadpill.is-active { opacity: 1; translate: -50% 0; }
.kpt-loadpill::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: kpt-spin .8s linear infinite;
}
@keyframes kpt-spin { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  html.kpt-motion :is(.kpt-rv, .kpt-rv-sec) { opacity: 1; translate: none; }
  html.kpt-motion .kpt-img-wait::before { animation: none; }
  .kpt-loadbar.is-active { transition: opacity .2s; }
  html:not(.kpt-ready)::before { animation-duration: .01s; animation-delay: 1s; transform: scaleX(.9); }
  .kpt-loadpill::before { animation-duration: 2s; }
}