/* ============================================

   Kaptan Oto Yıkama - Main Site Styles

   Premium automotive detailing website

   ============================================ */



@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');



@import 'theme.css';

@import 'components.css';



/* ---------- Layout ---------- */

html {

  scroll-behavior: smooth;

}



main {

  min-height: 50vh;

}



/* ---------- Navbar Premium ---------- */

.navbar-kaptan {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 1030;

  padding: 0.75rem 0;

  transition: all var(--transition-base);

  background: transparent;

}



.navbar-kaptan.scrolled {

  background: rgba(11, 18, 32, 0.95);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--border-subtle);

  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);

}



.navbar-kaptan .container {

  max-width: var(--container-max);

  margin: 0 auto;

  padding: 0 1.5rem;

}



.navbar-kaptan .navbar-brand {

  font-size: var(--text-xl);

  font-weight: 800;

  color: var(--white) !important;

  letter-spacing: -0.02em;

}



.navbar-kaptan.scrolled .navbar-brand {

  color: var(--white) !important;

}



.navbar-kaptan .nav-link {

  color: rgba(255, 255, 255, 0.85) !important;

  font-weight: 500;

  font-size: var(--text-sm);

  padding: 0.5rem 1rem !important;

  border-radius: var(--radius-md);

  transition: color var(--transition-fast), background var(--transition-fast);

}



.navbar-kaptan .nav-link:hover {

  color: var(--white) !important;

  background: rgba(255, 255, 255, 0.08);

}



.navbar-kaptan .navbar-toggler {

  border-color: rgba(255, 255, 255, 0.3);

  padding: 0.5rem 0.75rem;

}



.navbar-kaptan .navbar-toggler-icon {

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}



.navbar-kaptan .btn-cta-nav {

  padding: 0.5rem 1.25rem;

  font-size: var(--text-sm);

  border-radius: var(--radius-lg);

  font-weight: 600;

  background: linear-gradient(135deg, var(--gold-accent), #B8860B);

  color: var(--text-dark) !important;

  border: none;

  transition: all var(--transition-base);

}



.navbar-kaptan .btn-cta-nav:hover {

  transform: translateY(-1px);

  box-shadow: 0 4px 14px rgba(212, 160, 23, 0.4);

  color: var(--text-dark) !important;

}



/* ---------- Hero Section ---------- */

.hero-kaptan {

  min-height: 100vh;

  display: flex;

  align-items: center;

  position: relative;

  padding: 7rem 0 5rem;

  overflow: hidden;

  background: var(--bg-dark-navy);

}



.hero-kaptan::before {

  content: '';

  position: absolute;

  inset: 0;

  background: 

    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(14, 165, 233, 0.15), transparent),

    radial-gradient(ellipse 60% 40% at 100% 50%, rgba(212, 160, 23, 0.08), transparent),

    radial-gradient(ellipse 50% 30% at 0% 80%, rgba(14, 165, 233, 0.1), transparent);

  pointer-events: none;

}



.hero-kaptan .hero-bg-image {

  position: absolute;

  inset: 0;

  background: url('https://images.unsplash.com/photo-1619642751034-765dfdf7c58e?w=1920') center/cover no-repeat;

  opacity: 0.12;

}



.hero-kaptan .container {

  position: relative;

  z-index: 1;

  max-width: var(--container-max);

}



.hero-kaptan .hero-badges {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

  margin-bottom: 1.5rem;

}



.hero-kaptan .hero-title {

  font-size: clamp(2rem, 5vw, var(--text-6xl));

  font-weight: 800;

  line-height: 1.1;

  letter-spacing: -0.03em;

  color: var(--white);

  margin-bottom: 1.5rem;

}



.hero-kaptan .hero-title span {

  background: linear-gradient(135deg, var(--primary-blue), #38BDF8);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.hero-kaptan .hero-lead {

  font-size: var(--text-lg);

  color: var(--text-muted);

  max-width: 42rem;

  line-height: var(--line-height-relaxed);

  margin-bottom: 2rem;

}



.hero-kaptan .hero-ctas {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

  margin-bottom: 3rem;

}



.hero-kaptan .stat-cards-row {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1rem;

}



@media (min-width: 576px) {

  .hero-kaptan .stat-cards-row {

    grid-template-columns: repeat(4, 1fr);

  }

}



.hero-card-floating {

  position: relative;

  max-width: 320px;

  margin: 0 auto;

}

.hero-card-floating img {

  border: 3px solid rgba(255, 255, 255, 0.15);

}

.hero-card-badge {

  position: absolute;

  bottom: -12px;

  left: 50%;

  transform: translateX(-50%);

  background: var(--card-dark);

  border: 1px solid var(--border-subtle);

  padding: 0.5rem 1rem;

  border-radius: var(--radius-xl);

  font-size: var(--text-sm);

  font-weight: 600;

  color: var(--text-light);

  white-space: nowrap;

  box-shadow: var(--shadow-lg);

}



/* ---------- Section spacing ---------- */

.section-py {

  padding-top: var(--section-padding-y);

  padding-bottom: var(--section-padding-y);

}



.section-py-sm {

  padding-top: var(--section-padding-y-sm);

  padding-bottom: var(--section-padding-y-sm);

}



/* ---------- Service grid ---------- */

.services-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 1.5rem;

}



