/* ==========================================================================
   silopihaburtaxi.com.tr — consolidated stylesheet
   Design tokens and component patterns extracted from the legacy index.html
   <style> block (gold/anthracite taxi identity, Montserrat, card system,
   FAQ accordion, pricing cards) and re-applied to the modular PHP template
   class names (site-header, hero, silo-grid, site-footer, mobile-action-bar)
   introduced in includes/header.php, includes/footer.php and index.php.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat.woff2') format('woff2'),
       url('/assets/fonts/montserrat.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette */
  --gold: #F5C518;
  --gold-hover: #E3B50B;
  --gold-text: #886D07; /* darkened gold for text ON light backgrounds — #E3B50B on white is ~1.9:1, fails WCAG AA; this hits ~5:1 */
  --anthracite: #1A1A24;
  --navy: #2D2D3A;
  --paper: #F4F4F9;
  --white: #FFFFFF;
  --whatsapp: #25D366;
  --whatsapp-hover: #128C7E;

  /* Text */
  --ink: #1A1A24;
  --ink-soft: #5A5A66;
  --on-dark: #F4F4F9;
  --on-dark-soft: #B0B0C0;

  /* Surfaces (light/dark section backgrounds) */
  --surface: #FFFFFF;
  --line: #E7E7EF;

  /* Effects */
  --shadow-sm: 0 4px 6px rgba(0,0,0,.05);
  --shadow-md: 0 10px 30px rgba(0,0,0,.08);
  --shadow-lg: 0 20px 40px rgba(26,26,36,.15);
  --shadow-dark: 0 15px 35px rgba(0,0,0,.4);
  --radius: 12px;
  --radius-lg: 24px;
  --pill: 50px;
  --transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);

  /* Fixed chrome heights — used to size scroll offsets, never guessed inline */
  --header-h: 64px;
  --bar-h: 60px;
}

/* ---- Reset & base --------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 .7rem;
}
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.25rem; }
/* 1.05rem, not the original 1.02rem — narrows the gap against the legacy
   homepage's 1.1rem body copy so paragraph text doesn't visibly shrink
   the moment you leave the homepage for a silo page. */
p { font-size: 1.05rem; font-weight: 400; color: var(--ink-soft); margin: 0 0 1.1rem; max-width: 62ch; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--gold);
  color: var(--anthracite); padding: 1rem 1.5rem; font-weight: 700; z-index: 10000;
}
.skip-link:focus { left: .5rem; top: .5rem; }
*:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .85rem 1.6rem; border-radius: var(--pill);
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  border: none; cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.btn--call { background: var(--gold); color: var(--anthracite); box-shadow: 0 8px 20px rgba(245,197,24,.35); }
.btn--call:hover { background: var(--gold-hover); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(245,197,24,.5); }
.btn--call:active { transform: translateY(-1px); }
.btn--whatsapp { background: var(--whatsapp); color: #fff; box-shadow: 0 8px 20px rgba(37,211,102,.3); }
.btn--whatsapp:hover { background: var(--whatsapp-hover); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(37,211,102,.45); }
.btn--whatsapp:active { transform: translateY(-1px); }
.btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }
.icon { width: 18px; height: 18px; flex-shrink: 0; }
.btn--lg .icon { width: 20px; height: 20px; }

/* ---- Sticky header ------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(20,25,34,.85);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.18);
}
.site-header__inner {
  max-width: 78rem; margin: 0 auto; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25rem; gap: 1.25rem;
}
.brand {
  display: flex; align-items: center; gap: .5rem; flex-shrink: 0; flex-wrap: nowrap;
  font-weight: 800; font-size: 1.14rem; color: var(--white); letter-spacing: -.02em;
  min-height: 44px; /* tap target */
}
.brand__mark {
  /* Real source file is a wide ~230x60 horizontal lockup, not a square icon —
     width:auto preserves its true aspect ratio instead of squashing it into
     a forced square box (which is what object-fit:cover was doing before). */
  height: 40px; width: auto; max-width: none; flex-shrink: 0;
}

.main-nav__list {
  display: flex; flex-wrap: nowrap; gap: 1.15rem; align-items: center;
}
.nav-link {
  color: var(--on-dark-soft); font-weight: 600; font-size: .87rem; position: relative;
  white-space: nowrap; transition: var(--transition);
}
.nav-link::after {
  content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 2px;
  background: var(--gold); transition: var(--transition);
}
.nav-link:hover, .nav-link.is-active { color: var(--white); }
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }

