/* ============================================================
   EcoFry — Site Motoru: sayfalar arası "dikey şerit" geçişleri,
   sonda/başta ipucu ve açılış (intro) animasyonu.
   Tüm sayfalarda ortak kullanılır.
   ============================================================ */

/* --- Sonraki / önceki ipucu --- */
#pt-hint{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(18px);
  z-index:9000; display:flex; align-items:center; gap:11px;
  padding:11px 20px; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(7,122,94,.3); box-shadow:0 12px 30px rgba(4,77,77,.22);
  font-family:'Quicksand',system-ui,sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.03em; color:#044d4d; opacity:0; pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
#pt-hint.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#pt-hint.up{ top:84px; bottom:auto; }
#pt-hint svg{ width:15px; height:15px; stroke:#077a5e; fill:none; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; animation:pt-bob 1.4s ease-in-out infinite; }
#pt-hint.up svg{ transform:rotate(180deg); }
@keyframes pt-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
#pt-hint.up svg{ animation:pt-bob-up 1.4s ease-in-out infinite; }
@keyframes pt-bob-up{ 0%,100%{transform:rotate(180deg) translateY(0)} 50%{transform:rotate(180deg) translateY(4px)} }

/* --- Açılış (intro) "Kaydırın" --- */
#pt-intro{
  position:fixed; inset:0; z-index:9500; display:grid; place-items:center;
  pointer-events:none; transition:opacity .6s ease;
}
#pt-intro.hide{ opacity:0; }
#pt-intro .in-box{ display:flex; flex-direction:column; align-items:center; gap:16px;
  color:#044d4d; font-family:'Quicksand',system-ui,sans-serif; }
#pt-intro .mouse{ width:30px; height:48px; border:2px solid #044d4d; border-radius:16px;
  position:relative; opacity:.9; box-shadow:0 8px 24px rgba(4,77,77,.18); background:rgba(255,255,255,.35); }
#pt-intro .mouse i{ position:absolute; left:50%; top:8px; width:4px; height:8px; border-radius:2px;
  background:#077a5e; transform:translateX(-50%); animation:pt-mouse 1.5s ease-in-out infinite; }
@keyframes pt-mouse{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,15px)} }
#pt-intro .lbl{ font-weight:600; letter-spacing:.24em; text-transform:uppercase; font-size:12.5px;
  color:#044d4d; text-shadow:0 1px 8px rgba(255,255,255,.6); }

@media (prefers-reduced-motion:reduce){
  #pt-hint svg, #pt-intro .mouse i{ animation:none }
}