/* ═══════════════════════════════════════════════════
   albayoto.com — $10K Industrial Dark
   Design tokens → Reset → Layout → Components → Responsive
   ═══════════════════════════════════════════════════ */

/* ===== DESIGN TOKENS ===== */
:root {
  /* Palette — 5-color system */
  --ink:        #09090B;
  --ink-deep:   #000000;
  --surface:    #0F0F12;
  --surface-2:  #18181B;
  --surface-3:  #222226;
  --fg:         #FAFAFA;
  --fg-2:       #A1A1AA;
  --fg-3:       #63636B;
  --accent:     #F5B000;
  --accent-2:   #D4990A;
  --accent-dim: rgba(245,176,0,0.10);
  --accent-glow:rgba(245,176,0,0.20);
  --green:      #22C55E;
  --green-dim:  rgba(34,197,94,0.15);
  --red:        #EF4444;

  /* Surfaces & borders */
  --border:     rgba(255,255,255,0.06);
  --border-2:   rgba(255,255,255,0.10);
  --border-3:   rgba(255,255,255,0.16);

  /* Typography */
  --font-display: 'Lexend', system-ui, sans-serif;
  --font-body:    'Source Sans 3', system-ui, sans-serif;
  --fs-hero:   clamp(3.25rem, 7.5vw, 6.5rem);
  --fs-h1:     clamp(2.25rem, 5vw, 3.5rem);
  --fs-h2:     clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3:     clamp(1.25rem, 2vw, 1.5rem);
  --fs-body:   1.0625rem;
  --fs-sm:     0.875rem;
  --fs-xs:     0.75rem;
  --lh-body:   1.65;
  --lh-tight:  1.08;
  --ls-tight:  -0.03em;
  --ls-wide:   0.08em;

  /* Spacing — 4px base */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Animation */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --fast:     150ms;
  --mid:      250ms;
  --slow:     400ms;

  /* Layout */
  --max-w:    75rem;
  --radius-sm: 0.375rem;
  --radius:    0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow:    0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 30px var(--accent-glow);

  /* Layout shift prevention */
  --nav-h: 6rem;
}

/* Light theme overrides */
[data-theme="light"] {
  --ink:       #F8F8F6;
  --ink-deep:  #FFFFFF;
  --surface:   #EEECE8;
  --surface-2: #E4E2DE;
  --surface-3: #D8D5D0;
  --fg:        #0F0F12;
  --fg-2:      #44403C;
  --fg-3:      #78716C;
  --border:    rgba(0,0,0,0.06);
  --border-2:  rgba(0,0,0,0.10);
  --border-3:  rgba(0,0,0,0.16);
  --accent-dim:rgba(245,176,0,0.12);
  --accent-glow:rgba(245,176,0,0.28);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow:    0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:dark}
[data-theme="light"] html{color-scheme:light}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  background:var(--ink);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background var(--slow) var(--ease),color var(--slow) var(--ease);
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent);color:var(--ink)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:4px}

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
h1{font-weight:800}
strong{font-weight:600}

/* ===== SKIP LINK ===== */
.skip-link{
  position:fixed;top:-100px;left:var(--sp-4);z-index:9999;
  background:var(--accent);color:var(--ink);
  font-family:var(--font-display);font-weight:700;
  padding:10px 20px;border-radius:var(--radius-sm);
  transition:top var(--mid);
}
.skip-link:focus{top:var(--sp-4)}

