/* ===== Petrov Sans (yerel) ===== */
@font-face { font-family: 'Petrov Sans'; src: url('/templates/car-service/assets/fonts/PetrovSans-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Petrov Sans'; src: url('/templates/car-service/assets/fonts/PetrovSans-Regular.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Petrov Sans'; src: url('/templates/car-service/assets/fonts/PetrovSans-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Petrov Sans'; src: url('/templates/car-service/assets/fonts/PetrovSans-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Petrov Sans'; src: url('/templates/car-service/assets/fonts/PetrovSans-ExtraBold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Petrov Sans'; src: url('/templates/car-service/assets/fonts/PetrovSans-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }

/* ===== Car Service — OtoPratik tarzı (Petrov Sans · #0166B1 · krem) ===== */
:root {
  --cs-accent: #0166B1;
  --cs-accent-dark: #01558f;
  --cs-heading: #222222;
  --cs-muted: #6b7480;
  --cs-line: #e3e9f1;
  --cs-elevated: #f2f6fb;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* İç sayfa başlık — 240px görsel banner (OtoPratik .content-top-bar) */
.page-hero {
  position: relative;
  min-height: 240px;
  display: flex;
  align-items: center;
  background-image: url('/uploads/settings/gencler-bmw-servis-1.jpeg');
  background-size: cover;
  background-position: center;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(rgba(34,34,34,.6), rgba(34,34,34,.7));
}
.page-hero > * { position: relative; z-index: 1; text-align: center; width: 100%; }
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,.85); margin-left: auto; margin-right: auto; }
.page-hero nav { justify-content: center; color: rgba(255,255,255,.75); }
.page-hero nav a { color: rgba(255,255,255,.75); }
.page-hero nav a:hover { color: var(--cs-accent); }
.page-hero nav span:last-child { color: #fff; }

/* ===== Hero slider (carousel) ===== */
.hero-slider { position: relative; }
.hero-slide { display: none; }
.hero-slide.is-active { display: block; animation: cs-fade .6s ease; }
@keyframes cs-fade { from { opacity: 0 } to { opacity: 1 } }
.hero-dot.is-active { background: var(--cs-accent); width: 1.75rem; }

/* ===== Scroll reveal ===== */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ===== Header durumları ===== */
/* Ana sayfa: krem (hero ile birleşir, "arka plansız" görünür), scroll'da beyaz */
.cs-header-home { background: #e9f1fa; }
.cs-header-home.is-scrolled { background: #ffffff; box-shadow: 0 6px 22px rgba(34,34,34,.07); }
/* İç sayfalar: beyaz */
.cs-header-solid { background: #ffffff; box-shadow: 0 1px 0 var(--cs-line); }
.cs-header-solid.is-scrolled { box-shadow: 0 6px 22px rgba(34,34,34,.07); }

/* ===== Language dropdown ===== */
.lang-dropdown { opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .2s ease; pointer-events: none; }
.lang-switcher:hover .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

/* ===== Mobile menu ===== */
.mobile-menu { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.mobile-menu.is-open { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }

/* ===== CMS içerik (prose) ===== */
.prose-cms { font-size: 1.0625rem; line-height: 1.85; }
.prose-cms h2 { font-family: 'Petrov Sans', sans-serif; font-weight: 900; color: var(--cs-heading); font-size: 1.6rem; margin: 2rem 0 .9rem; }
.prose-cms h3 { font-family: 'Petrov Sans', sans-serif; font-weight: 900; color: var(--cs-heading); font-size: 1.3rem; margin: 1.6rem 0 .7rem; }
.prose-cms p { margin: 0 0 1.1rem; }
.prose-cms a { color: var(--cs-accent); text-decoration: underline; text-underline-offset: 3px; }
.prose-cms a:hover { color: var(--cs-accent-dark); }
.prose-cms strong { color: var(--cs-heading); }
.prose-cms ul { list-style: none; margin: 0 0 1.2rem; }
.prose-cms ul li { position: relative; padding-left: 1.7rem; margin-bottom: .55rem; }
.prose-cms ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: .5rem; height: .5rem; background: var(--cs-accent); border-radius: 50%; }
.prose-cms ol { list-style: decimal; margin: 0 0 1.2rem 1.25rem; }
.prose-cms ol li { margin-bottom: .55rem; }
.prose-cms blockquote { border-left: 4px solid var(--cs-accent); padding-left: 1.2rem; margin: 1.4rem 0; color: #6b675f; font-style: italic; }
.prose-cms img { border-radius: 1rem; margin: 1.4rem 0; }
.prose-cms table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; }
.prose-cms th, .prose-cms td { border: 1px solid var(--cs-line); padding: .65rem .85rem; text-align: left; }
.prose-cms th { background: var(--cs-elevated); color: var(--cs-heading); font-weight: 700; }

/* ===== Hizmet özellik listesi (CMS HTML) ===== */
.features-list ul { list-style: none; display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 640px) { .features-list ul { grid-template-columns: 1fr 1fr; } }
.features-list li { position: relative; padding-left: 1.7rem; }
.features-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--cs-accent); font-weight: 700; }