/* =============================================
   TÜRKMEN PEYZAJ — PREMIUM STYLE OVERRIDE
   turkmenpeyzaj.com/style.css üzerine ekle
   ============================================= */

:root {
  --green-deep:   #1a4a2e;
  --green-mid:    #2d7a4f;
  --green-bright: #3db36a;
  --gold:         #c9a84c;
  --gold-light:   #e8cc7e;
  --cream:        #f7f5f0;
  --dark:         #0d1f14;
  --text-body:    #2c3e30;
  --text-muted:   #6b7d6f;
  --white:        #ffffff;
  --shadow-sm:    0 2px 12px rgba(26,74,46,.08);
  --shadow-md:    0 8px 32px rgba(26,74,46,.14);
  --shadow-lg:    0 20px 60px rgba(26,74,46,.18);
  --transition:   all .35s cubic-bezier(.4,0,.2,1);
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
}

/* ---- Global Font ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text-body);
  background: var(--white);
}

/* ============================================
   HEADER — glassmorphism lux
   ============================================ */
.header-top-area {
  background: var(--green-deep) !important;
  padding: 8px 0;
  border-bottom: 1px solid rgba(201,168,76,.2);
}
.header-top-area a,
.header-top-area span,
.header-top-area p {
  color: rgba(255,255,255,.85) !important;
  font-size: 13px;
  letter-spacing: .3px;
}
.header-top-area a:hover { color: var(--gold) !important; }

.header-area {
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(26,74,46,.08), var(--shadow-sm) !important;
  padding: 0 !important;
  position: sticky;
  top: 0;
  z-index: 999;
  transition: var(--transition);
}
.header-area .navbar-brand img {
  height: 52px !important;
  width: auto;
}
.header-area .nav > li > a {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: .4px;
  color: var(--green-deep) !important;
  padding: 28px 18px !important;
  position: relative;
  transition: var(--transition);
}
.header-area .nav > li > a::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 18px;
  right: 18px;
  height: 2px;
  background: var(--green-bright);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.header-area .nav > li:hover > a::after,
.header-area .nav > li.active > a::after { transform: scaleX(1); }
.header-area .nav > li > a:hover { color: var(--green-mid) !important; }

/* CTA button */
.header-area .teklif-btn,
a.teklif-btn {
  background: linear-gradient(135deg, var(--green-mid), var(--green-bright)) !important;
  color: var(--white) !important;
  border-radius: 50px !important;
  padding: 10px 26px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: .3px;
  border: none !important;
  box-shadow: 0 4px 16px rgba(45,122,79,.35) !important;
  transition: var(--transition) !important;
  margin-left: 12px;
}
.header-area .teklif-btn:hover,
a.teklif-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(45,122,79,.45) !important;
  background: linear-gradient(135deg, var(--green-bright), var(--green-mid)) !important;
}
.header-area .teklif-btn::after { display: none !important; }

/* ============================================
   HERO SLIDER — editorial luxury
   ============================================ */
.slider .single-slide {
  height: 88vh;
  min-height: 560px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.slider-overlay {
  background: linear-gradient(
    135deg,
    rgba(13,31,20,.72) 0%,
    rgba(26,74,46,.55) 50%,
    rgba(13,31,20,.30) 100%
  ) !important;
}
.slider-text {
  position: absolute;
  bottom: 12%;
  left: 8%;
  max-width: 680px;
}
.slider-text h1,
.slider-text h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2.6rem, 5vw, 4.2rem) !important;
  font-weight: 600 !important;
  color: var(--white) !important;
  line-height: 1.18 !important;
  letter-spacing: -.5px;
  text-shadow: 0 2px 24px rgba(0,0,0,.25);
  margin-bottom: 28px !important;
}
.slider-text h1 span,
.slider-text h2 span {
  color: var(--gold-light) !important;
  font-style: italic;
}

/* Slider accent line */
.slider-text::before {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin-bottom: 22px;
}

