/* ============================================================
   İstanbul Aydın Temizlik — Site Tasarım Sistemi (2026)
   Bootstrap 5.3 üzerine; design tokens + bileşenler +
   eski şablon sınıf adları için modern uyumluluk katmanı.
   ============================================================ */

/* === 1. DESIGN TOKENS ======================================= */
:root {
  /* Renk: temizlik = ferahlık + güven (mavi), CTA = turuncu (izolasyon) */
  --hue-primary: 205;
  --hue-accent: 24;
  --color-primary:       hsl(var(--hue-primary) 85% 41%);
  --color-primary-hover: hsl(var(--hue-primary) 85% 33%);
  --color-primary-light: hsl(var(--hue-primary) 85% 95%);
  --color-primary-deep:  hsl(var(--hue-primary) 70% 16%);
  --color-accent:        hsl(var(--hue-accent) 95% 52%);
  --color-accent-hover:  hsl(var(--hue-accent) 95% 44%);
  --color-surface:       hsl(0 0% 100%);
  --color-surface-2:     hsl(var(--hue-primary) 35% 97%);
  --color-surface-3:     hsl(var(--hue-primary) 25% 93%);
  --color-text:          hsl(215 25% 15%);
  --color-text-muted:    hsl(215 12% 44%);
  --color-border:        hsl(215 20% 90%);
  --color-success:       hsl(150 65% 38%);
  --color-whatsapp:      hsl(142 70% 40%);

  /* Tipografi */
  --font-sans: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-sm:  clamp(0.85rem, 0.8rem + 0.2vw, 0.925rem);
  --text-md:  clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg:  clamp(1.125rem, 1rem + 0.5vw, 1.3rem);
  --text-xl:  clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  --text-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  --text-3xl: clamp(1.9rem, 1.5rem + 2vw, 2.9rem);
  --text-4xl: clamp(2.3rem, 1.7rem + 3vw, 3.8rem);

  /* Boşluk (8px grid) */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem;

  /* Yüzey */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-full: 9999px;
  --shadow-sm: 0 1px 3px hsl(215 30% 30% / .07), 0 1px 2px hsl(215 30% 30% / .05);
  --shadow-md: 0 4px 10px hsl(215 30% 30% / .08), 0 2px 4px hsl(215 30% 30% / .05);
  --shadow-lg: 0 14px 30px hsl(215 30% 30% / .11), 0 4px 10px hsl(215 30% 30% / .06);
  --shadow-primary: 0 8px 22px hsl(var(--hue-primary) 85% 41% / .30);
  --shadow-accent:  0 8px 22px hsl(var(--hue-accent) 95% 52% / .32);

  /* Hareket */
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 420ms;
}

