/* Blog */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

@media (max-width: 1200px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media (max-width: 980px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr
  }
}

.blog-card {
  background: var(--surface);
  border: 1px solid rgba(2, 6, 23, .08);
  border-radius: 14px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  transition: all .3s ease
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(2, 6, 23, .15);
  border-color: rgba(56, 189, 248, .2);
  text-decoration: none
}

.blog-card img {
  width: 100%;
  height: 180px;
  object-fit: cover
}

.blog-card-body {
  padding: 12px
}

.blog-card h2 {
  margin: 0 0 6px;
  font-size: 18px
}

.blog-card p {
  margin: 0 0 8px;
  color: var(--muted)
}

:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --card: #f1f5f9;
  --text: #0f172a;
  --muted: #475569;
  --accent: #38bdf8;
  --accent-2: #22d3ee;
  --ring: rgba(14, 165, 233, .35);
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #ffffff, #f8fafc 40%, #ffffff 100%);
}

img {
  max-width: 100%;
  display: block
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease
}

a:hover {
  text-decoration: none;
  opacity: .85
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  z-index: 1000;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px
}

/* Header */
.topbar {
  background: #020617;
  color: #cbd5f5;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 13px
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(56, 189, 248, .16);
  color: #e0f2ff;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap
}

.top-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e2e8f0;
  text-decoration: none;
  transition: all .2s ease
}

.top-link:hover {
  color: #38bdf8;
  text-decoration: none;
  transform: translateY(-1px)
}

.location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cbd5f5
}

.icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 12px;
  flex-shrink: 0
}

.icon::before {
  content: '';
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center
}

.icon.phone::before {
  content: '\260E'
}

.icon.whatsapp::before {
  content: 'W';
  font-weight: 700;
  font-size: 10px
}

.icon.mail::before {
  content: '@'
}

.icon.pin::before {
  content: '\25CF';
  font-size: 9px
}

.icon.phone {
  color: #38bdf8
}

.icon.whatsapp {
  color: #22c55e
}

.icon.mail {
  color: #f97316
}

.icon.pin {
  color: #a855f7
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: linear-gradient(150deg, rgba(15, 23, 42, .97), rgba(15, 23, 42, .92));
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px rgba(2, 6, 23, .18)
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0
}

.brand-block {
  display: flex;
  align-items: center
}

.logo {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: all .25s ease
}

.logo:hover {
  text-decoration: none;
  opacity: .9;
  transform: scale(1.02)
}

.logo-mark {
  background: linear-gradient(135deg, #0ea5e9, #22d3ee);
  color: #041026;
  border-radius: 16px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 18px
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1
}

.logo-name {
  font-size: 20px;
  font-weight: 700
}

.tagline {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .08em
}

.nav {
  display: flex;
  align-items: center;
  gap: 16px
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(15, 23, 42, .4);
  color: #fff;
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  transition: all .3s ease
}

.nav-toggle:hover {
  background: rgba(14, 165, 233, .2);
  border-color: rgba(14, 165, 233, .4)
}

.nav-toggle.active {
  background: rgba(14, 165, 233, .25);
  border-color: rgba(14, 165, 233, .5)
}

.nav-toggle-bars {
  width: 18px;
  height: 2px;
  background: #fff;
  position: relative;
  border-radius: 999px;
  transition: all .3s ease
}

.nav-toggle.active .nav-toggle-bars {
  background: transparent
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: inherit;
  transition: all .3s ease
}

.nav-toggle-bars::before {
  top: -6px
}

.nav-toggle-bars::after {
  top: 6px
}

.nav-toggle.active .nav-toggle-bars::before {
  top: 0;
  transform: rotate(45deg)
}

.nav-toggle.active .nav-toggle-bars::after {
  top: 0;
  transform: rotate(-45deg)
}

.menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0
}

.menu>li {
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center
}

.menu li {
  position: relative
}

.menu li.has-sub {
  padding-bottom: 0
}

.menu li.has-sub::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
  display: block
}

.menu>li>a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border-radius: 12px;
  color: #e2e8f0;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: all .25s ease;
  white-space: nowrap;
  line-height: 1.5
}

.menu>li>a:hover,
.menu>li>a:focus {
  background: rgba(56, 189, 248, .12);
  color: #38bdf8;
  text-decoration: none
}

.menu>li>a:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .25)
}

.has-sub>.sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid rgba(2, 6, 23, .12);
  border-radius: 16px;
  padding: 12px;
  display: none;
  box-shadow: 0 25px 60px rgba(15, 23, 42, .2);
  z-index: 200
}

.sub-menu {
  list-style: none;
  margin: 0;
  padding: 12px
}

.sub-menu li {
  list-style: none;
  display: flex;
  align-items: center
}

.has-sub:hover>.sub-menu,
.has-sub:focus-within>.sub-menu {
  display: block
}

.has-sub>a.has-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px
}

.has-sub>a.has-arrow::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s, border-color .2s;
  margin-left: 4px
}

.has-sub:hover>a.has-arrow::after {
  transform: rotate(135deg);
  border-color: #0ea5e9
}

.sub-menu li a {
  width: 100%;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: all .2s ease;
  display: flex;
  align-items: center
}

.sub-menu li a:hover,
.sub-menu li a:focus {
  background: rgba(56, 189, 248, .08);
  color: #0ea5e9;
  text-decoration: none;
  transform: translateX(4px)
}

.sub-toggle {
  display: none
}

/* Nested second-level sub-menu flyout (desktop) */
.sub-menu .has-sub {
  position: relative;
}

.sub-menu .has-sub > .sub-menu {
  left: 100%;
  top: 0;
  margin-top: 0;
}

/* Arrow points right for nested items */
.sub-menu .has-sub > a.has-arrow::after {
  transform: rotate(-135deg);
}

.sub-menu .has-sub:hover > a.has-arrow::after {
  transform: rotate(45deg);
}

.header-cta {
  margin-left: 16px;
  display: flex;
  gap: 12px;
  align-items: center
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: all .25s ease;
  cursor: pointer;
  white-space: nowrap
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px)
}

.btn.primary {
  background: linear-gradient(120deg, #0ea5e9, #22d3ee);
  color: #041026;
  border: 0;
  box-shadow: 0 10px 25px rgba(14, 165, 233, .35)
}

.btn.primary:hover {
  box-shadow: 0 15px 35px rgba(14, 165, 233, .5);
  transform: translateY(-2px) scale(1.02)
}

.btn.ghost {
  background: rgba(255, 255, 255, .08);
  color: #e2e8f0;
  border: 1px solid rgba(226, 232, 240, .35);
  backdrop-filter: blur(8px)
}

.btn.ghost:hover {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(226, 232, 240, .6);
  transform: translateY(-2px)
}

/* Mobile overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .75);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 998;
  pointer-events: none
}

.nav-open .nav-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto
}

/* Tablet & Mobile */
@media (max-width: 1200px) {
  .header-inner {
    gap: 12px;
    padding: 12px 0
  }

  .menu {
    gap: 3px
  }

  .menu>li>a {
    padding: 10px 14px;
    font-size: 14px
  }

  .header-cta {
    margin-left: 12px;
    gap: 8px
  }

  .header-cta .btn {
    padding: 9px 16px;
    font-size: 14px
  }
}

@media (max-width: 980px) {
  .topbar {
    display: none
  }

  .site-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000
  }

  .header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    gap: 12px
  }

  .brand-block {
    flex: 1
  }

  .logo {
    gap: 10px
  }

  .logo-mark {
    padding: 8px 10px;
    font-size: 16px;
    border-radius: 12px
  }

  .logo-name {
    font-size: 17px
  }

  .tagline {
    font-size: 10px;
    margin-top: 2px
  }

  .nav {
    margin-left: auto
  }

  .nav-toggle {
    display: inline-flex;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(14, 165, 233, .12);
    border-color: rgba(14, 165, 233, .3)
  }

  .menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    margin-top: 65px;
    background: linear-gradient(180deg, #020617 0%, #0f172a 100%);
    flex-direction: column;
    align-items: stretch;
    padding: 24px 20px 80px;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 999;
    list-style: none;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box
  }

  .menu.open,
  .menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
  }

  .menu>li {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: stretch
  }

  .menu>li>a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px 18px;
    border-radius: 12px;
    color: #e5e7eb;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    transition: all .2s;
    background: rgba(255, 255, 255, .03);
    line-height: 1.5
  }

  .menu>li>a:hover,
  .menu>li>a:focus {
    background: rgba(56, 189, 248, .15);
    color: #38bdf8;
    text-decoration: none;
    transform: translateX(4px)
  }

  .has-sub {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column
  }

  .has-sub>a.has-arrow {
    display: flex;
    align-items: center;
    padding-right: 54px;
    position: relative;
    width: 100%
  }

  .has-sub>a.has-arrow::after {
    display: none
  }

  .has-sub>.sub-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(56, 189, 248, .3);
    background: rgba(56, 189, 248, .1);
    color: #38bdf8;
    font-size: 22px;
    cursor: pointer;
    z-index: 2;
    transition: all .25s
  }

  .has-sub>.sub-toggle::before {
    content: '+';
    font-weight: 300;
    line-height: 1
  }

  .has-sub.open>.sub-toggle,
  .has-sub.active>.sub-toggle {
    background: rgba(56, 189, 248, .25);
    border-color: rgba(56, 189, 248, .5);
    transform: rotate(45deg)
  }

  .has-sub.open>.sub-toggle::before,
  .has-sub.active>.sub-toggle::before {
    content: '×';
    font-size: 26px
  }

  .has-sub>.sub-menu {
    position: static;
    display: none;
    background: rgba(15, 23, 42, .7);
    border: 1px solid rgba(56, 189, 248, .2);
    border-radius: 12px;
    padding: 0;
    margin: 8px 0 10px 16px;
    list-style: none;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .35s ease, padding .35s ease, opacity .3s ease
  }

  .has-sub.open>.sub-menu,
  .has-sub.active>.sub-menu,
  .sub-menu.active {
    display: block;
    max-height: 3000px;
    padding: 10px;
    opacity: 1
  }

  .has-sub.active>.sub-menu,
  .sub-menu.active {
    animation: slideDown .3s ease forwards
  }

  .menu .sub-menu {
    list-style: none
  }

  .menu .sub-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center
  }

  .menu .sub-menu li a {
    display: flex;
    align-items: center;
    width: 100%;
    color: #cbd5e1;
    padding: 12px 16px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: all .2s;
    background: rgba(255, 255, 255, .02)
  }

  .menu .sub-menu li a:hover {
    background: rgba(56, 189, 248, .18);
    color: #38bdf8;
    padding-left: 22px;
    text-decoration: none
  }

  .header-cta {
    flex-direction: column;
    margin: 24px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    gap: 12px
  }

  .header-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px
  }

  .header-cta .btn.primary {
    box-shadow: 0 10px 25px rgba(14, 165, 233, .35)
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      max-height: 0;
      transform: translateY(-10px)
    }

    to {
      opacity: 1;
      max-height: 3000px;
      transform: translateY(0)
    }
  }

  body.nav-open {
    overflow: hidden
  }
}

/* Hero */
.hero {
  position: relative;
  padding: 130px 0 90px;
  background: linear-gradient(180deg, #ecf7ff 0%, #f9fcff 60%, #fff 100%);
  overflow: hidden
}

.hero::after {
  content: '';
  position: absolute;
  top: -140px;
  right: -140px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(56, 189, 248, .25), transparent 65%);
  filter: blur(30px);
  opacity: .4
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 20%, rgba(14, 165, 233, .16), transparent 45%), radial-gradient(circle at 80% 10%, rgba(14, 165, 233, .1), transparent 55%);
  z-index: 0
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 56px;
  align-items: center
}

.hero-copy {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px);
  border-radius: 32px;
  padding: 36px;
  box-shadow: 0 35px 70px rgba(15, 23, 42, .08);
  border: 1px solid rgba(15, 23, 42, .04);
  animation: heroFadeIn 1s ease-out
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.hero-copy h1 {
  margin: 0 0 16px;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.1;
  color: #0f172a;
  animation: heroTitleSlide 1s ease-out .2s both
}

