/* ==========================================================================
   ZARİF NAKLİYAT — stiller
   ========================================================================== */

:root{
  --bg:#0C0D0C; --bg-2:#121412; --bg-3:#191C19;
  --ink:#EFEBE2; --ink-2:#A8A39A; --ink-3:#6E6A63;
  --hair:rgba(239,235,226,.12); --hair-2:rgba(239,235,226,.055);
  --accent:#FF6A2B; --accent-ink:#1A0D05;
  --wa:#25D366; --wa-ink:#06260F;
  --warn:#F0B429;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --gut:20px; --max:1200px; --radius:14px; --rail-x:30px;
  --ease:cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

img,svg,picture{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--accent); color:var(--accent-ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:760px; }

.skip-link{
  position:fixed; top:-60px; left:12px; z-index:300;
  background:var(--accent); color:var(--accent-ink);
  padding:10px 16px; border-radius:8px; font-weight:600; text-decoration:none;
  transition:top .2s;
}
.skip-link:focus{ top:12px; }

.eyebrow{
  margin:0 0 18px; font-size:12.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.eyebrow .num{ color:var(--accent); font-variant-numeric:tabular-nums; }
.dot{ color:var(--accent); font-style:normal; }

.bullets{ margin:0; padding:0; list-style:none; }
.bullets li{ position:relative; padding-left:20px; margin-bottom:8px; color:var(--ink-2); font-size:15.5px; }
.bullets li::before{ content:""; position:absolute; left:0; top:.68em; width:7px; height:1px; background:var(--accent); }

/* --- Ayar uyarısı --------------------------------------------------------- */
.config-warning{
  position:relative; z-index:120; background:#7A1C0B; color:#FFE9DF;
  font-size:14px; line-height:1.5; padding:12px 18px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.config-warning strong{ color:#fff; }
.config-warning code{ background:rgba(0,0,0,.35); padding:1px 6px; border-radius:4px; font-size:12.5px; }

/* --- Sayfa ilerleme çubuğu ------------------------------------------------ */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:200;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none;
}

/* --- Butonlar ------------------------------------------------------------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--hair);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 22px; background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:100px;
  font-family:var(--body); font-size:15px; font-weight:600;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .25s, border-color .25s, color .25s;
  will-change:transform;
}
.btn .ico{ width:18px; height:18px; flex:none; }
.btn--accent{ --btn-bg:var(--accent); --btn-fg:var(--accent-ink); --btn-bd:var(--accent); }
.btn--accent:hover{ --btn-bg:#FF8249; }
.btn--wa{ --btn-bg:var(--wa); --btn-fg:var(--wa-ink); --btn-bd:var(--wa); }
.btn--wa:hover{ --btn-bg:#3CE07A; }
.btn--ghost:hover{ --btn-bd:rgba(239,235,226,.34); --btn-bg:rgba(239,235,226,.05); }
.btn--sm{ padding:10px 17px; font-size:13.5px; }
.btn--lg{ padding:17px 28px; font-size:16px; }
.btn--block{ width:100%; }

/* --- Güzergâh rayı -------------------------------------------------------- */
.rail{ position:fixed; left:var(--rail-x); top:0; bottom:0; width:2px; z-index:60; pointer-events:none; display:none; }
.rail__track{ position:absolute; inset:0; background:var(--hair-2); }
.rail__fill{
  position:absolute; left:0; top:0; width:100%; height:100%;
  background:linear-gradient(180deg,transparent,var(--accent) 18%,var(--accent));
  transform:scaleY(0); transform-origin:50% 0;
}
.rail__nodes{ position:absolute; inset:0; }
.rail-node{
  position:absolute; left:50%; transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%;
  background:var(--bg); border:1.5px solid var(--ink-3);
  transition:background-color .3s, border-color .3s, transform .35s var(--ease);
}
.rail-node.is-on{ background:var(--accent); border-color:var(--accent); transform:translate(-50%,-50%) scale(1.35); }
.rail-node::after{
  content:attr(data-label); position:absolute; left:20px; top:50%; transform:translateY(-50%);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--ink-2); white-space:nowrap; opacity:0; transition:opacity .3s;
}
.rail-node.is-current::after{ opacity:1; }
@media (min-width:1320px){ .rail{ display:block; } }

/* --- Üst bar -------------------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:22px; padding:13px var(--gut);
  background:rgba(12,13,12,.72);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hair-2);
}
.topbar__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.topbar__mark{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  color:var(--accent); border:1px solid var(--hair); border-radius:8px;
}
.topbar__mark svg{ width:17px; height:17px; }
.topbar__name{ font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.015em; }
.topbar__nav{ display:none; gap:26px; }
.topbar__nav a{ position:relative; font-size:14px; color:var(--ink-2); text-decoration:none; transition:color .2s; }
.topbar__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s var(--ease);
}
.topbar__nav a:hover{ color:var(--ink); }
.topbar__nav a:hover::after{ transform:scaleX(1); }
@media (min-width:900px){ .topbar{ padding:15px 32px; gap:34px; } .topbar__nav{ display:flex; } }

/* --- GİRİŞ ---------------------------------------------------------------- */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(560px, 92svh, 900px);
  display:flex; align-items:flex-end;
  padding:120px 0 44px; overflow:hidden;
}
.hero__media{
  position:absolute; inset:-6% 0 -6% 0; z-index:-2;
  will-change:transform;
}
/* <picture> satır içi bir öğe; blok yapılmazsa img'nin height:100%'ü
   çözümlenmiyor ve fotoğraf giriş ekranının altını boş bırakıyor. */
.hero__media picture{ display:block; width:100%; height:100%; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:62% 50%; }
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(12,13,12,.92) 0%, rgba(12,13,12,.52) 26%, rgba(12,13,12,.72) 62%, var(--bg) 100%),
    linear-gradient(90deg, rgba(12,13,12,.93) 0%, rgba(12,13,12,.55) 48%, rgba(12,13,12,.2) 100%);
}
.hero__inner{ position:relative; width:100%; }
.hero__eyebrow{ margin-bottom:14px; }

