/* ============================================================
   ÖZEN BAKIM — COMPONENTS.CSS
   1. Buttons (extended)
   2. Service Cards
   3. Why Us Cards
   4. Step Cards
   5. Area Badges
   6. FAQ Accordion
   7. Service List (detail page)
   8. Price Info Box
   9. Why Us Mini (service pages)
   10. Contact Info Cards
   11. Hakkımızda page
   12. Site Nav active state
   ============================================================ */

/* ── 1. Buttons (extended) ── */
.btn-green {
  background: var(--green-light);
  color: var(--white);
}

.btn-green:hover {
  background: var(--green-mid);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46,26,71,0.35);
}

.btn-outline-green {
  background: transparent;
  color: var(--green-light);
  border: 2px solid var(--green-light);
}

.btn-outline-green:hover {
  background: var(--green-light);
  color: var(--white);
}

.btn-sm {
  font-size: 0.88rem;
  padding: 10px 20px;
  min-height: 44px;
  gap: 7px;
}

.btn-lg {
  font-size: 1.08rem;
  padding: 16px 36px;
  min-height: 58px;
}

/* ── 2. Service Cards ── */
.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  border: 1px solid var(--cream-dark);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}

.service-card .card-icon {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 4px;
}

.service-card h3 {
  font-size: 1.05rem;
  color: var(--green-dark);
  margin-bottom: 2px;
}

.service-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
}

.service-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
  margin-top: 8px;
  transition: gap var(--transition), color var(--transition);
}

.service-card:hover .card-link {
  gap: 10px;
  color: var(--gold-light);
}

/* ── 3. Why Us Cards ── */
.why-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  transition: background var(--transition), transform var(--transition);
}

.why-card:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-4px);
}

.why-card .why-icon {
  font-size: 2.8rem;
  margin-bottom: 16px;
  display: block;
}

.why-card h3 {
  color: var(--white);
  font-size: 1.08rem;
  margin-bottom: 10px;
}

.why-card p {
  color: rgba(255,255,255,0.65);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ── 4. Step Cards ── */
.step-card {
  text-align: center;
  padding: 24px 16px;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 20px;
  box-shadow: 0 4px 16px rgba(107,130,160,0.3);
}

.step-card h3 {
  color: var(--green-dark);
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.step-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ── 5. Area Badges ── */
.area-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1.5px solid var(--cream-dark);
  color: var(--green-dark);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 20px;
  border-radius: 30px;
  transition: all var(--transition);
}

.area-badge:hover {
  background: var(--green-dark);
  color: var(--white);
  border-color: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(46,26,71,0.25);
}

.area-badge .pin {
  font-size: 1rem;
}

/* ── 6. FAQ Accordion ── */
details.faq-item {
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--transition);
}

details.faq-item[open] {
  border-color: var(--gold);
}

details.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--green-dark);
  list-style: none;
  user-select: none;
  background: var(--white);
  transition: background var(--transition);
}

details.faq-item summary::-webkit-details-marker { display: none; }

details.faq-item[open] summary {
  background: var(--cream);
  color: var(--green-dark);
}

details.faq-item summary:hover {
  background: var(--cream);
}

.faq-chevron {
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform var(--transition);
  color: var(--gold);
}

details.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-body {
  padding: 0 24px 20px;
  background: var(--white);
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.7;
}

details.faq-item[open] .faq-body {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 7. Service List (detail pages) ── */
.service-detail-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.93rem;
  color: var(--text-dark);
  line-height: 1.5;
}

.service-detail-list li::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(46,26,71,0.12);
  color: var(--green-light);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── 8. Price Info Box ── */
.price-info-box {
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
}

.price-info-box .price-icon {
  font-size: 2.8rem;
  margin-bottom: 12px;
  display: block;
}

.price-info-box h3 {
  color: var(--green-dark);
  margin-bottom: 10px;
}

.price-info-box p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
  line-height: 1.6;
}

/* ── 9. Why Us Mini (service pages) ── */
.why-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .why-mini-grid { grid-template-columns: 1fr; }
}

.why-mini-card {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
}