.main-nav__toggle {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 0;
  width: 44px; height: 44px; /* explicit 44x44 tap target, not just the visual 24px icon */
}
.main-nav__toggle span { width: 24px; height: 2px; background: var(--white); border-radius: 2px; }

.header-cta { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
.header-cta .btn { padding: .58rem 1rem; font-size: .83rem; }
.header-cta .icon { width: 16px; height: 16px; }
.header-cta__badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .76rem; font-weight: 700; color: var(--on-dark);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  padding: .4rem .7rem; border-radius: var(--pill); white-space: nowrap;
}
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); }
  70% { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

@media (max-width: 900px) {
  .main-nav__toggle { display: flex; }
  .main-nav__list {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; flex-wrap: wrap; align-items: flex-start; gap: 1rem;
    background: rgba(20,25,34,.98); backdrop-filter: blur(12px);
    padding: 1rem 1.25rem 1.5rem; display: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .main-nav__list.is-open { display: flex; }
  .main-nav__list li { width: 100%; }
  .nav-link {
    font-size: 1rem; white-space: normal;
    display: flex; align-items: center; min-height: 44px; width: 100%; /* full-width 44px tap target */
  }
  .header-cta .btn--call span, .header-cta .btn--whatsapp span { display: none; }
  .header-cta__badge span { display: inline; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  /* Tablet crowding guard: 6 nav labels + full-width logo lockup + full
     call/WhatsApp CTA text is tight in this band, just above where the
     hamburger takes over. Drop the wordmark text (the logo image alone
     still carries the brand) rather than shrinking everything else further. */
  .header-cta__badge { display: none; }
  .main-nav__list { gap: .8rem; }
  .nav-link { font-size: .82rem; }
  .brand span { display: none; }
}
@media (max-width: 480px) {
  .header-cta__badge { display: none; }
}

/* ---- Page intro banner (silo pages) --------------------------------------
   NOTE: the homepage no longer uses a `.hero` class here — it restores the
   legacy homepage's own `.hero` section verbatim, scoped under `.legacy-home`
   below, so this block only needs to serve `.page`/`.page__intro`. */
.page .eyebrow {
  display: inline-block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: .8rem;
}
.page__intro .lede { color: var(--on-dark-soft); font-size: 1.08rem; margin: 0 auto 1.6rem; }
.page__cta { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }

/* ---- Trust badges (7/24, licensed, transparent pricing) ------------------ */
.trust-badges {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 1.4rem 0 0;
}
.trust-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(245,197,24,.1); border: 1px solid rgba(245,197,24,.35);
  color: var(--on-dark); padding: .5rem 1rem; border-radius: var(--pill);
  font-size: .85rem; font-weight: 600;
}
.trust-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
/* Light-background variant, used inside white article sections */
.page .trust-badges { justify-content: flex-start; }
.page .trust-badge { background: var(--white); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---- Silo grid (homepage) ------------------------------------------------- */
.silo-grid-section { max-width: 62rem; margin: 0 auto; padding: 3rem 1.25rem; }
.silo-grid-section h2 { text-align: center; margin-bottom: 1.6rem; }
.silo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.silo-card {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface); border: 2px solid transparent; border-radius: var(--radius);
  padding: 1.2rem 1.4rem; font-weight: 700; color: var(--ink);
  box-shadow: var(--shadow-sm); transition: var(--transition);
}
.silo-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.silo-card__arrow { color: var(--gold); font-weight: 800; }

/* ---- Article / page shell -------------------------------------------------- */
.breadcrumb {
  width: 100%; max-width: 75rem; margin: 1.1rem auto 0; padding: 0 1.5rem;
  font-size: .82rem; color: var(--ink-soft);
}
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  list-style: none; margin: 0; padding: 0;
}
.breadcrumb li { display: flex; align-items: center; gap: .4rem; }
.breadcrumb a {
  color: var(--ink-soft); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent; transition: var(--transition);
}
.breadcrumb a:hover { color: var(--gold-text); border-bottom-color: var(--gold-text); }
.breadcrumb .crumb-category { color: var(--ink-soft); font-weight: 600; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 700; }
.breadcrumb .crumb-sep { width: 13px; height: 13px; color: var(--line); }

/* 75rem (1200px) — a standard premium corporate content width. The header
   (78rem) and footer (76rem) already spanned close to this; .page at the
   old 46rem left a narrow, off-balance content column between two much
   wider chrome bars. Individual paragraphs still cap at 62ch via the
   global `p` rule, so widening this shell doesn't create unreadable
   full-width lines of prose — only the shell (cards, tables, intro banner)
   gets more room to breathe. */
.page { width: 100%; max-width: 75rem; margin: 0 auto; padding: 2.2rem 1.5rem 4rem; }
.page--dark-intro .page__intro {
  background:
    radial-gradient(60rem 20rem at 15% -20%, rgba(245,197,24,.14), transparent 60%),
    linear-gradient(135deg, var(--anthracite) 0%, var(--navy) 100%);
  color: var(--white); margin: -2.2rem -1.5rem 2.4rem; padding: 3.2rem 1.5rem 3rem;
  border-bottom: 1px solid rgba(245,197,24,.2);
}
.page--dark-intro .page__intro h1 { color: var(--white); }
.page--dark-intro .page__intro .lede { color: var(--on-dark-soft); }
.page--dark-intro .page__intro .trust-badges { justify-content: flex-start; }
.page--dark-intro .page__intro .trust-badge { background: rgba(245,197,24,.1); border-color: rgba(245,197,24,.35); color: var(--on-dark); box-shadow: none; }
.page--dark-intro .page__cta { justify-content: flex-start; }

h3.section-heading { margin-top: 2.4rem; position: relative; padding-bottom: .7rem; }
h3.section-heading::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px;
  background: var(--gold); border-radius: 2px;
}

