/* ==========================================================================
   KNT Yapı Mimarlık — preloader.css
   Açılış yükleyici — "önce çiz, sonra inşa et"
   Pergel kemeri çizer, pafta belirir; kat blokları düşüp esneyerek oturur,
   çatı kapanır, bayrak çıkar. Logo zıplayarak gelir, baret şerit metrede hoplar.
   ========================================================================== */
.preloader__inner { width: min(440px, 84vw); }
.pl-scene { position: relative; width: 86%; margin: 0 auto 30px; aspect-ratio: 300 / 170; transition: transform .8s cubic-bezier(.3, 1.5, .5, 1); }
.pl-plan { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; color: var(--on-dark-mute); stroke: currentColor; stroke-width: 1; }
.pl-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: plDraw .9s var(--ease-io) forwards; animation-delay: var(--dd, .1s); }
.pl-ground { stroke: var(--on-dark-soft); stroke-width: 1.6; animation-delay: .05s; }
.pl-dash { stroke-dasharray: 4 5; opacity: 0; animation: plFade .6s ease .35s forwards; }
.pl-dim { stroke: var(--brand); stroke-width: 1; }
.pl-dim-t { font: 600 8px/1 var(--font-display); letter-spacing: .06em; fill: var(--brand); stroke: none; opacity: 0; animation: plFade .5s ease .95s forwards; }
.pl-arch { stroke: var(--brand); stroke-width: 1.8; animation-duration: .85s; animation-delay: .2s; animation-timing-function: linear; }
.pl-jamb { stroke: var(--brand); stroke-width: 1.8; }
.pl-compass { stroke: var(--on-dark); transform-box: fill-box; transform-origin: 100% 50%; animation: plCompass .85s linear .2s both; }
.pl-compass circle { fill: var(--brand); stroke: none; }
.pl-plan g > circle { fill: var(--on-dark); stroke: none; }

.pl-crane { stroke: var(--on-dark-soft); stroke-width: 1; opacity: 0; transform-box: view-box; transform-origin: 266px 156px; animation: plRise .9s cubic-bezier(.3, 1.5, .5, 1) .15s forwards; }
.pl-hook-move { stroke: var(--on-dark-soft); transform-box: view-box; transform-origin: 175px 22px; opacity: 0; animation: plFade .4s ease .8s forwards, plSwing 1.7s ease-in-out 1s infinite alternate; }
.pl-hook { animation: plBob .8s ease-in-out infinite alternate; }
.pl-load { fill: var(--brand); stroke: none; }

.pl-build { position: absolute; inset: 0; }
.pl-build > i {
  position: absolute; left: calc(36% + var(--c) * 13%); bottom: calc(8.2% + var(--r) * 17.4%); width: 12%; height: 15.9%;
  border-radius: 3px; background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22);
  opacity: 0; transform-origin: 50% 100%;
  animation: plDrop .75s linear forwards; animation-delay: calc(.35s + var(--k) * .085s);
}
.pl-build > i::after { content: ""; position: absolute; left: 30%; right: 30%; top: 24%; bottom: 32%; border-radius: 1px; background: rgba(10, 12, 11, .55); }
.pl-roof {
  position: absolute; left: 34.5%; width: 41%; bottom: 77.8%; height: 3.6%; border-radius: 2px;
  background: var(--on-dark); opacity: 0; transform-origin: 50% 100%; animation: plDrop .75s linear 1.45s forwards;
}
.pl-flag { position: absolute; left: 54.5%; bottom: 81.4%; width: 2px; height: 15%; background: var(--on-dark-soft); transform-origin: 50% 100%; transform: scaleY(0); animation: plPole .5s cubic-bezier(.3, 1.6, .5, 1) 1.9s forwards; }
.pl-flag i { position: absolute; left: 2px; top: 0; display: block; width: 20px; height: 13px; background: var(--brand); clip-path: polygon(0 0, 100% 50%, 0 100%); transform-origin: 0 50%; scale: 0; animation: plFlagIn .45s cubic-bezier(.3, 1.8, .5, 1) 2.15s forwards, plWave .45s ease-in-out 2.6s infinite alternate; }