@media (min-width: 576px) {

  .services-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (min-width: 992px) {

  .services-grid {

    grid-template-columns: repeat(4, 1fr);

    gap: 1.5rem;

  }

}



.service-card {

  background: var(--card-dark);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-xl);

  padding: 2rem;

  text-align: center;

  transition: all var(--transition-base);

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.service-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--shadow-premium);

  border-color: rgba(14, 165, 233, 0.25);

}



.service-card .service-icon {

  width: 4rem;

  height: 4rem;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(14, 165, 233, 0.15);

  border-radius: var(--radius-xl);

  color: var(--primary-blue);

  font-size: 1.5rem;

  margin-bottom: 1.25rem;

}

.service-card .service-icon i {

  font-size: inherit;

}



.service-card .service-title {

  font-size: var(--text-lg);

  font-weight: 700;

  color: var(--text-light);

  margin-bottom: 0.5rem;

}



.service-card .service-desc {

  font-size: var(--text-sm);

  color: var(--text-muted);

  line-height: var(--line-height-relaxed);

  flex-grow: 1;

  margin-bottom: 1rem;

}



.service-card .service-link {

  font-size: var(--text-sm);

  font-weight: 600;

  color: var(--primary-blue);

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  transition: gap var(--transition-fast);

}



.service-card .service-link:hover {

  color: #38BDF8;

  gap: 0.5rem;

}



/* ---------- Why us / features ---------- */

.features-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 1.5rem;

}



@media (min-width: 576px) {

  .features-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (min-width: 992px) {

  .features-grid {

    grid-template-columns: repeat(3, 1fr);

  }

}



.feature-block {

  background: var(--card-dark);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-xl);

  padding: 2rem;

  text-align: center;

  transition: all var(--transition-base);

}



.feature-block:hover {

  border-color: rgba(14, 165, 233, 0.2);

  box-shadow: var(--shadow-xl);

}



.feature-block .feature-icon {

  width: 3.5rem;

  height: 3.5rem;

  margin: 0 auto 1rem;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(14, 165, 233, 0.12);

  border-radius: var(--radius-lg);

  color: var(--primary-blue);

  font-size: 1.35rem;

}

.feature-block .feature-icon i {

  font-size: inherit;

}



.feature-block .feature-title {

  font-size: var(--text-base);

  font-weight: 700;

  color: var(--text-light);

}



.feature-block .feature-desc {

  font-size: var(--text-sm);

  color: var(--text-muted);

  margin-top: 0.5rem;

}



/* ---------- About split ---------- */

.about-split {

  display: grid;

  grid-template-columns: 1fr;

  gap: 3rem;

  align-items: center;

}



@media (min-width: 992px) {

  .about-split {

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

  }

}



.about-split .about-image-wrap {

  border-radius: var(--radius-2xl);

  overflow: hidden;

  box-shadow: var(--shadow-premium);

}



.about-split .about-image-wrap {

  position: relative;

}

.about-split .about-image-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  min-height: 320px;

}

.about-image-overlay {

  position: absolute;

  bottom: 1rem;

  left: 1rem;

  right: 1rem;

  padding: 0.75rem 1rem;

  background: rgba(11, 18, 32, 0.8);

  border-radius: var(--radius-lg);

  backdrop-filter: blur(6px);

}



/* ---------- Pricing cards ---------- */

.pricing-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 1.5rem;

}



@media (min-width: 768px) {

  .pricing-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (min-width: 1200px) {

  .pricing-grid {

    grid-template-columns: repeat(4, 1fr);

  }

}



.pricing-card {

  background: var(--card-dark);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-2xl);

  padding: 2rem;

  text-align: center;

  transition: all var(--transition-base);

  height: 100%;

  display: flex;

  flex-direction: column;

  position: relative;

}



.pricing-card.recommended {

  border-color: var(--gold-accent);

  box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.3);

}