@keyframes heroTitleSlide {
  from {
    opacity: 0;
    transform: translateX(-30px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.hero-copy h1 .accent {
  color: #0ea5e9;
  display: inline-block;
  animation: accentPulse 2s ease-in-out infinite
}

@keyframes accentPulse {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.05)
  }
}

.hero-copy p {
  margin: 0 0 32px;
  font-size: 18px;
  color: #475569;
  max-width: 540px;
  animation: heroTextFade 1s ease-out .4s both
}

@keyframes heroTextFade {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  animation: heroButtonsSlide 1s ease-out .6s both
}

@keyframes heroButtonsSlide {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 40px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 16px;
  transition: all .3s ease;
  text-decoration: none;
  cursor: pointer;
  border: none
}

.hero-btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  box-shadow: 0 20px 40px rgba(2, 132, 199, .5);
  color: #ffffff;
  border: 2px solid transparent
}

.hero-btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 25px 50px rgba(2, 132, 199, .6);
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%)
}

.hero-btn-secondary {
  background: #ffffff;
  border: 2px solid #0ea5e9;
  color: #0284c7;
  box-shadow: 0 15px 35px rgba(14, 165, 233, .25);
  font-weight: 700
}

.hero-btn-secondary:hover {
  transform: translateY(-3px) scale(1.02);
  background: #0ea5e9;
  color: #ffffff;
  border-color: #0ea5e9;
  box-shadow: 0 20px 45px rgba(14, 165, 233, .4)
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: heroTagsSlide 1s ease-out .8s both
}

@keyframes heroTagsSlide {
  from {
    opacity: 0;
    transform: translateX(-20px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.hero-tags span {
  padding: 10px 16px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 10px 20px rgba(15, 23, 42, .25);
  animation: tagFloat 3s ease-in-out infinite
}

.hero-tags span:nth-child(1) {
  animation-delay: 0s
}

.hero-tags span:nth-child(2) {
  animation-delay: .2s
}

.hero-tags span:nth-child(3) {
  animation-delay: .4s
}

@keyframes tagFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-5px)
  }
}

.hero-visual {
  position: relative;
  animation: heroImageSlide 1s ease-out .3s both
}

@keyframes heroImageSlide {
  from {
    opacity: 0;
    transform: translateX(40px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.hero-image {
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 45px 90px rgba(15, 23, 42, .22);
  border: 1px solid rgba(15, 23, 42, .05);
  position: relative;
  transform: translateY(0);
  transition: transform .4s ease, box-shadow .4s ease
}

.hero-image:hover {
  transform: translateY(-6px);
  box-shadow: 0 60px 120px rgba(15, 23, 42, .28)
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.hero-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(4, 12, 24, .85);
  color: #fff;
  padding: 16px 20px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  box-shadow: 0 25px 50px rgba(4, 12, 24, .4);
  border: 1px solid rgba(255, 255, 255, .08)
}

.hero-badge span {
  font-size: 12px;
  color: #bae6fd;
  text-transform: uppercase;
  letter-spacing: .12em
}

.hero-badge strong {
  font-size: 20px;
  font-weight: 700;
  color: #fff
}

@media (max-width:1200px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .hero-visual {
    order: -1
  }
}

@media (max-width:980px) {
  .hero {
    padding-top: 100px;
    margin-top: 0
  }

  .hero-copy {
    margin-top: 0
  }
}

@media (max-width:768px) {
  .hero {
    padding: 100px 0 60px
  }

  .hero-copy {
    padding: 28px;
    margin-top: 0
  }

  .hero-buttons {
    flex-direction: column;
    gap: 14px
  }

  .hero-btn {
    width: 100%;
    padding: 16px 32px;
    font-size: 17px
  }

  .hero-stats {
    grid-template-columns: 1fr
  }
}

/* Sections & cards */
.section {
  padding: 56px 0;
  border-bottom: 1px solid rgba(2, 6, 23, .08)
}

#yorumlar {
  background: radial-gradient(1400px 700px at 50% 0, rgba(14, 165, 233, .06), transparent 70%);
  position: relative
}

#yorumlar .section-header h2 {
  position: relative;
  display: inline-block
}

#yorumlar .section-header h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #0ea5e9, #22d3ee);
  border-radius: 999px
}

@media (max-width:980px) {
  .section {
    padding-top: 80px
  }

  .page {
    padding-top: 80px
  }

  main {
    padding-top: 70px
  }
}

.section.alt {
  background: radial-gradient(1200px 600px at 50% 0, rgba(56, 189, 248, .08), transparent 60%)
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 24px
}

.cards.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

@media (max-width: 980px) {
  .cards.three {
    grid-template-columns: 1fr
  }
}

.card {
  background: linear-gradient(180deg, rgba(2, 6, 23, .04), rgba(2, 6, 23, .02));
  border: 1px solid rgba(2, 6, 23, .08);
  padding: 18px;
  border-radius: 16px;
  transition: all .3s ease
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(2, 6, 23, .12);
  border-color: rgba(56, 189, 248, .15)
}

.card .more {
  display: inline-block;
  margin-top: 8px;
  text-decoration: none;
  transition: all .2s ease
}

.card .more:hover {
  text-decoration: none;
  color: #0ea5e9;
  transform: translateX(4px)
}

.brand-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  justify-content: center
}

.brand-cloud a {
  background: rgba(2, 6, 23, .04);
  border: 1px solid rgba(2, 6, 23, .08);
  padding: 10px 14px;
  border-radius: 12px;
  display: inline-block;
  text-decoration: none;
  transition: all .25s ease
}

.brand-cloud a:hover {
  background: rgba(56, 189, 248, .08);
  border-color: rgba(56, 189, 248, .2);
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(2, 6, 23, .08)
}

/* Brand carousel */
.brand-carousel {
  overflow: hidden
}

.brand-track {
  display: flex;
  align-items: center
}

.brand-slides {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px
}

.brand-slides li {
  flex: 0 0 auto
}

/* Brands Section - Premium Modern Design */
#markalar {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 40%, #ffffff 100%);
  position: relative;
  overflow: hidden;
  padding: 100px 0 120px
}

#markalar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(14, 165, 233, .04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(99, 102, 241, .04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0
}

#markalar .section-header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 70px;
  padding: 0 20px
}

#markalar .section-header h2 {
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 800;
  background: linear-gradient(135deg, #0f172a 0%, #3b82f6 50%, #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
  letter-spacing: -.02em;
  line-height: 1.2
}

#markalar .section-header p {
  font-size: 19px;
  color: #64748b;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.7;
  font-weight: 400
}

/* Brand detail carousel (image + list) */
.bdc {
  position: relative;
  z-index: 1;
  padding: 0 60px
}

@media (max-width: 980px) {
  .bdc {
    padding: 0 40px
  }
}

@media (max-width: 640px) {
  .bdc {
    padding: 0 20px
  }
}

.bdc-viewport {
  overflow: hidden;
  border-radius: 24px
}

.bdc-track {
  display: flex;
  transition: transform .5s ease
}

.bdc-slide {
  flex: 0 0 100%
}

.bdc-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 48px;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 32px;
  padding: 48px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, .03),
    0 10px 40px rgba(15, 23, 42, .05),
    0 0 0 1px rgba(15, 23, 42, .02);
  transition: all .45s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden
}

.bdc-grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(14, 165, 233, .02) 0%, rgba(99, 102, 241, .02) 100%);
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none
}

.bdc-grid:hover {
  box-shadow:
    0 1px 3px rgba(15, 23, 42, .04),
    0 20px 60px rgba(14, 165, 233, .12),
    0 0 0 1px rgba(14, 165, 233, .08);
  transform: translateY(-8px);
  border-color: rgba(14, 165, 233, .1)
}

.bdc-grid:hover::before {
  opacity: 1
}

@media (max-width: 1200px) {
  .bdc-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px
  }
}

@media (max-width: 980px) {
  .bdc-grid {
    padding: 32px
  }
}

@media (max-width: 640px) {
  .bdc-grid {
    padding: 24px;
    gap: 24px;
    border-radius: 24px
  }
}

.bdc-media {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  padding: 32px;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, .04),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: all .45s ease
}

.bdc-media::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(14, 165, 233, .08) 0%, rgba(99, 102, 241, .08) 100%);
  opacity: 0;
  transition: opacity .45s;
  border-radius: 24px
}

.bdc-grid:hover .bdc-media {
  box-shadow:
    0 8px 24px rgba(14, 165, 233, .12),
    inset 0 1px 0 rgba(255, 255, 255, 1)
}

.bdc-grid:hover .bdc-media::before {
  opacity: 1
}

.bdc-media img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  filter: drop-shadow(0 4px 12px rgba(15, 23, 42, .08))
}

.bdc-grid:hover .bdc-media img {
  transform: scale(1.08) rotate(-1deg)
}

.bdc-content {
  position: relative;
  z-index: 1
}

.bdc-content h3 {
  margin: 0 0 24px;
  font-size: clamp(26px, 3vw, 32px);
  color: #0f172a;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.3
}

.bdc-content h3 a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(135deg, #0f172a, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all .3s;
  position: relative;
  display: inline-block
}

.bdc-content h3 a::after {
  content: '→';
  display: inline-block;
  margin-left: 12px;
  opacity: 0;
  transform: translateX(-10px);
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.bdc-content h3 a:hover {
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.bdc-content h3 a:hover::after {
  opacity: 1;
  transform: translateX(0)
}

.bdc-content ul {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px
}

.bdc-content ul li {
  position: relative;
  padding: 10px 12px 10px 40px;
  color: #475569;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  transition: all .3s ease;
  border-radius: 12px;
  background: rgba(248, 250, 252, .5)
}

.bdc-content ul li::before {
  content: '✓';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 2px 8px rgba(14, 165, 233, .2)
}

.bdc-content ul li:hover {
  color: #0f172a;
  background: rgba(14, 165, 233, .08);
  padding-left: 44px
}

.bdc-content ul li:hover::before {
  transform: translateY(-50%) scale(1.15) rotate(360deg);
  box-shadow: 0 4px 16px rgba(14, 165, 233, .35);
  background: linear-gradient(135deg, #3b82f6, #0ea5e9)
}

.bdc-content .more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 4px 16px rgba(14, 165, 233, .25);
  border: none
}

.bdc-content .more:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 165, 233, .35);
  background: linear-gradient(135deg, #3b82f6, #0ea5e9)
}

.bdc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 16px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 28px;
  font-weight: 700;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, .08),
    0 1px 3px rgba(15, 23, 42, .05);
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
  z-index: 100;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px)
}

.bdc-nav:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow:
    0 8px 24px rgba(14, 165, 233, .15),
    0 2px 6px rgba(15, 23, 42, .08);
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  color: #fff;
  border-color: transparent
}

.bdc-nav:active {
  transform: translateY(-50%) scale(1)
}

.bdc-prev {
  left: 0
}

.bdc-next {
  right: 0
}

@media (max-width: 980px) {
  .bdc-nav {
    width: 48px;
    height: 48px;
    font-size: 24px
  }

  .bdc-prev {
    left: 0
  }

  .bdc-next {
    right: 0
  }
}

@media (max-width: 640px) {
  .bdc-nav {
    width: 44px;
    height: 44px;
    font-size: 22px;
    border-radius: 12px
  }

  .bdc-prev {
    left: 0
  }

  .bdc-next {
    right: 0
  }
}

/* Blog Section - Modern Design */
.blog-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #ffffff 100%);
  position: relative;
  overflow: hidden
}

.blog-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 1000px;
  background: radial-gradient(circle, rgba(14, 165, 233, .06), transparent 70%);
  pointer-events: none
}

.blog-section .section-header {
  position: relative;
  z-index: 1;
  margin-bottom: 48px
}

.blog-section .section-header h2 {
  font-size: clamp(32px, 4vw, 42px);
  background: linear-gradient(135deg, #0f172a 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px
}

.blog-section .section-header p {
  font-size: 17px;
  color: #64748b;
  max-width: 700px;
  margin: 0 auto
}

/* Blog Carousel */
.blog-carousel {
  position: relative;
  z-index: 1;
  padding: 0 60px;
  margin-bottom: 32px
}

@media (max-width: 980px) {
  .blog-carousel {
    padding: 0 40px
  }
}

@media (max-width: 640px) {
  .blog-carousel {
    padding: 0 20px
  }
}

.blog-viewport {
  overflow: hidden;
  border-radius: 24px;
  padding: 4px
}

.blog-track {
  display: flex;
  gap: 32px;
  transition: transform .5s ease;
  will-change: transform
}

.blog-track .blog-featured-card {
  flex: 0 0 calc(33.333% - 21.333px);
  min-width: calc(33.333% - 21.333px)
}

@media (max-width: 1200px) {
  .blog-track {
    gap: 24px
  }

  .blog-track .blog-featured-card {
    flex: 0 0 calc(50% - 12px);
    min-width: calc(50% - 12px)
  }
}

@media (max-width: 768px) {
  .blog-track {
    gap: 20px
  }

  .blog-track .blog-featured-card {
    flex: 0 0 100%;
    min-width: 100%
  }
}

.blog-featured-card {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .95));
  border: 1px solid rgba(2, 6, 23, .08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(15, 23, 42, .08);
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  animation: blogCardFadeIn .6s ease-out backwards
}