/* ===== LAYOUT ===== */
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-6)}
.section{padding:var(--sp-32) 0}
.section--alt{background:var(--surface)}
.intro__text{max-width:48rem;font-size:var(--fs-body);line-height:1.75;color:var(--fg-2)}
.intro__text p{margin-bottom:var(--sp-5)}
.intro__text strong{color:var(--fg);font-weight:600}
.breadcrumb{font-size:var(--fs-sm)}
.breadcrumb a:hover{color:var(--accent)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-6);margin-top:var(--sp-8)}
.blog-card{transition:transform var(--fast) var(--ease-out)}
.blog-card:hover{transform:translateY(-2px)}
.blog-card h2{font-size:var(--fs-h3);margin-bottom:var(--sp-3)}
.blog-card h2 a{color:var(--fg);transition:color var(--fast)}
.blog-card h2 a:hover{color:var(--accent)}
.section__header{max-width:40rem;margin-bottom:var(--sp-16)}
.section__title{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  font-weight:800;
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  margin:var(--sp-3) 0;
  color:var(--fg);
}
.section__sub{color:var(--fg-2);font-size:var(--fs-body);line-height:var(--lh-body);max-width:32rem}
.label{
  display:inline-block;
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--accent);
  padding:4px 0;
  border-bottom:1px solid var(--accent-dim);
  margin-bottom:var(--sp-2);
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-body);
  letter-spacing:0.01em;
  padding:0.875rem 1.75rem;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:background var(--mid) var(--ease),
             color var(--mid) var(--ease),
             border-color var(--mid) var(--ease),
             transform var(--fast) var(--ease-out),
             box-shadow var(--mid) var(--ease);
}
.btn--accent{
  background:var(--accent);color:var(--ink);border-color:var(--accent);
}
.btn--accent:hover{
  background:var(--accent-2);border-color:var(--accent-2);
  transform:translateY(-1px);box-shadow:var(--shadow-glow);
}
.btn--accent:active{transform:translateY(0)}
.btn--ghost{
  background:transparent;color:var(--fg);border-color:var(--border-3);
}
.btn--ghost:hover{
  border-color:var(--accent);color:var(--accent);transform:translateY(-1px);
}
.btn--lg{padding:1.125rem 2.25rem;font-size:1.125rem}
.btn--full{width:100%;justify-content:center}

/* ===== LIVE DOT ===== */
.live-dot{
  display:inline-block;width:8px;height:8px;background:var(--green);
  border-radius:50%;flex-shrink:0;
  animation:livepulse 2s ease-in-out infinite;
}
.live-dot--sm{width:6px;height:6px}
@keyframes livepulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 var(--green-dim)}
  50%{opacity:0.85;box-shadow:0 0 0 6px transparent}
}