.hero__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.7rem, 10.5vw, 6.6rem);
  line-height:.93; letter-spacing:-.035em; margin:0 0 24px;
  text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.05em; }
.hero__title .line > span{ display:block; }

.hero__lede{
  max-width:44ch; margin:0 0 30px;
  font-size:clamp(1rem,2.6vw,1.16rem); color:var(--ink);
  text-shadow:0 1px 20px rgba(0,0,0,.6);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:11px; }

.hero__cue{
  margin-top:34px; display:none; align-items:center; gap:10px;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.hero__cue i{ display:block; width:28px; height:1px; background:var(--ink-3); }
@media (min-width:900px){ .hero{ padding:140px 0 56px; } .hero__cue{ display:flex; } }

/* --- Kayan şerit ---------------------------------------------------------- */
.marquee{
  position:relative; overflow:hidden;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  background:var(--bg-2); padding:15px 0;
}
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__group{ display:flex; align-items:center; flex:none; }
.marquee__group span{
  display:flex; align-items:center; gap:22px; padding-right:22px;
  font-family:var(--display); font-weight:700;
  font-size:clamp(.95rem,2.6vw,1.2rem); letter-spacing:-.01em;
  text-transform:uppercase; color:var(--ink-2); white-space:nowrap;
}
.marquee__group span::after{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none;
}

/* --- Bölüm iskeleti ------------------------------------------------------- */
.sec{ position:relative; padding:72px 0; border-top:1px solid var(--hair-2); }
.sec--alt{ background:var(--bg-2); }
.sec--quote{ background:var(--bg-2); }
.sec__head{ max-width:720px; margin-bottom:40px; }
.sec__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.95rem,6.6vw,3.4rem);
  line-height:1.02; letter-spacing:-.03em; margin:0 0 16px;
}
.sec__lede{ margin:0; color:var(--ink-2); font-size:16.5px; max-width:58ch; }
@media (min-width:900px){ .sec{ padding:110px 0; } .sec__head{ margin-bottom:58px; } }