.pricing-card.recommended::before {

  content: 'Önerilen';

  position: absolute;

  top: -12px;

  left: 50%;

  transform: translateX(-50%);

  background: linear-gradient(135deg, var(--gold-accent), #B8860B);

  color: var(--text-dark);

  font-size: var(--text-xs);

  font-weight: 700;

  padding: 0.35rem 1rem;

  border-radius: var(--radius-lg);

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.pricing-card .price {

  font-size: var(--text-3xl);

  font-weight: 800;

  color: var(--primary-blue);

  margin: 1rem 0 0.5rem;

}



.pricing-card .price-note {

  font-size: var(--text-sm);

  color: var(--text-muted);

}



.pricing-card .pricing-features {

  list-style: none;

  padding: 0;

  margin: 1.5rem 0;

  text-align: left;

  flex-grow: 1;

}



.pricing-card .pricing-features li {

  padding: 0.4rem 0;

  font-size: var(--text-sm);

  color: var(--text-muted);

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.pricing-card .pricing-features li::before {

  content: '✓';

  color: var(--primary-blue);

  font-weight: 700;

}



/* ---------- Gallery ---------- */

.gallery-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 0.75rem;

}



@media (min-width: 768px) {

  .gallery-grid {

    grid-template-columns: repeat(3, 1fr);

    gap: 1rem;

  }

}



@media (min-width: 992px) {

  .gallery-grid {

    grid-template-columns: repeat(4, 1fr);

  }

}



.gallery-item {

  position: relative;

  border-radius: var(--radius-xl);

  overflow: hidden;

  aspect-ratio: 4/3;

}



.gallery-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform var(--transition-slow);

}



.gallery-item:hover img {

  transform: scale(1.08);

}



.gallery-item .gallery-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(11, 18, 32, 0.9), transparent 50%);

  display: flex;

  align-items: flex-end;

  padding: 1rem;

  opacity: 0;

  transition: opacity var(--transition-base);

}



.gallery-item:hover .gallery-overlay {

  opacity: 1;

}



.gallery-item .gallery-caption {

  color: var(--white);

  font-weight: 600;

  font-size: var(--text-sm);

  display: block;

}

.gallery-item .gallery-desc {

  font-size: 0.75rem;

  opacity: 0.9;

  display: block;

  margin-top: 0.25rem;

}

.gallery-grid-rich {

  grid-template-columns: repeat(2, 1fr);

  grid-auto-rows: 180px;

  gap: 0.75rem;

}

.gallery-grid-rich .gallery-item { aspect-ratio: auto; }

.gallery-grid-rich .gallery-item-tall { grid-row: span 2; }

.gallery-grid-rich .gallery-item-wide { grid-column: span 2; }

@media (min-width: 768px) {

  .gallery-grid-rich {

    grid-template-columns: repeat(4, 1fr);

    grid-auto-rows: 160px;

    gap: 1rem;

  }

  .gallery-grid-rich .gallery-item-wide { grid-column: span 2; grid-row: span 1; }

}

@media (min-width: 992px) {

  .gallery-grid-rich { grid-auto-rows: 180px; }

}



/* ---------- Testimonials ---------- */

.testimonial-card {

  background: var(--card-dark);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-xl);

  padding: 2rem;

  height: 100%;

  transition: all var(--transition-base);

}



.testimonial-card:hover {

  border-color: rgba(14, 165, 233, 0.2);

}



.testimonial-card .quote {

  font-size: var(--text-base);

  color: var(--text-light);

  line-height: var(--line-height-relaxed);

  margin-bottom: 1.5rem;

}



.testimonial-card .author {

  font-weight: 700;

  color: var(--white);

  font-size: var(--text-base);

}



.testimonial-card .role {

  font-size: var(--text-sm);

  color: var(--gold-accent);

}



/* ---------- Process steps ---------- */

.process-steps {

  display: grid;

  grid-template-columns: 1fr;

  gap: 2rem;

}



@media (min-width: 768px) {

  .process-steps {

    grid-template-columns: repeat(4, 1fr);

  }

}



.process-step {

  text-align: center;

  position: relative;

}



.process-step .step-num {

  width: 3.5rem;

  height: 3.5rem;

  margin: 0 auto 1rem;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, var(--primary-blue), #0284C7);

  color: var(--white);

  font-weight: 800;

  font-size: var(--text-lg);

  border-radius: 50%;

}

.process-step .step-num i {

  font-size: 1.15rem;

}



.process-step .step-title {

  font-size: var(--text-base);

  font-weight: 700;

  color: var(--text-light);

  margin-bottom: 0.5rem;

}



.process-step .step-desc {

  font-size: var(--text-sm);

  color: var(--text-muted);

}



/* ---------- Final CTA block ---------- */