/* ===== NAVBAR ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:900}
.nav{
  background:rgba(9,9,11,0.85);
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  border-bottom:1px solid var(--border);
  transition:background var(--slow) var(--ease),border-color var(--slow) var(--ease);
}
[data-theme="light"] .nav{background:rgba(248,248,246,0.88)}
.nav.scrolled{background:rgba(9,9,11,0.97);border-bottom-color:var(--border-2)}
[data-theme="light"] .nav.scrolled{background:rgba(248,248,246,0.98)}
.nav__inner{
  display:flex;align-items:center;
  max-width:var(--max-w);margin:0 auto;
  padding:0 var(--sp-6);height:var(--nav-h);gap:var(--sp-4);
}
.nav__brand{
  display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0;
  transition:opacity var(--fast) var(--ease);
  border:none;outline:none;
}
.nav__brand:hover{opacity:0.8}
.brand__logo{height:86px;width:auto;display:block;border:0;outline:0}
.brand__logo--light{display:none}
.brand__logo--dark{display:block}
[data-theme="light"] .brand__logo--light{display:block}
[data-theme="light"] .brand__logo--dark{display:none}

.nav__links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__link{
  font-family:var(--font-display);font-weight:500;font-size:var(--fs-sm);
  color:var(--fg-2);padding:0.5rem 0.75rem;border-radius:var(--radius-sm);
  transition:color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.nav__link:hover{color:var(--fg);background:var(--surface-2)}
.nav__link[aria-current="page"]{color:var(--accent);background:var(--accent-dim)}

.nav__actions{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0}
.theme-toggle{
  display:flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:var(--radius);
  color:var(--fg-2);border:1px solid var(--border-2);
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}
.icon-sun,.icon-moon{display:flex;align-items:center;justify-content:center}
.icon-moon{display:none}
[data-theme="light"] .icon-sun{display:none}
[data-theme="light"] .icon-moon{display:flex}
.nav__cta{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);
  background:var(--accent);color:var(--ink);
  padding:0.625rem 1.125rem;border-radius:var(--radius);
  white-space:nowrap;
  transition:background var(--fast) var(--ease),transform var(--fast) var(--ease-out);
}
.nav__cta:hover{background:var(--accent-2);transform:translateY(-1px)}
.nav__cta .live-dot{width:6px;height:6px}

/* Hamburger */
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:2.5rem;height:2.5rem;padding:0.5rem;flex-shrink:0;
}
.hamburger__bar{
  display:block;width:22px;height:2px;
  background:var(--fg);border-radius:2px;
  transition:transform var(--mid) var(--ease),opacity var(--mid) var(--ease);
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ===== HERO ===== */
.hero{
  position:relative;min-height:calc(100svh - 3.75rem);display:flex;align-items:center;
  overflow:hidden;padding-top:var(--nav-h);
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transform-origin:65% 45%;
  animation:kenburns 28s ease-in-out 0.6s infinite alternate both;
}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(9,9,11,0.94) 0%,rgba(9,9,11,0.78) 40%,rgba(9,9,11,0.35) 100%);
}
/* amber tepe-lambası taraması — çekici sinyali */
.hero__beacon{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:screen;opacity:0;
  background:linear-gradient(105deg,
    transparent 30%,
    rgba(245,176,0,0.10) 45%,
    rgba(245,176,0,0.22) 50%,
    rgba(245,176,0,0.10) 55%,
    transparent 70%);
  background-size:260% 100%;
  animation:beaconsweep 7.5s ease-in-out 1.4s infinite;
}
@keyframes kenburns{
  from{transform:scale(1.0) translate3d(0,0,0)}
  to{transform:scale(1.09) translate3d(-1.4%,-1.2%,0)}
}
@keyframes beaconsweep{
  0%{background-position:135% 0;opacity:0}
  35%{opacity:1}
  65%{opacity:1}
  100%{background-position:-35% 0;opacity:0}
}
/* otoyol şerit çizgisi — hareket halindeki yol hissi */
.hero__road{
  position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.hero__road::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    var(--accent) 0,var(--accent) 34px,
    transparent 34px,transparent 74px);
  opacity:0.55;
  animation:roadflow 2.4s linear infinite;
}
@keyframes roadflow{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-74px,0,0)}
}
[data-theme="light"] .hero__overlay{
  background:linear-gradient(115deg,rgba(9,9,11,0.95) 0%,rgba(9,9,11,0.85) 40%,rgba(9,9,11,0.60) 100%);
}
.hero__inner{position:relative;z-index:3;width:100%;max-width:90rem;margin:0 auto;padding:var(--sp-6) var(--sp-6) var(--sp-5)}
.hero__content{max-width:44rem}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-display);font-size:var(--fs-sm);font-weight:500;
  color:rgba(255,255,255,0.55);letter-spacing:0.04em;
  margin-bottom:var(--sp-4);
  opacity:0;animation:fadeup 0.7s var(--ease-out) 0.1s forwards;
}
.hero__heading{
  font-family:var(--font-display);font-size:clamp(3rem,5.6vw,4.75rem);font-weight:800;
  line-height:0.98;letter-spacing:-0.04em;
  color:#FFFFFF;margin-bottom:var(--sp-4);
  opacity:0;animation:fadeup 0.7s var(--ease-out) 0.2s forwards;
}
.hero__heading em{color:var(--accent);font-style:normal}
.hero__tagline{
  font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;
  color:var(--accent);letter-spacing:0.01em;
  margin-bottom:var(--sp-3);
  padding-bottom:var(--sp-2);
  border-bottom:1px solid rgba(245,176,0,0.2);
  display:inline-block;
  opacity:0;animation:fadeup 0.7s var(--ease-out) 0.25s forwards;
}
.hero__tagline strong{color:#FFFFFF;font-weight:700}
.hero__sub{
  font-size:var(--fs-body);color:rgba(255,255,255,0.6);
  line-height:var(--lh-body);margin-bottom:var(--sp-6);max-width:32rem;
  opacity:0;animation:fadeup 0.7s var(--ease-out) 0.35s forwards;
}
.hero__sub strong{color:var(--accent);font-weight:600}
.hero__stats{
  display:flex;align-items:center;gap:var(--sp-8);margin-bottom:var(--sp-6);
  opacity:0;animation:fadeup 0.7s var(--ease-out) 0.4s forwards;
}
.stat{display:flex;flex-direction:column}
.stat__num{
  display:block;font-family:var(--font-display);font-size:2.25rem;font-weight:800;
  color:#FFFFFF;letter-spacing:-0.04em;line-height:1;
}
.stat__label{display:block;font-size:var(--fs-xs);color:rgba(255,255,255,0.4);margin-top:4px}
.stat__sep{width:1px;height:2.75rem;background:rgba(255,255,255,0.12);flex-shrink:0}
.hero__ctas{
  display:flex;gap:var(--sp-2);flex-wrap:wrap;
  opacity:0;animation:fadeup 0.7s var(--ease-out) 0.5s forwards;
}
.hero__ctas .btn--lg{padding:0.85rem 1.35rem;font-size:1rem}
.hero__scroll{
  position:absolute;bottom:var(--sp-10);left:50%;transform:translateX(-50%);z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  color:rgba(255,255,255,0.3);font-size:0.625rem;letter-spacing:0.12em;
  text-transform:uppercase;font-family:var(--font-display);font-weight:600;
  opacity:0;animation:fadein 1s var(--ease-out) 1.2s forwards;
}
.hero__scroll-line{
  width:1px;height:2.25rem;
  background:linear-gradient(to bottom,var(--accent),transparent);
  animation:scrollline 2.5s ease-in-out infinite;
}
@keyframes scrollline{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ===== EMERGENCY STRIP ===== */
.emergency-strip{
  background:var(--accent);color:var(--ink);
  padding:0.875rem var(--sp-6);
  position:sticky;top:var(--nav-h);z-index:800;
}
.emergency-strip__inner{
  max-width:var(--max-w);margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  gap:var(--sp-2);flex-wrap:wrap;
  font-family:var(--font-display);font-size:var(--fs-body);font-weight:600;
}
.emergency-strip__num{
  font-weight:800;font-size:1.25rem;letter-spacing:0.02em;
  border-bottom:2px solid var(--ink);
  transition:opacity var(--fast) var(--ease);
}
.emergency-strip__num:hover{opacity:0.7}
.emergency-strip__meta{opacity:0.6;font-size:var(--fs-sm)}

/* ===== SERVICES ===== */
.services__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
}
.service-card{
  background:var(--surface);padding:var(--sp-10) var(--sp-8);
  position:relative;overflow:hidden;
  transition:background var(--mid) var(--ease);
}
.service-card::before{
  content:'';position:absolute;top:0;left:0;
  width:2px;height:100%;background:var(--accent);
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--slow) var(--ease);
}
.service-card:hover{background:var(--surface-2)}
.service-card:hover::before{transform:scaleY(1)}
.service-card--featured{
  background:linear-gradient(160deg,rgba(245,176,0,0.06),var(--surface));
  border-top:2px solid var(--accent);
}
.sc__badge{
  display:inline-block;background:var(--accent);color:var(--ink);
  font-family:var(--font-display);font-size:0.65rem;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:3px 10px;border-radius:2px;margin-bottom:var(--sp-3);
}
.sc__num{
  display:block;font-family:var(--font-display);
  font-size:3.5rem;font-weight:800;color:var(--border-2);
  line-height:1;letter-spacing:-0.05em;margin-bottom:var(--sp-2);
  transition:color var(--mid) var(--ease);
}
.service-card:hover .sc__num,
.service-card--featured .sc__num{color:rgba(245,176,0,0.15)}
.sc__icon{color:var(--accent);margin-bottom:var(--sp-4)}
.sc__title{
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;
  color:var(--fg);margin-bottom:var(--sp-3);letter-spacing:-0.01em;
}
.sc__desc{color:var(--fg-2);font-size:var(--fs-sm);line-height:var(--lh-body);margin-bottom:var(--sp-5)}
.sc__list{margin-bottom:var(--sp-6)}
.sc__list li{
  font-size:var(--fs-sm);color:var(--fg-2);
  padding:5px 0 5px 14px;position:relative;
}
.sc__list li::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:4px;background:var(--accent);border-radius:50%;
}
.sc__cta{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);
  color:var(--accent);letter-spacing:0.01em;
  transition:gap var(--fast) var(--ease);
}
.sc__cta:hover{gap:0.875rem}