/* Motion yüklendiyse açılış animasyonu uygulanır; yüklenmezse içerik görünür */
.motion-ready [data-anim]{ opacity:0; }
.motion-ready [data-anim="lines"]{ opacity:1; }
.motion-ready [data-anim="lines"] .line > span{ opacity:1; }
.motion-ready [data-anim="lines"] .ch{ opacity:0; }
/* Açılış bittiğinde harfler kalıcı olarak görünür kalır. Motion son değeri
   her zaman yazmıyor; başlık h1 olduğu için görünürlüğü şansa bırakmıyoruz. */
.hero__title.is-done .ch{
  opacity:1 !important; transform:none !important; filter:none !important;
}

/* --- Hizmetler ------------------------------------------------------------ */
.svc{ list-style:none; margin:0 0 36px; padding:0; border-top:1px solid var(--hair); }
.svc__item{ position:relative; padding:28px 0; border-bottom:1px solid var(--hair); overflow:hidden; }
.svc__item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:50% 100%;
  transition:transform .45s var(--ease);
}
.svc__idx{ display:block; margin-bottom:9px; font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.1em; color:var(--accent); }
.svc__name{ font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,4.6vw,1.9rem); letter-spacing:-.022em; line-height:1.14; margin:0 0 10px; }
.svc__text{ margin:0; color:var(--ink-2); font-size:15.5px; max-width:56ch; }
@media (min-width:860px){
  .svc__item{ display:grid; grid-template-columns:76px minmax(0,1fr) minmax(0,1.15fr); gap:28px; align-items:start; padding:34px 0 34px 18px; }
  .svc__idx{ margin:6px 0 0; }
  .svc__name{ margin:0; }
  .svc__item:hover::before{ transform:scaleY(1); transform-origin:50% 0; }
  .svc__item:hover{ background:rgba(239,235,226,.025); }
}

.notdo{
  padding:22px; border:1px solid var(--hair); border-left:2px solid var(--warn);
  border-radius:var(--radius); background:rgba(240,180,41,.035);
}
.notdo__title{ margin:0 0 9px; font-family:var(--display); font-weight:700; font-size:15px; color:var(--warn); }
.notdo__text{ margin:0; color:var(--ink-2); font-size:15px; }
.notdo__text strong{ color:var(--ink); }

/* --- Araç galerisi -------------------------------------------------------- */
.gallery{ display:grid; gap:12px; margin-bottom:40px; }
.shot{ position:relative; margin:0; overflow:hidden; border-radius:var(--radius); background:var(--bg-3); }
.shot img{ width:100%; height:100%; object-fit:cover; will-change:transform; transition:transform .7s var(--ease); }
.shot:hover img{ transform:scale(1.045); }
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:30px 16px 13px;
  font-size:12.5px; color:var(--ink-2);
  background:linear-gradient(180deg,transparent,rgba(12,13,12,.9));
}
.shot--lead{ aspect-ratio:16/10; }
.shot--sm{ aspect-ratio:4/3; }
@media (min-width:760px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .shot--lead{ grid-column:1 / -1; aspect-ratio:21/9; }
}