.why-mini-card .icon {
  font-size: 2rem;
  margin-bottom: 10px;
  display: block;
}

.why-mini-card h4 {
  color: var(--green-dark);
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.why-mini-card p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── 10. Contact Info Cards ── */
.contact-card {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 20px;
}

.contact-card h3 {
  color: var(--green-dark);
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.contact-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cream-dark);
}

.contact-info-row:last-child {
  border-bottom: none;
}

.contact-info-row .ci-icon {
  width: 44px;
  height: 44px;
  background: var(--cream);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.contact-info-row .ci-text {
  flex: 1;
}

.contact-info-row .ci-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.contact-info-row .ci-value {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.95rem;
}

.contact-info-row .ci-value a {
  color: var(--green-light);
  transition: color var(--transition);
}

.contact-info-row .ci-value a:hover { color: var(--gold); }

/* ── 11. Hakkımızda page ── */
.about-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .about-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

.about-stat {
  text-align: center;
  padding: 28px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
}

.about-stat .stat-num {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: 6px;
}

.about-stat .stat-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
}

/* ── 12. Region service link ── */
.region-service-link {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-weight: 600;
  color: var(--green-dark);
  font-size: 0.9rem;
  transition: all var(--transition);
}

.region-service-link:hover {
  border-color: var(--gold);
  background: var(--cream);
  transform: translateX(4px);
}

.region-service-link .rsl-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.region-service-link .rsl-arrow {
  margin-left: auto;
  color: var(--gold);
  font-size: 0.85rem;
}

/* ── Inline section label ── */
.section-label {
  display: inline-block;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.content-prose h2 {
  font-size: 1.4rem;
  color: var(--green-dark);
  margin: 32px 0 12px;
}

.content-prose p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 16px;
}

/* ── Blog System ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.blog-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--cream-dark);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}

.blog-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-category {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 8px;
}

.blog-card h2 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--green-dark);
  line-height: 1.4;
  margin-bottom: 10px;
}

.blog-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 16px;
}

.blog-card-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid var(--cream-dark);
  padding-top: 12px;
  margin-top: auto;
}

.blog-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
  margin-top: 8px;
  text-decoration: none;
  transition: gap var(--transition), color var(--transition);
}

.blog-card:hover .card-link {
  gap: 10px;
  color: var(--gold-light);
}

/* Article Layout */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: start;
}

.article-body { min-width: 0; }

.article-body h3 {
  font-size: 1.12rem;
  color: var(--green-dark);
  margin: 28px 0 10px;
  font-family: var(--font-heading);
}

.article-body ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
}

.article-body ul li {
  padding: 5px 0 5px 22px;
  position: relative;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.article-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.article-body ol {
  padding-left: 22px;
  margin: 16px 0 20px;
}

.article-body ol li {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
  padding: 4px 0;
}

.article-body strong { color: var(--green-dark); font-weight: 700; }

.callout-box {
  background: var(--cream);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 28px 0;
}

.callout-box p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--green-dark);
  font-weight: 600;
  line-height: 1.6;
}

.author-box {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-top: 40px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.author-avatar {
  width: 52px;
  height: 52px;
  background: var(--green-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  color: var(--white);
  font-weight: 700;
}

.author-info h4 {
  font-size: 0.92rem;
  color: var(--green-dark);
  margin-bottom: 4px;
}

.author-info p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.article-sidebar { position: sticky; top: 100px; }

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 28px;
}

.tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  background: var(--cream);
  color: var(--green-mid);
  border-radius: 100px;
  text-decoration: none;
}

.tag:hover { background: var(--cream-dark); }

.article-toc {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 20px;
}

.article-toc h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 14px;
}

.article-toc ol {
  padding-left: 18px;
  margin: 0;
}

.article-toc ol li {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 3px 0;
}

.article-toc ol li a {
  color: var(--green-mid);
  text-decoration: none;
  transition: color var(--transition);
}

.article-toc ol li a:hover { color: var(--gold); }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: 1fr; gap: 0; }
  .article-sidebar {
    position: static;
    order: -1;         /* sidebar (CTA + related) before article body on mobile */
    margin-bottom: 32px;
  }
  .article-toc { display: none; } /* TOC not useful on mobile scroll */
}