@keyframes blogCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.blog-featured-card:nth-child(1) {
  animation-delay: .1s
}

.blog-featured-card:nth-child(2) {
  animation-delay: .2s
}

.blog-featured-card:nth-child(3) {
  animation-delay: .3s
}

.blog-featured-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(14, 165, 233, .15);
  border-color: rgba(14, 165, 233, .2)
}

.blog-card-image {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden
}

.blog-card-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .5) 100%);
  z-index: 1;
  opacity: 0;
  transition: opacity .4s
}

.blog-featured-card:hover .blog-card-image::before {
  opacity: 1
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease
}

.blog-featured-card:hover .blog-card-image img {
  transform: scale(1.1)
}

.blog-card-date {
  position: absolute;
  top: 16px;
  right: 16px;
  background: linear-gradient(135deg, #0ea5e9, #22d3ee);
  color: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: 0 8px 20px rgba(14, 165, 233, .4);
  z-index: 2;
  font-weight: 700;
  line-height: 1
}

.blog-card-date span:first-child {
  font-size: 20px
}

.blog-card-date span:last-child {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em
}

.blog-card-content {
  padding: 28px 24px
}

.blog-card-content h3 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700
}

.blog-card-content h3 a {
  color: #0f172a;
  text-decoration: none;
  transition: color .3s;
  display: inline-block
}

.blog-card-content h3 a:hover {
  color: #0ea5e9
}

.blog-card-content p {
  margin: 0 0 20px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0ea5e9;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all .3s ease
}

.blog-read-more svg {
  transition: transform .3s ease
}

.blog-read-more:hover {
  color: #0284c7;
  gap: 12px
}

.blog-read-more:hover svg {
  transform: translateX(4px)
}

/* Blog Navigation */
.blog-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #0ea5e9, #22d3ee);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(14, 165, 233, .4);
  transition: all .3s ease;
  z-index: 100
}

.blog-nav:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 12px 30px rgba(14, 165, 233, .5)
}

.blog-nav:disabled {
  opacity: .3;
  cursor: not-allowed
}

.blog-prev {
  left: 0
}

.blog-next {
  right: 0
}

@media (max-width: 640px) {
  .blog-nav {
    width: 40px;
    height: 40px;
    font-size: 20px
  }
}

/* Blog Dots */
.blog-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px
}

.blog-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(14, 165, 233, .2);
  border: none;
  cursor: pointer;
  transition: all .3s ease;
  padding: 0
}

.blog-dot:hover {
  background: rgba(14, 165, 233, .5);
  transform: scale(1.2)
}

.blog-dot.active {
  width: 32px;
  border-radius: 5px;
  background: linear-gradient(135deg, #0ea5e9, #22d3ee);
  box-shadow: 0 2px 8px rgba(14, 165, 233, .4)
}

.blog-cta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-top: 16px
}

.blog-cta .btn {
  padding: 16px 48px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(14, 165, 233, .3);
  transition: all .3s ease
}

.blog-cta .btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(14, 165, 233, .4)
}

/* Testimonials - Modern Design */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  padding: 8px 0
}

@media (max-width: 980px) {
  .testimonials {
    grid-template-columns: 1fr;
    gap: 20px
  }
}

.testimonials blockquote {
  position: relative;
  margin: 0;
  padding: 32px 28px 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98) 0%, rgba(248, 250, 252, .95) 100%);
  border-radius: 20px;
  border: 1px solid rgba(2, 6, 23, .08);
  box-shadow: 0 8px 30px rgba(15, 23, 42, .08);
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden
}

.testimonials blockquote::before {
  content: '"';
  position: absolute;
  top: 16px;
  left: 24px;
  font-size: 72px;
  font-weight: 700;
  color: rgba(14, 165, 233, .12);
  line-height: 1;
  font-family: Georgia, serif
}

.testimonials blockquote:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(14, 165, 233, .18);
  border-color: rgba(14, 165, 233, .25)
}

.testimonials blockquote p {
  position: relative;
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.7;
  color: #334155;
  font-style: italic;
  z-index: 1
}

.testimonials blockquote cite {
  display: flex;
  align-items: center;
  gap: 12px;
  font-style: normal;
  font-weight: 600;
  color: #0f172a;
  font-size: 15px;
  border-top: 1px solid rgba(2, 6, 23, .08);
  padding-top: 16px;
  margin-top: 16px
}

.testimonials blockquote cite::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #0ea5e9, #22d3ee);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(14, 165, 233, .3)
}

.testimonials blockquote cite::after {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #22c55e;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  margin-left: auto;
  box-shadow: 0 2px 8px rgba(34, 197, 94, .3)
}

/* Testimonial rating stars */
.testimonials .stars {
  display: flex;
  gap: 4px;
  font-size: 16px;
  color: #fbbf24;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 4px rgba(251, 191, 36, .3))
}

/* Testimonial animation on load */
@keyframes testimonialFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.testimonials blockquote {
  animation: testimonialFadeIn .6s ease-out backwards
}

.testimonials blockquote:nth-child(1) {
  animation-delay: .1s
}

.testimonials blockquote:nth-child(2) {
  animation-delay: .2s
}

.testimonials blockquote:nth-child(3) {
  animation-delay: .3s
}

.testimonials blockquote:nth-child(4) {
  animation-delay: .4s
}

/* Testimonials mobile optimization */
@media (max-width: 640px) {
  .testimonials blockquote {
    padding: 28px 22px 24px
  }

  .testimonials blockquote::before {
    font-size: 60px;
    top: 12px;
    left: 18px
  }

  .testimonials blockquote p {
    font-size: 15px
  }

  .testimonials blockquote cite::before {
    width: 36px;
    height: 36px
  }
}

/* CTA Section - Modern Design */
.cta {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  position: relative;
  overflow: hidden;
  border: none
}

.cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(14, 165, 233, .15), transparent 60%),
    radial-gradient(circle at 80% 50%, rgba(34, 211, 238, .15), transparent 60%);
  animation: ctaGlow 8s ease-in-out infinite alternate
}

@keyframes ctaGlow {
  0% {
    opacity: .6
  }

  100% {
    opacity: 1
  }
}

.cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 64px 20px
}

.cta-inner h2 {
  font-size: clamp(32px, 5vw, 48px);
  color: #fff;
  margin: 0 0 8px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .3);
  animation: ctaTitleSlide 1s ease-out
}

@keyframes ctaTitleSlide {
  from {
    opacity: 0;
    transform: translateY(-20px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.cta-inner p {
  font-size: 18px;
  color: #cbd5e1;
  margin: 0 0 32px;
  max-width: 600px;
  line-height: 1.6;
  animation: ctaTextFade 1s ease-out .2s backwards
}

@keyframes ctaTextFade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.cta-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  animation: ctaButtonsSlide 1s ease-out .4s backwards
}

@keyframes ctaButtonsSlide {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* Modern CTA Buttons */
.cta-actions .btn {
  position: relative;
  padding: 18px 40px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 16px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  min-width: 220px
}

.cta-actions .btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  transform: translate(-50%, -50%);
  transition: width .6s, height .6s
}

.cta-actions .btn:hover::before {
  width: 300px;
  height: 300px
}

.cta-actions .btn span {
  position: relative;
  z-index: 1
}

.cta-actions .btn.primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%);
  color: #041026;
  border: 2px solid transparent;
  box-shadow: 0 20px 40px rgba(14, 165, 233, .4),
    0 0 0 0 rgba(14, 165, 233, .5);
  animation: btnPulse 2s ease-in-out infinite
}

@keyframes btnPulse {

  0%,
  100% {
    box-shadow: 0 20px 40px rgba(14, 165, 233, .4), 0 0 0 0 rgba(14, 165, 233, .5)
  }

  50% {
    box-shadow: 0 25px 50px rgba(14, 165, 233, .5), 0 0 0 8px rgba(14, 165, 233, .2)
  }
}

.cta-actions .btn.primary:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 30px 60px rgba(14, 165, 233, .5),
    0 0 0 0 rgba(14, 165, 233, .5);
  background: linear-gradient(135deg, #22d3ee 0%, #0ea5e9 100%)
}

.cta-actions .btn.outline {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, .3)
}

.cta-actions .btn.outline:hover {
  transform: translateY(-4px) scale(1.05);
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .4)
}

/* Icons for CTA buttons */
.cta-actions .btn.primary::after {
  content: '→';
  display: inline-block;
  margin-left: 8px;
  transition: transform .3s
}

.cta-actions .btn.primary:hover::after {
  transform: translateX(4px)
}

.cta-actions .btn.outline::after {
  content: '☎';
  display: inline-block;
  margin-left: 8px;
  font-size: 16px
}

/* Mobile responsive */
@media (max-width: 640px) {
  .cta-inner {
    padding: 48px 20px
  }

  .cta-actions {
    flex-direction: column;
    width: 100%;
    max-width: 340px
  }

  .cta-actions .btn {
    width: 100%;
    min-width: 0
  }
}

/* Page */
.page-header {
  padding: 48px 0 32px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  border-bottom: 1px solid rgba(15, 23, 42, .06)
}

.page-header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14, 165, 233, .2) 50%, transparent);
  pointer-events: none
}

/* Breadcrumb - Modern Premium Design */
.breadcrumb {
  margin-bottom: 24px;
  padding: 0
}

.breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  position: relative
}

.breadcrumb li:not(:last-child)::after {
  content: '›';
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #cbd5e1;
  font-weight: 400;
  margin-left: 8px;
  transition: color .3s
}

.breadcrumb li a {
  color: #64748b;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(248, 250, 252, .6);
  border: 1px solid rgba(15, 23, 42, .05);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  overflow: hidden
}

.breadcrumb li a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(14, 165, 233, .08), rgba(99, 102, 241, .08));
  opacity: 0;
  transition: opacity .3s;
  border-radius: 10px
}

.breadcrumb li a span {
  position: relative;
  z-index: 1
}

.breadcrumb li a:hover {
  color: #0ea5e9;
  background: rgba(14, 165, 233, .08);
  border-color: rgba(14, 165, 233, .15);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(14, 165, 233, .12)
}

.breadcrumb li a:hover::before {
  opacity: 1
}

.breadcrumb li[aria-current="page"] {
  padding: 8px 14px;
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  color: #ffffff;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(14, 165, 233, .25);
  position: relative;
  overflow: hidden
}

.breadcrumb li[aria-current="page"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .15), transparent);
  pointer-events: none
}

@media (max-width: 640px) {
  .breadcrumb li {
    font-size: 13px
  }

  .breadcrumb li a {
    padding: 6px 12px
  }

  .breadcrumb li[aria-current="page"] {
    padding: 6px 12px
  }

  .breadcrumb li:not(:last-child)::after {
    font-size: 16px
  }
}

/* Service Page - Modern Premium Design */
.service-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 80px 0;
  position: relative
}

.service-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 40%, rgba(14, 165, 233, .03) 0%, transparent 60%);
  pointer-events: none
}

/* Service Hero - New Full Width Design */
.service-hero-image-full {
  margin-bottom: 48px;
  text-align: center
}

.service-image-wrapper-full {
  position: relative;
  display: inline-block;
  max-width: 600px;
  width: 100%;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-radius: 32px;
  padding: 60px;
  box-shadow:
    0 10px 40px rgba(15, 23, 42, .08),
    inset 0 2px 0 rgba(255, 255, 255, 1);
  transition: all .45s ease
}

.service-image-wrapper-full::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(14, 165, 233, .06) 0%, rgba(99, 102, 241, .06) 100%);
  border-radius: 32px;
  opacity: 0;
  transition: opacity .45s
}

.service-image-wrapper-full:hover {
  box-shadow:
    0 20px 60px rgba(14, 165, 233, .12),
    inset 0 2px 0 rgba(255, 255, 255, 1);
  transform: translateY(-8px) scale(1.02)
}

.service-image-wrapper-full:hover::before {
  opacity: 1
}

.service-image-wrapper-full img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 16px rgba(14, 165, 233, .1))
}