/* ===== PROCESS ===== */
.process__steps{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:start;gap:var(--sp-6);margin-bottom:var(--sp-16);
}
.process__step{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-10) var(--sp-8);
  transition:border-color var(--mid) var(--ease),transform var(--mid) var(--ease-out);
}
.process__step:hover{border-color:var(--accent);transform:translateY(-4px)}
.ps__num{
  display:block;font-family:var(--font-display);
  font-size:4rem;font-weight:800;color:var(--accent);
  opacity:0.12;line-height:1;letter-spacing:-0.05em;
  margin-bottom:var(--sp-2);
  transition:opacity var(--mid) var(--ease);
}
.process__step:hover .ps__num{opacity:0.35}
.ps__icon{color:var(--accent);margin-bottom:var(--sp-4)}
.ps__title{
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;
  color:var(--fg);margin-bottom:var(--sp-2);
}
.ps__desc{color:var(--fg-2);font-size:var(--fs-sm);line-height:var(--lh-body)}
.process__connector{
  width:2.5rem;height:2px;margin-top:5rem;flex-shrink:0;
  background:linear-gradient(90deg,var(--accent),transparent);
  border-radius:2px;
}
.process__cta{text-align:center}

/* ===== COVERAGE ===== */
.coverage__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.city-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--sp-6);
  display:flex;flex-direction:column;gap:0.375rem;
  position:relative;overflow:hidden;
  transition:border-color var(--mid) var(--ease),transform var(--mid) var(--ease-out);
}
.city-card::after{
  content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--slow) var(--ease);
}
.city-card:hover{border-color:var(--border-2);transform:translateY(-3px)}
.city-card:hover::after{transform:scaleX(1)}
.city-card--all{border-style:dashed;border-color:var(--accent);background:var(--accent-dim)}
.cc__name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-body);color:var(--fg)}
.cc__count{font-size:var(--fs-sm);color:var(--accent);font-weight:600;font-family:var(--font-display)}
.coverage__routes{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-10);justify-content:center}
.route-chip{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.5rem 1rem;border:1px solid var(--border);border-radius:999px;
  background:var(--surface);color:var(--fg-2);
  font-size:var(--fs-sm);font-weight:600;font-family:var(--font-display);
  transition:border-color var(--mid) var(--ease),color var(--mid) var(--ease);
}
.route-chip svg{color:var(--accent);flex-shrink:0}
.route-chip:hover{border-color:var(--accent);color:var(--fg)}