.cta-block {

  background: linear-gradient(135deg, var(--card-dark) 0%, #0f172a 100%);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-2xl);

  padding: 3rem 2rem;

  text-align: center;

  position: relative;

  overflow: hidden;

}



.cta-block::before {

  content: '';

  position: absolute;

  top: -50%;

  left: -50%;

  width: 200%;

  height: 200%;

  background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 50%);

  pointer-events: none;

}



.cta-block .cta-title {

  font-size: var(--text-2xl);

  font-weight: 800;

  color: var(--white);

  margin-bottom: 0.75rem;

}



.cta-block .cta-sub {

  color: var(--text-muted);

  margin-bottom: 1.5rem;

}



.cta-block .cta-buttons {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 1rem;

}



/* ---------- Footer ---------- */

.footer-kaptan {

  background: var(--card-dark);

  border-top: 1px solid var(--border-subtle);

  padding: 4rem 0 2rem;

  color: var(--text-light);

}



.footer-kaptan .footer-brand {

  font-size: var(--text-xl);

  font-weight: 800;

  color: var(--white);

  margin-bottom: 1rem;

}



.footer-kaptan .footer-about {

  font-size: var(--text-sm);

  color: var(--text-muted);

  line-height: var(--line-height-relaxed);

  max-width: 280px;

}



.footer-kaptan .footer-title {

  font-size: var(--text-sm);

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--white);

  margin-bottom: 1.25rem;

}



.footer-kaptan .footer-links {

  list-style: none;

  padding: 0;

  margin: 0;

}



.footer-kaptan .footer-links li {

  margin-bottom: 0.5rem;

}



.footer-kaptan .footer-links a {

  color: var(--text-muted);

  text-decoration: none;

  font-size: var(--text-sm);

  transition: color var(--transition-fast);

}



.footer-kaptan .footer-links a:hover {

  color: var(--primary-blue);

}



.footer-kaptan .footer-bottom {

  margin-top: 3rem;

  padding-top: 2rem;

  border-top: 1px solid var(--border-subtle);

  text-align: center;

  font-size: var(--text-sm);

  color: var(--text-muted);

}



.footer-kaptan .social-links {

  display: flex;

  gap: 0.75rem;

  margin-top: 1rem;

}



.footer-kaptan .social-links a {

  width: 2.5rem;

  height: 2.5rem;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(255, 255, 255, 0.06);

  border-radius: var(--radius-md);

  color: var(--text-light);

  transition: all var(--transition-fast);

}



.footer-kaptan .social-links a:hover {

  background: var(--primary-blue);

  color: var(--white);

}



/* ---------- Inner page hero ---------- */

.page-hero {

  padding: 8rem 0 4rem;

  background: var(--bg-dark-navy);

  position: relative;

  overflow: hidden;

}



.page-hero::before {

  content: '';

  position: absolute;

  inset: 0;

  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(14, 165, 233, 0.12), transparent);

  pointer-events: none;

}



.page-hero .page-hero-title {

  font-size: clamp(1.75rem, 4vw, var(--text-4xl));

  font-weight: 800;

  color: var(--white);

  margin-bottom: 0.5rem;

}



.page-hero .page-hero-sub {

  color: var(--text-muted);

  font-size: var(--text-lg);

}



/* ---------- Contact page ---------- */

.contact-card {

  background: var(--card-dark);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-xl);

  padding: 2rem;

  height: 100%;

  transition: all var(--transition-base);

}



.contact-card:hover {

  border-color: rgba(14, 165, 233, 0.2);

}



.contact-card .contact-icon {

  width: 3rem;

  height: 3rem;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(14, 165, 233, 0.15);

  border-radius: var(--radius-lg);

  color: var(--primary-blue);

  font-size: 1.25rem;

  margin-bottom: 1rem;

}

.contact-card .contact-icon i {

  font-size: inherit;

}



.contact-card .contact-label {

  font-size: var(--text-sm);

  color: var(--text-muted);

  margin-bottom: 0.25rem;

}



.contact-card .contact-value {

  font-weight: 600;

  color: var(--text-light);

}



/* Form premium */

.form-control-premium {

  background: var(--card-dark);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-lg);

  color: var(--text-light);

  padding: 0.875rem 1rem;

}



.form-control-premium:focus {

  border-color: var(--primary-blue);

  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);

  background: var(--card-dark);

  color: var(--text-light);

}



.form-control-premium::placeholder {

  color: var(--text-muted);

}



/* ---------- Light section overrides ---------- */

.light-section .service-card {

  background: var(--white);

  border-color: var(--border-light);

}



.light-section .service-card .service-title { color: var(--text-dark); }

