/* Ersan Nakliyat — tek sayfa tanıtım sitesi
   Tasarım kaynağı: "Ersan Nakliyat Sitesi.dc.html" (Claude Design) */

:root{
  --ink:#14181C;
  --ink-2:#1E242A;
  --ink-3:#1D2429;
  --line-dark-2:#262D33;

  --paper:#FFFDFA;
  --sand:#F6F3EE;
  --line:#E4DED4;
  --line-2:#EAE4DB;
  --line-3:#EFEAE2;

  --brand:#D64500;
  --brand-dark:#A83600;
  --brand-bright:#FF6B2C;
  --brand-soft:#FFD9C9;

  --wa:#1FA855;
  --wa-dark:#17904a;
  --star:#F5A623;

  --muted:#5B6167;
  --muted-2:#8E959C;
  --muted-3:#A9B0B8;
  --muted-4:#7C848B;
  --muted-5:#8A8F95;
  --nav:#C7CCD1;

  --pad-x:56px;
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --display:'Archivo',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  overflow-x:hidden;
  background:var(--paper);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  color:var(--ink);
}

a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark)}
h1,h2,h3,h4{margin:0;font-family:var(--display);letter-spacing:-0.02em}
p{margin:0;text-wrap:pretty}
img{max-width:100%}
button{font-family:var(--sans)}

:focus-visible{outline:3px solid var(--brand-bright);outline-offset:3px;border-radius:4px}