/* --- Teknik çizim --------------------------------------------------------- */
.blueprint{
  margin:0 calc(var(--gut) * -1) 36px; padding:26px var(--gut) 18px;
  background:
    linear-gradient(var(--hair-2) 1px,transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg,var(--hair-2) 1px,transparent 1px) 0 0/34px 100%,
    var(--bg);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.truck{ width:100%; height:auto; }
.truck--line .bp-shell{ fill:none; stroke:var(--ink-2); stroke-width:1.8; }
.truck--line .bp-glass{ fill:none; stroke:var(--ink-3); stroke-width:1.2; }
.truck--line .bp-thin{ fill:none; stroke:var(--ink-3); stroke-width:1.1; }
.truck--line .bp-ground{ stroke:var(--hair); stroke-width:1; }
.truck--line .dim__line,.truck--line .dim__tick{ stroke:var(--accent); stroke-width:1.3; }
.truck--line .dim__ext{ stroke:var(--accent); stroke-width:.8; stroke-dasharray:3 4; opacity:.55; }
.truck--line .dim__plate{ fill:var(--bg); stroke:none; }
.truck--line .dim__text{ fill:var(--accent); font-family:"Inter",sans-serif; font-size:14px; font-weight:600; }
.truck__wheel{ transform-box:fill-box; transform-origin:50% 50%; }

.art-note{ margin:12px 0 0; font-size:12px; color:var(--ink-3); }

/* --- Teknik liste --------------------------------------------------------- */
.spec{ display:grid; gap:30px; }
.spec__row{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:14px 0; border-bottom:1px solid var(--hair); }
.spec__row:first-child{ border-top:1px solid var(--hair); }
.spec__row dt{ color:var(--ink-2); font-size:15px; }
.spec__row dd{ margin:0; text-align:right; font-family:var(--display); font-weight:700; font-size:16.5px; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.spec__note{ display:block; font-family:var(--body); font-weight:400; font-size:12.5px; color:var(--ink-3); letter-spacing:0; }
.spec__cards{ display:grid; gap:14px; }
.card{ padding:20px; background:var(--bg-3); border:1px solid var(--hair); border-radius:var(--radius); will-change:transform; }
.card__title{ margin:0 0 8px; font-family:var(--display); font-weight:700; font-size:15.5px; }
.card p{ margin:0; color:var(--ink-2); font-size:14.5px; }
.card--warn{ border-left:2px solid var(--warn); }
.card--warn .card__title{ color:var(--warn); }
@media (min-width:860px){ .spec{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:44px; align-items:start; } }

/* --- Nasıl çalışır -------------------------------------------------------- */
.steps{ list-style:none; margin:0; padding:0; display:grid; }
.step{ position:relative; padding:0 0 32px 34px; border-left:1px solid var(--hair); }
.step:last-child{ padding-bottom:0; border-left-color:transparent; }
.step__dot{ position:absolute; left:-5px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--bg); }
.sec--alt .step__dot{ box-shadow:0 0 0 4px var(--bg-2); }
.step__idx{ display:block; margin-bottom:8px; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--accent); }
.step__name{ margin:0 0 9px; font-family:var(--display); font-weight:700; font-size:clamp(1.15rem,4vw,1.5rem); letter-spacing:-.02em; line-height:1.2; }
.step__text{ margin:0; color:var(--ink-2); font-size:15.5px; max-width:48ch; }
@media (min-width:860px){
  .steps{ grid-template-columns:repeat(3,1fr); }
  .step{ padding:34px 26px 0 0; border-left:none; border-top:1px solid var(--hair); }
  .step__dot{ left:0; top:-5px; }
}

/* --- Hakkımızda ----------------------------------------------------------- */
.prose p{ margin:0 0 18px; color:var(--ink-2); font-size:16.5px; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--ink); font-weight:600; }

/* --- Bölgeler + SSS ------------------------------------------------------- */
.regions{ display:grid; margin-bottom:54px; border-top:1px solid var(--hair); }
.regions__block{ padding:26px 0; border-bottom:1px solid var(--hair); }
.regions__title{ margin:0 0 10px; font-family:var(--display); font-weight:700; font-size:17px; }
.regions__text{ margin:0; color:var(--ink-2); font-size:15.5px; max-width:52ch; }
.regions__list{ color:var(--ink); font-weight:500; }
.regions__note{ margin:14px 0 0; font-size:14px; color:var(--ink-3); max-width:52ch; }
@media (min-width:860px){ .regions{ grid-template-columns:repeat(3,1fr); gap:0 34px; } .regions__block{ padding:30px 0; } }

.faq__head{ margin:0 0 6px; font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,4.6vw,1.75rem); letter-spacing:-.02em; }
.qa{ border-bottom:1px solid var(--hair); }
.qa:first-of-type{ border-top:1px solid var(--hair); }
.qa summary{
  display:flex; align-items:flex-start; gap:14px; padding:19px 0;
  cursor:pointer; list-style:none; font-size:16px; font-weight:500; transition:color .2s;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:"+"; margin-left:auto; flex:none;
  font-family:var(--display); font-size:20px; line-height:1; color:var(--accent);
  transition:transform .35s var(--ease);
}
.qa[open] summary::after{ transform:rotate(45deg); }
.qa summary:hover{ color:var(--accent); }
.qa__body{ padding:0 0 22px; max-width:62ch; }
.qa__body p{ margin:0; color:var(--ink-2); font-size:15.5px; }

