/* TRUX ana sayfa: "Load log". Bir yukun kaydi; her bolum bir kilometre tasi.
   Motor (scrollcraft.css/js) degistirilmez; bu dosya tema + sahneler + takip karti. */

:root {
  --sc-canvas: #0B1F3A;  --sc-surface: #102849;
  --sc-ink: #F4F6F9;     --sc-ink-soft: #AAB4C3;
  --sc-accent: #FFFFFF;  --sc-accent-ink: #0B1F3A;
  --sc-font-display: "Archivo", Helvetica, Arial, sans-serif;
  --sc-font-text: "Inter", -apple-system, Helvetica, Arial, sans-serif;
  --tape-red: #FF2A1F;
}
/* --sc-p is written by the engine on each act; alias it there so children inherit the live value. */
[data-sc-act] { --p: var(--sc-p, 0); }

body.home { background: var(--navy); color: var(--sc-ink); }
.home h1, .home h2, .home h3 { font-family: var(--display); font-stretch: 125%; letter-spacing: -0.015em; }

/* Header floats over the hero, gains a ground once the page moves. */
.home .site-header { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; transition: background-color .2s var(--sc-ease-out), border-color .2s var(--sc-ease-out); }
.home.is-scrolled .site-header { background: rgba(11, 31, 58, .94); border-bottom-color: var(--navy-line); }

/* ------------------------------------------------------------- 1 hero -- */
/* A "frame" holds one photograph at its own aspect ratio (--ar) and covers the stage, so
   anything placed inside .frame__cam in % lands on the same spot of the photo at any size. */
.frame { position: absolute; inset: 0; overflow: hidden; --ar: 1.7797; --zoom: 1; --fx: 50%; --fy: 50%; }
.frame__cam {
  position: absolute; left: 50%; top: 50%;
  width: max(100%, calc(100svh * var(--ar))); height: max(100%, calc(100vw / var(--ar)));
  transform: translate(-50%, -50%) scale(var(--zoom)); transform-origin: var(--fx) var(--fy);
}
.frame__cam picture { position: absolute; inset: 0; }
.frame__cam img { width: 100%; height: 100%; object-fit: cover; max-width: none; display: block; }

.hero { background: var(--navy); }
.hero .frame { --zoom: calc(1.02 + var(--p) * .14); --fx: 20%; --fy: 64%; }
.plane { position: absolute; inset: 0; }
/* Headlights bloom as the camera closes in. Positions are the headlights in the photo. */
.bloom {
  position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 248, 232, .85) 0, rgba(255, 240, 214, .28) 28%, transparent 68%);
  mix-blend-mode: screen; opacity: calc(.4 + var(--p) * .55);
  transform: translate(-50%, -50%) scale(calc(.75 + var(--p) * .9));
}
.bloom--l { left: var(--bl-x, 11.3%); top: var(--bl-y, 65.1%); }
.bloom--r { left: var(--br-x, 25.6%); top: var(--br-y, 64.1%); }
.plane--fore {
  background: linear-gradient(to top, rgba(6, 15, 29, .92) 0, rgba(6, 15, 29, .55) 9%, rgba(6, 15, 29, 0) 26%);
  transform: translate3d(0, calc(var(--p) * -4vh), 0);
}
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(260deg, rgba(9, 25, 48, .9) 0, rgba(9, 25, 48, .76) 34%, rgba(9, 25, 48, .35) 54%, transparent 68%),
    linear-gradient(180deg, rgba(9, 25, 48, .55) 0, transparent 22%);
}
@media (max-width: 760px) {
  .hero__scrim { background: linear-gradient(180deg, rgba(9, 25, 48, .9) 0, rgba(9, 25, 48, .78) 46%, rgba(9, 25, 48, .2) 62%, transparent 72%); }
}

