/* =============================================================================
   ÖZEL KATMAN — Porto (business-consulting-2) temasının ÜSTÜNE biner
   =============================================================================
   Tema dosyalarının hiçbiri değiştirilmez; bu projeye özel bileşenlerin
   (cevap-önce bloğu, olgu ızgarası, hata kodu tablosu, SSS, servis formu)
   görünümü temanın kendi renk değişkenleriyle (--primary / --secondary /
   --quaternary / --grey-*) burada tanımlanır.

   Bu dosya app.head içinde EN SON yüklenir, bu yüzden özgüllük savaşına
   girmeye gerek yoktur.
   ========================================================================== */

/* ---------- hero slider: JS'ten ÖNCE ilk slayt görünür ----------
   Porto'nun .owl-carousel-light kuralı tüm slaytları `display:none;opacity:0`
   yapar ve görünürlüğü, JS ilk slayta .active sınıfını ekleyince kazandırır.
   Nuxt'ta tema JS'i hydration'dan sonra yüklendiği için hero alanı ilk
   saniyelerde bomboş kalıyordu. Bu kural sunucudan gelen HTML'in ilk slaytını
   anında görünür kılar; JS kurulumu bittiğinde plugins/porto.client.ts
   `slide-preview` sınıfını kaldırır ve kontrolü tamamen carousel'e bırakır. */
.owl-carousel-light .owl-item.slide-preview {
  display: block;
  visibility: visible;
  opacity: 1;
}

/* ---------- erişilebilirlik: içeriğe atla ---------- */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--secondary);
  color: #fff;
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 600;
}
.skip-to-content:focus {
  left: 8px;
  top: 8px;
}

/* ---------- cevap-önce bloğu (AEO) ---------- */
.answer-block {
  border-left: 4px solid var(--primary);
  background: var(--quaternary);
  padding: 22px 25px;
  margin-bottom: 30px;
}
html[dir="rtl"] .answer-block {
  border-left: 0;
  border-right: 4px solid var(--primary);
}
.answer-block .answer-text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.8;
  font-weight: 500;
  color: var(--secondary);
}
.answer-block .answer-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 35px;
  margin: 18px 0 0;
}
.answer-block .answer-facts dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grey-1000);
  font-weight: 600;
}
.answer-block .answer-facts dd {
  margin: 2px 0 0;
  font-weight: 700;
  color: var(--tertiary);
}

/* ---------- olgu ızgarası (varış süresi / yarıçap / yol ücreti) ---------- */
.facts-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  background: var(--quaternary-200);
  border: 1px solid var(--quaternary-200);
  margin: 0 0 30px;
}
.facts-grid.stacked {
  grid-template-columns: 1fr;
}
.facts-grid > div {
  background: #fff;
  padding: 18px 20px;
}
.facts-grid dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grey-1000);
  font-weight: 600;
  margin-bottom: 4px;
}
.facts-grid dd {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--secondary);
}

/* ---------- sık arıza listesi ---------- */
.fault-list {
  list-style: none;
  padding: 0;
  margin: 15px 0 0;
}
.fault-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  line-height: 1.8;
}
.fault-list li:before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--primary);
}
.fault-list li strong {
  color: var(--secondary);
}

/* ---------- etiket listesi (cadde, seri, referans noktası) ---------- */
.chip-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 15px 0 0;
}
.chip-list li {
  background: var(--quaternary);
  border: 1px solid var(--quaternary-200);
  padding: 7px 15px;
  font-size: 0.88rem;
  color: var(--tertiary);
}
.chip-list li a {
  text-decoration: none;
  color: var(--secondary);
  font-weight: 600;
}
.chip-list li a:hover {
  color: var(--primary);
}

/* ---------- hata kodu tablosu ---------- */
.error-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0 0;
  background: #fff;
}
.error-table th,
.error-table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--quaternary-200);
  vertical-align: top;
}
.error-table thead th {
  background: var(--secondary);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.error-table code {
  background: var(--quaternary);
  color: var(--primary);
  padding: 3px 9px;
  font-weight: 700;
}

/* ---------- SSS ---------- */
.faq-item {
  border-bottom: 1px solid var(--quaternary-200);
  padding: 18px 0;
}
.faq-item:last-child {
  border-bottom: 0;
}
.faq-item h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 8px;
  /* Porto başlıkları varsayılan olarak büyük harfe çeviriyor; soru metni
     cümle düzeninde kalmalı (hem okunabilirlik hem de SSS snippet'i için). */
  text-transform: none;
}
.faq-item p {
  margin: 0;
  line-height: 1.8;
}

/* ---------- bölge / marka kartları ---------- */
.zone-card {
  display: block;
  background: #fff;
  border: 1px solid var(--quaternary-200);
  padding: 16px 18px;
  text-decoration: none;
  height: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
a.zone-card:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}
.zone-card strong {
  display: block;
  color: var(--secondary);
  font-size: 1.02rem;
  font-weight: 700;
}
a.zone-card:hover strong {
  color: var(--primary);
}
.zone-card span {
  display: block;
  font-size: 0.82rem;
  color: var(--grey-1000);
  margin-top: 3px;
}
.zone-card.is-plain {
  background: var(--quaternary);
  border-style: dashed;
}
.zone-card.is-plain strong {
  color: var(--grey-1000);
  font-weight: 600;
}

.brand-logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--quaternary-200);
  padding: 20px 14px;
  text-decoration: none;
  height: 100%;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
a.brand-logo-card:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}
.brand-logo-card img {
  max-height: 62px;
  width: auto;
  object-fit: contain;
}
.brand-logo-card span {
  font-weight: 700;
  color: var(--secondary);
  font-size: 0.95rem;
}
a.brand-logo-card:hover span {
  color: var(--primary);
}

/* ---------- panelden gelen zengin içerik (Editor.js çıktısı) ---------- */
.rich-content {
  line-height: 1.9;
  overflow-wrap: break-word;
}
.rich-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 32px 0 14px;
}
.rich-content h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 26px 0 10px;
}
.rich-content img {
  max-width: 100%;
  height: auto;
}
.rich-content table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  margin: 18px 0;
}
.rich-content td,
.rich-content th {
  border: 1px solid var(--quaternary-200);
  padding: 10px 12px;
}
.rich-content ul,
.rich-content ol {
  padding-left: 22px;
}
.rich-content li {
  margin-bottom: 8px;
}

/* ---------- servis talep formu ---------- */
.service-request-form .form-control {
  border-radius: 0;
  height: auto;
  padding: 12px 15px;
}
.service-request-form textarea.form-control {
  min-height: 130px;
}
.service-request-form .form-note {
  font-size: 0.85rem;
  color: var(--grey-1000);
}

/* ---------- mobil sabit arama çubuğu ---------- */
.mobile-call-bar {
  z-index: 999 !important;
}
@media (max-width: 767px) {
  body {
    padding-bottom: 66px;
  }
}

/* ---------- blog ---------- */
.post-category {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}
.post-meta {
  font-size: 0.85rem;
  color: var(--grey-1000);
}
.post-meta strong {
  color: var(--tertiary);
}

/* ---------- hata sayfası ---------- */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
}
.error-page .error-code {
  font-size: 5rem;
  line-height: 1;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
}

/* ---------- yardımcılar ---------- */
.list-check {
  list-style: none;
  padding: 0;
  margin: 0;
}
.list-check li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
}
.list-check li:before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--primary);
}
.section-divider {
  border: 0;
  border-top: 1px solid var(--quaternary-200);
  margin: 0;
}