/* --- Teklif --------------------------------------------------------------- */
.quote{ display:grid; gap:34px; }
.form{ display:grid; gap:18px; grid-template-columns:1fr; }
.field{ display:grid; gap:7px; }
.field label{ font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:7px; }
.req{ color:var(--accent); }
.opt{ font-weight:400; font-size:12px; color:var(--ink-3); }
.field input,.field textarea{
  width:100%; padding:13px 15px; background:var(--bg); color:var(--ink);
  border:1px solid var(--hair); border-radius:10px;
  font-family:var(--body); font-size:15.5px; line-height:1.5;
  transition:border-color .2s, background-color .2s; -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:62px; }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3); }
.field input:focus,.field textarea:focus{ border-color:var(--accent); outline:none; background:#080908; }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-color:#E05B3B; }
.err{ margin:0; font-size:13px; color:#FF8A6B; }

.preview{ border:1px solid var(--hair); border-radius:var(--radius); background:var(--bg); overflow:hidden; }
.preview__head{ margin:0; padding:11px 15px; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--ink-3); border-bottom:1px solid var(--hair-2); }
.preview__body{ margin:0; padding:15px; font-family:var(--body); font-size:14px; line-height:1.6; color:var(--ink-2); white-space:pre-wrap; word-break:break-word; max-height:260px; overflow:auto; }

.form__actions{ display:flex; flex-wrap:wrap; gap:11px; }
.form__fine{ margin:0; font-size:13px; color:var(--ink-3); max-width:54ch; }
.form__fine strong{ color:var(--ink-2); }

.direct{ padding:24px; background:var(--bg); border:1px solid var(--hair); border-radius:var(--radius); align-self:start; }
.direct__title{ margin:0 0 6px; font-family:var(--display); font-weight:700; font-size:17px; }
.direct__text{ margin:0 0 18px; color:var(--ink-2); font-size:14.5px; }
.direct__phone{
  display:block; margin-bottom:14px; text-decoration:none; padding:15px 17px;
  background:var(--bg-3); border:1px solid var(--hair); border-radius:12px;
  transition:border-color .25s; will-change:transform;
}
.direct__phone:hover{ border-color:var(--accent); }
.direct__label{ display:block; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:4px; }
.direct__value{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(1.25rem,5vw,1.55rem); letter-spacing:-.015em; }
.direct__meta{ margin:22px 0 0; display:grid; gap:12px; }
.direct__meta > div{ display:flex; justify-content:space-between; gap:14px; padding-top:12px; border-top:1px solid var(--hair-2); }
.direct__meta dt{ font-size:13px; color:var(--ink-3); }
.direct__meta dd{ margin:0; font-size:13.5px; text-align:right; color:var(--ink-2); }
@media (min-width:900px){
  .quote{ grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:44px; }
  .form{ grid-template-columns:1fr 1fr; }
  .field--full,.preview,.form__actions,.form__fine{ grid-column:1 / -1; }
}

/* --- Alt bilgi ------------------------------------------------------------ */
.foot{ padding:46px 0 34px; border-top:1px solid var(--hair); background:var(--bg); }
.foot__name{ margin:0 0 10px; font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,6vw,2.1rem); letter-spacing:-.03em; }
.foot__text{ margin:0 0 18px; color:var(--ink-2); font-size:15px; max-width:46ch; }
.foot__legal{ margin:0 0 10px; color:var(--ink-3); font-size:12.5px; max-width:60ch; }
.foot__legal a{ color:var(--ink-2); }

/* --- Mobil sabit çubuk ---------------------------------------------------- */
.mobilebar{
  position:fixed; left:0; right:0; bottom:0; z-index:110;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--hair); border-top:1px solid var(--hair);
  padding-bottom:env(safe-area-inset-bottom);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.mobilebar__btn{ display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 10px; font-size:15px; font-weight:600; text-decoration:none; }
