/* ============================================================
   BAŞKENT ÇEKİCİ — Ana Stil Dosyası
   Tema: Endüstriyel / Hazard Sarı-Siyah / "Dispatch Board"
   ============================================================ */

/* ---------- Token'lar (Light — varsayılan) ---------- */
:root{
  --bg: #eef0f3;
  --bg-2: #e3e6ea;
  --surface: #ffffff;
  --surface-2: #f5f6f8;
  --ink: #16213a;          /* logo lacivert tonuna yakın koyu zemin */
  --ink-muted: #55585f;
  --border: #d3d6db;

  --accent: #c9a227;       /* logo altın/gold tonu */
  --accent-ink: #1a1408;
  --accent-soft: #f6ecc8;

  --danger: #c0272d;       /* logodaki kırmızı araç tonu */
  --danger-ink: #ffffff;

  --dark-panel: #101a30;   /* logo lacivert paneli (her iki temada da koyu kalır) */
  --dark-panel-2: #16223c;
  --dark-panel-ink: #f4f1e7;
  --dark-panel-ink-muted: #b6bdcc;

  --font-display: 'Anton', 'Arial Narrow', 'Franklin Gothic Bold', sans-serif;
  --font-body: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  --radius-s: 4px;
  --radius-m: 8px;
  --shadow-card: 0 1px 2px rgba(20,20,22,0.06), 0 8px 20px -12px rgba(20,20,22,0.18);
  --shadow-lift: 0 12px 30px -14px rgba(20,20,22,0.35);

  --container: 1180px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #131315;
    --bg-2: #1a1b1e;
    --surface: #191d26;
    --surface-2: #212632;
    --ink: #f2efe7;
    --ink-muted: #a7acb8;
    --border: #333a48;

    --accent: #e0b83c;
    --accent-ink: #17130a;
    --accent-soft: #3a3212;

    --danger: #e0565c;
    --danger-ink: #17130a;

    --dark-panel: #0a1122;
    --dark-panel-2: #101a30;
    --dark-panel-ink: #f2efe7;
    --dark-panel-ink-muted: #9aa1b0;

    --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 10px 24px -14px rgba(0,0,0,0.6);
    --shadow-lift: 0 14px 34px -16px rgba(0,0,0,0.65);
  }
}
/* NOTE: --bg-2 is intentionally set once above (no stray/invalid values). */