.service-image-wrapper-full:hover img {
  filter: drop-shadow(0 12px 24px rgba(14, 165, 233, .15));
  transform: scale(1.05)
}

.service-hero-content-full {
  max-width: 900px;
  margin: 0 auto
}

@media (max-width: 1024px) {
  .service-image-wrapper-full {
    padding: 40px 30px;
    border-radius: 28px
  }

  .service-image-wrapper-full img {
    max-width: 280px
  }
}

.service-image-wrapper {
  position: relative;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-radius: 32px;
  padding: 48px;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, .04),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: all .45s ease
}

.service-image-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(14, 165, 233, .06) 0%, rgba(99, 102, 241, .06) 100%);
  border-radius: 32px;
  opacity: 0;
  transition: opacity .45s
}

.service-image-wrapper:hover {
  box-shadow:
    0 8px 24px rgba(14, 165, 233, .1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-4px)
}

.service-image-wrapper:hover::before {
  opacity: 1
}

.service-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(15, 23, 42, .06))
}

.service-hero-content h2 {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 24px;
  letter-spacing: -.02em;
  line-height: 1.3
}

.service-intro-text {
  font-size: 17px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 28px
}

.service-body {
  color: #475569;
  line-height: 1.7
}

.service-body h2 {
  font-size: clamp(26px, 3.5vw, 32px);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 20px;
  letter-spacing: -.02em
}

.service-body h3 {
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 700;
  color: #0f172a;
  margin: 32px 0 16px
}

.service-body p {
  margin-bottom: 16px;
  font-size: 16px
}

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

.service-body ul li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.6
}

.service-body ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700
}

.service-features {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px
}

.service-features li {
  position: relative;
  padding: 12px 16px 12px 44px;
  background: rgba(248, 250, 252, .8);
  border: 1px solid rgba(15, 23, 42, .05);
  border-radius: 12px;
  color: #475569;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  transition: all .3s ease
}

.service-features li::before {
  content: '✓';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(14, 165, 233, .2)
}

.service-features li:hover {
  background: rgba(14, 165, 233, .06);
  border-color: rgba(14, 165, 233, .12);
  transform: translateX(4px)
}

.service-cta-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap
}

.service-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  border: none;
  box-shadow: 0 4px 16px rgba(14, 165, 233, .25);
  transition: all .35s cubic-bezier(.4, 0, .2, 1)
}

.service-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 165, 233, .35);
  background: linear-gradient(135deg, #3b82f6, #0ea5e9)
}

.service-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: #fff;
  color: #0ea5e9;
  border: 2px solid #0ea5e9;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(14, 165, 233, .1);
  transition: all .35s cubic-bezier(.4, 0, .2, 1)
}

.service-btn-secondary:hover {
  background: #0ea5e9;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 165, 233, .25)
}

@media (max-width: 640px) {
  .service-cta-buttons {
    flex-direction: column
  }

  .service-cta-buttons .btn {
    width: 100%;
    justify-content: center
  }
}

/* Service Offerings Section */
.service-offerings {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
  padding: 80px 0
}

.section-header-modern {
  text-align: center;
  margin-bottom: 56px
}

.section-header-modern h2 {
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 800;
  background: linear-gradient(135deg, #0f172a 0%, #3b82f6 50%, #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 16px;
  letter-spacing: -.02em;
  line-height: 1.2
}

.section-header-modern p {
  font-size: 18px;
  color: #64748b;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6
}

.service-offerings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px
}

@media (max-width: 640px) {
  .service-offerings-grid {
    grid-template-columns: 1fr
  }
}

.service-offering-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, .03),
    0 0 0 1px rgba(15, 23, 42, .02);
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
  animation: fadeInUp .6s ease-out backwards
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.service-offering-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 24px rgba(14, 165, 233, .12),
    0 0 0 1px rgba(14, 165, 233, .08);
  border-color: rgba(14, 165, 233, .15)
}

.offering-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(14, 165, 233, .25);
  transition: all .35s ease
}

.service-offering-card:hover .offering-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 18px rgba(14, 165, 233, .35)
}

.offering-icon svg {
  color: #fff
}

.service-offering-card p {
  margin: 0;
  color: #475569;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500
}

/* Service FAQ Section */
.service-faq {
  background: #ffffff;
  padding: 80px 0
}

.faq-modern {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: 16px
}

.faq-item-modern {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .03);
  transition: all .3s ease
}

.faq-item-modern[open] {
  box-shadow:
    0 8px 24px rgba(14, 165, 233, .08),
    0 0 0 1px rgba(14, 165, 233, .1);
  border-color: rgba(14, 165, 233, .2)
}

.faq-item-modern summary {
  padding: 24px 28px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-weight: 600;
  font-size: 17px;
  color: #0f172a;
  line-height: 1.5;
  transition: all .3s ease;
  user-select: none
}

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

.faq-item-modern summary:hover {
  background: rgba(14, 165, 233, .02);
  color: #0ea5e9
}

.faq-question-text {
  flex: 1
}

.faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 165, 233, .1);
  border-radius: 8px;
  transition: all .3s ease
}

.faq-item-modern[open] .faq-icon {
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  transform: rotate(180deg)
}

.faq-icon svg {
  color: #0ea5e9;
  transition: all .3s ease
}

.faq-item-modern[open] .faq-icon svg {
  color: #fff
}

.faq-answer-modern {
  padding: 0 28px 24px;
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
  animation: fadeIn .4s ease-out
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.faq-answer-modern p {
  margin: 0
}

.prose {
  line-height: 1.7;
  color: var(--text)
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px
}

@media (max-width: 980px) {
  .grid-2 {
    grid-template-columns: 1fr
  }
}

.form label {
  display: block;
  margin-bottom: 10px
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(2, 6, 23, .15);
  background: #fff;
  color: #0f172a;
  outline: 0;
  box-shadow: 0 0 0 0 var(--ring)
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  box-shadow: 0 0 0 4px var(--ring)
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  text-decoration: none
}

.btn.primary {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #0b1220;
  border: 0
}

.btn.outline {
  background: transparent;
  color: var(--text)
}

/* Footer */
.site-footer {
  padding: 32px 0 12px;
  background: #0f172a;
  color: #e5e7eb
}

.site-footer a {
  color: #e5e7eb
}

.site-footer a:hover {
  color: #fff
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr .8fr;
  gap: 18px
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 24px;
  margin-top: 24px;
  flex-direction: column;
  gap: 16px
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  color: #e5e7eb;
  text-decoration: none;
  transition: all .3s ease;
  border: 1px solid rgba(255, 255, 255, .1)
}

.social-icon:hover {
  background: rgba(56, 189, 248, .2);
  color: #38bdf8;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(14, 165, 233, .3);
  text-decoration: none;
  border-color: rgba(56, 189, 248, .4)
}

.social-icon.facebook:hover {
  background: rgba(24, 119, 242, .2);
  color: #1877f2;
  box-shadow: 0 8px 20px rgba(24, 119, 242, .3);
  border-color: rgba(24, 119, 242, .4)
}

.social-icon.instagram:hover {
  background: linear-gradient(135deg, rgba(225, 48, 108, .2), rgba(245, 96, 64, .2));
  color: #e1306c;
  box-shadow: 0 8px 20px rgba(225, 48, 108, .3);
  border-color: rgba(225, 48, 108, .4)
}

.social-icon.youtube:hover {
  background: rgba(255, 0, 0, .2);
  color: #ff0000;
  box-shadow: 0 8px 20px rgba(255, 0, 0, .3);
  border-color: rgba(255, 0, 0, .4)
}

.social-icon svg {
  width: 20px;
  height: 20px
}

@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: 1fr
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    margin-top: 20px
  }

  .footer-social {
    gap: 12px
  }

  .social-icon {
    width: 40px;
    height: 40px
  }

  .social-icon svg {
    width: 18px;
    height: 18px
  }
}

/* Modern Footer */
.footer-modern {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  color: #e5e7eb;
  border-top: 1px solid rgba(255, 255, 255, .1);
  position: relative;
  overflow: hidden
}

.footer-modern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #0ea5e9, transparent);
  opacity: .5
}

.footer-top {
  padding: 60px 0 40px
}

.footer-brand {
  margin-bottom: 48px
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px
}

.footer-logo-mark {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #ffffff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(14, 165, 233, .3);
  flex-shrink: 0
}

.footer-logo-text h3 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #ffffff, #e0e7ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.footer-tagline {
  margin: 0;
  font-size: 15px;
  color: #94a3b8;
  line-height: 1.6
}

.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  margin-bottom: 40px
}

.footer-links-col {
  display: flex;
  flex-direction: column
}

.footer-links-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(14, 165, 233, .3);
  position: relative
}

.footer-links-title::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #0ea5e9, #6366f1);
  border-radius: 2px
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.footer-links li a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 15px;
  transition: all .3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.footer-links li a::before {
  content: "→";
  opacity: 0;
  transform: translateX(-8px);
  transition: all .3s ease;
  color: #0ea5e9
}

.footer-links li a:hover {
  color: #38bdf8;
  transform: translateX(4px);
  padding-left: 4px
}

.footer-links li a:hover::before {
  opacity: 1;
  transform: translateX(0)
}

.footer-contact-col {
  display: flex;
  flex-direction: column
}

.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1.6
}

.footer-contact li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #0ea5e9;
  opacity: .8
}

.footer-contact li a {
  color: #cbd5e1;
  text-decoration: none;
  transition: all .3s ease
}

.footer-contact li a:hover {
  color: #38bdf8
}

.footer-contact li span {
  color: #cbd5e1
}

.footer-bottom-modern {
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px
}

.footer-copyright {
  color: #94a3b8;
  font-size: 14px
}

.footer-copyright p {
  margin: 0
}

.footer-developer {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 14px
}

.developer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0ea5e9;
  text-decoration: none;
  font-weight: 600;
  transition: all .3s ease
}

.developer-link svg {
  transition: transform .3s ease
}

.developer-link:hover {
  color: #38bdf8;
  transform: translateY(-2px)
}

.developer-link:hover svg {
  transform: translate(2px, -2px)
}

@media (max-width: 1200px) {
  .footer-links-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px
  }
}

@media (max-width: 1024px) {
  .footer-links-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px
  }
}

@media (max-width: 980px) {
  .footer-top {
    padding: 48px 0 32px
  }

  .footer-logo {
    flex-direction: column;
    text-align: center;
    gap: 16px
  }

  .footer-logo-text h3 {
    font-size: 24px
  }

  .footer-links-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px
  }

  .footer-bottom-modern {
    flex-direction: column;
    text-align: center;
    gap: 16px
  }
}

@media (max-width: 640px) {
  .footer-links-grid {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .footer-social {
    gap: 12px
  }

  .social-icon {
    width: 40px;
    height: 40px
  }

  .social-icon svg {
    width: 18px;
    height: 18px
  }
}

/* Legal Pages (Privacy, KVKK, Guarantee) */
.legal-page {
  background: #ffffff
}

.legal-header {
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
  position: relative;
  overflow: hidden;
  padding: 60px 0 40px;
  border-bottom: 1px solid rgba(14, 165, 233, .1)
}

.legal-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(14, 165, 233, .08) 0%, transparent 50%);
  pointer-events: none
}

.legal-hero-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1
}

.legal-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 16px;
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.legal-subtitle {
  font-size: 18px;
  color: #64748b;
  margin: 0;
  line-height: 1.6
}

.legal-content {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 80px 0
}

.legal-content-wrapper {
  max-width: 900px;
  margin: 0 auto
}

.prose-legal {
  font-size: 17px;
  line-height: 1.85;
  color: #334155
}

.prose-legal .legal-intro {
  font-size: 18px;
  line-height: 1.9;
  color: #475569;
  margin-bottom: 40px;
  padding: 24px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-left: 4px solid #0ea5e9;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(14, 165, 233, .08)
}

.prose-legal h2 {
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 800;
  color: #0f172a;
  margin: 48px 0 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
  position: relative
}

.prose-legal h2::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, #0ea5e9, #6366f1);
  border-radius: 2px
}

.prose-legal p {
  margin-bottom: 20px;
  color: #475569
}

.prose-legal ul {
  margin: 24px 0;
  padding-left: 0;
  list-style: none
}

.prose-legal ul li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 16px;
  color: #475569;
  line-height: 1.8
}

.prose-legal ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(14, 165, 233, .3)
}

.prose-legal a {
  color: #0ea5e9;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(14, 165, 233, .3);
  transition: all .3s ease
}

.prose-legal a:hover {
  color: #0284c7;
  border-bottom-color: #0284c7
}