/* ---- Feature / info cards (reused across all silo pages) ------------------- */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin: 1.4rem 0 2rem; }
.feature-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem 1.5rem; box-shadow: var(--shadow-sm); transition: var(--transition);
  position: relative; overflow: hidden;
}
.feature-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), #FFD700); transform: scaleX(0);
  transform-origin: left; transition: transform .4s ease;
}
.feature-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.feature-card:hover::before { transform: scaleX(1); }
.feature-icon {
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: .9rem;
  background: linear-gradient(135deg, var(--gold), #FFD700);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; box-shadow: 0 6px 16px rgba(245,197,24,.3);
}
.feature-card h3 { margin-bottom: .5rem; font-size: 1.05rem; }
.feature-card p { font-size: .92rem; margin-bottom: 0; }

/* ---- Fare / route tables ------------------------------------------------------ */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
table { border-collapse: collapse; width: 100%; min-width: 480px; }
thead th {
  text-align: left; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); background: #F7F5EA; padding: .75rem .9rem; border-bottom: 1px solid var(--line);
}
tbody td { padding: .75rem .9rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
tbody tr:last-child td { border-bottom: none; }
tbody td a { color: var(--gold-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.table-note { font-size: .82rem; color: var(--ink-soft); margin-top: .7rem; }

/* Working-hours table (contact page) */
table.hours-table td:first-child { font-weight: 700; color: var(--ink); }
table.hours-table td:last-child { font-variant-numeric: tabular-nums; }
.hours-badge {
  display: inline-flex; align-items: center; gap: .5rem; background: rgba(245,197,24,.12);
  border: 1px solid rgba(245,197,24,.4); color: var(--gold-text); font-weight: 700;
  padding: .5rem 1rem; border-radius: var(--pill); font-size: .85rem; margin-bottom: 1rem;
}

/* ---- FAQ accordion (accessible <details>-style toggle, no layout shift) ----- */
.faq { margin-top: 2.6rem; }
.faq-container { display: flex; flex-direction: column; gap: 1rem; }
.faq-item {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow: hidden; transition: var(--transition);
}
.faq-item:hover { box-shadow: var(--shadow-md); }
.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.2rem 1.4rem; background: transparent; border: 0; cursor: pointer;
  font: inherit; text-align: left; color: var(--ink);
}
.faq-question:hover { background: rgba(245,197,24,.06); }
.faq-heading { font-weight: 700; font-size: 1rem; }
.faq-icon {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--gold);
  color: var(--anthracite); display: flex; align-items: center; justify-content: center;
  font-weight: 800; transition: transform .3s ease;
}
.faq-item.faq-open .faq-icon { transform: rotate(45deg); }
/* grid-template-rows 0fr->1fr instead of a fixed max-height: the old
   max-height:480px technique animated every answer through the same fixed
   range regardless of actual content length, so short answers snapped open
   fast then idled — this scales the transition to real content height. */
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq-item.faq-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer p { overflow: hidden; padding: 0 1.4rem 1.3rem; margin: 0; font-size: .95rem; }

/* ---- Related-silo cross-links ------------------------------------------------ */
.related-silo { margin-top: 2.4rem; padding: 1.4rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.related-silo h2 { font-size: 1.1rem; margin-bottom: .8rem; }
.related-silo li { margin-bottom: .5rem; }
.related-silo a { color: var(--gold-text); font-weight: 700; }
.related-silo a:hover { text-decoration: underline; }

/* ---- Contact page: map + address card ----------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; margin-top: 1.6rem; }
.contact-card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 1.5rem; display: flex; flex-direction: column; gap: .4rem;
}
.contact-card address { font-style: normal; }
.map-wrapper { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-dark); border: 2px solid rgba(245,197,24,.25); line-height: 0; }
.map-wrapper iframe { width: 100%; height: 340px; display: block; border: 0; }

/* ---- Footer ------------------------------------------------------------------- */
.site-footer {
  /* No margin-top: every page already ends its own content with generous
     bottom padding (.page → 4rem, legacy FAQ section → 8rem); stacking a
     4rem gap on top of that read as a dead, accidental strip of empty
     background rather than deliberate breathing room. */
  background: linear-gradient(180deg, var(--anthracite) 0%, #12141c 100%);
  color: var(--on-dark-soft); position: relative;
  border-top: 1px solid rgba(245,197,24,.25);
}
.site-footer a { color: var(--on-dark-soft); transition: var(--transition); }
.site-footer a:hover { color: var(--white); }
.site-footer__inner {
  max-width: 76rem; margin: 0 auto; padding: 3.6rem 1.25rem 2.2rem;
  display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 2.4rem;
}
.footer-brand { font-weight: 800; font-size: 1.25rem; color: var(--white); margin-bottom: .5rem; letter-spacing: -.01em; }
.footer-heading {
  font-weight: 700; color: var(--white); margin: 0 0 1rem; position: relative; padding-bottom: .65rem;
  font-size: .95rem; letter-spacing: .02em; text-transform: uppercase;
}
.footer-heading::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px;
  background: var(--gold); border-radius: 2px;
}
.site-footer .footer-col li { margin-bottom: .6rem; font-size: .9rem; }
.site-footer .footer-col address { font-style: normal; line-height: 1.9; font-size: .9rem; }
.footer-col--links a, .footer-col--silos a { display: inline-flex; align-items: center; gap: .35rem; }
.footer-col--links a::before, .footer-col--silos a::before {
  content: '›'; color: var(--gold); font-weight: 700; transition: transform .25s ease;
}
.footer-col--links a:hover::before, .footer-col--silos a:hover::before { transform: translateX(3px); }
.footer-contact-label { color: var(--white); font-weight: 600; }
.footer-link { display: inline-block; margin-top: .6rem; color: var(--gold); font-weight: 700; }
.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,.08); padding: 1.2rem 1.25rem; text-align: center; font-size: .8rem;
  display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; color: var(--on-dark-soft);
}