@media (max-width: 768px) {
  /* FAQ — tighter padding on mobile */
  details.faq-item summary { padding: 16px 20px; font-size: 0.93rem; }
  .faq-body { padding: 0 20px 16px; }

  /* Why-mini — 3→2 col at tablet */
  .why-mini-grid { grid-template-columns: repeat(2, 1fr); }

  /* Price info box — reduce padding */
  .price-info-box { padding: 24px 20px; }

  /* Area badges — ensure touch target */
  .area-badge { padding: 11px 18px; font-size: 0.87rem; }
}

@media (max-width: 580px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card h2 { font-size: 1.05rem; }

  /* Why-mini — stack to 1 col on small mobile */
  .why-mini-grid { grid-template-columns: 1fr; }

  /* Author box — stack vertically */
  .author-box { flex-direction: column; gap: 12px; }
  .author-avatar { width: 44px; height: 44px; font-size: 1.2rem; }

  /* Callout box — tighter padding */
  .callout-box { padding: 14px 16px; }

  /* FAQ items */
  details.faq-item summary { padding: 14px 16px; font-size: 0.9rem; }
  .faq-body { padding: 0 16px 14px; font-size: 0.88rem; }

  /* Service detail list — tighter */
  .service-detail-list li { font-size: 0.88rem; gap: 10px; }
}

@media (max-width: 480px) {
  /* Price info box */
  .price-info-box { padding: 20px 16px; }
  .price-info-box .price-icon { font-size: 2.2rem; }

  /* Area badges full-width rows on very small screens */
  .areas-badges { gap: 8px; }
  .area-badge { width: 100%; justify-content: center; padding: 13px 16px; }

  /* Blog card */
  .blog-card-body { padding: 18px; }

  /* Article body headings */
  .article-body h3 { font-size: 1.05rem; margin: 20px 0 8px; }
  .content-prose h2 { font-size: 1.25rem; margin: 24px 0 10px; }

  /* Region service link — full width on mobile */
  .region-service-link { padding: 14px 16px; }
}

/* ═══════════════════════════════════════════════════════
   BOLGE SERVICE PAGE — Features, Process, FAQ sections
   ═══════════════════════════════════════════════════════ */

/* Features grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.feature-card {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
}

.feature-card:hover {
  box-shadow: 0 6px 24px rgba(46,26,71,0.1);
  transform: translateY(-2px);
}

.feature-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 12px;
}

.feature-card h3 {
  font-size: 0.95rem;
  color: var(--green-dark);
  margin-bottom: 8px;
}

.feature-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Process steps */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}

.process-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--cream-dark);
}

.process-step:last-child { border-bottom: none; }

.step-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green-dark);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-body strong {
  display: block;
  font-size: 1rem;
  color: var(--green-dark);
  margin-bottom: 4px;
}

.step-body p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* FAQ list — bolge pages (uses .faq-q / .faq-a instead of .faq-chevron / .faq-body) */
.faq-list details.faq-item summary.faq-q {
  padding: 18px 22px;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--green-dark);
}

.faq-list details.faq-item summary.faq-q::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.3rem;
  color: var(--gold);
  line-height: 1;
  transition: transform var(--transition);
}

.faq-list details.faq-item[open] summary.faq-q::after {
  transform: rotate(45deg);
}

.faq-a {
  padding: 0 22px 18px;
  background: var(--white);
}

.faq-a p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

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

@media (max-width: 580px) {
  .features-grid { grid-template-columns: 1fr; }
  .feature-card { text-align: left; display: flex; gap: 14px; align-items: flex-start; padding: 16px; }
  .feature-icon { font-size: 1.5rem; margin-bottom: 0; }
  .process-step { gap: 14px; }
  .step-num { width: 32px; height: 32px; font-size: 0.95rem; }
}

/* Hakkımızda — credentials grid */
@media (max-width: 680px) {
  .cred-grid { grid-template-columns: 1fr !important; }
}