.mobilebar__btn .ico{ width:18px; height:18px; }
.mobilebar__btn--call{ background-color:rgba(18,20,18,.95); color:var(--ink); }
.mobilebar__btn--wa{ background:var(--wa); color:var(--wa-ink); }
body{ padding-bottom:calc(54px + env(safe-area-inset-bottom)); }
@media (min-width:900px){ .mobilebar{ display:none; } body{ padding-bottom:0; } }

/* --- Hareketi azaltma tercihi -------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001s !important; animation-delay:0s !important; transition-duration:.001s !important; }
  .motion-ready [data-anim],
  .motion-ready [data-anim="lines"] .line > span,
  .motion-ready [data-anim="lines"] .ch{ opacity:1 !important; transform:none !important; filter:none !important; }
  .hero__beam{ display:none; }
  .hero__media{ animation:none !important; }
  .rail__fill{ transform:scaleY(1) !important; }
  .rail-node{ background:var(--accent); border-color:var(--accent); }
  .progress{ transform:scaleX(1) !important; }
  .shot:hover img{ transform:none; }
  .marquee__track{ transform:none !important; }
}

/* --- Kaydırınca belirginleşen üst bar ------------------------------------- */
.topbar{ transition:background-color .3s, border-color .3s, box-shadow .3s; }
.topbar.is-stuck{
  background:rgba(12,13,12,.93);
  border-bottom-color:var(--hair);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.9);
}

/* ==========================================================================
   CİLA VE KULLANIM KOLAYLIĞI
   ========================================================================== */

/* --- Zemin dokusu: asfalt grenli yüzey hissi ------------------------------ */
.grain{
  position:fixed; inset:0; z-index:150; pointer-events:none;
  opacity:.5; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}

/* --- Kartlarda imleç ışığı ------------------------------------------------ */
.card{ position:relative; overflow:hidden; }
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
             rgba(255,106,43,.13), transparent 62%);
}
.card:hover::after{ opacity:1; }

/* --- GÜZERGÂH ŞERİDİ (imza öğesi) ---------------------------------------- */
.route{ margin-bottom:46px; }
.route__cap{
  margin:0 0 22px; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:var(--ink-3);
}
.route__rail{ position:relative; }

.route__line{
  position:absolute; left:0; right:0; top:5px; height:2px;
  background:var(--hair-2); display:block; border-radius:2px;
}
.route__fill{
  display:block; height:100%; width:calc(var(--p,0) * 100%);
  background:var(--accent); border-radius:2px;
}
.route__truck{
  position:absolute; top:6px; left:calc(var(--p,0) * 100%);
  transform:translate(-50%,-50%);
  width:30px; height:30px; display:grid; place-items:center;
  color:var(--accent-ink); background:var(--accent);
  border-radius:50%; box-shadow:0 0 0 5px var(--bg);
}
.route__truck svg{ width:16px; height:16px; }

.route__stops{ position:relative; list-style:none; margin:0; padding:0; height:78px; }
.route__stop{ position:absolute; top:0; width:150px; text-align:center; transform:translateX(-50%); }
.route__stop:nth-child(1){ left:0; transform:none; text-align:left; }
.route__stop:nth-child(2){ left:33.33%; }
.route__stop:nth-child(3){ left:66.66%; }
.route__stop:nth-child(4){ left:100%; transform:translateX(-100%); text-align:right; }

.route__dot{
  display:block; width:12px; height:12px; border-radius:50%;
  background:var(--bg); border:2px solid var(--ink-3);
  margin:0 auto 16px; transition:background-color .3s, border-color .3s, transform .3s var(--ease);
}
.route__stop:nth-child(1) .route__dot{ margin-left:0; }
.route__stop:nth-child(4) .route__dot{ margin-right:0; margin-left:auto; }
.route__stop.is-passed .route__dot{ background:var(--accent); border-color:var(--accent); transform:scale(1.2); }

.route__stop b{ display:block; font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.015em; }
.route__stop i{ display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:2px; }