/* ---- Cookie consent (sitewide) -------------------------------------------------- */
.cookie-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
  background: rgba(20,25,34,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 2px solid var(--gold); padding: 1.1rem 1.25rem;
  transform: translateY(100%); transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.cookie-consent.show { transform: translateY(0); }
.cookie-content { max-width: 76rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cookie-text { flex: 1; min-width: 260px; }
.cookie-text p { color: var(--on-dark-soft); font-size: .88rem; margin: 0; }
.cookie-text a { color: var(--gold); text-decoration: underline; }
.cookie-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-btn { padding: .6rem 1.3rem; border-radius: var(--pill); font-weight: 700; font-size: .85rem; cursor: pointer; border: none; font-family: inherit; white-space: nowrap; transition: var(--transition); }
.cookie-accept { background: var(--gold); color: var(--anthracite); }
.cookie-accept:hover { background: var(--gold-hover); }
.cookie-decline { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.25); }
.cookie-decline:hover { border-color: var(--white); }
@media (max-width: 800px) {
  /* Stack above the sticky mobile action bar instead of covering it —
     both are position:fixed;bottom:0, so without this the cookie banner
     hides the call/WhatsApp bar entirely on first visit. */
  .cookie-consent { bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
  .cookie-content { flex-direction: column; text-align: center; }
  .cookie-actions { width: 100%; justify-content: center; }
}

@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

/* ---- Sticky mobile action bar (Tap-to-Call + WhatsApp) ------------------------- */
.mobile-action-bar { display: none; }
@media (max-width: 800px) {
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
  .mobile-action-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
    height: var(--bar-h); box-shadow: 0 -6px 20px rgba(0,0,0,.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-action-bar__btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 700; font-size: .92rem;
  }
  .mobile-action-bar__btn .icon { width: 18px; height: 18px; }
  .mobile-action-bar__btn--call { background: var(--gold); color: var(--anthracite); }
  .mobile-action-bar__btn--whatsapp { background: var(--whatsapp); color: #fff; }
}

/* ---- Legal / policy documents (privacy policy, etc.) --------------------------- */
.legal-content { max-width: 68ch; }
.legal-content h2 {
  font-size: 1.4rem; margin-top: 2.2rem; padding-left: .9rem; border-left: 4px solid var(--gold);
  color: var(--navy);
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 { margin-top: 1.3rem; font-size: 1.1rem; }
.legal-content ul, .legal-content ol { margin: 0 0 1.3rem 1.4rem; }
.legal-content li { color: var(--ink-soft); margin-bottom: .5rem; }
.legal-content .update-date { font-style: italic; color: var(--ink-soft); font-size: .92rem; }
.legal-highlight {
  background: rgba(245,197,24,.08); border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1.3rem 1.5rem; margin: 1.6rem 0;
}
.legal-highlight p:last-child { margin-bottom: 0; }
.btn--muted { background: var(--anthracite); color: #fff; margin-top: 1.6rem; }
.btn--muted:hover { background: var(--navy); transform: translateY(-3px); }

/* ---- 404 page ------------------------------------------------------------------- */
.page--404 { text-align: center; }
.page--404 .page__cta { justify-content: center; }
.page--404 .related-silo { text-align: left; max-width: 26rem; margin-inline: auto; }

/* =========================================================================
   LEGACY HOMEPAGE — verbatim visual system restored from the original
   index.html, scoped entirely under `.legacy-home` (index.php's <body>
   class) so it can never leak onto the shared header/footer/pages above,
   which use their own tokens and rely on bare `header`/`footer`/`p`/`img`
   element rules that would otherwise collide with this page's identical
   class names (.card, .feature-card, .btn, .nav-link, .hero, etc.).
   Appended last on purpose: on any exact specificity tie against a rule
   above, source order makes this section win within its own scope.
   ========================================================================= */
.legacy-home, .legacy-home * { margin: 0; padding: 0; box-sizing: border-box; }
.legacy-home p, .legacy-home li { max-width: none; } /* cancel the readable-width utility above */

.legacy-home {
  --primary: #F5C518;
  --primary-hover: #E3B50B;
  --dark-anthracite: #1A1A24;
  --navy-blue: #2D2D3A;
  --light-bg: #F4F4F9;
  --white: #FFFFFF;
  --text-dark: #1A1A24;
  --text-muted: #5A5A66;
  --text-light: #F4F4F9;
  --text-light-muted: #B0B0C0;
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 40px rgba(26, 26, 36, 0.15);
  --shadow-dark: 0 15px 35px rgba(0, 0, 0, 0.4);
  --radius-md: 12px;
  --radius-lg: 24px;
  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  font-family: 'Montserrat', sans-serif;
  background-color: var(--light-bg);
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.legacy-home a { text-decoration: none; color: inherit; }
.legacy-home img { max-width: 100%; height: auto; display: block; }
.legacy-home ul { list-style: none; }
.legacy-home .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.legacy-home h1, .legacy-home h2, .legacy-home h3, .legacy-home h4 {
  font-weight: 800; line-height: 1.2; color: var(--text-dark); letter-spacing: -0.02em;
}
.legacy-home h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--white); }
.legacy-home h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
.legacy-home h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.legacy-home p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 1.25rem; font-weight: 400; }

/* Buttons */
.legacy-home .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  padding: 1rem 2.25rem; border-radius: 50px; font-weight: 700; font-size: 1.05rem;
  cursor: pointer; transition: var(--transition); border: none; letter-spacing: 0.02em; text-transform: uppercase;
}
.legacy-home .btn-primary { background-color: var(--primary); color: var(--dark-anthracite); box-shadow: 0 8px 25px rgba(245, 197, 24, 0.4); }
.legacy-home .btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(245, 197, 24, 0.5); }
.legacy-home .btn-outline { background-color: transparent; color: var(--white); border: 2px solid var(--white); }
.legacy-home .btn-outline:hover { background-color: var(--white); color: var(--dark-anthracite); transform: translateY(-4px); }
.legacy-home .btn-whatsapp { background-color: #25D366; color: #fff; box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3); }
.legacy-home .btn-whatsapp:hover { background-color: #128C7E; transform: translateY(-4px); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4); }

/* Hero — sits directly below the shared sticky .site-header (in normal flow,
   not fixed/overlay), so no legacy padding-top compensation is needed here. */
.legacy-home .hero {
  position: relative; min-height: calc(100vh - var(--header-h)); display: flex; align-items: center;
  background: linear-gradient(135deg, #1A1A24 0%, #2D2D3A 50%, #1A1A24 100%); color: var(--white); overflow: hidden;
}
@media (min-width: 769px) {
  .legacy-home .hero {
    background: linear-gradient(rgba(26, 26, 36, 0.75), rgba(26, 26, 36, 0.95)),
      url('/assets/images/silopi-7-24-acil-taksi-hizmeti.webp') center/cover no-repeat;
  }
}
.legacy-home .hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px;
  background: linear-gradient(to top, var(--light-bg), transparent); z-index: 1;
}
.legacy-home .hero-content { max-width: 900px; text-align: center; margin: 0 auto; position: relative; z-index: 2; }
.legacy-home .hero-desc { font-size: 1.35rem; color: var(--text-light-muted); margin-bottom: 3rem; font-weight: 400; max-width: 700px; margin-left: auto; margin-right: auto; }
.legacy-home .hero-actions { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; }

/* About */
.legacy-home .about { padding: 8rem 0; background-color: var(--light-bg); position: relative; }
.legacy-home .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.legacy-home .about-text h2 { position: relative; padding-bottom: 1rem; }
.legacy-home .about-text h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 80px; height: 4px; background-color: var(--primary); border-radius: 2px; }
.legacy-home .about-img-container { position: relative; }
.legacy-home .about-img-container::before { content: ''; position: absolute; top: -20px; left: -20px; width: 100%; height: 100%; border: 2px solid var(--primary); border-radius: var(--radius-lg); z-index: 0; }
.legacy-home .about-img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); position: relative; z-index: 1; width: 100%; object-fit: cover; }
@media (max-width: 992px) {
  .legacy-home .about-grid { grid-template-columns: 1fr; gap: 4rem; }
  .legacy-home .about-img-container { order: -1; max-width: 600px; margin: 0 auto; }
  .legacy-home .about-text h2::after { left: 50%; transform: translateX(-50%); }
  .legacy-home .about-text { text-align: center; }
}