/* ===== TRUST ===== */
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-10)}
.trust-card{border-top:2px solid var(--border);padding:var(--sp-6) 0;transition:border-color var(--mid) var(--ease)}
.trust-card:hover{border-color:var(--accent)}
.tc__icon{color:var(--accent);margin-bottom:var(--sp-5)}
.tc__title{
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;
  color:var(--fg);margin-bottom:var(--sp-3);
}
.tc__desc{color:var(--fg-2);font-size:var(--fs-sm);line-height:var(--lh-body)}

/* ===== TESTIMONIALS ===== */
.rating-row{
  display:flex;align-items:center;gap:var(--sp-3);
  margin-top:var(--sp-4);flex-wrap:wrap;
}
.rr__stars{color:var(--accent);font-size:1.25rem;letter-spacing:2px}
.rr__num{
  font-family:var(--font-display);font-size:1.5rem;font-weight:800;
  color:var(--fg);letter-spacing:-0.02em;
}
.rr__slash{color:var(--fg-3)}
.rr__count{color:var(--fg-2);font-size:var(--fs-sm)}
.testimonials__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.testimonial-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-10);
  transition:transform var(--mid) var(--ease-out),border-color var(--mid) var(--ease);
}
.testimonial-card:hover{transform:translateY(-4px);border-color:var(--border-2)}
.testimonial-card--featured{border-color:var(--accent)}
.tcard__stars{color:var(--accent);font-size:1rem;letter-spacing:2px;margin-bottom:var(--sp-5)}
.testimonial-card blockquote{
  font-size:var(--fs-sm);line-height:1.78;color:var(--fg-2);
  margin-bottom:var(--sp-6);font-style:normal;
}
.tcard__author{display:flex;align-items:center;gap:var(--sp-3)}
.tcard__avatar{
  width:2.5rem;height:2.5rem;background:var(--accent);color:var(--ink);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:0.8rem;flex-shrink:0;
}
.tcard__name{display:block;font-weight:600;font-size:var(--fs-sm);color:var(--fg);font-style:normal}
.tcard__loc{display:block;font-size:var(--fs-xs);color:var(--fg-3)}

/* ===== FAQ ===== */
.faq__layout{display:grid;grid-template-columns:1fr 2fr;gap:var(--sp-20);align-items:start}
.faq__left{position:sticky;top:6rem}
.faq__list{display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-item__btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-6);padding:var(--sp-6) 0;
  font-family:var(--font-display);font-size:var(--fs-body);font-weight:600;
  color:var(--fg);text-align:left;
  transition:color var(--fast) var(--ease);
}
.faq-item__btn:hover,.faq-item__btn[aria-expanded="true"]{color:var(--accent)}
.fi__icon{
  font-size:1.5rem;font-weight:300;color:var(--accent);
  flex-shrink:0;line-height:1;
  transition:transform var(--mid) var(--ease);
}
.faq-item__btn[aria-expanded="true"] .fi__icon{transform:rotate(45deg)}
.faq-item__body{
  overflow:hidden;max-height:0;
  transition:max-height var(--slow) var(--ease);
}
.faq-item__body:not([hidden]){max-height:20rem}
.faq-item__body[hidden]{display:block!important;max-height:0}
.faq-item__body p{color:var(--fg-2);font-size:var(--fs-sm);line-height:1.78;padding-bottom:var(--sp-6)}

