/* Tunnak Group Logistics — yol filmi.
   Alp geçidinde ıslak asfalt fotoğrafı üzerine kompozit edilmiş araç:
   gölge, toz, far, ıslak zemindeki mavi ışık izleri ve gecenin gelişi. */

.roadfilm{
  position:relative;height:280vh;background:#040a13;
  --night:0;--speed:0;--flip:1;--wordX:0px
}

/* Sabit sahne: sayfa kayarken ekranda durur, içindeki her şey ilerlemeye bağlıdır. */
.rf-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:#040a13}
.rf-track{position:absolute;inset:0;pointer-events:none}
.rf-cue{position:absolute;left:0;width:1px;height:1px}

/* --- Fotoğrafik arka plan --------------------------------------------- */
.rf-scene{position:absolute;inset:0;overflow:hidden;transform:translate3d(var(--cameraX,0px),var(--cameraY,0px),0) scale(var(--cameraScale,1));transform-origin:50% 72%;will-change:transform}
.rf-sky-layer,.rf-mountain-layer,.rf-terrain-layer{position:absolute;inset:-3%;pointer-events:none;will-change:transform;transform:translate3d(var(--layer-x,0%),var(--layer-y,0),0)}
.rf-sky-layer{z-index:0;background:linear-gradient(180deg,#020b18 0%,#0a2035 54%,#172f43 100%)}
.rf-mountain-layer{z-index:1;inset:12% -5% 20%;background:url(assets/mountains.webp) center 42%/cover no-repeat;opacity:.26;mix-blend-mode:screen;filter:saturate(.72) brightness(.72)}
.rf-terrain-layer{z-index:2;inset:48% -4% -4%;background:url(assets/alpine-clean-road.png) center 82%/cover no-repeat;opacity:.18;mix-blend-mode:screen;filter:saturate(.62) brightness(.55)}
.rf-plate-layer{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform}
.rf-plate{
  position:absolute;left:0;top:0;
  background:url(assets/alpine-clean-road.png) 0 0/100% 100% no-repeat;
  backface-visibility:hidden
}
/* Ortadaki boyalı beyaz şeridi bastıran karartma. Fotoğrafın kendi
   koordinatlarında durur: bariyerin ve yol kenarı reflektörlerinin altından
   başlar, böylece o ışıklar yerinde kalır. Yolun hareketini akan izler verir. */
.rf-roadmask{
  background:linear-gradient(transparent 65%,rgba(6,14,25,.18) 100%)
}

/* --- Gündüzden geceye ---------------------------------------------------
   Işık sahneyi tek bir karartma perdesiyle değil, gerçek bir alacakaranlık
   gibi terk eder: önce fotoğraftaki renk doygunluğu düşer, sonra ufuktaki
   günbatımı söner, gökyüzü lacivertten siyaha iner, yıldızlar en son çıkar
   ve göl kıyısındaki kasaba ışıkları karanlıkta güçlenir. Her katmanın kendi
   zamanlaması var; hepsi birlikte açılırsa göz bunu "dimmer" olarak okuyor. */

/* Fotoğrafın kendi ışığı: gece renk doygunluğunu ve parlaklığını kaybeder.
   Değer kademeli okunur (--nightQ), böylece filtre her karede yeniden
   hesaplanmaz. */
.rf-plate-day,.rf-plate-night{
  filter:saturate(calc(1 - var(--nightQ,0)*.42)) brightness(calc(1 - var(--nightQ,0)*.30))
         contrast(calc(1 + var(--nightQ,0)*.10))
}

/* Ufuktaki son günbatımı: akşam en güçlü, gecenin yarısında bitmiş olur. */
.rf-afterglow{
  background:radial-gradient(44% 24% at 83% 19%,rgba(255,178,102,.30),rgba(255,138,68,.11) 44%,transparent 78%);
  mix-blend-mode:screen;
  opacity:calc(1 - clamp(0,calc(var(--night)/.5),1))
}
/* Gökyüzü perdesi: bulutları söndürüp yerini gece göğüne bırakır. Zirveler
   tamamen kapanmaz; yıldız ışığında kar hâlâ seçilir. */
.rf-skyveil{
  background:linear-gradient(180deg,
    #01040e 0%,#02071a 9%,rgba(3,10,26,.93) 17%,rgba(5,14,32,.66) 24%,
    rgba(7,18,38,.30) 30%,rgba(8,20,42,0) 37%);
  opacity:calc(var(--night)*var(--night)*.97)
}
/* Yıldızlar: gökyüzü yeterince koyulaşmadan görünmezler. */
.rf-stars{
  background-repeat:no-repeat;background-position:0 0;background-size:100% 38%;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 19%,rgba(0,0,0,.55) 28%,transparent 37%);
          mask-image:linear-gradient(180deg,#000 0%,#000 19%,rgba(0,0,0,.55) 28%,transparent 37%);
  opacity:clamp(0,calc((var(--night) - .3)/.5),1)
}
/* Titreşim: iki katman ayrı ritimde soluklanır, hepsi birden kırpışmaz. */
.rf-stars-far{animation:rf-twinkle 9.5s ease-in-out infinite alternate}
.rf-stars-near{animation:rf-twinkle 6.5s ease-in-out -3.2s infinite alternate}
@keyframes rf-twinkle{from{filter:brightness(.74)}to{filter:brightness(1.12)}}
/* Ay: günbatımının söndüğü yönden doğar, ışık yönü sahneyle çelişmez. */
.rf-moon{
  background:
    radial-gradient(.62% 1.1% at 72% 11.5%,rgba(255,253,247,.98),rgba(252,248,238,.6) 60%,transparent 100%),
    radial-gradient(5.4% 9.6% at 72% 11.5%,rgba(198,222,255,.2),transparent 72%);
  mix-blend-mode:screen;
  opacity:clamp(0,calc((var(--night) - .22)/.45),1)
}
/* Göl kıyısındaki kasaba: kare karardıkça ışıkları görece güçlenir. */
.rf-townlights{
  background:
    radial-gradient(8.5% 2.2% at 70% 50.4%,rgba(255,198,124,.5),rgba(255,172,92,.16) 48%,transparent 78%),
    radial-gradient(13% 2.8% at 52.5% 46%,rgba(255,192,126,.26),transparent 74%);
  mix-blend-mode:screen;
  opacity:calc(var(--night)*.9)
}

/* Akşam yavaşça geceye döner. */
.rf-grade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(172deg,rgba(6,18,36,0) 0%,#07203a 44%,#020a14 100%);
  opacity:calc(var(--night)*var(--night)*.52);mix-blend-mode:multiply
}
.rf-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(128% 92% at 52% 44%,transparent 34%,rgba(2,7,14,.66) 100%),
    linear-gradient(#050d18f2 0%,#050d1800 26%),
    linear-gradient(0deg,#040a1394 0%,#040a1300 26%)
}

/* Islak asfalttaki mavi ışık izleri; konumları JS'te güzergâhtan gelir. */
.rf-trails{position:absolute;inset:0;pointer-events:none}
/* Yol çizgileri: uzunlukları ve aralıkları perspektifle büyür, akış hızı
   tekerleğin dönüş hızıyla aynı kaynaktan gelir. Sahnede "ilerliyoruz"
   bilgisini taşıyan asıl öğe bunlar. */
.rf-trails i{
  position:absolute;left:0;top:0;display:block;width:172px;height:7px;margin:-3.5px 0 0 -86px;
  opacity:0;will-change:transform,opacity;
  background:linear-gradient(90deg,transparent,rgba(226,232,234,.92) 6%,rgba(206,215,219,.86) 94%,transparent);
  border-radius:2px
}
.rf-trails:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 48%,rgba(255,255,255,.025) 78%,transparent 100%);opacity:calc(var(--speed)*.7)}

/* --- Araç -------------------------------------------------------------
   Tır her karede ölçeklendiği için içindeki katmanlar da her karede yeniden
   çizilir. Bu yüzden burada bulanıklık filtresi ve karışım modu kullanılmaz;
   yumuşaklık doğrudan gradyanlardan gelir, maske tek bir sarmalayıcıda
   toplanır. Böylece sahne compositor üzerinde akıcı kalır. */
.rf-rig{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}

/* Islak asfalttaki yansıma: temas hattında aynalanır (dönüş JS'te), araç
   yükseldikçe söner. Bulanıklık rig ile birlikte ölçeklendiği için uzaktaki
   araçta ince, yakındakinde geniş kalır — ıslak zeminin kendi davranışı. */
.rf-mirror{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;
  opacity:calc(.32 - var(--night)*.10);
  filter:blur(2.4px) brightness(calc(.46 - var(--nightQ,0)*.16)) saturate(.45);
  -webkit-mask-image:linear-gradient(to bottom,transparent 6%,rgba(0,0,0,.5) 46%,#000 94%);
          mask-image:linear-gradient(to bottom,transparent 6%,rgba(0,0,0,.5) 46%,#000 94%);
  will-change:transform
}

/* Zemin teması: tekerlek hattını izleyen temas gölgesi + yana düşen uzun gölge. */
.rf-cast{
  position:absolute;
  background:radial-gradient(closest-side,rgba(3,8,14,.5),rgba(3,8,14,.2) 52%,transparent 100%);
  opacity:calc(.92 - var(--night)*.28);filter:blur(.35px)
}
.rf-contact{
  position:absolute;
  background:radial-gradient(closest-side,rgba(1,4,9,.9),rgba(1,4,9,.44) 46%,transparent 100%);
  opacity:calc(.98 - var(--night)*.12);filter:blur(.2px)
}
/* Tekerleklerin ardından kalkan su serpintisi. */
/* Islak asfalttan kalkan su serpintisi: tekerleklerin ardında kalır. */
.rf-dust{
  position:absolute;bottom:0;height:30%;
  background:
    radial-gradient(closest-side,rgba(206,224,242,.34),rgba(186,208,230,.12) 58%,transparent 100%),
    radial-gradient(60% 40% at 82% 78%,rgba(198,218,238,.22),transparent 72%);
  opacity:0;transition:opacity .18s ease
}

.rf-body{position:absolute;inset:0}
.rf-veh-slice{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transform-origin:50% 82%;will-change:transform;filter:brightness(calc(1 - var(--nightQ,0)*.46)) saturate(calc(1 - var(--nightQ,0)*.2))}
.rf-cab-slice{clip-path:inset(0 66% 0 0);transform-origin:33% 82%}
.rf-trailer-slice{clip-path:inset(0 0 0 31%);transform-origin:69% 82%}
.rf-wheel{position:absolute;overflow:hidden;border-radius:50%;pointer-events:none;filter:brightness(calc(1 - var(--nightQ,0)*.46))}
.rf-wheel i{display:block;width:100%;height:100%;background-image:url(assets/truck.webp);background-repeat:no-repeat;border-radius:50%;will-change:transform}
.rf-wheel-contact{position:absolute;border-radius:50%;background:radial-gradient(ellipse,#010409c9,transparent 72%);pointer-events:none}
/* Gece görünümü: maskeli karartma katmanı yerine doğrudan görselin filtresi.
   Yalnızca parlaklık ve doygunluk düşer; renk kaydırma yok, çünkü tepe
   lambalarının kehribarını ve dorsenin lacivertini bozuyordu. Değer kademeli
   okunur (--nightQ), böylece filtre her karede yeniden hesaplanmaz. */
.rf-veh{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .7s ease;
  filter:brightness(calc(1 - var(--nightQ,0)*.46)) saturate(calc(1 - var(--nightQ,0)*.2))
         contrast(calc(1 + var(--nightQ,0)*.06))
}
.rf-veh.is-on{opacity:1}

/* Kabin ve dorse üzerindeki kurumsal giydirme; perspektif JS'te hesaplanır. */
.rf-decal{
  position:absolute;left:0;top:0;transform-origin:0 0;
  filter:brightness(0) invert(1);opacity:.85
}
.rf-decal.is-dark{filter:none;mix-blend-mode:multiply;opacity:.92}

/* Gece ışıkları: yumuşaklık gradyanın kendisinden gelir, filtre yok. */
.rf-beam{
  position:absolute;opacity:calc(var(--night)*var(--night)*.9);
  background:linear-gradient(to left,rgba(206,236,255,.5),rgba(176,218,255,.16) 46%,transparent 82%);
  clip-path:polygon(100% 36%,100% 64%,0 100%,0 0)
}
.rf-pool{
  position:absolute;opacity:calc(var(--night)*var(--night));
  background:radial-gradient(closest-side,rgba(226,244,255,.58),rgba(186,220,255,.18) 44%,transparent 100%)
}
/* İki far ve iki tepe lambası tek katmanda; konumları JS'te gradyan olarak verilir. */
.rf-lamps{position:absolute;inset:0;mix-blend-mode:screen;opacity:calc(.06 + var(--night)*.94)}
.rf-beacons{position:absolute;inset:0;mix-blend-mode:screen;opacity:var(--beacon,0)}
.rf-tail{
  position:absolute;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,120,84,.9),rgba(255,52,26,.3) 42%,transparent 100%);
  opacity:calc(.06 + var(--night)*.94)
}

/* --- Perde yazıları ---------------------------------------------------- */
.rf-acts{position:absolute;inset:0;z-index:5}
.rf-act{
  position:absolute;top:0;bottom:0;left:11%;width:min(44%,620px);
  display:flex;flex-direction:column;justify-content:center;gap:24px;align-items:flex-start;
  padding:92px 0 16vh;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s cubic-bezier(.4,0,.9,.4),visibility 0s linear .5s
}
.rf-act.is-live{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .7s cubic-bezier(.2,.6,.3,1),visibility 0s}
.rf-act:before{
  content:'';position:absolute;top:-12%;bottom:-12%;left:-70%;right:-36%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,10,19,.92) 0%,rgba(4,10,19,.8) 36%,rgba(4,10,19,.4) 68%,transparent 100%)
}
.rf-act>*{
  transform:translate3d(-38px,20px,0);opacity:0;
  transition:transform .95s cubic-bezier(.16,.84,.24,1),opacity .8s cubic-bezier(.33,0,.2,1)
}
.rf-act.is-live>*{transform:none;opacity:1}
.rf-act.is-live>*:nth-child(1){transition-delay:.06s}
.rf-act.is-live>*:nth-child(2){transition-delay:.16s}
.rf-act.is-live>*:nth-child(3){transition-delay:.26s}
.rf-act.is-live>*:nth-child(4){transition-delay:.36s}

.rf-kicker{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:800;letter-spacing:.3em;color:var(--ice)}
.rf-kicker i{display:block;width:46px;height:2px;background:var(--blue)}
.rf-act h1,.rf-act h2{text-shadow:0 16px 46px rgba(2,8,16,.8)}
.rf-lead{max-width:46ch;font-size:clamp(14px,1.02vw,16.5px);line-height:1.8;color:#cfdded;text-shadow:0 4px 22px rgba(2,8,16,.9)}
.rf-link{
  display:inline-flex;align-items:center;gap:14px;font-size:11px;font-weight:800;letter-spacing:.2em;
  color:#fff;padding-bottom:8px;border-bottom:2px solid var(--blue);transition:gap .25s,color .25s
}
.rf-link:hover{gap:24px;color:var(--ice)}
.rf-link svg{width:17px;height:17px}
.rf-scroll{display:flex;align-items:center;gap:16px;font-size:12px;letter-spacing:.12em;color:#b9cddf}
.rf-scroll span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(150,199,235,.4)}
.rf-scroll span:after{
  content:'';width:8px;height:8px;border-right:2px solid var(--ice);border-bottom:2px solid var(--ice);
  transform:rotate(45deg) translate(-1px,-1px);animation:rf-nudge 1.9s ease-in-out infinite
}
.rf-scroll:hover span{border-color:var(--ice)}
@keyframes rf-nudge{0%,100%{transform:rotate(45deg) translate(-3px,-3px)}50%{transform:rotate(45deg) translate(1px,1px)}}

/* --- Ekipman rozetleri (02. perde) ------------------------------------- */
.rf-stats{position:absolute;inset:0;z-index:6;pointer-events:none}
.rf-stat{
  position:absolute;left:var(--sx);top:var(--sy);display:flex;align-items:center;gap:14px;
  padding:14px 22px 14px 16px;border-radius:10px;
  background:rgba(8,20,34,.78);border:1px solid rgba(122,178,224,.28);
  box-shadow:0 20px 46px rgba(2,8,16,.5);
  opacity:0;transform:translateY(22px) scale(.96);
  transition:opacity .7s ease,transform .9s cubic-bezier(.16,.84,.24,1)
}
.rf-stat svg{width:26px;height:26px;color:var(--ice)}
.rf-stat b{font-family:'Barlow Condensed',sans-serif;font-size:26px;letter-spacing:.01em;color:#fff;line-height:1}
.rf-stat em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.22em;color:var(--muted);display:block;margin-top:5px}
.rf-stat>span{display:block}
.roadfilm[data-act="1"] .rf-stat{opacity:1;transform:none}
.roadfilm[data-act="1"] .rf-stat:nth-child(2){transition-delay:.12s}
.roadfilm[data-act="1"] .rf-stat:nth-child(3){transition-delay:.24s}

/* --- Fon yazısı ve imza ------------------------------------------------ */
.rf-word{
  position:absolute;left:0;right:0;top:17%;z-index:2;pointer-events:none;overflow:hidden;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(90px,16vw,250px);line-height:1;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(150,200,240,.13);opacity:var(--wordFade,1)
}
.rf-word b{display:inline-block;font-weight:700;padding-left:8%;transform:translate3d(var(--wordX),0,0)}
.rf-sign{
  position:absolute;right:3.4%;bottom:8%;z-index:6;pointer-events:none;
  font-family:'Segoe Script','Bradley Hand','Snell Roundhand',cursive;
  font-size:clamp(20px,2vw,30px);color:rgba(214,234,250,.72);transform:rotate(-6deg)
}

/* --- Duyarlı ------------------------------------------------------------ */
@media (max-width:1180px){
  .rf-act{left:7.2%;width:min(56%,560px)}
  .rf-stat{padding:11px 16px 11px 12px;gap:10px}
  .rf-stat b{font-size:20px}
}
@media (max-width:900px){
  .rf-stats{display:none}
  .rf-sign{bottom:14%;font-size:20px}
}
@media (max-width:760px){
  .roadfilm{height:260vh}
  .rf-act{left:5%;right:5%;width:auto;justify-content:flex-start;padding:120px 0 0;gap:18px}
  .rf-act:before{left:-10%;right:-10%;top:-14%;bottom:auto;height:74%;
    background:linear-gradient(rgba(4,10,19,.9),rgba(4,10,19,.6) 62%,transparent)}
  .rf-lead{max-width:none;font-size:14px}
  .rf-word{top:11%;-webkit-text-stroke-width:1px}
  .rf-sign{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rf-dust,.rf-trails{display:none}
  .rf-stars-far,.rf-stars-near{animation:none}
  .rf-scroll span:after{animation:none}
}

/* JavaScript yoksa film yerine düz, okunabilir bir bölüm kalır. */
html.no-js .roadfilm{height:auto}
html.no-js .rf-stage{position:static;height:auto;overflow:visible;padding:140px 0 70px}
html.no-js .rf-rig,html.no-js .rf-word,html.no-js .rf-trails,html.no-js .rf-stats,html.no-js .rf-sign{display:none}
html.no-js .rf-acts{position:static;display:grid;gap:70px}
html.no-js .rf-act{position:static;width:auto;max-width:620px;margin:0 7%;opacity:1;visibility:visible;padding:0;pointer-events:auto}
html.no-js .rf-act:before{display:none}
html.no-js .rf-act>*{transform:none;opacity:1}