/* Services */
.legacy-home .services { padding: 8rem 0; background-color: var(--navy-blue); color: var(--white); position: relative; }
.legacy-home .services h2, .legacy-home .services h3 { color: var(--white); }
.legacy-home .services p { color: var(--text-light-muted); }
.legacy-home .services-intro { text-align: center; max-width: 800px; margin: 0 auto 4rem auto; }
.legacy-home .services-intro h2 { position: relative; display: inline-block; padding-bottom: 1rem; }
.legacy-home .services-intro h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background-color: var(--primary); border-radius: 2px; }
.legacy-home .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; }
.legacy-home .card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; position: relative; }
.legacy-home .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), #FF8C00); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; z-index: 10; }
.legacy-home .card:hover::before { transform: scaleX(1); }
.legacy-home .card:hover { transform: translateY(-12px); background: rgba(255, 255, 255, 0.06); box-shadow: var(--shadow-dark); border-color: rgba(255, 255, 255, 0.1); }
.legacy-home .card-img-wrapper { height: 220px; overflow: hidden; position: relative; }
.legacy-home .card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.legacy-home .card:hover .card-img { transform: scale(1.08); }
.legacy-home .card-icon { position: absolute; bottom: 10px; right: 20px; width: 50px; height: 50px; background-color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--dark-anthracite); box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 5; }
.legacy-home .card-icon svg { width: 24px; height: 24px; }
.legacy-home .card-body { padding: 2.5rem 1.75rem 1.75rem 1.75rem; flex-grow: 1; display: flex; flex-direction: column; }