/* === 2. TABAN ============================================== */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--color-text); }
h1 { font-size: var(--text-3xl); font-weight: 800; }
h2 { font-size: var(--text-2xl); font-weight: 800; }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
a { color: var(--color-primary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-primary-hover); }
img { max-width: 100%; height: auto; }
::selection { background: var(--color-primary); color: #fff; }
:focus-visible { outline: 3px solid hsl(var(--hue-primary) 85% 41% / .5); outline-offset: 2px; border-radius: 4px; }

/* Eski şablon sınıfları */
.img-responsive { max-width: 100%; height: auto; display: block; }
.clearfix::after { content: ""; display: table; clear: both; }
.pull-left { float: left; } .pull-right { float: right; }
.list-inline { list-style: none; padding-left: 0; margin: 0; }
.list-inline > li { display: inline-block; }

/* wow/animate.css kaldırıldı; içerikte kalan sınıflar görünür kalsın */
.wow { visibility: visible !important; opacity: 1 !important; }

/* Scroll reveal */
[data-animate] { opacity: 0; transform: translateY(26px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
[data-animate].animate-in { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .1s; }
[data-delay="2"] { transition-delay: .2s; }
[data-delay="3"] { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-animate] { opacity: 1; transform: none; }
}

/* === 3. BUTONLAR =========================================== */
.btn-cta, .more-link, .btn-alt, input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.7em;
  background: var(--color-accent); color: #fff !important;
  border: 0; border-radius: var(--radius-full);
  font-weight: 700; font-size: var(--text-sm); letter-spacing: .02em;
  box-shadow: var(--shadow-accent); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.btn-cta:hover, .more-link:hover, .btn-alt:hover, input[type="submit"]:hover {
  background: var(--color-accent-hover); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px hsl(var(--hue-accent) 95% 44% / .38);
}
.btn-cta:active, .more-link:active { transform: translateY(0); }
.btn-outline-light2 {
  display: inline-flex; align-items: center; min-height: 48px; padding: .7em 1.7em;
  border: 2px solid #fff; border-radius: var(--radius-full);
  color: #fff !important; font-weight: 700; font-size: var(--text-sm);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.btn-outline-light2:hover { background: #fff; color: var(--color-primary) !important; }

/* === 4. ÜST BAR + HEADER =================================== */
.topbar {
  background: var(--color-primary-deep); color: hsl(0 0% 100% / .85);
  font-size: var(--text-sm); padding: .45rem 0;
}
.topbar a { color: hsl(0 0% 100% / .9); }
.topbar a:hover { color: #fff; }
.topbar .fa { color: hsl(var(--hue-primary) 80% 65%); margin-right: .35rem; }
.topbar-social a {
  display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center;
  border-radius: var(--radius-full); background: hsl(0 0% 100% / .1); color: #fff; margin-left: .3rem;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.topbar-social a:hover { background: var(--color-accent); transform: translateY(-2px); }

.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: hsl(0 0% 100% / .86);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid hsl(215 20% 90% / .7);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }
.site-header .navbar { padding: .55rem 0; }
.site-header .navbar-brand { max-width: 52vw; }
.site-header .navbar-brand img { height: 62px; width: auto; max-width: 100%; object-fit: contain; transition: height var(--dur-base) var(--ease-out); }
.site-header.is-stuck .navbar-brand img { height: 50px; }
@media (max-width: 575.98px) {
  .site-header .navbar-brand img { height: 46px; }
  .header-call { padding: .5rem .8rem; }
}
.site-header .nav-link {
  font-weight: 600; font-size: var(--text-sm); color: var(--color-text);
  padding: .65rem .9rem !important; border-radius: var(--radius-sm);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.site-header .nav-link:hover, .site-header .nav-link:focus,
.site-header .nav-item.show > .nav-link { color: var(--color-primary); background: var(--color-primary-light); }
.site-header .dropdown-menu {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: .5rem; min-width: 260px;
  margin-top: .35rem;
}
.site-header .dropdown-item {
  border-radius: var(--radius-sm); padding: .55rem .8rem;
  font-size: var(--text-sm); font-weight: 500; white-space: normal;
}
.site-header .dropdown-item:hover { background: var(--color-primary-light); color: var(--color-primary); }
.header-call {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--color-accent); color: #fff !important;
  border-radius: var(--radius-full); padding: .55rem 1.2rem;
  font-weight: 700; font-size: var(--text-sm);
  box-shadow: var(--shadow-accent); white-space: nowrap;
  transition: transform var(--dur-fast), background var(--dur-fast);
}
.header-call:hover { background: var(--color-accent-hover); transform: translateY(-2px); }
@media (min-width: 992px) {
  .site-header .dropdown:hover > .dropdown-menu { display: block; }
}

/* === 5. HERO / SLIDER ====================================== */
.hero-slider { position: relative; background: var(--color-primary-deep); }
.hero-slide {
  position: relative; display: flex; align-items: center;
  min-height: clamp(420px, 62vh, 640px);
  background-size: cover; background-position: center right;
}
.hero-slide::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    hsl(var(--hue-primary) 70% 14% / .92) 0%,
    hsl(var(--hue-primary) 70% 18% / .72) 45%,
    hsl(var(--hue-primary) 70% 20% / .18) 100%);
}
.hero-slide .container { position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-block; font-size: var(--text-sm); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: hsl(var(--hue-primary) 90% 75%);
  background: hsl(var(--hue-primary) 80% 60% / .14);
  border: 1px solid hsl(var(--hue-primary) 80% 65% / .35);
  padding: .35rem 1rem; border-radius: var(--radius-full); margin-bottom: var(--sp-4);
}
.hero-title { font-size: var(--text-4xl); font-weight: 800; color: #fff; margin-bottom: var(--sp-4); max-width: 15ch; }
.hero-text { color: hsl(0 0% 100% / .82); font-size: var(--text-lg); max-width: 52ch; margin-bottom: var(--sp-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-8); color: hsl(0 0% 100% / .75); font-size: var(--text-sm); font-weight: 600; }
.hero-trust .fa { color: hsl(var(--hue-primary) 90% 70%); margin-right: .4rem; }
.hero-slider .swiper-pagination-bullet { background: #fff; opacity: .45; width: 10px; height: 10px; }
.hero-slider .swiper-pagination-bullet-active { opacity: 1; background: var(--color-accent); width: 26px; border-radius: var(--radius-full); }
.hero-slider .swiper-button-next, .hero-slider .swiper-button-prev {
  color: #fff; width: 48px; height: 48px; border-radius: var(--radius-full);
  background: hsl(0 0% 100% / .12); backdrop-filter: blur(6px);
  transition: background var(--dur-fast);
}
.hero-slider .swiper-button-next:hover, .hero-slider .swiper-button-prev:hover { background: hsl(0 0% 100% / .25); }
.hero-slider .swiper-button-next::after, .hero-slider .swiper-button-prev::after { font-size: 1.1rem; font-weight: 800; }
@media (max-width: 575px) {
  .hero-slide { min-height: 480px; background-position: 72% center; }
  .hero-slider .swiper-button-next, .hero-slider .swiper-button-prev { display: none; }
}

/* === 6. SECTION BAŞLIĞI ==================================== */
section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.base-header { max-width: 760px; margin: 0 auto var(--sp-12); text-align: center; }
.base-header h1, .base-header h2, .base-header h3 { font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--sp-4); position: relative; padding-bottom: var(--sp-4); }
.base-header h1::after, .base-header h2::after, .base-header h3::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 56px; height: 4px; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.base-header p { color: var(--color-text-muted); }

/* === 7. HİZMET KARTLARI ==================================== */
.service-section { background: var(--color-surface); }
.service-item {
  height: 100%; padding: var(--sp-8) var(--sp-6); text-align: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.service-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: hsl(var(--hue-primary) 60% 80%); }
.icon-serv {
  display: inline-flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; margin-bottom: var(--sp-4);
  background: var(--color-primary-light); border-radius: var(--radius-xl);
  transition: transform var(--dur-base) var(--ease-spring);
}
.icon-serv img { width: 56px; height: 56px; object-fit: contain; }
.service-item:hover .icon-serv { transform: scale(1.08) rotate(-3deg); }
.service-item h4 { margin-bottom: var(--sp-3); }
.service-item p { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }

/* === 8. HAKKIMIZDA ========================================= */
.about-section { background: var(--color-primary-deep); color: #fff; padding-block: 0; overflow: hidden; }
.about-section .about_img { height: 100%; min-height: 340px; }
.about-section .about_img img { width: 100%; height: 100%; object-fit: cover; }
.about_item_tb { display: flex; align-items: center; height: 100%; }
.about_item_tbcell { padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 4rem); }
.about-section h3 { color: #fff; font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--sp-4); }
.about-section p { color: hsl(0 0% 100% / .82); }
.about-section .more-link { margin-top: var(--sp-4); }

/* === 9. CTA BANDI ========================================== */
.cta-section {
  background:
    radial-gradient(at 15% 20%, hsl(var(--hue-primary) 85% 48%) 0, transparent 55%),
    radial-gradient(at 85% 80%, hsl(var(--hue-primary) 90% 30%) 0, transparent 55%),
    var(--color-primary);
  color: #fff;
}
.cta_wrp { text-align: center; max-width: 780px; margin-inline: auto; }
.cta_wrp h2 { color: #fff; font-size: var(--text-3xl); font-weight: 800; margin-bottom: var(--sp-4); }
.cta_wrp p { color: hsl(0 0% 100% / .85); margin-bottom: var(--sp-6); }

/* === 10. ÇALIŞMALAR GRID ==================================== */
.work-section { background: var(--color-surface-2); }
.single-project-item {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background-size: cover; background-position: center;
  aspect-ratio: 4 / 3; margin-bottom: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.single-project-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.project-hover {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  background: linear-gradient(180deg, transparent 30%, hsl(var(--hue-primary) 70% 12% / .92) 100%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.single-project-item:hover .project-hover { opacity: 1; }
.project_cnt { padding: var(--sp-6); width: 100%; }
.project_cnt h6 a { color: #fff; font-size: var(--text-lg); font-weight: 700; }
.project_cnt span a { color: hsl(0 0% 100% / .7); font-size: var(--text-sm); }
.project-link {
  display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: var(--color-accent); color: #fff; border-radius: var(--radius-full);
  margin-bottom: var(--sp-3);
}
.project-link:hover { color: #fff; background: var(--color-accent-hover); }
@media (hover: none) {
  .project-hover { opacity: 1; } /* dokunmatikte her zaman görünür */
}

/* === 11. VİDEO BANDI ======================================== */
.video-section { background: var(--color-surface); padding-block: clamp(2.5rem, 5vw, 4rem); }
.video_wrp {
  position: relative; text-align: center; padding: clamp(3rem, 7vw, 5.5rem) var(--sp-6);
  border-radius: var(--radius-xl); color: #fff;
  background:
    linear-gradient(120deg, hsl(var(--hue-primary) 75% 20% / .93), hsl(var(--hue-primary) 85% 35% / .85)),
    var(--color-primary-deep);
  box-shadow: var(--shadow-primary);
  overflow: hidden;
}
.video_wrp h2 { color: #fff; font-size: var(--text-2xl); margin-bottom: var(--sp-6); }
.play_btn img { width: 84px; transition: transform var(--dur-base) var(--ease-spring); }
.video_wrp:hover .play_btn img { transform: scale(1.12); }

/* === 12. BLOG KARTLARI ====================================== */
.blog-section { background: var(--color-surface-2); }
.blog_wrp {
  height: 100%; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
  margin-bottom: var(--sp-6);
}
.blog_wrp:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.blog_img { display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.blog_img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.blog_wrp:hover .blog_img img { transform: scale(1.05); }
.blog_info { padding: var(--sp-6); }
.blog_date span {
  display: inline-block; font-size: .78rem; font-weight: 700;
  color: var(--color-primary); background: var(--color-primary-light);
  padding: .25rem .75rem; border-radius: var(--radius-full); margin-bottom: var(--sp-3);
}
.blog_info h4 { font-size: var(--text-lg); margin-bottom: var(--sp-3); }
.blog_info h4:hover { color: var(--color-primary); }
.blog_read a { font-weight: 700; font-size: var(--text-sm); color: var(--color-accent); }
.blog_read a:hover { color: var(--color-accent-hover); }

/* === 13. İÇ SAYFA BANDI + İÇERİK ============================ */
.blog-banner, .page-banner {
  background:
    radial-gradient(at 80% 10%, hsl(var(--hue-primary) 85% 45% / .45) 0, transparent 55%),
    radial-gradient(at 10% 90%, hsl(var(--hue-primary) 90% 30% / .5) 0, transparent 50%),
    var(--color-primary-deep);
  color: #fff; padding: clamp(2.2rem, 5vw, 3.6rem) 0; text-align: center;
}
/* Banner ana basligi (h1/h2/h3) */
.blog-banner h1, .blog-banner h2, .blog-banner h3,
.page-banner h1, .page-banner h2, .page-banner h3 {
  color: #fff; font-size: var(--text-2xl); font-weight: 800; margin: 0 0 .35rem; line-height: 1.2;
}
/* Banner breadcrumb (h4 icindeki "Anasayfa > ...") kucuk ve soluk */
.blog-banner h4, .page-banner h4 {
  color: hsl(0 0% 100% / .72); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: .01em; margin: 0; text-transform: none;
}
.blog-banner h4 a, .page-banner h4 a { color: hsl(var(--hue-primary) 90% 78%); }
.blog-banner h4 a:hover, .page-banner h4 a:hover { color: #fff; }
.blog-banner h4::after { display: none; }
.blog-header { margin: 0; }
/* Icerik gorselleri: makul yukseklik, yuvarlatilmis */
.icerik-alani img, .blog_pg_one img, .single_service img {
  border-radius: var(--radius-md); max-height: 560px; width: auto; max-width: 100%;
  object-fit: cover; box-shadow: var(--shadow-sm);
}
.icerik-alani, .blog_pg_one, .single_service { line-height: 1.75; }
.icerik-alani h1, .single_service h1 { font-size: var(--text-2xl); margin: var(--sp-4) 0 var(--sp-3); }

/* Sag kenar hizmet menusu - kart liste */
.single_service_cat { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.single_service_cat ul { list-style: none; margin: 0; padding: 0; }
.single_service_cat li { margin: 0; }
.single_service_cat li a {
  display: block; padding: .7rem 1.1rem; color: var(--color-text);
  border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); font-weight: 500;
  transition: background var(--dur-fast), color var(--dur-fast), padding-left var(--dur-fast);
}
.single_service_cat li:last-child a { border-bottom: 0; }
.single_service_cat li a::before {
  content: "\f105"; font-family: FontAwesome; color: var(--color-accent);
  margin-right: .6rem; font-weight: 700;
}
.single_service_cat li a:hover { background: var(--color-primary-light); color: var(--color-primary); padding-left: 1.4rem; }

/* Sayfalama */
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; padding: 0; margin: var(--sp-8) 0 0; list-style: none; }
.pagination li a, .pagination li span {
  display: inline-flex; min-width: 42px; height: 42px; padding: 0 .8rem;
  align-items: center; justify-content: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  color: var(--color-text); font-weight: 600; font-size: var(--text-sm);
  transition: all var(--dur-fast) var(--ease-out);
}
.pagination li a:hover, .pagination li .current, .pagination li a.current {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}

/* === 14. FORMLAR =========================================== */
.contact-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-8); box-shadow: var(--shadow-sm); }
.con-field, .input-custom, .input-full, input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%; padding: .8rem 1rem; margin-bottom: var(--sp-4);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  font-family: inherit; font-size: var(--text-sm); color: var(--color-text);
  background: var(--color-surface); outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.con-field:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px hsl(var(--hue-primary) 85% 41% / .12);
}
input[type="radio"], input[type="checkbox"] { width: auto; margin: 0 .4rem 0 0; }
label { font-weight: 600; font-size: var(--text-sm); margin-bottom: .35rem; }

/* İletişim bilgi kartları */
.single-contact-info, .contact-info-sm {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--sp-6); height: 100%;
  box-shadow: var(--shadow-sm); text-align: center;
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.single-contact-info:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.single-contact-info .fa, .contact-info-sm .fa {
  display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--color-primary); background: var(--color-primary-light);
  border-radius: var(--radius-full); margin-bottom: var(--sp-3);
}
.map-container iframe { width: 100%; min-height: 380px; border: 0; border-radius: var(--radius-lg); }

/* === 15. WIDGET / KENAR ===================================== */
.widget { margin-bottom: var(--sp-8); }
.widget-title, .widget h5 { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--sp-4); }
.single_service_cat { list-style: none; padding: 0; margin: 0; }
.single_service_cat li a, .quick_lnk ul li a {
  display: block; padding: .55rem .25rem; color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); font-weight: 500;
  transition: color var(--dur-fast), padding-left var(--dur-fast);
}
.single_service_cat li a:hover, .quick_lnk ul li a:hover { color: var(--color-primary); padding-left: .6rem; }

/* === 16. FOOTER ============================================ */
.footer-section { background: var(--color-primary-deep); color: hsl(0 0% 100% / .78); padding: 0; }
.footer-main { padding: clamp(3rem, 6vw, 4.5rem) 0 var(--sp-8); }
.footer-section .widget h5 { color: #fff; }
.footer-section a { color: hsl(0 0% 100% / .78); }
.footer-section a:hover { color: #fff; }
.footer-section ul { list-style: none; padding: 0; margin: 0; }
.footer-section .widget ul li { padding: .3rem 0; font-size: var(--text-sm); }
.footer_logo img { height: 60px; width: auto; margin-bottom: var(--sp-4); filter: brightness(0) invert(1); }
.footer_para { font-size: var(--text-sm); }
.footer_socil a, .footer_soc li a {
  display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center;
  border-radius: var(--radius-full); background: hsl(0 0% 100% / .08); color: #fff; margin-right: .4rem;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.footer_socil a:hover { background: var(--color-accent); transform: translateY(-3px); }
.recent-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.recent-gallery li img { border-radius: var(--radius-sm); aspect-ratio: 1; object-fit: cover; width: 100%; transition: opacity var(--dur-fast); }
.recent-gallery li img:hover { opacity: .8; }
.subfooter {
  border-top: 1px solid hsl(0 0% 100% / .1); padding: var(--sp-4) 0;
  font-size: .8rem; color: hsl(0 0% 100% / .55);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: center;
}
.subfooter p { margin: 0; }
.subfooter a { color: hsl(0 0% 100% / .75); }
.scrollup {
  position: fixed; right: 18px; bottom: 96px; z-index: 1040;
  display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff !important; border-radius: var(--radius-full);
  box-shadow: var(--shadow-primary);
  transition: transform var(--dur-fast), opacity var(--dur-base);
}
.scrollup.show { display: inline-flex; }
.scrollup:hover { transform: translateY(-3px); }

/* === 17. WHATSAPP FAB + MOBİL ALT BAR ======================= */
.wa-fab {
  position: fixed; left: 16px; bottom: 84px; z-index: 1040;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--color-whatsapp); color: #fff !important;
  padding: .7rem 1.2rem; border-radius: var(--radius-full);
  font-weight: 700; font-size: var(--text-sm);
  box-shadow: 0 8px 22px hsl(142 70% 30% / .4);
  transition: transform var(--dur-fast);
}
.wa-fab:hover { transform: translateY(-3px) scale(1.02); }
.wa-fab .fa { font-size: 1.3rem; }
@media (min-width: 768px) { .wa-fab { bottom: 24px; } .scrollup { bottom: 24px; } }

.mobile-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1039;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: hsl(0 0% 100% / .95); backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
  padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px hsl(215 30% 30% / .08);
}
.mobile-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  color: var(--color-text-muted); font-size: .72rem; font-weight: 600; min-height: 48px; justify-content: center;
}
.mobile-bottom-nav a .fa { font-size: 1.25rem; color: var(--color-primary); }
.mobile-bottom-nav a:active, .mobile-bottom-nav a:hover { color: var(--color-primary); }
@media (min-width: 768px) { .mobile-bottom-nav { display: none; } }
@media (max-width: 767.98px) { body { padding-bottom: 64px; } }

/* === 18. GALERİ ============================================ */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.gallery-grid a { display: block; border-radius: var(--radius-md); overflow: hidden; }
.gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform var(--dur-base); }
.gallery-grid a:hover img { transform: scale(1.05); }

/* === 18b. DETAY / BLOG SAYFASI ============================= */
.single_blog_container, .blog_container { padding-block: clamp(2.5rem, 5vw, 4rem); }
.blog-area .blog_box { background: var(--color-surface); }

/* Hero gorsel */
.blog_box_ovrlay { display: block; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.blog_box_ovrlay img { width: 100%; max-height: 460px; object-fit: cover; margin: 0;
  transition: transform var(--dur-slow) var(--ease-out); border: 0; padding: 0; box-shadow: none; }
.blog_box_ovrlay:hover img { transform: scale(1.03); }
/* Gorsel alti kucuk basligi (caption) */
.blog_dt { margin: .6rem 0 0; }
.blog_dt h6 { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted);
  font-style: italic; margin: 0; }

/* Icerik govdesi */
.blog_info_right { margin-top: var(--sp-6); }
.blog_info_right h1 { font-size: var(--text-2xl); font-weight: 800; line-height: 1.2; margin: 0 0 var(--sp-4); }
.blog_info_right h2, .blog_info_right h3 { font-size: var(--text-xl); font-weight: 700; margin: var(--sp-6) 0 var(--sp-3); }
.blog_info_right p { margin: 0 0 var(--sp-4); color: var(--color-text); }
.blog_info_right a { color: var(--color-primary); font-weight: 600; }
.blog_info_right img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--sp-4) 0; box-shadow: var(--shadow-sm); }
.blog_info_right ul, .blog_info_right ol { margin: 0 0 var(--sp-4) 1.1rem; padding-left: .5rem; }
.blog_info_right li { margin-bottom: .4rem; }
.blog_info_right strong, .blog_info_right b { color: var(--color-text); }
/* Giris alintisi (marked) */
.blog_info_right .marked, h6.marked {
  display: block; font-size: var(--text-lg); font-weight: 600; font-style: italic;
  color: var(--color-primary-deep); line-height: 1.55;
  border-left: 4px solid var(--color-accent); background: var(--color-primary-light);
  padding: var(--sp-4) var(--sp-6); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 0 0 var(--sp-6);
}
/* WYSIWYG blockquote -> sadece kenar cizgisi (yazar cok icerik sarmis olabilir,
   dolgu buyuk renkli kutle yaratmasin). Stray arka plan/genislik sifirlanir. */
.blog_info_right blockquote {
  border-left: 3px solid var(--color-primary); background: transparent;
  padding: .2rem 0 .2rem var(--sp-6); margin: var(--sp-4) 0; color: var(--color-text);
}
.blog_info_right blockquote p:last-child { margin-bottom: 0; }
/* WYSIWYG icerigindeki gomulu arka plan/renk kalintilarini notrle */
.blog_info_right [style*="background"], .blog_info_right font[color] { background: transparent !important; }
.blog_info_right [bgcolor] { background-color: transparent !important; }
.blog_info_right table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; }
.blog_info_right th, .blog_info_right td { border: 1px solid var(--color-border); padding: .6rem .8rem; text-align: left; }
.blog_info_right th { background: var(--color-surface-2); font-weight: 700; }

/* Sag kenar: kompakt iletisim listesi (buyuk kart yerine) */
.service_contact { margin-top: var(--sp-8); }
.service_contact h4 { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2); border-bottom: 2px solid var(--color-border); }
.contact_wrp { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.service_contact .single-contact-info {
  display: flex; align-items: center; gap: .75rem; text-align: left;
  padding: .7rem 1rem; margin: 0; border: 0; border-bottom: 1px solid var(--color-border);
  border-radius: 0; box-shadow: none; background: transparent; height: auto;
}
.service_contact .single-contact-info:last-child { border-bottom: 0; }
.service_contact .single-contact-info:hover { transform: none; box-shadow: none; background: var(--color-surface-2); }
.service_contact .single-contact-info i {
  flex: 0 0 auto; width: 38px; height: 38px; font-size: 1rem; margin: 0;
  color: var(--color-primary); background: var(--color-primary-light); border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
}
.service_contact .single-contact-info p { margin: 0; font-size: var(--text-sm); font-weight: 600; }

/* Sag kenar: son calismalar */
.wiget-recent-post { margin-top: var(--sp-8); }
.recent-post-box { display: flex; gap: .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--color-border); }
.recent-post-box:last-child { border-bottom: 0; }
.recnt_pst_imge img { width: 70px; height: 70px; object-fit: cover; border-radius: var(--radius-md); }
.recent-title a { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); line-height: 1.35; display: block; }
.recent-title a:hover { color: var(--color-primary); }
.recent-title p { font-size: .78rem; color: var(--color-text-muted); margin: .2rem 0 0; }

/* Sag kenar: etiketler */
.widget-tags { margin-top: var(--sp-8); }
.widget-tags ul, .widget-tags { list-style: none; padding: 0; }
.widget-tags li { display: inline-block; margin: 0 .35rem .5rem 0; }
.widget-tags li a {
  display: inline-block; padding: .35rem .8rem; font-size: .8rem; font-weight: 600;
  color: var(--color-primary); background: var(--color-primary-light);
  border-radius: var(--radius-full); transition: background var(--dur-fast), color var(--dur-fast);
}
.widget-tags li a:hover { background: var(--color-primary); color: #fff; }

/* === 19. YARDIMCI ========================================== */
/* Referans / thumbnail grid - duzenli oran + hover */
.img-thumbnail {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 0; background: var(--color-surface); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.img-thumbnail:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.section-muted { background: var(--color-surface-2); }
.text-muted-2 { color: var(--color-text-muted); }
.rounded-xl { border-radius: var(--radius-xl); }
.shadow-soft { box-shadow: var(--shadow-md); }