.slider-text ul { list-style: none; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.slider-text ul li a {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .5px;
  text-transform: uppercase;
  transition: var(--transition);
  text-decoration: none;
}
.slider-text ul li:first-child a {
  background: var(--white);
  color: var(--green-deep) !important;
  box-shadow: var(--shadow-sm);
}
.slider-text ul li:first-child a:hover {
  background: var(--gold);
  color: var(--dark) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(201,168,76,.4);
}
.slider-text ul li:last-child a {
  background: transparent;
  color: var(--white) !important;
  border: 1.5px solid rgba(255,255,255,.55);
}
.slider-text ul li:last-child a:hover {
  background: var(--green-bright);
  border-color: var(--green-bright);
  transform: translateY(-3px);
}

/* ============================================
   STATS BAR — floating premium band
   ============================================ */
.stats-bar {
  background: #0d2318;
  padding: 30px 0;
  position: relative;
  z-index: 10;
  margin-top: 0;
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.stats-bar .stat-item {
  text-align: center;
  padding: 8px 24px;
  border-right: 1px solid rgba(255,255,255,.15);
}
.stats-bar .stat-item:last-child { border-right: none; }
.stats-bar .stat-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.8rem;
  font-weight: 600;
  color: #e8cc7e;
  line-height: 1;
  display: block;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.stats-bar .stat-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 1;
  margin-top: 8px;
  display: block;
}

/* ============================================
   ABOUT / HAKKIMIZDA — luxury editorial
   ============================================ */
.about-sec {
  background: var(--cream);
  position: relative;
}
.about-sec::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--gold), var(--green-bright), transparent);
}
.about-text h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 2.4rem !important;
  font-weight: 600 !important;
  color: var(--green-deep) !important;
  line-height: 1.2 !important;
  letter-spacing: -.3px;
}
.about-text h2 strong { color: var(--green-mid); font-weight: 600; }
.about-text h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin-top: 20px !important;
  margin-bottom: 18px !important;
}
.about-text p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted);
}
.about-intro {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--green-deep);
  padding: 8px 0;
}
.about-intro i.fa-check {
  width: 22px;
  height: 22px;
  background: rgba(61,179,106,.15);
  color: var(--green-bright);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.about-us-img {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow-lg) !important;
}
.about-us-img img { border-radius: var(--radius-lg); }
.about-us-overlay {
  background: linear-gradient(to top, rgba(13,31,20,.3), transparent) !important;
}

/* Contact link in about */
.about-text a[href^="tel"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green-mid);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(45,122,79,.25);
  padding-bottom: 2px;
  transition: var(--transition);
}
.about-text a[href^="tel"]:hover {
  color: var(--green-deep);
  border-color: var(--green-mid);
}

/* Service cards (right column) */
.single-founder {
  background: var(--white) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition) !important;
  margin-bottom: 16px !important;
  border: 1px solid rgba(26,74,46,.06) !important;
}
.single-founder:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}
.single-founder img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  transition: transform .5s ease;
}
.single-founder:hover img { transform: scale(1.04); }
.person-info {
  padding: 12px 16px 14px !important;
  background: var(--white) !important;
}
.person-info h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.person-info h3 a {
  color: var(--green-deep) !important;
  text-decoration: none;
  transition: color .2s;
}
.person-info h3 a:hover { color: var(--green-bright) !important; }

/* ============================================
   TABS — mission/vision/kalite
   ============================================ */
.about-tab {
  border-bottom: 2px solid rgba(26,74,46,.08) !important;
  display: flex;
  gap: 0;
  margin-bottom: 24px !important;
  padding: 0 !important;
}
.about-tab li a {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: .3px;
  color: var(--text-muted) !important;
  padding: 10px 22px !important;
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px;
  transition: var(--transition);
  text-decoration: none;
  display: block;
}
.about-tab li.active a,
.about-tab li a:hover {
  color: var(--green-deep) !important;
  border-bottom-color: var(--green-bright) !important;
}

/* ============================================
   FAQ — premium accordion look
   ============================================ */