/* Copy trails on the right, over the sky, so it never fights the truck on the left. */
.hero__copy { position: absolute; right: var(--sc-gutter); top: clamp(6.5rem, 15vh, 10rem); width: min(48vw, 46rem); z-index: 3; }
.hero__title { font-size: clamp(2.4rem, 4.5vw, 5rem); line-height: .98; color: #fff; }
.hero__lede { margin-top: 1.4rem; max-width: 34rem; font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); color: #E4E9F0; line-height: 1.55; }
.hero__ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------ 2 quiet -- */
.act-quiet { background: #08172C; }
.quiet { padding-block: clamp(2rem, 6vw, 5rem); }
.quiet__title { font-size: clamp(2.2rem, 5.2vw, 5rem); line-height: 1.02; max-width: 15ch; }
.quiet__body { margin-top: 2rem; max-width: 52ch; font-size: 1.15rem; color: #B8C2D0; }
.quiet__turn { margin-top: 2.6rem; max-width: 40ch; font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: 1.15rem; color: #fff; padding-left: 1.2rem; border-left: 1px solid #3A4E6E; }

/* ------------------------------------------------------------- 3 road -- */
.act-road [data-sc-stage] { display: flex; align-items: center; background: var(--navy); }
.rail { display: flex; align-items: flex-end; gap: clamp(1.5rem, 3vw, 3rem); padding-inline: var(--sc-gutter); width: max-content; }
.rail__lead { width: clamp(17rem, 27vw, 25rem); align-self: center; }
.rail__title { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.02; }
.rail__lead p { margin-top: 1.2rem; color: #B8C2D0; max-width: 28ch; }
.unit { width: clamp(16rem, 25vw, 23rem); }
.unit img { width: 100%; height: min(50vh, 32vw); object-fit: cover; border-radius: 4px; }
.unit h3 { margin-top: 1.1rem; font-size: 1.45rem; }
.unit dl { margin: .8rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: .92rem; border-top: 1px solid #22385A; padding-top: .8rem; }
.unit dt { color: #8392A8; }
.unit dd { margin: 0; color: #E3E8EF; }
.rail__note { width: clamp(14rem, 18vw, 18rem); align-self: center; }
.rail__note p { font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: 1.3rem; line-height: 1.25; }
.rail__link { display: inline-block; margin-top: 1rem; color: #fff; font-weight: 600; text-underline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .unit { opacity: calc(.55 + min(.45, var(--p) * 2)); }
}

/* ------------------------------------------------------- 4 night (peak) -- */
/* The frame "exposes" like a long-exposure photograph: black (authored silence), then the
   scene rises, and the light trails draw left to right on a screen-blended layer. */
.act-night .night { background: #02050A; }
.night {
  --exp: clamp(0, (var(--p) - .15) * 2.6, 1);
  --draw: calc((var(--p) - .2) * 190%);
}
.night .frame { --zoom: calc(1.08 - var(--p) * .06); --fx: 66%; --fy: 70%; }
.night__exposure { opacity: var(--exp); }
.night__trails {
  mix-blend-mode: screen; filter: contrast(2.4) brightness(1.3) saturate(1.25);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--draw) - 12%), transparent var(--draw));
          mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--draw) - 12%), transparent var(--draw));
}
.night__copy { position: absolute; left: var(--sc-gutter); top: clamp(7rem, 18vh, 12rem); max-width: 36rem; z-index: 3; }
.night__title { font-size: clamp(2.6rem, 6.4vw, 6.2rem); line-height: .98; color: #fff; }
.night__body { margin-top: 1.4rem; font-size: 1.15rem; color: #C9D2DE; max-width: 32ch; }

/* ---------------------------------------------------------- 5 visible -- */
.act-visible { background: var(--navy); padding-top: 0; }
.visible__media { margin: 0; }
.visible__media img { width: 100%; height: min(78vh, 46vw); object-fit: cover; object-position: 50% 62%; max-width: none; }
.visible { padding-top: clamp(3rem, 7vw, 6rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.visible__title { font-size: clamp(2.2rem, 4.4vw, 4.2rem); line-height: 1.02; max-width: 10ch; }
.standards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.5rem, 3vw, 3rem); }
.standards li { padding: 1.4rem 0; border-top: 1px solid #22385A; color: #B8C2D0; font-size: 1rem; }
.standards b { display: block; color: #fff; font-family: var(--display); font-stretch: 125%; font-size: 1.12rem; margin-bottom: .45rem; }

/* ---------------------------------------------------------- 6 drivers -- */
.act-drivers { background: #F4F5F7; --sc-ink: #0B1F3A; --sc-ink-soft: #4B5566; color: #0B1F3A; }
.drivers { max-width: 52rem; }
.drivers__title { font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1; color: #0B1F3A; }
.drivers__body { margin-top: 1.4rem; font-size: 1.15rem; color: #3D4757; max-width: 50ch; }
.drivers .btn { margin-top: 2rem; }

/* ------------------------------------------------------------ 7 close -- */
.close { background: var(--navy); display: grid; place-items: center; }
.close__inner { width: min(44rem, calc(100% - 2 * var(--sc-gutter))); display: grid; justify-items: start; gap: 1.6rem; }
/* The receipt appears when the tracker docks into it (home.js toggles body.trk-docked). */
.receipt { opacity: 0; transform: translateY(8px); transition: opacity .35s var(--sc-ease-out) .3s, transform .35s var(--sc-ease-out) .3s; }
.trk-docked .receipt { opacity: 1; transform: none; }
.receipt { width: 100%; background: #102849; border: 1px solid #22385A; border-radius: 6px; padding: 1.4rem 1.6rem; box-shadow: 0 24px 60px rgba(2, 8, 18, .45); }
.receipt__head { display: flex; align-items: center; gap: .7rem; font-family: var(--display); font-stretch: 125%; font-weight: 700; font-size: 1.4rem; color: #fff; }
.receipt__check { width: 22px; height: 22px; border-radius: 50%; background: #fff; position: relative; flex: none; }
.receipt__check::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid var(--navy); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.receipt__meta { margin-top: .5rem; color: #AAB4C3; font-size: .95rem; }
.receipt__time { margin-top: .2rem; color: #E3E8EF; font-size: .95rem; font-variant-numeric: tabular-nums; }
.receipt__bar { margin-top: 1rem; height: 3px; background: #22385A; border-radius: 2px; overflow: hidden; }
.receipt__bar span { display: block; height: 100%; width: 100%; background: #fff; }
.close__title { font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1; color: #fff; }
.lane { width: 100%; display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.lane__field { display: grid; gap: 6px; font-size: .85rem; color: #AAB4C3; }
.lane__field input { min-height: 50px; padding: 0 14px; font: 16px var(--body); color: #fff; background: #0E2442; border: 1px solid #2E4566; border-radius: 4px; }
.lane__field input::placeholder { color: #71809A; }
.lane__field input:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.lane .btn { min-height: 50px; }
.close__foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; padding: 1.2rem var(--sc-gutter); border-top: 1px solid #1C3354; font-size: .82rem; color: #8E99AB; }
.close__foot img { width: 96px; height: auto; }
.close__foot a { text-decoration: none; }
.close__foot a:hover { color: #fff; }

/* ---------------------------------------------- signature: load tracker -- */
.tracker {
  position: fixed; left: 20px; bottom: 20px; z-index: 60; width: 318px;
  padding: 14px 16px 12px; border-radius: 6px;
  background: #0E223F; border: 1px solid #22385A; color: #E3E8EF;
  box-shadow: 0 18px 40px rgba(2, 8, 18, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  font-size: 13px; line-height: 1.35;
  transition: transform .52s var(--sc-ease-out), opacity .3s var(--sc-ease-out);
}
.tracker__head { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; }
.tracker__ping { grid-row: span 2; width: 9px; height: 9px; border-radius: 50%; background: #D6DEE9; box-shadow: 0 0 0 0 rgba(214, 222, 233, .6); }
.tracker__id { font-weight: 600; color: #fff; font-size: 12px; letter-spacing: .02em; }
.tracker__lane { color: #8E9CB2; font-size: 12px; }
.tracker__status { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-variant-numeric: tabular-nums; }
.tracker__status b { font-family: var(--display); font-stretch: 125%; font-size: 15px; color: #fff; }
.tracker__status [data-t="time"] { color: #C9D2DE; }
.tracker__status [data-t="place"] { flex-basis: 100%; color: #8E9CB2; }
.tracker__bar { margin-top: 10px; height: 2px; background: #22385A; border-radius: 2px; overflow: hidden; }
.tracker__fill { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.tracker__steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tracker__steps button { width: 100%; min-height: 28px; padding: 4px 2px; background: none; border: 0; border-radius: 3px; font: 500 11px/1.1 var(--body); color: #6F7F97; cursor: pointer; text-align: left; }
.tracker__steps button:hover { color: #fff; }
.tracker__steps button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.tracker[data-step="0"] [data-go="pickup"],
.tracker[data-step="1"] [data-go="road"],
.tracker[data-step="2"] [data-go="night"],
.tracker[data-step="3"] [data-go="delivered"] { color: #fff; font-weight: 700; }
.tracker.is-ping .tracker__ping { animation: trk-ping .9s var(--sc-ease-out); background: #fff; }
.tracker.is-ping .tracker__status b { animation: trk-flash .9s var(--sc-ease-out); }
.tracker.is-docked { opacity: 0; pointer-events: none; }
@keyframes trk-ping { from { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } to { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }
@keyframes trk-flash { from { opacity: .35; } to { opacity: 1; } }

/* ------------------------------------------------------------- phone -- */
@media (max-width: 760px) {
  /* Phone crops: hero-m keeps the truck (left of the photo), night-m keeps the truck (right). */
  .hero .frame { --ar: .8686; --fx: 30%; --bl-x: 15.9%; --bl-y: 65.1%; --br-x: 45.1%; --br-y: 64.1%; }
  .hero .frame__cam { left: 0; transform: translate(0, -50%) scale(var(--zoom)); }
  .bloom { width: 16%; }
  .night .frame { --ar: .9534; --fx: 50%; }
  .hero__copy { top: 6.4rem; left: var(--sc-gutter); right: var(--sc-gutter); width: auto; }
  .hero__title { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .hero__ctas .btn { flex: 1 1 auto; }
  .night__copy { top: 6.4rem; right: var(--sc-gutter); }
  .night__title { font-size: clamp(2.3rem, 10vw, 3rem); }
  .unit img { height: min(40vh, 72vw); }
  .visible { grid-template-columns: 1fr; }
  .standards { grid-template-columns: 1fr; }
  .lane { grid-template-columns: 1fr; }
  /* Phones: the close is taller than one screen (receipt, form, footer), and a pinned stage
     clips at 100svh, so the footer landed on the button. Here it scrolls as a normal section,
     footer in flow at the end. The tracker is docked (hidden) by then, so no bottom reserve. */
  .act-close { height: auto !important; }
  .act-close .close { position: relative; height: auto; min-height: 100svh; overflow: visible;
    display: flex; flex-direction: column; }
  .close__inner { gap: 1.1rem; margin: auto; padding: 5.5rem 0 2.5rem; }
  .close__foot { position: static; gap: .35rem 1rem; font-size: .75rem;
    padding-bottom: calc(1.4rem + env(safe-area-inset-bottom)); }
  .tracker { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 10px 12px 8px; }
  .tracker__head { grid-template-columns: auto auto 1fr; }
  .tracker__ping { grid-row: auto; }
  .tracker__lane { text-align: right; }
  .tracker__status { margin-top: 6px; }
  .tracker__status [data-t="place"] { flex-basis: auto; }
  .tracker__steps { display: none; }
  .quiet__title, .visible__title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .plane { transform: none !important; }
  .frame { --zoom: 1 !important; }
  .night { --exp: 1; --draw: 120%; }
  .tracker, .receipt { transition: none; }
  .tracker.is-ping .tracker__ping, .tracker.is-ping .tracker__status b { animation: none; }
}