@media (max-width:759px){
  .route__rail{ padding-left:28px; }
  .route__line{ left:5px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .route__fill{ width:100%; height:calc(var(--p,0) * 100%); }
  .route__truck{ top:calc(var(--p,0) * 100%); left:6px; }
  .route__stops{ position:relative; height:auto; display:grid; gap:26px; }
  /* Yatay yerleşimi tamamen sıfırla: duraklar alt alta ve sola hizalı */
  .route__stop,
  .route__stop:nth-child(1),
  .route__stop:nth-child(2),
  .route__stop:nth-child(3),
  .route__stop:nth-child(4){
    position:relative; left:auto; top:auto;
    width:auto; text-align:left; transform:none;
  }
  .route__stop .route__dot,
  .route__stop:nth-child(1) .route__dot,
  .route__stop:nth-child(4) .route__dot{
    position:absolute; left:-29px; top:3px; margin:0;
  }
}

/* --- Seçim rozetleri ------------------------------------------------------ */
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.chips--inline{ margin-top:0; }
.chip{
  padding:7px 13px; border-radius:100px; cursor:pointer;
  background:transparent; color:var(--ink-2);
  border:1px solid var(--hair);
  font-family:var(--body); font-size:13px; font-weight:500; white-space:nowrap;
  transition:border-color .2s, color .2s, background-color .2s;
}
.chip:hover{ border-color:rgba(239,235,226,.34); color:var(--ink); }
.chip.is-on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }

.daterow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.daterow input{ flex:0 1 190px; }

.liftrow{ display:grid; gap:14px; margin-top:4px; }
.liftrow__set{ display:grid; gap:7px; }
.liftrow__label{ font-size:12.5px; color:var(--ink-3); }
@media (min-width:620px){ .liftrow{ grid-template-columns:1fr 1fr; gap:18px; } }

/* --- Numarayı kopyala ----------------------------------------------------- */
.direct__copy{
  width:100%; margin-bottom:10px; padding:10px 14px;
  background:transparent; color:var(--ink-3);
  border:1px dashed var(--hair); border-radius:10px;
  font-family:var(--body); font-size:13px; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.direct__copy:hover{ color:var(--ink); border-color:rgba(239,235,226,.3); }

/* --- Yukarı çık ----------------------------------------------------------- */
.totop{
  position:fixed; right:18px; bottom:calc(68px + env(safe-area-inset-bottom));
  z-index:115; width:44px; height:44px; display:grid; place-items:center;
  background:var(--bg-3); color:var(--ink); cursor:pointer;
  border:1px solid var(--hair); border-radius:50%;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .3s, visibility .3s, transform .3s var(--ease), border-color .2s;
}
.totop svg{ width:18px; height:18px; }
.totop:hover{ border-color:var(--accent); }
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
@media (min-width:900px){ .totop{ right:28px; bottom:28px; } }

@media (prefers-reduced-motion: reduce){
  .route__fill{ width:100% !important; height:100% !important; }
  .route__stop .route__dot{ background:var(--accent); border-color:var(--accent); }
  .card::after{ display:none; }
}

/* --- Hakkımızda imzası ---------------------------------------------------- */
.prose__sign{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-top:28px !important; padding-top:18px;
  border-top:1px solid var(--hair);
  font-family:var(--display); font-weight:700; font-size:16px;
  color:var(--ink) !important; letter-spacing:-.015em;
}
.prose__sign i{
  font-family:var(--body); font-style:normal; font-weight:400;
  font-size:13px; color:var(--ink-3); letter-spacing:0;
}

/* --- Kasaya ne sığar ------------------------------------------------------ */
.fit{
  margin:0 0 40px; padding:24px;
  background:var(--bg); border:1px solid var(--hair); border-radius:var(--radius);
}
.fit__head{ margin-bottom:16px; }
.fit__title{
  margin:0 0 6px; font-family:var(--display); font-weight:700;
  font-size:clamp(1.2rem,4.4vw,1.5rem); letter-spacing:-.02em;
}
.fit__lede{ margin:0; color:var(--ink-2); font-size:14.5px; max-width:54ch; }
.fit__pick{ margin-bottom:18px; }

.fit__stage{
  background:
    linear-gradient(var(--hair-2) 1px,transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg,var(--hair-2) 1px,transparent 1px) 0 0/28px 100%,
    var(--bg-3);
  border:1px solid var(--hair); border-radius:10px;
  padding:10px; overflow:hidden;
}
.fit__stage svg{ width:100%; height:auto; display:block; }

.fit-bed{ fill:rgba(239,235,226,.04); stroke:var(--ink-3); stroke-width:1.5; }
.fit-dim{ fill:var(--ink-3); font-family:"Inter",sans-serif; font-size:11px; font-weight:600; }
.fit-item{
  fill:rgba(255,106,43,.22); stroke:var(--accent); stroke-width:1.5;
  transition:fill .25s;
}
.fit-label{
  fill:var(--ink); font-family:"Inter",sans-serif; font-size:11px; font-weight:600;
  pointer-events:none;
}

.fit__bottom{ margin-top:16px; display:grid; gap:12px; }
.fit__list{ display:flex; flex-wrap:wrap; gap:7px; }
.fit-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px 6px 12px; cursor:pointer;
  background:rgba(255,106,43,.12); color:var(--ink);
  border:1px solid rgba(255,106,43,.4); border-radius:100px;
  font-family:var(--body); font-size:13px;
  transition:background-color .2s, border-color .2s;
}
.fit-tag:hover{ background:rgba(255,106,43,.22); border-color:var(--accent); }
.fit-tag b{
  min-width:19px; height:19px; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
  border-radius:100px; font-size:11.5px; font-weight:700;
}
.fit-clear{
  padding:6px 12px; cursor:pointer;
  background:transparent; color:var(--ink-3);
  border:1px dashed var(--hair); border-radius:100px;
  font-family:var(--body); font-size:13px;
  transition:color .2s, border-color .2s;
}
.fit-clear:hover{ color:var(--ink); border-color:rgba(239,235,226,.3); }