:root[data-theme="dark"]{
  --bg: #0d1017;
  --bg-2: #151a24;
  --surface: #191d26;
  --surface-2: #212632;
  --ink: #f2efe7;
  --ink-muted: #a7acb8;
  --border: #333a48;

  --accent: #e0b83c;
  --accent-ink: #17130a;
  --accent-soft: #3a3212;

  --danger: #e0565c;
  --danger-ink: #17130a;

  --dark-panel: #0a1122;
  --dark-panel-2: #101a30;
  --dark-panel-ink: #f2efe7;
  --dark-panel-ink-muted: #9aa1b0;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 10px 24px -14px rgba(0,0,0,0.6);
  --shadow-lift: 0 14px 34px -16px rgba(0,0,0,0.65);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4{ margin: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance; }
p{ margin: 0; }
button{ font-family: inherit; }
.container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.skip-link{
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; z-index: 200; font-weight: 700;
}
.skip-link:focus{ left: 12px; top: 12px; }

:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Hazard şerit (bölüm ayırıcı) ---------- */
.hazard-strip{
  height: 10px;
  background: repeating-linear-gradient(
    135deg,
    var(--accent) 0 18px,
    var(--ink) 18px 36px
  );
}
/* ---------- Header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 20px;
}
.brand{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark{ display: inline-flex; flex: none; }
.brand-logo{
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  background: var(--dark-panel);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border);
}
.brand-text{ display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1 1 auto; }
.brand-name{
  font-family: var(--font-display); font-size: 1.02rem; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-name em{ font-style: normal; color: var(--accent); -webkit-text-stroke: 0; }
.brand-tag{
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em;
  color: var(--ink-muted); margin-top: 3px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.main-nav ul{ display: flex; gap: 28px; }
.main-nav a{
  font-weight: 600; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.main-nav a:hover{ border-bottom-color: var(--accent); }

.header-actions{ display: flex; align-items: center; gap: 14px; }
.phone-pill{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); font-weight: 600; font-size: 0.88rem;
  padding: 9px 14px; border-radius: var(--radius-s);
  white-space: nowrap;
}
.phone-pill:hover{ filter: brightness(0.95); }

.nav-toggle{
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 38px; height: 38px; background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-s); cursor: pointer; flex: none;
}
.nav-toggle span{ height: 2px; background: var(--ink); border-radius: 2px; }

/* ---------- Butonlar ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em;
  padding: 14px 22px; border-radius: var(--radius-s); border: 2px solid transparent;
  cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease;
}
.btn:hover{ filter: brightness(1.04); }
.btn:active{ transform: translateY(1px); }
.btn-danger{ background: var(--danger); color: var(--danger-ink); }
.btn-accent{ background: var(--accent); color: var(--accent-ink); }
.btn-outline{ background: transparent; color: var(--dark-panel-ink); border-color: rgba(242,239,231,0.4); }
.btn-outline:hover{ border-color: var(--accent); color: var(--accent); }
.btn-block{ width: 100%; }

/* ---------- Hero ---------- */
.hero{
  background: var(--dark-panel);
  color: var(--dark-panel-ink);
  position: relative;
  overflow: hidden;
}
.hero-inner{ padding: 0; }

/* ---------- Hero slider ---------- */
.hero-slider{ padding: 64px 20px 30px; position: relative; }
.hero-slides{ display: grid; }
.hero-slide{
  grid-area: 1 / 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.6s ease;
}
.hero-slide.is-active{ opacity: 1; visibility: visible; pointer-events: auto; }

.hero-slider-nav{
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 30px;
}
.hero-arrow{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: transparent; color: var(--dark-panel-ink-muted);
  border: 1px solid rgba(242,239,231,0.22); cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.hero-arrow:hover{ color: var(--accent); border-color: var(--accent); background: rgba(242,239,231,0.06); }
.hero-dots{ display: flex; align-items: center; gap: 10px; }
.hero-dot{
  width: 9px; height: 9px; border-radius: 50%; padding: 0; flex: none;
  background: rgba(242,239,231,0.25); border: none; cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero-dot:hover{ background: rgba(242,239,231,0.5); }
.hero-dot.is-active{ background: var(--accent); transform: scale(1.25); }
.eyebrow{
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  color: var(--accent); margin: 0 0 16px; font-weight: 600;
}
.hero h1{
  font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.04; margin: 0 0 20px;
}
.hero-lead{
  font-size: 1.05rem; color: var(--dark-panel-ink-muted); max-width: 46ch; margin: 0 0 30px;
}
.hero-actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

.hero-stats{
  display: flex; gap: 30px; flex-wrap: wrap; margin: 0 0 10px;
  padding-top: 22px; border-top: 1px solid rgba(242,239,231,0.14);
}
.hero-stats dt{
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  color: var(--dark-panel-ink-muted); text-transform: uppercase; margin-bottom: 4px;
}
.hero-stats dd{
  margin: 0; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.status-live{ display: flex; align-items: center; gap: 7px; color: #6fd68a; }
.dot{ width: 8px; height: 8px; border-radius: 50%; background: #6fd68a; box-shadow: 0 0 0 3px rgba(111,214,138,0.25); }
.hero-footnote{ font-size: 0.76rem; color: var(--dark-panel-ink-muted); opacity: 0.8; }

.hero-visual{
  display: flex; justify-content: center; align-items: center;
  width: 100%; max-width: 560px; aspect-ratio: 4 / 3;
  border-radius: var(--radius-m); overflow: hidden;
  background: var(--dark-panel-2);
}
.hero-visual img{ width: 100%; height: 100%; object-fit: cover; }

/* Fotoğrafların kenarlarını yumuşatan hafif vinyet (feather) efekti. */
.hero-visual img.is-photo,
.fleet-card.is-photo img{
  -webkit-mask-image: radial-gradient(ellipse at center, #000 82%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, #000 82%, transparent 100%);
}

.hazard-strip--bottom{ position: relative; }

/* ---------- Bölüm başlıkları (genel) ---------- */
.section-eyebrow{
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  color: var(--danger); font-weight: 700; margin: 0 0 10px;
}
.section-eyebrow--light{ color: var(--accent); }
.section-title{ font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 16px; }
.section-title--light{ color: var(--dark-panel-ink); }
.section-lead{ color: var(--ink-muted); max-width: 62ch; margin: 0 0 40px; font-size: 1.02rem; }

/* ---------- Hizmetler: iş emri kartları ---------- */
.services{ padding: 76px 0; background: var(--bg); }
.ticket-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px;
}
.ticket{
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 6px solid var(--accent);
  border-radius: var(--radius-m);
  padding: 30px 30px 32px;
  box-shadow: var(--shadow-card);
}
.ticket-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.ticket-no{
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.ticket-badge{
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  background: var(--accent-soft); color: var(--accent-ink);
  padding: 4px 10px; border-radius: 999px; font-weight: 700;
  text-transform: uppercase;
}
:root[data-theme="dark"] .ticket-badge{ color: var(--accent); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ticket-badge{ color: var(--accent); } }

.ticket h3{ font-size: 1.4rem; margin: 0 0 12px; }
.ticket > p{ color: var(--ink-muted); margin-bottom: 18px; }
.ticket-list{ display: grid; gap: 9px; }
.ticket-list li{
  position: relative; padding-left: 22px; font-size: 0.95rem; font-weight: 500;
}
.ticket-list li::before{
  content: ""; position: absolute; left: 0; top: 7px;
  width: 10px; height: 10px; background: var(--accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* ---------- Neden Biz: plaka kartları ---------- */
.why-us{ padding: 76px 0; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.plate-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.plate{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: 26px 22px;
  box-shadow: var(--shadow-card);
}
.plate-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--radius-s);
  background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 16px;
}
:root[data-theme="dark"] .plate-icon{ color: var(--accent); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .plate-icon{ color: var(--accent); } }
.plate h3{ font-size: 1.02rem; margin-bottom: 8px; letter-spacing: 0.005em; }
.plate p{ color: var(--ink-muted); font-size: 0.92rem; }

/* ---------- Hizmet Bölgeleri ---------- */
.areas{ padding: 76px 0; background: var(--bg); }
.area-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px;
}
.area-card{
  background: var(--surface); border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-m); padding: 20px 22px;
  box-shadow: var(--shadow-card);
}
.area-card h3{
  font-family: var(--font-body); text-transform: none; font-weight: 800;
  font-size: 1.02rem; letter-spacing: 0; margin-bottom: 8px; color: var(--ink);
}
.area-card p{ color: var(--ink-muted); font-size: 0.88rem; }

/* ---------- Galeri / Filo ---------- */
.fleet{ padding: 76px 0; background: var(--bg); }
.fleet-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.fleet-card{
  margin: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-card);
}
.fleet-card img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--dark-panel); }

/* Şeffaf arka planlı vektör/illüstrasyon görseller: kırpmadan,
   yumuşak bir zemin üzerinde ortalanarak gösterilir. */
.fleet-card.is-graphic{ background: var(--surface-2); }
.fleet-card.is-graphic img{
  object-fit: contain; padding: 22px; background: var(--surface-2);
  filter: drop-shadow(0 6px 10px rgba(20,20,22,0.12));
}

.fleet-card figcaption{
  padding: 12px 14px; font-size: 0.84rem; font-weight: 600;
  border-top: 1px solid var(--border);
}
.section-lead code{
  font-family: var(--font-mono); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 0.85em;
}

/* ---------- İletişim ---------- */
.contact{ background: var(--dark-panel); color: var(--dark-panel-ink); padding: 80px 0; }
.contact-inner{
  display: grid; grid-template-columns: 1fr 0.95fr; gap: 56px;
}
.contact-lead{ color: var(--dark-panel-ink-muted); max-width: 48ch; margin-bottom: 28px; }

.call-panel{
  display: flex; flex-direction: column; gap: 4px;
  background: var(--dark-panel-2); border: 1px solid rgba(242,239,231,0.14);
  border-left: 6px solid var(--danger);
  border-radius: var(--radius-m); padding: 20px 24px; margin-bottom: 26px;
  transition: border-color 0.15s ease;
}
.call-panel:hover{ border-left-color: var(--accent); }
.call-panel-label{
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  color: var(--dark-panel-ink-muted); text-transform: uppercase;
}
.call-panel-number{
  font-family: var(--font-mono); font-size: 1.8rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--accent);
}

.contact-details{ display: grid; gap: 14px; }
.contact-details li{ display: flex; align-items: center; gap: 12px; color: var(--dark-panel-ink-muted); font-size: 0.95rem; }
.contact-details li svg{ color: var(--accent); flex: none; }
.contact-details a{ color: var(--dark-panel-ink); }
.contact-details a:hover{ color: var(--accent); }

.contact-form{
  background: var(--dark-panel-2); border: 1px solid rgba(242,239,231,0.14);
  border-radius: var(--radius-m); padding: 30px;
}
.form-title{
  font-family: var(--font-display); text-transform: uppercase; font-size: 1.15rem;
  margin-bottom: 20px; letter-spacing: 0.01em;
}
.form-row{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-row label{ font-size: 0.8rem; font-weight: 600; color: var(--dark-panel-ink-muted); }
.form-row input, .form-row textarea{
  background: var(--dark-panel); border: 1px solid rgba(242,239,231,0.2);
  border-radius: var(--radius-s); padding: 11px 13px; color: var(--dark-panel-ink);
  font-family: inherit; font-size: 0.95rem; resize: vertical;
}
.form-row input:focus, .form-row textarea:focus{ border-color: var(--accent); outline: none; }
.form-note{ margin-top: 14px; font-size: 0.78rem; color: var(--dark-panel-ink-muted); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--surface); border-top: 1px solid var(--border); }
.footer-inner{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; padding: 30px 20px;
}
.footer-brand p{ color: var(--ink-muted); font-size: 0.85rem; margin-top: 6px; }
.footer-links{ display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a{ font-size: 0.86rem; font-weight: 600; }
.footer-links a:hover{ color: var(--accent); }
.footer-copy{ font-size: 0.8rem; color: var(--ink-muted); font-family: var(--font-mono); }

/* ---------- Sabit çağrı butonları ---------- */
.fab-group{
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fab-group.is-visible{
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.fab{
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lift); color: #fff;
}
.fab-call{ background: var(--danger); }
.fab-whatsapp{ background: #25D366; }
.fab:hover{ filter: brightness(1.06); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1020px){
  .plate-grid{ grid-template-columns: repeat(2, 1fr); }
  .fleet-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px){
  .hero-slide{ grid-template-columns: 1fr; }
  .hero-visual{ order: -1; max-width: 420px; margin: 0 auto; }
  .contact-inner{ grid-template-columns: 1fr; }
}

@media (max-width: 780px){
  .main-nav{
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
  }
  .main-nav.is-open{ max-height: 300px; }
  .main-nav ul{ flex-direction: column; gap: 0; padding: 8px 20px 16px; }
  .main-nav a{ display: block; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav-toggle{ display: flex; }
  .phone-pill span{ display: none; }
  .ticket-grid{ grid-template-columns: 1fr; }
  .brand-logo{ width: 38px; height: 38px; }
  .brand-name{ font-size: 0.86rem; }
  .brand-tag{ font-size: 0.52rem; }
}

@media (max-width: 460px){
  .brand-tag{ display: none; }
}

@media (max-width: 640px){
  .plate-grid{ grid-template-columns: 1fr; }
  .fleet-grid{ grid-template-columns: 1fr 1fr; }
  .hero-slider{ padding: 44px 20px 24px; }
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .call-panel-number{ font-size: 1.4rem; }
  .hero-arrow{ width: 34px; height: 34px; }
  .hero-slider-nav{ gap: 12px; }
}

@media (max-width: 420px){
  .fleet-grid{ grid-template-columns: 1fr; }
}