.prose-legal strong {
  color: #0f172a;
  font-weight: 700
}

.guarantee-highlight {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 2px solid #0ea5e9;
  border-radius: 16px;
  padding: 32px;
  margin: 40px 0;
  box-shadow: 0 4px 20px rgba(14, 165, 233, .12)
}

.guarantee-highlight h2 {
  margin-top: 0;
  color: #0f172a;
  border-bottom: none
}

.guarantee-highlight h2::before {
  display: none
}

.guarantee-highlight ul {
  margin: 20px 0 0
}

.guarantee-highlight ul li {
  background: #ffffff;
  padding: 16px 20px 16px 48px;
  border-radius: 10px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  transition: all .3s ease
}

.guarantee-highlight ul li:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, .15)
}

.guarantee-commitment {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  color: #ffffff;
  padding: 32px;
  border-radius: 16px;
  margin: 40px 0;
  text-align: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .2)
}

.guarantee-commitment p {
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
  color: #ffffff
}

.guarantee-commitment strong {
  color: #38bdf8
}

.legal-update {
  margin-top: 60px;
  padding-top: 32px;
  border-top: 2px solid #e2e8f0;
  text-align: center
}

.legal-update p {
  margin: 0;
  color: #64748b;
  font-size: 15px
}

.legal-update strong {
  color: #0f172a;
  font-weight: 700
}

@media (max-width: 980px) {
  .legal-header {
    padding: 40px 0 30px
  }

  .legal-title {
    font-size: 28px
  }

  .legal-subtitle {
    font-size: 16px
  }

  .legal-content {
    padding: 60px 0
  }

  .prose-legal {
    font-size: 16px
  }

  .prose-legal .legal-intro {
    font-size: 17px;
    padding: 20px
  }

  .guarantee-highlight {
    padding: 24px;
    margin: 32px 0
  }

  .guarantee-commitment {
    padding: 24px;
    margin: 32px 0
  }
}

/* Blog post detail */
.post-hero {
  padding: 40px 0;
  background: linear-gradient(180deg, rgba(56, 189, 248, .10), transparent)
}

.post-hero .container {
  max-width: 900px
}

.post-hero img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(2, 6, 23, .08)
}

.post-body {
  padding: 24px 0
}

.post-body .container {
  max-width: 900px
}

.post-body h1 {
  margin: 0 0 10px
}

.post-body .meta {
  color: var(--muted);
  margin-bottom: 16px
}

.post-body p {
  line-height: 1.8
}

/* Alerts */
.alert {
  padding: 12px 14px;
  border-radius: 12px;
  margin: 0 0 12px
}

.alert.success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0
}

.alert.error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca
}

/* Accordion */
details {
  background: rgba(2, 6, 23, .04);
  border: 1px solid rgba(2, 6, 23, .08);
  border-radius: 12px;
  margin: 8px 0;
  padding: 10px
}

summary {
  cursor: pointer;
  outline: none
}

/* Map */
.map iframe {
  width: 100%;
  height: 260px;
  border: 0;
  border-radius: 12px
}

/* Why Us */
.why-us {
  padding: 56px 0;
  background: radial-gradient(1200px 600px at 50% 0, rgba(14, 165, 233, .1), transparent 60%)
}

.why-us-content {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: center
}

@media (max-width: 980px) {
  .why-us-content {
    grid-template-columns: 1fr
  }
}

.why-us-text h2 {
  margin: 0 0 8px;
  font-size: 28px
}

.advantage-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0
}

@media (max-width: 980px) {
  .advantage-list {
    grid-template-columns: 1fr
  }
}

.advantage-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(2, 6, 23, .08)
}

.advantage-item:last-child {
  border-bottom: 0
}

.check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-weight: 700
}

.why-us-image .stats-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  background: linear-gradient(135deg, #60a5fa 0%, #8b5cf6 100%);
  border: 0;
  border-radius: 16px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(37, 99, 235, .22)
}

.stat-item h3,
.stat-item .stat-number {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  color: #fff
}

.stat-item p {
  margin: 6px 0 0;
  color: #ecf2ff
}

/* About intro */
.about-intro {
  padding: 56px 0
}

.intro-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: center
}

@media (max-width: 980px) {
  .intro-grid {
    grid-template-columns: 1fr
  }
}

.intro-text h2 {
  margin: 0 0 10px
}

.intro-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted)
}

.intro-media img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(2, 6, 23, .08);
  box-shadow: 0 12px 30px rgba(2, 6, 23, .1)
}

/* Values */
.values-section {
  padding: 56px 0;
  border-top: 1px solid rgba(2, 6, 23, .06)
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

@media (max-width: 980px) {
  .values-grid {
    grid-template-columns: 1fr 1fr
  }
}

.value-card {
  background: linear-gradient(180deg, rgba(2, 6, 23, .04), rgba(2, 6, 23, .02));
  border: 1px solid rgba(2, 6, 23, .08);
  border-radius: 14px;
  padding: 16px;
  text-align: center
}

.value-icon {
  font-size: 26px
}

/* Why choose us */
.why-choose-us {
  padding: 56px 0
}

.reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

@media (max-width: 980px) {
  .reasons-grid {
    grid-template-columns: 1fr
  }
}

.reason-item {
  background: var(--surface);
  border: 1px solid rgba(2, 6, 23, .08);
  border-radius: 14px;
  padding: 18px
}

.reason-number {
  display: inline-block;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #0b1220;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  margin-bottom: 8px
}

/* Floating contact buttons (mobile) */
.fab-contact {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: none;
  flex-direction: row;
  gap: 10px;
  z-index: 1000
}

.fab-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 255, 255, .15);
  border: 3px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(4px)
}

.fab-btn svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3))
}

.fab-btn.phone {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  box-shadow: 0 12px 40px rgba(56, 189, 248, .5), 0 0 0 3px rgba(255, 255, 255, .2), inset 0 2px 8px rgba(255, 255, 255, .3)
}

.fab-btn.whatsapp {
  background: linear-gradient(135deg, #25D366, #128C7E);
  box-shadow: 0 12px 40px rgba(37, 211, 102, .5), 0 0 0 3px rgba(255, 255, 255, .2), inset 0 2px 8px rgba(255, 255, 255, .3)
}

.fab-btn.top {
  background: rgba(15, 23, 42, .35);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .35);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease
}

.fab-btn.top.visible {
  opacity: 1;
  transform: translateY(0)
}

@media (max-width: 980px) {
  .fab-contact {
    display: flex
  }
}

/* New fixed positions: left stack (phone+whatsapp), right stack (back-to-top) */
.fab-left,
.fab-right {
  position: fixed;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  gap: 10px
}

.fab-left {
  left: 16px;
  flex-direction: column
}

.fab-right {
  right: 16px;
  flex-direction: column
}

/* FAB Tooltip Styles */
.fab-btn {
  position: relative;
  transition: transform .3s ease
}

.fab-tooltip {
  position: absolute;
  left: 76px;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #ffffff;
  padding: 14px 24px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 10001;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.1)
}

.fab-tooltip::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 8px 0;
  border-color: transparent #0f172a transparent transparent
}

.fab-tooltip::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(99, 102, 241, 0.2));
  border-radius: 12px;
  opacity: 0;
  z-index: -1;
  animation: tooltipGlow 2s ease-in-out infinite
}

.fab-btn:hover .fab-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1)
}

.fab-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .4), 0 0 0 4px rgba(255, 255, 255, .3)
}

.fab-btn.phone:hover {
  box-shadow: 0 16px 50px rgba(56, 189, 248, .7), 0 0 0 4px rgba(255, 255, 255, .4), inset 0 2px 12px rgba(255, 255, 255, .4)
}

.fab-btn.whatsapp:hover {
  box-shadow: 0 16px 50px rgba(37, 211, 102, .7), 0 0 0 4px rgba(255, 255, 255, .4), inset 0 2px 12px rgba(255, 255, 255, .4)
}

/* Shake Animation for FAB Buttons */
@keyframes shake {

  0%,
  100% {
    transform: translateX(0)
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-3px)
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(3px)
  }
}

@keyframes tooltipGlow {

  0%,
  100% {
    opacity: 0
  }

  50% {
    opacity: 1
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 12px 40px rgba(37, 211, 102, .5), 0 0 0 3px rgba(255, 255, 255, .2), inset 0 2px 8px rgba(255, 255, 255, .3), 0 0 0 0 rgba(37, 211, 102, .8)
  }

  50% {
    box-shadow: 0 12px 40px rgba(37, 211, 102, .5), 0 0 0 3px rgba(255, 255, 255, .2), inset 0 2px 8px rgba(255, 255, 255, .3), 0 0 0 15px rgba(37, 211, 102, 0)
  }

  100% {
    box-shadow: 0 12px 40px rgba(37, 211, 102, .5), 0 0 0 3px rgba(255, 255, 255, .2), inset 0 2px 8px rgba(255, 255, 255, .3), 0 0 0 0 rgba(37, 211, 102, 0)
  }
}

@keyframes pulsePhone {
  0% {
    box-shadow: 0 12px 40px rgba(56, 189, 248, .5), 0 0 0 3px rgba(255, 255, 255, .2), inset 0 2px 8px rgba(255, 255, 255, .3), 0 0 0 0 rgba(56, 189, 248, .8)
  }

  50% {
    box-shadow: 0 12px 40px rgba(56, 189, 248, .5), 0 0 0 3px rgba(255, 255, 255, .2), inset 0 2px 8px rgba(255, 255, 255, .3), 0 0 0 15px rgba(56, 189, 248, 0)
  }

  100% {
    box-shadow: 0 12px 40px rgba(56, 189, 248, .5), 0 0 0 3px rgba(255, 255, 255, .2), inset 0 2px 8px rgba(255, 255, 255, .3), 0 0 0 0 rgba(56, 189, 248, 0)
  }
}

/* Apply animations to buttons */
.fab-btn.whatsapp {
  animation: shake 3s ease-in-out infinite, pulse 2s ease-in-out infinite
}

.fab-btn.phone {
  animation: shake 3s ease-in-out 1.5s infinite, pulsePhone 2s ease-in-out infinite
}

/* Mobile adjustments */
@media(max-width:768px) {
  .fab-btn {
    width: 68px;
    height: 68px;
    box-shadow: 0 12px 45px rgba(0, 0, 0, .4), 0 0 0 4px rgba(255, 255, 255, .25);
    border: 4px solid rgba(255, 255, 255, .3)
  }

  .fab-btn svg {
    width: 36px;
    height: 36px
  }

  .fab-btn.phone {
    box-shadow: 0 12px 45px rgba(56, 189, 248, .6), 0 0 0 4px rgba(255, 255, 255, .3), inset 0 2px 10px rgba(255, 255, 255, .4)
  }

  .fab-btn.whatsapp {
    box-shadow: 0 12px 45px rgba(37, 211, 102, .6), 0 0 0 4px rgba(255, 255, 255, .3), inset 0 2px 10px rgba(255, 255, 255, .4)
  }

  .fab-tooltip {
    left: 82px;
    right: auto;
    font-size: 14px;
    padding: 12px 18px
  }

  .fab-tooltip::before {
    left: -8px;
    right: auto;
    border-width: 8px 8px 8px 0;
    border-color: transparent #0f172a transparent transparent
  }
}

/* Process section */
.process {
  padding: 56px 0;
  border-top: 1px solid rgba(2, 6, 23, .06);
  border-bottom: 1px solid rgba(2, 6, 23, .06);
  background: linear-gradient(180deg, rgba(2, 6, 23, .03), transparent)
}

.process .section-title {
  text-align: center;
  margin: 0 0 6px
}

.process .section-subtitle {
  text-align: center;
  color: var(--muted);
  margin: 0 0 22px
}

.process-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto
}

.step {
  text-align: center
}

.step-number {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #22c55e;
  color: #fff;
  font-weight: 700
}

.step h3 {
  margin: 0 0 6px
}

.step p {
  margin: 0;
  color: var(--muted)
}

.step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
  font-size: 20px
}

@media (max-width: 980px) {
  .process-steps {
    grid-template-columns: 1fr;
    gap: 10px
  }

  .step-arrow {
    display: none
  }
}

/* Service page intro */
.service-intro {
  padding: 40px 0
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start
}

@media (max-width: 980px) {
  .service-grid {
    grid-template-columns: 1fr
  }
}

.service-media img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(2, 6, 23, .08)
}


.map-responsive {
  position: relative;
}