.faq-item {
  border-bottom: 1px solid rgba(26,74,46,.1);
  padding: 20px 0;
}
.faq-item h3 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--green-deep) !important;
  margin-bottom: 10px !important;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.faq-item h3::before {
  content: 'S';
  min-width: 28px;
  height: 28px;
  background: rgba(45,122,79,.12);
  color: var(--green-mid);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  margin-top: 1px;
}
.faq-item p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  padding-left: 40px;
}
.faq-item p a {
  color: var(--green-mid);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(45,122,79,.3);
}

/* ============================================
   SECTION HEADINGS — premium lux style
   ============================================ */
.section-title h2,
.section-heading {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 2.6rem !important;
  font-weight: 600 !important;
  color: var(--green-deep) !important;
  letter-spacing: -.4px !important;
  line-height: 1.2 !important;
}
.section-title .title-decor,
.section-title .subtitle {
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
  display: block;
}

/* ============================================
   CTA BANNER — bottom strip
   ============================================ */
.cta-strip {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 100%);
  padding: 32px 0;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  background: rgba(201,168,76,.08);
  border-radius: 50%;
}
.cta-strip p {
  color: rgba(255,255,255,.85);
  font-size: 16px;
  margin: 0;
}
.cta-strip p strong { color: var(--white); font-weight: 600; }
.cta-strip .btn-cta {
  background: var(--gold) !important;
  color: var(--dark) !important;
  border-radius: 50px !important;
  padding: 13px 32px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .5px !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(201,168,76,.4) !important;
  transition: var(--transition) !important;
  text-decoration: none;
  display: inline-block;
}
.cta-strip .btn-cta:hover {
  background: var(--gold-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(201,168,76,.55) !important;
}

/* ============================================
   FOOTER — dark luxury
   ============================================ */
.footer-area {
  background: var(--dark) !important;
  color: rgba(255,255,255,.7);
}
.footer-area h3,
.footer-area h4 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin-bottom: 20px !important;
}
.footer-area a {
  color: rgba(255,255,255,.65) !important;
  text-decoration: none;
  font-size: 14px;
  transition: color .2s;
  display: inline-block;
  padding: 3px 0;
}
.footer-area a:hover { color: var(--gold-light) !important; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: 18px 0 !important;
}
.footer-bottom p {
  color: rgba(255,255,255,.4) !important;
  font-size: 13px !important;
}

/* ============================================
   SEO TEXT BLOCK — semantic rich content
   ============================================ */
.seo-content-section {
  background: var(--white);
  padding: 80px 0;
  border-top: 1px solid rgba(26,74,46,.08);
}
.seo-content-section h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--green-deep);
  margin-bottom: 16px;
}
.seo-content-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--green-mid);
  margin: 28px 0 10px;
}
.seo-content-section p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 760px;
}
.seo-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.seo-tag {
  background: rgba(45,122,79,.08);
  color: var(--green-mid);
  border: 1px solid rgba(45,122,79,.18);
  border-radius: 50px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition);
}
.seo-tag:hover {
  background: var(--green-mid);
  color: var(--white);
  border-color: var(--green-mid);
}

/* ============================================
   PRELOADER — premium
   ============================================ */
#preloader {
  background: var(--green-deep) !important;
}
#preloader-status {
  width: 48px;
  height: 48px;
  border: 2px solid rgba(201,168,76,.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================
   SCROLL-UP BUTTON
   ============================================ */
#scrollUp {
  background: var(--green-mid) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  line-height: 44px !important;
  box-shadow: var(--shadow-md) !important;
  transition: var(--transition) !important;
}
#scrollUp:hover {
  background: var(--green-bright) !important;
  transform: translateY(-3px) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .slider .single-slide { height: 65vh; }
  .slider-text { left: 5%; right: 5%; bottom: 8%; }
  .slider-text h1, .slider-text h2 { font-size: 1.9rem !important; }
  .stats-bar .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); padding: 12px 0; }
  .seo-content-section { padding: 50px 0; }
}