/* Logo: parçalar düşer, ezilir, zıplar */
.preloader__logo { width: 62%; margin: 0 auto; }
.preloader__logo path {
  fill-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0;
  transform-box: fill-box; transform-origin: 50% 100%; animation: plLogo .9s linear forwards; animation-delay: .25s;
}
.preloader__logo path:nth-child(2) { animation-delay: .32s; }
.preloader__logo path:nth-child(3) { animation-delay: .39s; }
.preloader__logo path:nth-child(4) { animation-delay: .46s; }
.preloader__logo path:nth-child(5) { animation-delay: .53s; }
.preloader__logo path:nth-child(6) { animation-delay: .6s; }
.preloader__logo path:nth-child(7) { animation-delay: .67s; }

/* Yazı dalgası, zıplayan sayaç */
.preloader__meta { gap: 16px; margin-top: 30px; }
.pl-wave { white-space: nowrap; font-size: .64rem; letter-spacing: .16em; }
.pl-wave span { display: inline-block; animation: plHop 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 55ms); }
.preloader__count { display: inline-block; transform-origin: 50% 85%; }
.preloader__count.is-pop { animation: plPop .45s cubic-bezier(.3, 1.8, .5, 1); }

/* Şerit metre + hoplayan baret (mimarlıkta kalem) */
.preloader__bar {
  position: relative; height: 12px; margin-top: 16px; overflow: visible;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 1px, transparent 1px 10%) bottom / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 2%) bottom / 100% 4px no-repeat,
    linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) bottom / 100% 1px no-repeat;
}
.preloader__bar i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.pl-rider { position: absolute; bottom: 10px; left: calc(var(--p, 0) * 100%); width: 28px; height: 20px; margin-left: -14px; animation: plRide .42s cubic-bezier(.3, .7, .4, 1) infinite alternate; }
.pl-rider svg { width: 100%; height: 100%; }
.pl-rider__hat path { fill: #f5c518; }
.pl-rider__pen { display: none; }
.pl-rider__pen path { fill: var(--brand); }
.pl-rider__rib { fill: none !important; stroke: rgba(0, 0, 0, .35); stroke-width: 1.2; }
.is-arch .pl-rider__hat { display: none; }
.is-arch .pl-rider__pen { display: block; }

/* Kapanış: sahne yukarı zıplayıp çıkar */
.is-preloaded .pl-scene { transform: translateY(-24px) scale(.96); }

@keyframes plDraw { to { stroke-dashoffset: 0; } }
@keyframes plFade { to { opacity: 1; } }
@keyframes plCompass { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
@keyframes plRise { from { opacity: 0; transform: scaleY(.15); } to { opacity: 1; transform: none; } }
@keyframes plSwing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes plBob { to { transform: translateY(7px); } }
@keyframes plDrop {
  0% { opacity: 0; transform: translateY(-280%) scale(.9, 1.12); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42% { opacity: 1; transform: translateY(0) scale(1.2, .76); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  60% { transform: translateY(-42%) scale(.94, 1.08); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  76% { transform: translateY(0) scale(1.08, .92); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  88% { transform: translateY(-10%) scale(.99, 1.01); }
  100% { opacity: 1; transform: none; }
}
@keyframes plLogo {
  0% { opacity: 0; transform: translateY(-70%) scale(.6); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  45% { opacity: 1; transform: translateY(0) scale(1.12, .84); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  66% { transform: translateY(-16%) scale(.95, 1.06); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  84% { transform: translateY(0) scale(1.03, .97); }
  100% { opacity: 1; transform: none; }
}
@keyframes plPole { to { transform: none; } }
@keyframes plFlagIn { to { scale: 1; } }
@keyframes plWave { from { transform: skewY(-7deg); } to { transform: skewY(9deg) scaleX(.88); } }
@keyframes plHop { 0%, 55%, 100% { transform: none; } 22% { transform: translateY(-6px); color: var(--on-dark); } }
@keyframes plPop { 0% { transform: scale(1); } 40% { transform: translateY(-5px) scale(1.28); } 100% { transform: none; } }
@keyframes plRide { from { transform: translateY(0) rotate(-7deg); } to { transform: translateY(-10px) rotate(7deg); } }