.map-responsive .map-embed {
  position: relative;
  padding-top: 56.25%;
}

.map-responsive iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.form .consent {
  margin: .75rem 0 1rem;
}

.chip {
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: #f1f5f9;
}

@media (max-width: 980px) {

  /* main'in padding-top'u kalsın (70px) – header çakışmasın */
  main {
    padding-top: 70px;
  }

  /* Servis / sayfa giriş bloklarını yukarı çekip iç boşluğu arttırıyoruz */
  .page-header,
  .service-intro {
    margin-top: -70px;
    /* main’in padding’ini iptal eder, boşluk gider */
    padding-top: calc(40px + 70px);
    /* eski üst padding + 70px, böylece metin yine aşağıda kalır */
  }
}


/* ========================================
   BRAND PAGE PREMIUM STYLES
   ======================================== */

/* Brand Hero Section Enhancement */
.page .service-hero {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e0e7ff 100%);
  position: relative;
  overflow: hidden
}

.page .service-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(99, 102, 241, .08) 0%, transparent 70%);
  pointer-events: none;
  animation: brandPulse 8s ease-in-out infinite
}

@keyframes brandPulse {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: .6
  }

  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: .8
  }
}

/* Brand Logo Wrapper - Premium Style */
.page .service-image-wrapper {
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  border-radius: 40px;
  padding: 60px;
  box-shadow:
    0 10px 40px rgba(15, 23, 42, .08),
    0 2px 8px rgba(15, 23, 42, .04),
    inset 0 2px 0 rgba(255, 255, 255, 1);
  position: relative;
  transition: all .5s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden
}

.page .service-image-wrapper::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg at 50% 50%,
      rgba(14, 165, 233, .1) 0deg,
      rgba(99, 102, 241, .15) 90deg,
      rgba(168, 85, 247, .1) 180deg,
      rgba(236, 72, 153, .15) 270deg,
      rgba(14, 165, 233, .1) 360deg);
  opacity: 0;
  transition: opacity .5s, transform 1s ease;
  border-radius: 40px
}

.page .service-image-wrapper:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 20px 60px rgba(14, 165, 233, .15),
    0 8px 20px rgba(99, 102, 241, .1),
    inset 0 2px 0 rgba(255, 255, 255, 1)
}

.page .service-image-wrapper:hover::before {
  opacity: 1;
  transform: rotate(360deg)
}

.page .service-image-wrapper img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 8px 16px rgba(15, 23, 42, .08));
  transition: all .4s ease
}

.page .service-image-wrapper:hover img {
  filter: drop-shadow(0 12px 24px rgba(14, 165, 233, .12));
  transform: scale(1.05)
}

/* Brand Content Typography Enhancement */
.page .service-body h2 {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block
}

.page .service-body h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #0ea5e9, #6366f1);
  border-radius: 2px
}

.page .service-body h3 {
  color: #1e293b;
  position: relative;
  padding-left: 20px
}

.page .service-body h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 80%;
  background: linear-gradient(180deg, #0ea5e9, #6366f1);
  border-radius: 3px
}

/* Brand CTA Buttons Premium */
.page .service-cta-buttons {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap
}

.page .service-btn-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: #fff;
  padding: 16px 32px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow:
    0 4px 12px rgba(14, 165, 233, .3),
    0 2px 4px rgba(14, 165, 233, .2);
  transition: all .3s ease;
  position: relative;
  overflow: hidden
}

.page .service-btn-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, .3) 0%, transparent 70%);
  transition: transform .5s ease;
  border-radius: 50%
}

.page .service-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(14, 165, 233, .4),
    0 4px 8px rgba(14, 165, 233, .3)
}

.page .service-btn-primary:hover::before {
  transform: translate(-50%, -50%) scale(1)
}

.page .service-btn-primary svg {
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
  animation: phoneRing 2s ease-in-out infinite
}

@keyframes phoneRing {

  0%,
  100% {
    transform: rotate(0deg)
  }

  10%,
  30% {
    transform: rotate(-15deg)
  }

  20%,
  40% {
    transform: rotate(15deg)
  }

  50% {
    transform: rotate(0deg)
  }
}

.page .service-btn-secondary {
  background: #ffffff;
  color: #0ea5e9;
  padding: 16px 32px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, .08),
    inset 0 0 0 2px #0ea5e9;
  transition: all .3s ease
}

.page .service-btn-secondary:hover {
  background: #0ea5e9;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(14, 165, 233, .2),
    inset 0 0 0 2px #0ea5e9
}

/* Brand Services Grid Enhancement */
.page .service-offerings {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  position: relative
}

.page .service-offerings::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14, 165, 233, .2), transparent)
}

.page .service-offering-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 28px;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, .04),
    inset 0 0 0 1px rgba(14, 165, 233, .1);
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden
}

.page .service-offering-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0ea5e9, #6366f1);
  transform: translateX(-100%);
  transition: transform .4s ease
}

.page .service-offering-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 24px rgba(14, 165, 233, .12),
    inset 0 0 0 1px rgba(14, 165, 233, .2)
}

.page .service-offering-card:hover::before {
  transform: translateX(0)
}

.page .offering-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: all .4s ease
}

.page .service-offering-card:hover .offering-icon {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  transform: rotate(360deg) scale(1.1)
}

.page .offering-icon svg {
  stroke: #0ea5e9;
  transition: stroke .4s ease
}

.page .service-offering-card:hover .offering-icon svg {
  stroke: #ffffff
}

.page .service-offering-card p {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.5;
  margin: 0
}

/* Brand FAQ Section Premium */
.page .service-faq {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%)
}

.page .faq-item-modern {
  background: #ffffff;
  border-radius: 20px;
  margin-bottom: 16px;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, .04),
    inset 0 0 0 1px rgba(14, 165, 233, .08);
  transition: all .3s ease
}

.page .faq-item-modern[open] {
  box-shadow:
    0 8px 24px rgba(14, 165, 233, .1),
    inset 0 0 0 2px rgba(14, 165, 233, .2)
}

.page .faq-item-modern summary {
  background: transparent;
  transition: background .3s ease
}

.page .faq-item-modern[open] summary {
  background: linear-gradient(135deg, rgba(14, 165, 233, .05), rgba(99, 102, 241, .05))
}

/* Responsive Brand Page */
@media(max-width:768px) {
  .page .service-image-wrapper {
    padding: 40px 30px;
    border-radius: 28px
  }

  .page .service-image-wrapper img {
    max-width: 280px
  }

  .page .service-cta-buttons {
    flex-direction: column
  }

  .page .service-btn-primary,
  .page .service-btn-secondary {
    width: 100%;
    justify-content: center
  }
}

/* ========================================
   BLOG PAGE MODERN STYLES
   ======================================== */

/* Blog Header */
.blog-header {
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
  position: relative;
  overflow: hidden
}

.blog-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(99, 102, 241, .1) 0%, transparent 70%);
  animation: blogHeaderFloat 10s ease-in-out infinite
}

@keyframes blogHeaderFloat {

  0%,
  100% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(-30px, 30px)
  }
}

.blog-header-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1
}

.blog-header-content .page-title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px
}

.blog-header-content .page-subtitle {
  font-size: clamp(16px, 2vw, 20px);
  color: #64748b;
  line-height: 1.6
}

/* Blog Grid Modern */
.blog-listing {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)
}

.blog-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
  margin-bottom: 60px
}

/* Blog Card Modern */
.blog-card-modern {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, .04),
    inset 0 0 0 1px rgba(14, 165, 233, .08);
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  animation: blogCardFadeIn .6s ease backwards
}

@keyframes blogCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.blog-card-modern:hover {
  transform: translateY(-8px);
  box-shadow:
    0 12px 32px rgba(14, 165, 233, .15),
    inset 0 0 0 2px rgba(14, 165, 233, .2)
}

.blog-card-link {
  text-decoration: none;
  color: inherit;
  display: block
}

/* Blog Card Image - Enhanced */
.blog-card-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 24px 24px 0 0
}

.blog-card-media-modern {
  position: relative;
  width: 100%;
  height: 240px;
  margin: 0;
  overflow: hidden;
  background: #f1f5f9
}

.blog-card-media-modern::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 60%);
  opacity: 0.6;
  transition: opacity .4s ease;
  z-index: 1
}

.blog-card-modern:hover .blog-card-media-modern::before {
  opacity: 0.9
}

.blog-card-media-modern img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform
}

.blog-card-modern:hover .blog-card-media-modern img {
  transform: scale(1.1)
}

/* Date Badge */
.blog-card-date-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 4px 12px rgba(14, 165, 233, .3);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px
}

.blog-card-date-badge .date-day {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1
}

.blog-card-date-badge .date-month {
  font-size: 12px;
  font-weight: 600;
  color: #e0f2fe;
  text-transform: uppercase;
  letter-spacing: .5px
}

/* Blog Card Body */
.blog-card-body-modern {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.blog-card-title-modern {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
  margin: 0;
  transition: color .3s
}

.blog-card-modern:hover .blog-card-title-modern {
  color: #0ea5e9
}

.blog-card-excerpt-modern {
  font-size: 15px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.blog-read-more-modern {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #0ea5e9;
  transition: all .3s;
  margin-top: auto
}

.blog-read-more-modern svg {
  transition: transform .3s
}

.blog-card-modern:hover .blog-read-more-modern svg {
  transform: translateX(4px)
}

/* ========================================
   POST PAGE MODERN STYLES
   ======================================== */

/* Post Header */
.post-header {
  background: linear-gradient(135deg, #f8fafc, #e0e7ff);
  padding: 24px 0 !important
}

/* Post Hero Modern */
.post-hero-modern {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 60px 0
}

.post-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start
}

.post-hero-content {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.post-title-modern {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin: 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.post-meta-modern {
  display: flex;
  align-items: center;
  gap: 20px
}

.post-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #64748b;
  font-weight: 500
}

.post-date svg {
  color: #0ea5e9
}

/* Post Image Wrapper */
.post-hero-visual {
  position: sticky;
  top: 100px;
  align-self: start;
  z-index: 10
}

.post-image-wrapper {
  position: relative;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  border-radius: 32px;
  padding: 40px;
  box-shadow:
    0 10px 40px rgba(15, 23, 42, .08),
    inset 0 2px 0 rgba(255, 255, 255, 1);
  overflow: hidden;
  transition: all .5s
}

.post-image-wrapper::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg,
      rgba(14, 165, 233, .08) 0deg,
      rgba(99, 102, 241, .12) 90deg,
      rgba(168, 85, 247, .08) 180deg,
      rgba(236, 72, 153, .12) 270deg,
      rgba(14, 165, 233, .08) 360deg);
  opacity: 0;
  transition: opacity .5s, transform 1s
}

.post-image-wrapper:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 60px rgba(14, 165, 233, .12),
    inset 0 2px 0 rgba(255, 255, 255, 1)
}

.post-image-wrapper:hover::before {
  opacity: 1;
  transform: rotate(360deg)
}

.post-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(15, 23, 42, .06))
}

/* Post Content Modern */
.post-content-modern {
  background: #ffffff;
  padding: 80px 0
}

.post-article {
  max-width: 800px;
  margin: 0 auto
}

.prose-modern {
  font-size: 18px;
  line-height: 1.8;
  color: #334155;
  display: block;
  visibility: visible;
  opacity: 1
}

.prose-modern h2 {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 800;
  color: #0f172a;
  margin: 48px 0 24px;
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  padding-bottom: 16px
}

.prose-modern h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #0ea5e9, #6366f1);
  border-radius: 2px
}

.prose-modern h3 {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  color: #1e293b;
  margin: 36px 0 20px;
  padding-left: 20px;
  position: relative
}

.prose-modern h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 80%;
  background: linear-gradient(180deg, #0ea5e9, #6366f1);
  border-radius: 3px
}

.prose-modern h4 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: #334155;
  margin: 28px 0 16px;
  padding-left: 16px;
  position: relative
}

.prose-modern h4::before {
  content: '▶';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #0ea5e9;
  font-size: 14px
}

.prose-modern p {
  margin-bottom: 24px;
  color: #475569
}

.prose-modern ul,
.prose-modern ol {
  margin: 24px 0;
  padding-left: 0;
  list-style: none
}

.prose-modern ul li,
.prose-modern ol li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 16px
}

.prose-modern ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
  color: #0ea5e9;
  font-weight: 700;
  font-size: 14px;
  border-radius: 6px
}

.prose-modern ol {
  counter-reset: list-counter;
  padding-left: 0
}