/* ===== CONTACT ===== */
.contact__layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-20);align-items:start}
.contact-cards{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-10)}
.contact-map{
  margin-top:var(--sp-6);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);line-height:0;
}
.contact-map iframe{display:block;width:100%;filter:grayscale(0.25)}
[data-theme="dark"] .contact-map iframe{filter:grayscale(0.6) invert(0.92) hue-rotate(180deg)}
.contact-card{
  display:flex;align-items:center;gap:var(--sp-5);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--sp-5) var(--sp-6);
  color:var(--fg);
  transition:border-color var(--mid) var(--ease),transform var(--mid) var(--ease-out);
}
.contact-card:hover{border-color:var(--border-2);transform:translateX(4px)}
.contact-card--primary{border-color:var(--accent)}
.cc-icon{color:var(--accent);flex-shrink:0}
.cc-body{flex:1}
.cc-label{
  display:block;font-size:var(--fs-xs);color:var(--fg-3);
  font-family:var(--font-display);font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;margin-bottom:2px;
}
.cc-val{display:block;font-family:var(--font-display);font-weight:700;color:var(--fg)}
.cc-badge{
  background:var(--green);color:var(--ink);
  font-size:0.65rem;font-weight:700;font-family:var(--font-display);
  padding:3px 8px;border-radius:2px;
}
.contact-form{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-10);
}
.cf__title{
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;
  color:var(--fg);margin-bottom:var(--sp-8);letter-spacing:-0.01em;
}
.form-field{margin-bottom:var(--sp-5)}
.ff__label{
  display:block;font-size:var(--fs-sm);font-weight:600;
  font-family:var(--font-display);color:var(--fg-2);margin-bottom:0.375rem;
}
.ff__input{
  width:100%;background:var(--ink);border:1px solid var(--border-2);
  border-radius:var(--radius);padding:0.8125rem var(--sp-5);
  color:var(--fg);font-size:var(--fs-body);
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.ff__input::placeholder{color:var(--fg-3)}
.ff__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,176,0,0.12);outline:none}
.ff__input option{background:var(--surface-2);color:var(--fg)}
.ff__input--ta{resize:vertical;min-height:7rem}
.form-success{
  margin-top:var(--sp-5);padding:var(--sp-5);
  background:var(--green-dim);border:1px solid rgba(34,197,94,0.2);
  border-radius:var(--radius);color:var(--green);
  font-weight:600;font-size:var(--fs-sm);text-align:center;
}

/* ===== FOOTER ===== */
.footer{
  background:var(--ink-deep);border-top:1px solid var(--border);
  padding:var(--sp-20) 0 var(--sp-10);
}
.footer__grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--sp-16);padding-bottom:var(--sp-12);
  border-bottom:1px solid var(--border);margin-bottom:var(--sp-6);
}
.footer__desc{
  color:var(--fg-2);font-size:var(--fs-sm);
  line-height:1.7;margin:var(--sp-5) 0;max-width:18rem;
}
.footer__socials{display:flex;gap:var(--sp-2);margin-top:var(--sp-5)}
.social-btn{
  width:2.25rem;height:2.25rem;border:1px solid var(--border);
  border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  color:var(--fg-2);
  transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.social-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.footer__col-title{
  font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--fg);margin-bottom:var(--sp-5);
}
.footer__col ul{display:flex;flex-direction:column;gap:0.75rem}
.footer__col ul li a{color:var(--fg-2);font-size:var(--fs-sm);transition:color var(--fast) var(--ease)}
.footer__col ul li a:hover{color:var(--accent)}
.footer__contact-list li{color:var(--fg-2);font-size:var(--fs-sm);display:flex;align-items:center;gap:0.5rem}
.footer__contact-list li a{color:var(--fg-2);transition:color var(--fast) var(--ease)}
.footer__contact-list li a:hover{color:var(--accent)}
.footer__bottom{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:var(--sp-5);font-size:var(--fs-sm);color:var(--fg-3);
}
.footer__bottom nav{display:flex;gap:var(--sp-6)}
.footer__bottom nav a{color:var(--fg-3);transition:color var(--fast) var(--ease)}
.footer__bottom nav a:hover{color:var(--fg)}