.ico{flex:none}

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 17px;border-radius:10px;
  font-weight:700;font-size:15px;white-space:nowrap;
  transition:background 160ms ease,color 160ms ease,border-color 160ms ease;
}
.btn--lg{gap:12px;padding:19px 28px;border-radius:12px;font-size:17px;flex:none}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:var(--wa-dark);color:#fff}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:#EFEDEA;color:var(--ink)}
.btn--dark{background:var(--ink);color:#fff;padding:15px 22px;border-radius:11px;font-size:16px;gap:10px}
.btn--dark:hover{background:var(--ink-2);color:#fff}
.btn--ghost{border:1.5px solid #3A4148;color:#fff}
.btn--ghost:hover{background:var(--ink-2);color:#fff}
.btn--outline{border:1.5px solid rgba(255,255,255,0.5);color:#fff;font-weight:800}
.btn--outline:hover{background:rgba(255,255,255,0.12);color:#fff}
.cta .btn--light{font-weight:800}

.logo-mark{
  width:38px;height:38px;border-radius:10px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:19px;flex:none;
}
.logo-mark--sm{width:34px;height:34px;border-radius:9px;font-size:17px}

/* ---------- Header ---------- */
.head{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad-x);
  background:rgba(20,24,28,0.97);
  backdrop-filter:blur(8px);
  color:#fff;
}
.head__brand{display:flex;align-items:center;gap:14px;color:#fff}
.head__brand:hover{color:#fff}
.head__names{display:flex;flex-direction:column;line-height:1.1}
.head__mark{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:0.02em;white-space:nowrap}
.head__sub{font-size:11px;letter-spacing:0.16em;color:var(--muted-2);font-weight:600;white-space:nowrap}
.head__right{display:flex;align-items:center;gap:28px}
.head__actions{display:flex;gap:10px}

.nav{display:flex;gap:22px;font-size:14px;font-weight:600;white-space:nowrap}
.nav a{color:var(--nav);transition:color 160ms ease}
.nav a:hover{color:#fff}

/* Header'daki telefon ikonu yalnızca dar ekranda görünür (860px kırılımında açılır) */
[data-r="telicon"]{display:none}

/* ---------- Hero ---------- */
.hero{
  background:var(--ink);color:#fff;
  padding:96px var(--pad-x) 104px;
}
.hero__inner{min-width:0;max-width:960px}

.badge{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid #333A41;border-radius:999px;padding:7px 14px;
  font-size:12px;font-weight:700;letter-spacing:0.1em;color:#B9C0C7;
  margin-bottom:26px;
}
.badge__dot{width:7px;height:7px;border-radius:99px;background:var(--wa);flex:none}

.hero h1{font-size:74px;line-height:0.96;font-weight:900;margin-bottom:22px}
.hero__lead{font-size:20px;line-height:1.5;color:var(--muted-3);max-width:560px;margin-bottom:34px}
.btnrow{display:flex;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.hero__hours{font-size:14px;color:var(--muted-4);font-weight:500}

/* ---------- Kayan şerit ---------- */
@keyframes akis{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{background:var(--brand);color:#fff;overflow:hidden}
.marquee__track{display:flex;width:max-content;animation:akis 26s linear infinite}
.marquee__item{
  display:flex;align-items:center;gap:26px;
  padding:18px 26px;font-size:15px;font-weight:700;white-space:nowrap;
}
.marquee__item i{font-style:normal;opacity:0.45}

/* ---------- Bölüm iskeleti ---------- */
.section{background:#fff;padding:88px var(--pad-x)}
.section--sand{background:var(--sand)}

.section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:38px}
.section__head--tight{margin-bottom:30px}
.section__head h2{font-size:46px;font-weight:800;line-height:1.05}
.section__lead{font-size:16px;color:var(--muted);max-width:340px;line-height:1.55}

.eyebrow{font-size:12px;font-weight:800;letter-spacing:0.16em;color:var(--brand);margin-bottom:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* ---------- Hizmetler ---------- */
.svc{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;
  display:flex;flex-direction:column;gap:12px;min-height:222px;color:var(--ink);
  transition:border-color 180ms ease,transform 180ms ease;
}
.svc:hover{border-color:var(--ink);transform:translateY(-3px);color:var(--ink)}
.svc__n{font-family:var(--display);font-weight:800;font-size:13px;color:#B4ADA2;letter-spacing:0.08em}
.svc h3{font-size:23px;font-weight:800}
.svc p{font-size:15px;line-height:1.55;color:var(--muted);flex:1}
.svc__cta{color:var(--wa);font-weight:700;font-size:15px}

/* ---------- Filo karuseli ---------- */
.fleet__arrows{display:flex;align-items:center;gap:10px}
.arrow{
  width:52px;height:52px;border-radius:99px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  cursor:pointer;font-size:20px;line-height:1;
  transition:background 160ms ease,color 160ms ease,border-color 160ms ease;
}
.arrow:hover{border-color:var(--ink)}
.arrow--solid{border-color:var(--ink);background:var(--ink);color:#fff}
.arrow--solid:hover{background:#000;border-color:#000}

.fleet__viewport{overflow:hidden;border-radius:20px}
.fleet__track{display:flex;width:100%;transition:transform 620ms cubic-bezier(.4,0,.2,1)}
.slide{width:100%;flex:none;position:relative;height:520px;background:var(--ink-3)}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
/* assets/fleet/ içindeki görsel eksikse kırık ikon yerine koyu zemin kalsın */
.slide--noimg img{display:none}
.slide__cap{
  position:absolute;left:0;right:0;bottom:0;padding:34px;
  background:linear-gradient(transparent,rgba(20,24,28,0.88));
  color:#fff;pointer-events:none;
}
.slide__cap h3{font-size:30px;font-weight:800;margin-bottom:6px}
.slide__cap p{font-size:16px;color:#D9DDE1}

.fleet__dots{display:flex;gap:8px;margin-top:18px}
.dot{
  width:12px;height:12px;border-radius:99px;border:none;padding:0;
  background:#DDD6CB;cursor:pointer;transition:width 300ms ease,background 300ms ease;
}
.dot[aria-current="true"]{width:34px;background:var(--brand)}

/* ---------- Yorumlar ---------- */
.reviews__head{display:flex;align-items:center;gap:18px;margin-bottom:32px;flex-wrap:wrap}
.reviews__head h2{font-size:46px;font-weight:800}
.gpill{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;color:var(--ink);
  transition:border-color 160ms ease;
}
.gpill:hover{border-color:var(--ink);color:var(--ink)}
.gpill__score{font-family:var(--display);font-weight:800;font-size:18px}
.gpill__label{font-size:13px;color:var(--muted);font-weight:600}
.stars{color:var(--star);font-size:16px;letter-spacing:2px}

.review{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;
  display:flex;flex-direction:column;gap:14px;
}
.review .stars{font-size:15px}
.review p{font-size:16px;line-height:1.6;color:#2C3238;flex:1}
.review__who{display:flex;align-items:center;gap:11px;padding-top:14px;border-top:1px solid var(--line-3)}
.avatar{
  width:34px;height:34px;border-radius:99px;background:var(--ink);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
}
.review__meta{display:flex;flex-direction:column;line-height:1.25}
.review__name{font-size:14px;font-weight:700}
.review__date{font-size:12px;color:var(--muted-5)}

/* ---------- SSS ---------- */
.sss{
  background:#fff;padding:88px var(--pad-x);
  display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:56px;align-items:start;
}
.sss__intro{min-width:0}
.sss__intro h2{font-size:44px;font-weight:800;line-height:1.05;margin-bottom:18px}
.sss__lead{font-size:16px;line-height:1.6;color:var(--muted);margin-bottom:24px}

.faq{min-width:0;border-top:1px solid var(--line-2)}
.faq__item{border-bottom:1px solid var(--line-2)}
.faq__item h3{margin:0;font:inherit;letter-spacing:normal}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;background:none;border:none;cursor:pointer;text-align:left;
  font-size:19px;font-weight:700;color:var(--ink);
  font-family:var(--display);letter-spacing:-0.02em;
}
.faq__ico{
  font-size:26px;font-weight:400;color:var(--brand);line-height:1;flex:none;
  transition:transform 220ms ease;
}
.faq__q[aria-expanded="true"] .faq__ico{transform:rotate(45deg)}
.faq__a{display:none;padding:0 4px 24px}
.faq__a p{font-size:16px;line-height:1.65;color:var(--muted);max-width:640px}
.faq__item.is-open .faq__a{display:block}

/* ---------- CTA ---------- */
.cta{
  background:var(--brand);color:#fff;padding:80px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.cta h2{font-size:48px;font-weight:900;line-height:1.02;margin-bottom:14px}
.cta p{font-size:17px;color:var(--brand-soft);font-weight:500}
.cta__btns{display:flex;gap:14px}
.cta__btns .btn{padding:20px 30px}

/* ---------- Footer ---------- */
.footwrap{background:var(--ink);color:var(--muted-2);padding:52px var(--pad-x) 40px}
.foot{
  display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;
  padding-bottom:34px;border-bottom:1px solid var(--line-dark-2);
}
.foot__brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.foot__name{font-family:var(--display);font-weight:800;font-size:18px;color:#fff;letter-spacing:0.02em}
.foot__about{font-size:15px;line-height:1.6;max-width:340px}
.foot__col{display:flex;flex-direction:column;gap:10px;font-size:15px}
.foot__h{color:#fff;font-weight:700;margin-bottom:4px}
.foot__tel{color:#fff;font-weight:700;font-size:19px}
.foot__tel:hover{color:#fff}
.foot__wa{color:var(--wa);font-weight:700}
.foot__wa:hover{color:var(--wa-dark)}
.footbot{display:flex;justify-content:space-between;gap:16px;padding-top:22px;font-size:13px}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  :root{--pad-x:32px}
  .hero h1{font-size:56px}
  .nav{display:none}
  .hero{padding:56px var(--pad-x) 64px}
  .section,.sss{padding:64px var(--pad-x)}
  .cta,.footwrap{padding:64px var(--pad-x)}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .sss{grid-template-columns:1fr;gap:32px}
  .slide{height:420px}
}

@media(max-width:860px){
  :root{--pad-x:20px}
  .hero h1{font-size:40px;line-height:1.04}
  .section__head h2,.reviews__head h2{font-size:29px;line-height:1.12}
  .sss__intro h2,.cta h2{font-size:29px;line-height:1.12}
  .slide__cap h3,.svc h3{font-size:21px}

  .head{padding:10px 14px;gap:8px}
  .head__mark{font-size:15px}
  .head__sub{display:none}
  .head__brand .logo-mark{width:32px;height:32px;font-size:16px}
  .head__right{gap:8px}
  .head__actions{gap:8px}
  [data-r="walabel"],[data-r="tellabel"]{display:none}
  .head__wa,.head__tel{width:46px;height:46px;padding:0;gap:0;justify-content:center;flex:none}
  [data-r="telicon"]{display:block}

  .hero{padding:34px var(--pad-x) 42px}
  .hero__lead{font-size:17px}
  .btnrow{flex-direction:column;gap:10px}
  .btnrow>.btn{justify-content:center;padding:17px 20px;font-size:16px}

  .section,.sss{padding:52px var(--pad-x)}
  .section__head{flex-direction:column;align-items:flex-start;gap:14px}
  .section__lead{max-width:none}
  .grid3{grid-template-columns:1fr}
  .slide{height:280px}
  .slide__cap{padding:22px}

  .sss{gap:26px}
  .cta{flex-direction:column;align-items:stretch;padding:52px var(--pad-x);gap:26px}
  .cta__btns{flex-direction:column;gap:10px}
  .cta__btns .btn{justify-content:center;text-align:center}

  .footwrap{padding:44px var(--pad-x) 30px}
  .foot{grid-template-columns:1fr;gap:28px}
  .footbot{flex-direction:column;gap:8px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee__track{animation:none}
  .fleet__track{transition:none}
  *{transition-duration:0.01ms!important}
}