/* Hakan Otomotiv - ortak stil dosyası (iç sayfalar için)
   Bu dosya tüm iç sayfalarda kullanılır. Değişiklik burada yapılınca hepsine yansır. */
:root {
  --blue: #008AD0;
  --red: #EE3641;
  --green: #00783F;
  --ink: #1a202c;
  --muted: #4a5568;
  --soft: #f5f7fa;
  --line: #e2e8f0;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Yazı tipi */
body {
  font-family: 'Barlow', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
}
button, input, select { font-family: inherit; }
nav {
  font-family: 'Barlow Semi Condensed', 'Segoe UI', Tahoma, sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.07em;
}
h1, h2, h3, .strip-part, .b2b-button, .trust-item strong {
  font-family: 'Barlow Semi Condensed', 'Barlow', 'Segoe UI', sans-serif;
}
.strip-part { letter-spacing: 0.1em; font-size: 0.95rem; }
footer { line-height: 1.7; }

/* Sayfa başlıkları */
.page-title {
  color: var(--ink);
  font-size: 2.3rem;
  line-height: 1.15;
  margin: 0 0 1.5rem;
}
.content-wrapper h2 {
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1.2;
  border-left: 5px solid var(--blue);
  padding-left: 0.7rem;
}
.content-wrapper a { color: #0b6fa8; }

/* Üç renkli çizgi ve rakam şeridi */
.tri-line {
  height: 4px;
  background: linear-gradient(90deg, var(--blue) 0 33.33%, var(--red) 33.33% 66.66%, var(--green) 66.66% 100%);
}
.trust { background: #fff; margin: 2rem 0; }
.trust-inner {
  max-width: 1200px;
  margin: auto;
  padding: 1.6rem 1.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.2rem;
  text-align: center;
}
.trust-item strong { display: block; font-size: 2.1rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.trust-item span { font-size: 0.95rem; color: var(--muted); }

/* Butonlar */
.btn {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.btn-wa { background: #25D366; color: #10241a !important; }
.btn-wa:hover { background: #1ebe5a; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Sayfa sonu çağrı alanı */
.cta-box {
  background: var(--soft);
  border: 1px solid var(--line);
  border-top: 5px solid var(--green);
  border-radius: 10px;
  padding: 1.6rem;
  margin: 2.5rem 0 1rem;
  text-align: center;
}
.cta-box h2 { border: 0 !important; padding: 0 !important; margin: 0 0 0.5rem !important; }
.cta-box p { margin: 0 0 1.1rem !important; color: var(--muted); }

/* Şube bağlantıları */
.branch-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.branch-links a {
  display: block;
  padding: 0.55rem 1rem;
  border: 1px solid #a0aec0;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.branch-links a:hover { border-color: var(--blue); background: #f0f8ff; }

@media (max-width: 768px) {
  .page-title { font-size: 1.8rem; }
  .content-wrapper h2 { font-size: 1.4rem; }
  .trust-item strong { font-size: 1.8rem; }
}

    /* WhatsApp şube seçici */
    .wa-widget {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 1100;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .wa-fab {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      background: #25D366;
      color: #10241a;
      border: 0;
      border-radius: 999px;
      padding: 0.85rem 1.2rem;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    }
    .wa-fab:hover { background: #1ebe5a; }
    .wa-fab svg { width: 24px; height: 24px; fill: currentColor; }
    .wa-fab:focus-visible,
    .wa-close:focus-visible,
    .wa-branch:focus-visible { outline: 3px solid #1a202c; outline-offset: 2px; }
    .wa-panel {
      position: absolute;
      right: 0;
      bottom: calc(100% + 12px);
      width: min(340px, calc(100vw - 32px));
      max-height: 70vh;
      overflow-y: auto;
      background: #fff;
      color: #1a202c;
      border-radius: 12px;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
      display: none;
    }
    .wa-panel.open { display: block; }
    .wa-head {
      position: relative;
      background: #00783F;
      color: #fff;
      padding: 1rem 2.8rem 1rem 1.1rem;
      border-radius: 12px 12px 0 0;
    }
    .wa-head strong { display: block; font-size: 1.05rem; }
    .wa-head span { font-size: 0.85rem; opacity: 0.92; }
    .wa-close {
      position: absolute;
      top: 0.6rem;
      right: 0.6rem;
      width: 2rem;
      height: 2rem;
      background: none;
      border: 0;
      color: #fff;
      font-size: 1.5rem;
      line-height: 1;
      cursor: pointer;
    }
    .wa-body { padding: 0.4rem 0.8rem 0.9rem; }
    .wa-group {
      font-size: 0.85rem;
      font-weight: 700;
      color: #4a5568;
      margin: 0.8rem 0 0.4rem;
    }
    .wa-branch {
      display: block;
      padding: 0.7rem 0.9rem;
      margin-bottom: 0.4rem;
      border: 1px solid #cbd5e0;
      border-radius: 8px;
      color: #1a202c;
      text-decoration: none;
      font-weight: 600;
    }
    .wa-branch:hover { border-color: #25D366; background: #f0fff4; }
    @media (max-width: 768px) {
      .wa-widget { right: 12px; bottom: 12px; }
      .wa-fab { padding: 0.8rem 1.05rem; font-size: 0.95rem; }
    }

/* ---- İç sayfa düzeni: başlık bandı, zemin ve beyaz kartlar ---- */
:root { --header-height: 112px; }
body { background: #eef2f7; }

.page-banner {
  background: linear-gradient(135deg, #1a202c 0%, #2d3a4f 100%);
  color: #fff;
  text-align: center;
}
.page-banner-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 2.6rem 1.2rem 2.4rem;
}
.page-banner h1.page-title {
  color: #fff;
  font-size: 2.6rem;
  margin: 0;
}
.page-banner .lead {
  color: #e2e8f0;
  font-size: 1.2rem;
  margin: 1rem auto 0;
  max-width: 46rem;
}
.page-banner .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 1.4rem;
}
.page-banner .btn-outline {
  background: transparent;
  color: #fff !important;
  border: 2px solid #fff;
}
.page-banner .btn-outline:hover { background: rgba(255, 255, 255, 0.14); }

main .content-wrapper {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(26, 32, 44, 0.08);
  padding: 2rem 2.2rem;
}
main .content-wrapper > h2:first-child { margin-top: 0; }

@media (max-width: 768px) {
  .page-banner-inner { padding: 1.8rem 1rem 1.6rem; }
  .page-banner h1.page-title { font-size: 1.8rem; }
  .page-banner .lead { font-size: 1.05rem; }
  main .content-wrapper { padding: 1.3rem 1.1rem; }
}

/* ---- Şube detay sayfaları ve ortak parçalar ---- */
.btn-small { padding: 0.6rem 0.9rem; font-size: 0.95rem; }
.btn-outline-dark { background: #fff; color: var(--ink) !important; border: 2px solid var(--ink); }
.btn-outline-dark:hover { background: var(--soft); }
.btn-call { background: var(--blue); color: #fff !important; }
.btn-call:hover { background: #0072ad; }

.sube-detay { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.8rem; align-items: start; }
.sube-foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--soft); }
.bilgi-listesi { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.7rem 1rem; margin: 0 0 1.3rem; }
.bilgi-listesi dt { font-weight: 700; color: var(--ink); }
.bilgi-listesi dd { margin: 0; color: var(--muted); }
.bilgi-listesi a { color: #0b6fa8; font-weight: 600; }
.sube-butonlar { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.harita { display: block; width: 100%; height: 420px; border: 0; border-radius: 10px; background: var(--soft); }
.diger-subeler { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.diger-subeler a { display: block; padding: 0.55rem 1rem; border: 1px solid #a0aec0; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; }
.diger-subeler a:hover { border-color: var(--blue); background: #f0f8ff; }
.not-kutu { background: #fffbea; border: 1px solid #f0d97a; border-radius: 10px; padding: 1rem 1.2rem; margin: 0 0 1.2rem; color: var(--ink); }
.content-wrapper details { border-bottom: 1px solid var(--line); padding: 0.2rem 0; }
.content-wrapper summary { cursor: pointer; font-weight: 600; padding: 0.9rem 0; color: var(--ink); }
.content-wrapper summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.content-wrapper details p { margin: 0 0 1rem; color: var(--muted); }

/* WhatsApp penceresinde "Ara" bağlantısı */
.wa-row { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; }
.wa-row .wa-branch { flex: 1; margin-bottom: 0; }
.wa-call {
  display: flex; align-items: center; justify-content: center;
  padding: 0 1rem; border: 1px solid #cbd5e0; border-radius: 8px;
  color: #1a202c; text-decoration: none; font-weight: 600; background: #fff;
}
.wa-call:hover { border-color: #008AD0; background: #f0f8ff; }
.wa-call:focus-visible { outline: 3px solid #1a202c; outline-offset: 2px; }

@media (max-width: 768px) {
  .sube-detay { grid-template-columns: 1fr; }
  .bilgi-listesi { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .bilgi-listesi dd { margin-bottom: 0.7rem; }
  .harita { height: 320px; }
}

/* ---- Telefon görünümü düzeltmeleri ---- */
img, iframe, video { max-width: 100%; }
/* Logo hiçbir durumda daralmasın */
.header-inner > a:first-child { flex-shrink: 0; }
img.logo { width: auto; max-width: none; flex-shrink: 0; object-fit: contain; }
@media (max-width: 768px) {
  /* Menü düğmesi (☰) bazı sayfalarda gizli kalıyordu, hep görünsün */
  .menu-toggle { display: block; margin: 0; }
  .header-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.6rem;
    padding: 0.6rem 1rem;
  }
  .header-inner > a:first-child { order: 1; }
  .b2b-group { order: 2; margin-left: auto; }
  .menu-toggle { order: 3; }
  nav { order: 4; flex-basis: 100%; }
  .logo { height: 48px; width: auto; }
  nav a { padding: 0.7rem 0.4rem; }
}
@media (max-width: 768px) {
  .sube-foto { aspect-ratio: 16 / 10; max-height: 230px; }
}
@media (max-width: 480px) {
  .strip-part { font-size: 0.72rem; letter-spacing: 0.04em; padding: 0 0.3rem; }
}
@media (max-width: 400px) {
  .header-inner { padding: 0.5rem 0.7rem; gap: 0.4rem; }
  .logo { height: 44px; }
  .menu-toggle { font-size: 1.35rem; padding: 0 0.2rem; }
}

/* ---- Başlıktaki B2B düğmesi ve dil seçici (TR / EN) ---- */
.b2b-group { display: flex; align-items: center; gap: 0.7rem; }
.b2b-button { display: inline-flex; align-items: center; gap: 0.35rem; background: #1a202c; color: #fff !important; padding: 0.5rem 0.95rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; }
.b2b-button::after { content: "\2197"; font-size: 0.85em; opacity: 0.85; }
.b2b-button:hover { background: #008AD0; transform: translateY(-1px); }
.lang-switch { display: inline-flex; align-items: center; gap: 0; padding: 3px; border: 1px solid #cbd5e0; border-radius: 999px; background: #f1f5f9; font-size: 0.8rem; font-weight: 700; }
.lang-switch a { padding: 0.32rem 0.7rem; border-radius: 999px; color: #4a5568; text-decoration: none; line-height: 1; letter-spacing: 0.04em; }
.lang-switch a:hover { color: #008AD0; }
.lang-switch a.active { background: #fff; color: #1a202c; box-shadow: 0 1px 3px rgba(26, 32, 44, 0.22); cursor: default; }
@media (max-width: 400px) {
  .b2b-group { gap: 0.4rem; }
  .b2b-button { padding: 0.4rem 0.7rem; font-size: 0.85rem; }
  .lang-switch { font-size: 0.72rem; }
  .lang-switch a { padding: 0.3rem 0.5rem; }
}

@media (max-width: 340px) {
  .logo { height: 36px; }
  .b2b-button { padding: 0.35rem 0.6rem; font-size: 0.8rem; }
  .lang-switch a { padding: 0.28rem 0.42rem; }
  .b2b-group { gap: 0.3rem; }
}