/* ===== FAB ===== */
.fab{
  position:fixed;bottom:var(--sp-6);right:var(--sp-6);z-index:850;
  display:flex;align-items:center;gap:var(--sp-3);
  background:var(--accent);color:var(--ink);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);
  padding:0.875rem 1.25rem;border-radius:3rem;
  box-shadow:0 8px 32px var(--accent-glow);
  transition:background var(--fast) var(--ease),transform var(--fast) var(--ease-out),box-shadow var(--fast) var(--ease);
}
.fab:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 12px 40px rgba(245,176,0,0.4)}
.fab--wa{bottom:9rem;background:#25D366;color:#fff;box-shadow:0 8px 32px rgba(37,211,102,0.35)}
.fab--wa:hover{background:#1da851;box-shadow:0 12px 40px rgba(37,211,102,0.5)}
.fab--loc{bottom:5rem;background:var(--surface-2);color:var(--fg);border:1px solid var(--border-3);box-shadow:var(--shadow-lg)}
.fab--loc:hover{background:var(--surface-3);border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.fab__label{white-space:nowrap}

/* ===== WHATSAPP BUTTON ===== */
.btn--whatsapp{background:#25D366;color:#fff;border-color:#25D366}
.btn--whatsapp:hover{background:#1da851;border-color:#1da851;transform:translateY(-1px);box-shadow:0 8px 24px rgba(37,211,102,0.35)}
.btn--whatsapp:active{transform:translateY(0)}

/* ===== ANIMATIONS ===== */
@keyframes fadeup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.sr{opacity:0;transform:translateY(1.5rem);transition:opacity var(--slow) var(--ease-out),transform var(--slow) var(--ease-out)}
.sr.sr--visible{opacity:1;transform:translateY(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .container{padding:0 var(--sp-5)}
  .section{padding:var(--sp-24) 0}
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--sp-10)}
  .footer__brand{grid-column:span 2}
  .faq__layout,.contact__layout{gap:var(--sp-12)}
}
@media(max-width:900px){
  .process__steps{grid-template-columns:1fr;gap:var(--sp-6)}
  .process__connector{width:2px;height:1.75rem;margin:0 auto;background:linear-gradient(to bottom,var(--accent),transparent)}
}
@media(max-width:768px){
  .section{padding:var(--sp-16) 0}
  .hamburger{display:flex}
  .nav__links{
    display:none;position:fixed;top:var(--nav-h);left:0;right:0;
    background:var(--ink);border-bottom:1px solid var(--border);
    padding:var(--sp-5) var(--sp-6);flex-direction:column;align-items:stretch;gap:4px;
    z-index:899;box-shadow:var(--shadow-lg);
  }
  .nav__links.is-open{display:flex}
  .nav__link{padding:0.75rem var(--sp-3);font-size:var(--fs-body)}
  .nav__cta .live-dot{display:none}
  .services__grid{grid-template-columns:1fr}
  .trust__grid{grid-template-columns:1fr 1fr}
  .coverage__grid{grid-template-columns:repeat(2,1fr)}
  .testimonials__grid{grid-template-columns:1fr}
  .contact__layout{grid-template-columns:1fr}
  .faq__layout{grid-template-columns:1fr}
  .faq__left{position:static}
  .hero__ctas{flex-direction:column}
  .hero__ctas .btn{justify-content:center}
  .hero__stats{gap:var(--sp-5)}
  .stat__num{font-size:1.875rem}
  .section__header{margin-bottom:var(--sp-12)}
}
@media(max-width:640px){
  .trust__grid{grid-template-columns:1fr}
  .coverage__grid{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr}
  .footer__brand{grid-column:span 1}
  .footer__bottom{flex-direction:column;text-align:center}
  .emergency-strip__meta{display:none}
  .hero__stats{flex-direction:column;gap:var(--sp-3);align-items:flex-start}
  .stat__sep{width:2.5rem;height:1px}
  .testimonials__grid{grid-template-columns:1fr}
  .emergency-strip__inner{font-size:var(--fs-sm)}
  .emergency-strip__num{font-size:var(--fs-body)}
}
@media(max-width:480px){
  .section{padding:var(--sp-12) 0}
  .section__header{margin-bottom:var(--sp-10)}
  .container{padding:0 var(--sp-4)}
  .hero__inner{padding:var(--sp-8) var(--sp-4) var(--sp-16)}
  .hero__heading{font-size:clamp(2.5rem, 10vw, 3.5rem)}
  .hero__stats{gap:var(--sp-2)}
  .brand__logo{height:64px;width:auto}
}

/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
  html{scroll-behavior:auto}
  .hero__img{animation:none!important;transform:none!important}
  .hero__beacon{animation:none!important;opacity:0!important}
  .hero__road::before{animation:none!important}
}
/* ===== GENERATED IMAGE BACKGROUNDS ===== */
.sc__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease-out);
  transform: scale(1.05);
}
#sc-cekici .sc__bg { background-image: url('bg_oto.webp'); }
#sc-aku .sc__bg { background-image: url('bg_aku.webp'); }
#sc-lastik .sc__bg { background-image: url('bg_lastik.webp'); }
#sc-yakit .sc__bg { background-image: url('bg_yakit.webp'); }
#sc-cikma .sc__bg { background-image: url('bg_cikma.webp'); }
#sc-acma .sc__bg { background-image: url('bg_acma.webp'); }
.service-card:hover .sc__bg { opacity: 0.15; transform: scale(1); }
.service-card > *:not(.sc__bg) { position: relative; z-index: 1; }

.process { position: relative; overflow: hidden; }
.process__bg-img {
  position: absolute; right: 0; top: 0; bottom: 0; width: 50%; z-index: 0;
  background-image: url('process_truck.webp');
  background-size: cover; background-position: center;
  opacity: 0.3;
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
[data-theme="light"] .process__bg-img { opacity: 0.15; }
.process .container { position: relative; z-index: 1; }

.trust { position: relative; overflow: hidden; }
.trust__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('trust_fleet.webp');
  background-size: cover; background-position: center;
  opacity: 0.25; mix-blend-mode: luminosity;
}
[data-theme="light"] .trust__bg { opacity: 0.1; }
.trust .container { position: relative; z-index: 1; }
.trust::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to bottom, var(--ink) 0%, transparent 20%, transparent 80%, var(--ink) 100%);
}