/* Why choose us */
.legacy-home .why-choose { padding: 8rem 0; background-color: var(--light-bg); }
.legacy-home .why-intro { text-align: center; max-width: 800px; margin: 0 auto 4rem auto; }
.legacy-home .why-intro h2 { position: relative; display: inline-block; padding-bottom: 1rem; }
.legacy-home .why-intro h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background-color: var(--primary); border-radius: 2px; }
.legacy-home .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; }
.legacy-home .feature-card { background: var(--white); padding: 2.5rem 2rem; border-radius: var(--radius-md); text-align: center; transition: var(--transition); border: 2px solid transparent; box-shadow: var(--shadow-sm); }
.legacy-home .feature-card:hover { transform: translateY(-10px); border-color: var(--primary); box-shadow: var(--shadow-lg); }
.legacy-home .feature-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary), #FFD700); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem auto; box-shadow: 0 8px 20px rgba(245, 197, 24, 0.3); }
.legacy-home .feature-icon svg { width: 40px; height: 40px; color: var(--dark-anthracite); }
.legacy-home .feature-card h3 { margin-bottom: 1rem; color: var(--text-dark); }
.legacy-home .feature-card p { font-size: 1rem; line-height: 1.7; }

/* "Testimonials" (request-info cards) */
.legacy-home .testimonials { padding: 8rem 0; background: linear-gradient(135deg, var(--navy-blue) 0%, var(--dark-anthracite) 100%); color: var(--white); }
.legacy-home .testimonials h2, .legacy-home .testimonials h3 { color: var(--white); }
.legacy-home .testimonials p { color: var(--text-light-muted); }
.legacy-home .testimonials-intro { text-align: center; max-width: 800px; margin: 0 auto 4rem auto; }
.legacy-home .testimonials-intro h2 { position: relative; display: inline-block; padding-bottom: 1rem; }
.legacy-home .testimonials-intro h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background-color: var(--primary); border-radius: 2px; }
.legacy-home .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; }
.legacy-home .testimonial-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: 2.5rem; transition: var(--transition); position: relative; }
.legacy-home .testimonial-card::before { content: '"'; position: absolute; top: -20px; left: 20px; font-size: 6rem; color: var(--primary); opacity: 0.3; font-family: Georgia, serif; line-height: 1; }
.legacy-home .testimonial-card:hover { transform: translateY(-8px); background: rgba(255, 255, 255, 0.08); border-color: var(--primary); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); }
.legacy-home .testimonial-text { font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.5rem; font-style: italic; color: var(--text-light); }
.legacy-home .testimonial-author { display: flex; align-items: center; gap: 1rem; }
.legacy-home .author-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; color: var(--dark-anthracite); }
.legacy-home .author-info h4 { font-size: 1.1rem; margin-bottom: 0.25rem; color: var(--white); }
.legacy-home .author-info .rating { color: var(--primary); font-size: 0.9rem; }