.fit__read{ margin:0; font-size:14px; color:var(--ink-2); }
.fit__read.is-warn{ color:var(--warn); }

@media (min-width:860px){ .fit{ padding:28px; } }

/* ==========================================================================
   GİRİŞ EKRANI — ilk saniyedeki etki
   ========================================================================== */

/* Harf bazlı açılış */
.hero__title .ch{
  display:inline-block;
  will-change:transform, opacity, filter;
}

/* Far huzmesi: imleci takip eden sıcak ışık.
   Dokunmatik cihazda imleç yok — orada yavaşça kendi kendine geziniyor. */
.hero__beam{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  mix-blend-mode:screen; opacity:0;
  background:radial-gradient(420px circle at var(--bx,50%) var(--by,45%),
             rgba(255,170,90,.22), rgba(255,120,40,.08) 42%, transparent 68%);
  transition:opacity .9s ease;
}
.hero__beam.is-on{ opacity:1; }

@media (hover:none){
  .hero__beam{ animation:beamDrift 14s ease-in-out infinite alternate; }
}
@keyframes beamDrift{
  from{ --bx:28%; --by:38%; }
  to{ --bx:72%; --by:56%; }
}

/* Aracın yerine oturması + çok yavaş nefes alması */
.hero__media{ animation:mediaIdle 22s ease-in-out infinite alternate; }
@keyframes mediaIdle{
  from{ --idle:0; }
  to{ --idle:1; }
}

/* Başlık üzerinde bir kez geçen ışık */
.hero__title{ position:relative; }
.hero__title::after{
  content:""; position:absolute; inset:-6% -4%;
  pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 38%,
             rgba(255,255,255,.5) 48%, rgba(255,200,150,.28) 54%, transparent 64%);
  mix-blend-mode:overlay;
  transform:translateX(-120%);
}
.motion-ready .hero__title::after{ animation:sweep 1.5s cubic-bezier(.4,0,.2,1) .85s 1; }
@keyframes sweep{
  0%{ opacity:0; transform:translateX(-120%); }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ opacity:0; transform:translateX(120%); }
}

@media (prefers-reduced-motion: reduce){
  .hero__title::after{ animation:none !important; opacity:0 !important; }
}