.contact { position: relative; overflow: hidden; }
.contact__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('footer_road.webp');
  background-size: cover; background-position: center;
  opacity: 0.15; mix-blend-mode: screen;
}
[data-theme="light"] .contact__bg { opacity: 0.05; mix-blend-mode: multiply; }
.contact .container { position: relative; z-index: 1; }

/* ===== SPIN ANIMATION (location button loading) ===== */
@keyframes spin { to { transform: rotate(360deg); } }
.spin-icon { animation: spin 1s linear infinite; vertical-align: -3px; }

/* ===== GEO TOAST (konum izin akışı — mobil dostu, non-blocking) ===== */
.geo-toast{
  position:fixed; left:50%; z-index:2000;
  bottom:calc(1.5rem + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%) translateY(0.75rem);
  width:max-content; max-width:min(92vw, 30rem);
  background:var(--surface-2); color:var(--fg);
  border:1px solid rgba(128,128,128,0.22); border-radius:0.9rem;
  padding:0.9rem 1.05rem; box-shadow:0 14px 44px rgba(0,0,0,0.4);
  display:flex; flex-direction:column; gap:0.7rem;
  font-family:var(--font-display); font-size:0.95rem; line-height:1.4;
  opacity:0; pointer-events:none;
  transition:opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.geo-toast.is-visible{
  opacity:1; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.geo-toast__msg{font-weight:500}
.geo-toast__actions{display:flex; gap:0.5rem; flex-wrap:wrap}
.geo-toast__btn{
  flex:1 1 auto; min-height:44px; padding:0.55rem 0.9rem;
  border:0; border-radius:0.6rem; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:0.9rem;
  background:var(--accent); color:var(--ink);
  transition:opacity var(--fast) var(--ease);
}
.geo-toast__btn:hover{opacity:0.85}
.geo-toast__btn:last-child{background:rgba(128,128,128,0.18); color:var(--fg)}
@media (prefers-reduced-motion: reduce){
  .geo-toast{transition:opacity var(--fast) linear}
  .geo-toast.is-visible{transform:translateX(-50%)}
}