.light-section .service-card .service-desc { color: var(--text-muted); }

.light-section .feature-block {

  background: var(--white);

  border-color: var(--border-light);

}



.light-section .feature-block .feature-title { color: var(--text-dark); }

.light-section .feature-block .feature-desc { color: var(--text-muted); }

.light-section .pricing-card {

  background: var(--white);

  border-color: var(--border-light);

}



.light-section .pricing-card .price { color: var(--primary-blue); }

.light-section .pricing-card .pricing-features li { color: var(--text-dark); }

.light-section .testimonial-card {

  background: var(--white);

  border-color: var(--border-light);

}



.light-section .testimonial-card .quote { color: var(--text-dark); }

.light-section .testimonial-card .author { color: var(--text-dark); }



/* ---------- Trust Bar ---------- */

.trust-bar {

  background: linear-gradient(135deg, var(--card-dark) 0%, #0f172a 100%);

  border-top: 1px solid var(--border-subtle);

  border-bottom: 1px solid var(--border-subtle);

}

.trust-bar-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.5rem;

  padding: 0.5rem;

  transition: transform var(--transition-fast);

}

.trust-bar-item:hover {

  transform: translateY(-2px);

}

.trust-bar-icon {

  font-size: 1.75rem;

  color: var(--primary-blue);

}

.trust-bar-text {

  font-size: var(--text-xs);

  font-weight: 600;

  color: var(--text-light);

  text-transform: uppercase;

  letter-spacing: 0.04em;

}



/* ---------- Before / After Section ---------- */

.before-after-section {

  background: var(--light-section);

  position: relative;

}

.before-after-section::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--border-light), transparent);

}

.before-after-card {

  background: var(--white);

  border-radius: var(--radius-2xl);

  overflow: hidden;

  border: 1px solid var(--border-light);

  box-shadow: var(--shadow-md);

  transition: all var(--transition-base);

}

.before-after-card:hover {

  box-shadow: var(--shadow-xl);

  border-color: rgba(14, 165, 233, 0.2);

}

.before-after-card .ba-image-wrap {

  position: relative;

  aspect-ratio: 4/3;

  overflow: hidden;

}

.before-after-card .ba-image-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.before-after-card .ba-label {

  position: absolute;

  top: 0.75rem;

  left: 0.75rem;

  font-size: var(--text-sm);

  font-weight: 700;

  padding: 0.35rem 0.75rem;

  border-radius: var(--radius-md);

  z-index: 1;

}

.before-after-card .ba-label-before {

  background: rgba(15, 23, 42, 0.85);

  color: var(--white);

}

.before-after-card .ba-label-after {

  background: var(--primary-blue);

  color: var(--white);

}

.before-after-card .ba-caption {

  padding: 1rem 1.25rem;

}

.before-after-card.compact .ba-label {

  position: static;

  display: inline-block;

  margin-bottom: 0.5rem;

}

.before-after-card.compact img {

  border: 1px solid var(--border-light);

}

.ba-arrow {

  width: 4rem;

  height: 4rem;

  border-radius: 50%;

  background: rgba(14, 165, 233, 0.15);

  color: var(--primary-blue);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.25rem;

}



/* Testimonial stars */

.testimonial-stars {

  color: var(--gold-accent);

  font-size: var(--text-sm);

  margin-bottom: 0.75rem;

}

.testimonial-card .quote-wrap {

  position: relative;

  padding-left: 1.5rem;

}

.testimonial-card .quote-wrap::before {

  content: '"';

  position: absolute;

  left: 0;

  top: -0.5rem;

  font-size: 2.5rem;

  font-family: Georgia, serif;

  color: var(--primary-blue);

  opacity: 0.4;

}



/* Section with subtle pattern */

.section-pattern::before {

  content: '';

  position: absolute;

  inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(14, 165, 233, 0.06) 1px, transparent 0);

  background-size: 24px 24px;

  pointer-events: none;

}



/* ---------- Utility ---------- */

.text-gold { color: var(--gold-accent); }

.text-primary-blue { color: var(--primary-blue); }



.img-cover {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* Contact form on light background */

.card-premium-light .form-control-premium {

  background: var(--light-section);

  border-color: var(--border-light);

  color: var(--text-dark);

}

.card-premium-light .form-control-premium:focus {

  background: var(--white);

  border-color: var(--primary-blue);

  color: var(--text-dark);

}



/* Map placeholder */

.map-placeholder {

  background: var(--card-dark);

  border: 1px dashed var(--border-subtle);

  border-radius: var(--radius-xl);

  min-height: 300px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--text-muted);

  font-size: var(--text-sm);

}