/* Map */
.legacy-home .map-section { padding: 8rem 0; background-color: var(--navy-blue); }
.legacy-home .map-intro { text-align: center; max-width: 800px; margin: 0 auto 4rem auto; }
.legacy-home .map-intro h2 { color: var(--white); position: relative; display: inline-block; padding-bottom: 1rem; }
.legacy-home .map-intro h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background-color: var(--primary); border-radius: 2px; }
.legacy-home .map-intro p { color: var(--text-light-muted); }
.legacy-home .map-wrapper { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-dark); border: 2px solid rgba(245, 197, 24, 0.3); line-height: 0; }
.legacy-home .map-wrapper iframe { width: 100%; height: 450px; display: block; }
@media (max-width: 768px) { .legacy-home .map-wrapper iframe { height: 300px; } }

/* Pricing */
.legacy-home .pricing { padding: 8rem 0; background: linear-gradient(135deg, var(--dark-anthracite) 0%, var(--navy-blue) 100%); color: var(--white); }
.legacy-home .pricing h2, .legacy-home .pricing h3 { color: var(--white); }
.legacy-home .pricing p { color: var(--text-light-muted); }
.legacy-home .pricing-intro { text-align: center; max-width: 800px; margin: 0 auto 4rem auto; }
.legacy-home .pricing-intro h2 { position: relative; display: inline-block; padding-bottom: 1rem; }
.legacy-home .pricing-intro h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background-color: var(--primary); border-radius: 2px; }
.legacy-home .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; max-width: 1100px; margin: 0 auto; }
.legacy-home .pricing-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); padding: 3rem 2rem; text-align: center; transition: var(--transition); position: relative; overflow: hidden; }
.legacy-home .pricing-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--primary), #FFD700); transform: scaleX(0); transition: var(--transition); }
.legacy-home .pricing-card:hover::before { transform: scaleX(1); }
.legacy-home .pricing-card:hover { transform: translateY(-10px); border-color: var(--primary); background: rgba(255, 255, 255, 0.08); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.legacy-home .pricing-card.featured { border-color: var(--primary); transform: scale(1.05); }
.legacy-home .pricing-badge { background: var(--primary); color: var(--dark-anthracite); padding: 0.5rem 1.5rem; border-radius: 50px; font-weight: 700; font-size: 0.85rem; display: inline-block; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.legacy-home .pricing-title { font-size: 1.75rem; margin-bottom: 1rem; }
.legacy-home .pricing-price { font-size: 1.15rem; color: var(--primary); margin-bottom: 2rem; font-weight: 600; }
.legacy-home .pricing-features { list-style: none; margin-bottom: 2rem; text-align: left; }
.legacy-home .pricing-features li { padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; gap: 0.75rem; font-size: 1rem; }
.legacy-home .pricing-features li:last-child { border-bottom: none; }
.legacy-home .pricing-features li svg { color: var(--primary); flex-shrink: 0; }
@media (max-width: 768px) { .legacy-home .pricing-card.featured { transform: scale(1); } }

/* FAQ (legacy's own SVG-chevron accordion, distinct markup from the shared one) */
.legacy-home .faq { padding: 8rem 0; background-color: var(--light-bg); }
.legacy-home .faq-intro { text-align: center; max-width: 800px; margin: 0 auto 4rem auto; }
.legacy-home .faq-intro h2 { position: relative; display: inline-block; padding-bottom: 1rem; }
.legacy-home .faq-intro h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background-color: var(--primary); border-radius: 2px; }
.legacy-home .faq-container { max-width: 900px; margin: 0 auto; }
.legacy-home .faq-item { background: var(--white); border-radius: var(--radius-md); margin-bottom: 1.5rem; overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); }
.legacy-home .faq-item:hover { box-shadow: var(--shadow-md); }
.legacy-home .faq-question { width: 100%; padding: 1.75rem 2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: var(--transition); user-select: none; border: 0; background: transparent; font: inherit; text-align: left; }
.legacy-home .faq-question:hover { background-color: rgba(245, 197, 24, 0.05); }
.legacy-home .faq-question .faq-heading { display: block; font-size: 1.15rem; margin: 0; color: var(--text-dark); font-weight: 700; }
.legacy-home .faq-icon { width: 30px; height: 30px; background-color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition); }
.legacy-home .faq-icon svg { width: 18px; height: 18px; color: var(--dark-anthracite); transition: var(--transition); }
.legacy-home .faq-item.faq-open .faq-icon { transform: rotate(180deg); }
.legacy-home .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
.legacy-home .faq-item.faq-open .faq-answer { grid-template-rows: 1fr; }
.legacy-home .faq-answer p { overflow: hidden; padding: 0 2rem 1.75rem 2rem; font-size: 1.05rem; line-height: 1.8; color: var(--text-muted); margin: 0; }

.legacy-home .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.legacy-home .reveal.active { opacity: 1; transform: translateY(0); }