.prose-modern ol li {
  counter-increment: list-counter;
  padding-left: 40px
}

.prose-modern ol li::before {
  content: counter(list-counter);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(14, 165, 233, .2)
}

.prose-modern strong {
  color: #0f172a;
  font-weight: 700
}

.prose-modern a {
  color: #0ea5e9;
  text-decoration: none;
  font-weight: 600;
  transition: color .3s
}

.prose-modern a:hover {
  color: #0284c7
}

.prose-modern a.internal-link {
  color: #0ea5e9;
  text-decoration: underline;
  text-decoration-color: rgba(14, 165, 233, .3);
  text-underline-offset: 3px;
  font-weight: 600;
  transition: all .3s;
  border-bottom: 1px solid transparent
}

.prose-modern a.internal-link:hover {
  color: #0284c7;
  text-decoration-color: #0284c7;
  background: linear-gradient(135deg, rgba(14, 165, 233, .08), rgba(99, 102, 241, .08));
  padding: 2px 4px;
  margin: 0 -4px;
  border-radius: 4px
}

/* Post CTA */
.post-cta {
  margin-top: 64px;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border-radius: 24px;
  padding: 48px;
  position: relative;
  overflow: hidden
}

.post-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(14, 165, 233, .15) 0%, transparent 70%);
  animation: postCtaPulse 6s ease-in-out infinite
}

@keyframes postCtaPulse {

  0%,
  100% {
    transform: translate(0, -50%) scale(1)
  }

  50% {
    transform: translate(-20px, -50%) scale(1.1)
  }
}

.post-cta-content {
  position: relative;
  z-index: 1;
  text-align: center
}

.post-cta-content h3 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 16px
}

.post-cta-content p {
  font-size: 17px;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 32px
}

.post-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap
}

.post-btn-primary {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff;
  padding: 16px 32px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(14, 165, 233, .3);
  transition: all .3s;
  position: relative;
  overflow: hidden
}

.post-btn-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, .3) 0%, transparent 70%);
  transition: transform .5s;
  border-radius: 50%
}

.post-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(14, 165, 233, .4)
}

.post-btn-primary:hover::before {
  transform: translate(-50%, -50%) scale(1)
}

.post-btn-secondary {
  background: #ffffff;
  color: #0ea5e9;
  padding: 16px 32px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, .08),
    inset 0 0 0 2px #0ea5e9;
  transition: all .3s
}

.post-btn-secondary:hover {
  background: #0ea5e9;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(14, 165, 233, .2)
}

/* Responsive Blog & Post */
@media(max-width:1024px) {
  .blog-grid-modern {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px
  }

  .post-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .post-hero-content {
    order: 1
  }

  .post-hero-visual {
    order: 2;
    position: relative;
    top: auto;
    align-self: auto
  }
}

@media(max-width:768px) {
  .blog-header-content .page-title {
    font-size: 28px
  }

  .blog-grid-modern {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .blog-card-media-modern {
    height: 200px
  }

  .post-image-wrapper {
    padding: 24px;
    border-radius: 20px
  }

  .post-title-modern {
    font-size: 28px
  }

  .post-cta {
    padding: 32px 24px
  }

  .post-cta-buttons {
    flex-direction: column
  }

  .post-btn-primary,
  .post-btn-secondary {
    width: 100%;
    justify-content: center
  }
}

/* ========================================
   ABOUT PAGE MODERN STYLES
   ======================================== */

/* About Header */
.about-header {
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
  position: relative;
  overflow: hidden
}

.about-hero-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center
}

.about-title {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 20px
}

.about-subtitle {
  font-size: clamp(16px, 2vw, 20px);
  color: #64748b;
  line-height: 1.6
}

/* Stats Section */
.about-stats {
  background: #ffffff;
  padding: 80px 0
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px
}

.stat-card {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-radius: 24px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
  transition: all .4s;
  position: relative;
  overflow: hidden
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0ea5e9, #6366f1);
  transform: scaleX(0);
  transition: transform .4s
}

.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(14, 165, 233, .15)
}

.stat-card:hover::before {
  transform: scaleX(1)
}

.stat-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .4s
}

.stat-card:hover .stat-icon {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  transform: rotate(360deg) scale(1.1)
}

.stat-icon svg {
  stroke: #0ea5e9;
  transition: stroke .4s
}

.stat-card:hover .stat-icon svg {
  stroke: #ffffff
}

.stat-number {
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px
}

.stat-label {
  font-size: 16px;
  color: #64748b;
  font-weight: 500
}

/* About Content */
.about-content {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 80px 0
}

.about-content-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  align-items: start
}

.prose-about {
  font-size: 17px;
  line-height: 1.8;
  color: #334155
}

.prose-about h2 {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 800;
  color: #0f172a;
  margin: 48px 0 24px;
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.prose-about p {
  margin-bottom: 20px
}

/* Feature Cards */
.about-features {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.feature-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
  transition: all .4s;
  border: 1px solid rgba(14, 165, 233, .1)
}

.feature-card:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 24px rgba(14, 165, 233, .12);
  border-color: rgba(14, 165, 233, .2)
}

.feature-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all .4s
}

.feature-card:hover .feature-icon {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  transform: rotate(5deg) scale(1.05)
}

.feature-icon svg {
  stroke: #0ea5e9;
  transition: stroke .4s
}

.feature-card:hover .feature-icon svg {
  stroke: #ffffff
}

.feature-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 12px
}

.feature-card p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.6;
  margin: 0
}

/* Service Areas */
.about-service-areas {
  background: #ffffff;
  padding: 80px 0
}

.service-areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 40px
}

.area-chip {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
  transition: all .3s;
  animation: areaChipFadeIn .6s ease backwards
}

@keyframes areaChipFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.area-chip:hover {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(14, 165, 233, .2)
}

.area-chip svg {
  flex-shrink: 0;
  fill: #0ea5e9;
  transition: fill .3s
}

.area-chip:hover svg {
  fill: #ffffff
}

/* About FAQ */
.about-faq {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  padding: 80px 0
}

/* About CTA */
.about-cta {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  padding: 80px 0;
  position: relative;
  overflow: hidden
}

.about-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 255, 255, .1) 0%, transparent 70%);
  animation: aboutCtaFloat 8s ease-in-out infinite
}

@keyframes aboutCtaFloat {

  0%,
  100% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(-50px, 50px)
  }
}

.about-cta-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1
}

.about-cta-content h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 20px
}

.about-cta-content p {
  font-size: 18px;
  color: rgba(255, 255, 255, .9);
  line-height: 1.7;
  margin: 0 0 40px
}

.about-cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap
}

.about-btn-primary,
.about-btn-secondary {
  padding: 18px 36px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all .3s;
  position: relative;
  overflow: hidden
}

.about-btn-primary {
  background: #ffffff;
  color: #0ea5e9;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1)
}

.about-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15)
}

.about-btn-secondary {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, .3)
}

.about-btn-secondary:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .6);
  transform: translateY(-3px)
}

/* Responsive About Page */
@media(max-width:1024px) {
  .about-content-grid {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .service-areas-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr))
  }
}

@media(max-width:768px) {
  .about-title {
    font-size: 32px
  }

  .stats-grid {
    grid-template-columns: 1fr
  }

  .service-areas-grid {
    grid-template-columns: 1fr
  }

  .about-cta-buttons {
    flex-direction: column
  }

  .about-btn-primary,
  .about-btn-secondary {
    width: 100%;
    justify-content: center
  }
}

/* ========================================
   CONTACT PAGE MODERN STYLES
   ======================================== */

/* Contact Header */
.contact-header {
  background: linear-gradient(135deg, #f8fafc 0%, #dbeafe 100%);
  position: relative;
  overflow: hidden;
  padding: 40px 0
}

.contact-hero-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center
}

.contact-title {
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 800;
  background: linear-gradient(135deg, #0f172a, #0ea5e9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 16px
}

.contact-subtitle {
  font-size: clamp(16px, 2vw, 19px);
  color: #64748b;
  line-height: 1.7
}

/* Quick Contact Cards */
.contact-quick {
  background: #ffffff;
  padding: 60px 0
}

.quick-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px
}

.quick-contact-card {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
  transition: all .3s;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(14, 165, 233, .08);
  display: block
}

.quick-contact-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(14, 165, 233, .15);
  border-color: rgba(14, 165, 233, .2)
}

.quick-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s
}

.quick-contact-card:hover .quick-icon {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  transform: rotate(-5deg) scale(1.1)
}

.quick-icon svg {
  stroke: #0ea5e9;
  transition: stroke .3s
}

.quick-contact-card:hover .quick-icon svg {
  stroke: #ffffff
}

.quick-icon svg[fill] {
  fill: #0ea5e9;
  stroke: none;
  transition: fill .3s
}

.quick-contact-card:hover .quick-icon svg[fill] {
  fill: #ffffff
}

.quick-contact-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px
}

.quick-contact-card p {
  font-size: 15px;
  color: #64748b;
  margin: 0
}

/* Contact Main Section */
.contact-main {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 80px 0
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start
}

/* Form Wrapper */
.contact-form-wrapper {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
  border: 1px solid rgba(14, 165, 233, .1)
}

.form-header {
  margin-bottom: 32px;
  text-align: center
}

.form-header h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 12px
}

.form-header p {
  font-size: 16px;
  color: #64748b;
  margin: 0
}

/* Modern Alerts */
.alert-modern {
  padding: 16px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 15px;
  line-height: 1.6
}

.alert-modern.success {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
  border: 1px solid #10b981
}

.alert-modern.error {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
  border: 1px solid #ef4444
}

.alert-modern svg {
  flex-shrink: 0;
  stroke: currentColor
}

/* Modern Form */
.form-modern {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.form-group label {
  font-size: 15px;
  font-weight: 600;
  color: #334155
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 15px;
  color: #0f172a;
  background: #ffffff;
  transition: all .3s;
  font-family: inherit
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, .1)
}

.form-group textarea {
  resize: vertical;
  min-height: 120px
}

.btn-submit-modern {
  padding: 16px 32px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all .3s;
  box-shadow: 0 4px 16px rgba(14, 165, 233, .3);
  margin-top: 8px
}

.btn-submit-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 165, 233, .4)
}

.btn-submit-modern svg {
  stroke: currentColor;
  transition: transform .3s
}

.btn-submit-modern:hover svg {
  transform: translateX(4px)
}

.form-note-modern {
  font-size: 14px;
  color: #64748b;
  text-align: center;
  margin-top: 16px;
  margin-bottom: 0
}

/* Contact Info Sidebar */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.info-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
  border: 1px solid rgba(14, 165, 233, .08)
}

.info-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 12px
}

.info-card p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.6;
  margin: 0
}

.map-card {
  padding: 0;
  overflow: hidden
}

.map-wrapper-modern {
  position: relative;
  width: 100%;
  height: 300px;
  background: #f1f5f9
}

.map-wrapper-modern iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0
}

/* Responsive Contact Page */
@media(max-width:1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .quick-contact-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:640px) {
  .contact-form-wrapper {
    padding: 28px 20px
  }

  .quick-contact-grid {
    grid-template-columns: 1fr
  }

  .map-wrapper-modern {
    height: 250px
  }
}

/* ========================================
   SWEETALERT2 CUSTOM STYLES
   ======================================== */

/* Modern SweetAlert2 styling */
.swal2-popup {
  border-radius: 20px !important;
  padding: 2rem !important;
}

.swal2-title {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.swal2-html-container {
  font-size: 1rem !important;
  color: #475569 !important;
  line-height: 1.6 !important;
}

.swal2-confirm {
  border-radius: 12px !important;
  padding: 12px 32px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
}

.swal2-confirm:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3) !important;
}

.swal2-icon {
  border-width: 3px !important;
  width: 80px !important;
  height: 80px !important;
}

.swal2-icon.swal2-success {
  border-color: #10b981 !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: #10b981 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.swal2-icon.swal2-error {
  border-color: #ef4444 !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: #ef4444 !important;
}

.swal2-timer-progress-bar {
  background: linear-gradient(90deg, #10b981, #059669) !important;
}

@media (max-width: 640px) {
  .swal2-popup {
    padding: 1.5rem !important;
  }

  .swal2-title {
    font-size: 1.5rem !important;
  }

  .swal2-html-container {
    font-size: 0.875rem !important;
  }
}

/* ========================================
   ENTERPRISE GARDEN - BRAND & BLOG SYSTEM
   ======================================== */

/* --- Variables & Utilities --- */
:root {
  --ent-bg: #ffffff;
  --ent-surface: #f8fafc;
  --ent-border: #e2e8f0;
  --ent-primary: #0f172a;
  --ent-secondary: #64748b;
  --ent-accent: #0ea5e9;
  --ent-accent-glow: rgba(14, 165, 233, 0.4);
  --ent-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ent-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ent-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ent-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --ent-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Brand Detail Hero Section --- */
.brand-hero {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, #f0f9ff 0%, #ffffff 60%);
}

.brand-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
  filter: blur(60px);
  z-index: 0;
}


/* --- Brand Detail Layout --- */
.brand-detail-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  max-width: 1000px;
  margin: 0 auto;
}

.brand-visual-section {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 10;
}

/* --- Brand Content Panel ("Kabarık Panel") --- */
.brand-content-panel {
  background: #ffffff;
  padding: 3.5rem;
  border-radius: 2rem;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(226, 232, 240, 0.6);
  position: relative;
  width: 100%;
  transition: transform 0.3s ease;
}

.brand-content-panel:hover {
  transform: translateY(-5px);
  box-shadow:
    0 35px 60px -15px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(226, 232, 240, 0.8);
}

.brand-text-content {
  font-size: 1.15rem;
  line-height: 1.8;
  color: #334155;
}

.brand-text-content h2,
.brand-text-content h3 {
  color: #0f172a;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.brand-text-content p {
  margin-bottom: 1.5rem;
}

/* --- Feature Image (Photo Mode) --- */
.brand-feature-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: auto;
  min-height: 400px;
  max-height: 600px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 20px 40px -12px rgba(0, 0, 0, 0.2),
    0 0 0 4px rgba(255, 255, 255, 0.5);
  cursor: zoom-in;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.brand-feature-image-wrapper:hover {
  transform: scale(1.02);
  box-shadow:
    0 30px 60px -12px rgba(0, 0, 0, 0.25),
    0 0 0 6px rgba(14, 165, 233, 0.2);
}

.brand-feature-image-wrapper:hover .brand-feature-img {
  transform: scale(1.08);
}

.zoom-indicator {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
  color: #0f172a;
}

.brand-feature-image-wrapper:hover .zoom-indicator {
  opacity: 1;
  transform: scale(1);
}

/* SFA visual system - aligned with brand detail visuals */
.sfa-feature-visual-section {
  width: 100%;
}

.sfa-feature-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 900px;
  min-height: 400px;
  max-height: 600px;
  padding: 2rem;
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(circle at top, #ffffff 28%, #f1f5f9 100%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow:
    0 20px 40px -12px rgba(0, 0, 0, 0.2),
    0 0 0 4px rgba(255, 255, 255, 0.5);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sfa-feature-img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: contain;
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: drop-shadow(0 22px 38px rgba(15, 23, 42, 0.16));
}

.sfa-feature-image-wrapper:hover {
  transform: scale(1.02);
  box-shadow:
    0 30px 60px -12px rgba(0, 0, 0, 0.25),
    0 0 0 6px rgba(14, 165, 233, 0.2);
}

.sfa-feature-image-wrapper:hover .sfa-feature-img {
  transform: scale(1.05);
  filter: drop-shadow(0 28px 45px rgba(14, 165, 233, 0.16));
}

.sfa-card-image-wrapper {
  position: relative;
  height: 240px;
  overflow: hidden;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  background: radial-gradient(circle at top, #ffffff 24%, #f8fafc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.sfa-card-figure {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sfa-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: drop-shadow(0 18px 28px rgba(15, 23, 42, 0.12));
}

.blog-card-modern:hover .sfa-card-img {
  transform: scale(1.08);
  filter: drop-shadow(0 24px 34px rgba(14, 165, 233, 0.15));
}

@media (max-width: 768px) {
  .sfa-feature-image-wrapper {
    min-height: 320px;
    padding: 1.5rem;
    border-radius: 20px;
  }

  .sfa-feature-img {
    min-height: 260px;
  }

  .sfa-card-image-wrapper {
    height: 220px;
    padding: 1.25rem;
  }
}

@media (max-width: 480px) {
  .sfa-feature-image-wrapper {
    min-height: 280px;
    padding: 1rem;
  }

  .sfa-feature-img {
    min-height: 220px;
  }
}

/* --- Lightbox Styles --- */
.lightbox-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

.lightbox-content {
  max-width: 90%;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  animation: zoomIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #f1f5f9;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;
  z-index: 10000;
}

.lightbox-close:hover {
  color: #38bdf8;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .brand-detail-layout {
    gap: 2rem;
  }

  .brand-content-panel {
    padding: 2rem;
  }

  .brand-feature-image-wrapper {
    min-height: 250px;
  }

  .brand-logo-container {
    padding: 2rem;
  }
}

/* --- Services Grid --- */
.brand-services {
  margin-top: 5rem;
  padding: 3rem;
  background: #ffffff;
  border-radius: 2rem;
  border: 1px solid var(--ent-border);
  box-shadow: var(--ent-shadow-lg);
}

.brand-services h2 {
  text-align: center;
  margin-bottom: 2.5rem;
  margin-top: 0;
}

.service-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 0;
  list-style: none;
}

.service-list li {
  padding: 1.25rem;
  background: #f8fafc;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #475569;
  font-weight: 500;
  transition: var(--ent-transition);
  border: 1px solid transparent;
}

.service-list li:hover {
  background: #ffffff;
  border-color: #e0f2fe;
  box-shadow: var(--ent-shadow-md);
  color: #0284c7;
  transform: translateY(-2px);
}

.service-list li::before {
  content: '';
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center center;
  display: inline-block;
  flex-shrink: 0;
}

/* --- FAQ Section --- */
.faq-section {
  max-width: 800px;
  margin: 5rem auto;
}

.faq-section h2 {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 2.25rem;
  font-weight: 800;
}

.faq-item {
  margin-bottom: 1rem;
  background: #ffffff;
  border: 1px solid var(--ent-border);
  border-radius: 1rem;
  overflow: hidden;
  transition: var(--ent-transition);
}

.faq-item:hover {
  border-color: #cbd5e1;
  box-shadow: var(--ent-shadow-md);
}

.faq-question {
  padding: 1.5rem;
  cursor: pointer;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.125rem;
  background: transparent;
  user-select: none;
}

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

.faq-question::after {
  content: '+';
  font-size: 1.5rem;
  color: #94a3b8;
  transition: transform 0.3s ease;
}

details[open] .faq-question::after {
  transform: rotate(45deg);
  color: #0ea5e9;
}

.faq-answer {
  padding: 0 1.5rem 1.5rem;
  color: #64748b;
  line-height: 1.6;
}

/* --- Brand Grid Cards (List Page) --- */
.brands-grid {
  padding: 4rem 0;
  background: #ffffff;
}

.blog-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2.5rem;
}

.blog-card-modern {
  background: #ffffff;
  border-radius: 1.5rem;
  border: 1px solid var(--ent-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--ent-transition);
  position: relative;
  isolation: isolate;
  height: 100%;
}

.blog-card-modern:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  border-color: rgba(14, 165, 233, 0.3);
}

.blog-card-link {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* Image Wrapper System */
.brand-card-image-wrapper {
  position: relative;
  height: 240px;
  overflow: hidden;
  border-bottom: 1px solid var(--ent-border);
  background: #f8fafc;
}

/* Logo Specific Styles */
.brand-card-image-wrapper.wrapper-logo {
  background: radial-gradient(circle, #ffffff 30%, #f1f5f9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.brand-img-logo {
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 60%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: grayscale(100%) opacity(0.8);
}

.blog-card-modern:hover .brand-img-logo {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.15);
}

/* Photo Specific Styles */
.brand-card-image-wrapper.wrapper-photo {
  background: #000;
}

.brand-img-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  opacity: 0.9;
}

.blog-card-modern:hover .brand-img-photo {
  transform: scale(1.08);
  opacity: 1;
}

/* Card Body */
.blog-card-body-modern {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-title-modern {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #1e293b;
  letter-spacing: -0.02em;
}

.blog-card-excerpt-modern {
  color: #64748b;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-read-more-modern {
  margin-top: auto;
  color: #0ea5e9;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.blog-read-more-modern svg {
  transition: transform 0.3s ease;
}

.blog-card-modern:hover .blog-read-more-modern svg {
  transform: translateX(4px);
}

/* Blog Card Image Wrapper (for Blog Page) */
/* Reuse the intelligent wrapper logic or specific styles for blog if needed */
.blog-card-image-wrapper {
  position: relative;
  height: 240px;
  overflow: hidden;
  border-radius: 1.5rem 1.5rem 0 0;
}

.blog-card-media-modern {
  height: 100%;
  width: 100%;
  margin: 0;
}

.blog-card-media-modern img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blog-card-modern:hover .blog-card-media-modern img {
  transform: scale(1.05);
}

/* --- Brand CTA --- */
.brand-cta {
  background: linear-gradient(120deg, #2563eb, #0ea5e9);
  padding: 5rem 2rem;
  border-radius: 2rem;
  text-align: center;
  color: #ffffff;
  margin-top: 6rem;
  box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.25);
  position: relative;
  overflow: hidden;
}

.brand-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.4;
}

.brand-cta h2 {
  color: #ffffff;
  font-size: 2.25rem;
  font-weight: 800;
}

.brand-cta .btn {
  background: #ffffff;
  color: #2563eb;
  padding: 1rem 2.5rem;
  border-radius: 999px;
  font-weight: 700;
  transition: var(--ent-transition);
  border: none;
}

.brand-cta .btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* ═══════════════════════════════════════════════
   SFA HOMEPAGE — MODERN TABS & PRODUCT CARDS
═══════════════════════════════════════════════ */

/* Category tab nav */
.sfa-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 2.5rem;
  padding: .375rem;
  background: var(--surface, #fff);
  border-radius: 60px;
  border: 1px solid rgba(0,0,0,.09);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.sfa-tab-btn {
  padding: .6rem 1.5rem;
  border: none;
  border-radius: 50px;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s, transform .18s;
  white-space: nowrap;
}

.sfa-tab-btn:hover {
  background: rgba(14,165,233,.09);
  color: #0ea5e9;
  transform: translateY(-1px);
}

.sfa-tab-btn.active {
  background: var(--primary-color, #0ea5e9);
  color: #fff;
  box-shadow: 0 4px 14px rgba(14,165,233,.38);
  transform: translateY(-1px);
}

/* Tab panels — visibility trick keeps layout stable during animation */
.sfa-tab-panel {
  display: none;
}

.sfa-tab-panel.active {
  display: block;
  animation: sfaSlideIn .35s cubic-bezier(.25,.46,.45,.94) both;
}

@keyframes sfaSlideIn {
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}

/* Product grid: 3 cols → 2 → 1 */
.sfa-prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

@media (max-width: 900px)  { .sfa-prod-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (max-width: 480px)  { .sfa-prod-grid { grid-template-columns: 1fr; } }

/* Product card */
.sfa-prod-card {
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.07);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.sfa-prod-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 44px rgba(14,165,233,.18);
  border-color: rgba(14,165,233,.35);
  text-decoration: none;
  color: inherit;
}

.sfa-prod-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e8f4fb;
}

.sfa-prod-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.sfa-prod-card:hover .sfa-prod-card-img img {
  transform: scale(1.07);
}

.sfa-prod-card-body {
  padding: 1.1rem 1.1rem 1.3rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.sfa-prod-card-name {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--heading-color, #0f172a);
}

.sfa-prod-card-desc {
  font-size: .8rem;
  color: var(--text-muted, #64748b);
  line-height: 1.5;
  flex: 1;
}

.sfa-prod-card-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .8rem;
  font-weight: 700;
  color: #0369a1;
  margin-top: .5rem;
  transition: gap .2s;
}

.sfa-prod-card:hover .sfa-prod-card-link { gap: .45rem; }

/* ═══════════════════════════════════════════════
   LEGACY SFA MEGA MENU — kept for reference only
   (HTML has been replaced with standard sub-menu)
═══════════════════════════════════════════════ */
/* (old mega-menu CSS removed — see new SFA section above) */

/* ═══════════════════════════════════════════════
   SERVICE / SFA LOGO-CONTAINER (shared)
   Kullanım: services.php + sfa_urun.php
═══════════════════════════════════════════════ */
.service-logo-section {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}

.service-logo-container {
  background: #ffffff;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f1f5f9;
  max-width: 100%;
}

@media (max-width: 640px) {
  .service-logo-container {
    padding: 1.25rem;
    width: 100%;
  }
}