/* ============================================
   SLIDER / CAROUSEL / EFFECTS EK CSS
   ============================================ */

/* ── SCROLL PROGRESS ─── */
#scrollProgress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--turuncu), var(--yesil-neon), var(--turuncu));
  background-size: 200% 100%;
  z-index: 9999;
  transition: width .1s linear;
  animation: shimmer 2s linear infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── HERO CANVAS ─── */
#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}
.hero { cursor: crosshair; }

/* ── HERO TEXT SLIDER ─── */
.hero-slides-wrap {
  position: relative;
  min-height: 120px;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}
.hero-slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}
.hero-slide.prev {
  opacity: 0;
  transform: translateY(-30px);
}

/* Typed cursor */
#typed-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--turuncu);
  margin-left: 4px;
  vertical-align: middle;
  border-radius: 2px;
  animation: blink .8s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ── HİZMETLER CAROUSEL ─── */
.service-carousel-section { overflow: hidden; }
.service-carousel-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.service-carousel-track {
  display: flex;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  user-select: none;
}
.service-carousel-card {
  flex: 0 0 calc(100% / 3);
  padding: 0 12px;
  box-sizing: border-box;
}
@media(max-width:1023px) { .service-carousel-card { flex: 0 0 50%; } }
@media(max-width:767px)  { .service-carousel-card { flex: 0 0 100%; } }

.sc-inner {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,.06);
  transition: var(--transition);
  height: 100%;
}
.sc-inner:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

/* Görsel — gradient + ikon */
.sc-visual {
  height: 180px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-visual-bg {
  position: absolute;
  inset: 0;
  transition: transform .5s ease;
}
.sc-inner:hover .sc-visual-bg { transform: scale(1.08); }
.sc-visual-icon {
  position: relative;
  z-index: 1;
  width: 72px; height: 72px;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  transition: var(--transition);
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.sc-inner:hover .sc-visual-icon {
  transform: scale(1.15) rotate(5deg);
  background: rgba(255,255,255,.35);
}
.sc-body { padding: 24px; }
.sc-body h3 { font-size: 1.15rem; margin-bottom: 10px; }
.sc-body p  { color: var(--gri-orta); font-size: .9rem; line-height: 1.7; margin-bottom: 20px; }
.sc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.07);
}
.sc-price { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--turuncu); }
.sc-price small { font-family: var(--font-body); font-size: .75rem; font-weight: 400; color: var(--gri-orta); }
.sc-dur { font-size: .8rem; color: var(--gri-orta); display: flex; align-items: center; gap: 4px; }

/* Carousel controls */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}
.carousel-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255,107,53,.3);
  background: white;
  color: var(--turuncu);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.carousel-btn:hover:not(:disabled) {
  background: var(--turuncu);
  color: white;
  border-color: var(--turuncu);
  transform: scale(1.1);
}
.carousel-btn:disabled { opacity: .3; cursor: not-allowed; }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,107,53,.25);
  cursor: pointer;
  transition: var(--transition);
  border: none;
}
.carousel-dot.active {
  width: 24px;
  border-radius: 4px;
  background: var(--turuncu);
}

/* ── TESTİMONİAL CAROUSEL ─── */
.tc-wrap {
  position: relative;
  overflow: hidden;
}
.tc-track {
  display: flex;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  user-select: none;
}
.tc-card {
  flex: 0 0 calc(100% / 3);
  padding: 0 12px;
  box-sizing: border-box;
}
@media(max-width:1023px) { .tc-card { flex: 0 0 50%; } }
@media(max-width:639px)  { .tc-card { flex: 0 0 100%; } }

.tc-inner {
  background: white;
  border-radius: var(--radius);
  padding: 32px;
  position: relative;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,.06);
  transition: var(--transition);
  height: 100%;
}
.tc-inner:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.tc-inner::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: rgba(255,107,53,.12);
  position: absolute;
  top: 12px; left: 20px;
}
.tc-stars { color: #FFB800; margin-bottom: 14px; font-size: .9rem; }
.tc-text  { color: var(--gri); font-size: .95rem; line-height: 1.8; margin-bottom: 22px; font-style: italic; }
.tc-author { display: flex; align-items: center; gap: 14px; }
.tc-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--gradient-1);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 1.1rem;
  flex-shrink: 0; overflow: hidden;
}
.tc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tc-name  { font-weight: 700; font-size: .95rem; color: var(--siyah); }
.tc-title { font-size: .8rem; color: var(--turuncu); }
.tc-service { display: inline-block; background: rgba(255,107,53,.1); color: var(--turuncu); font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 50px; margin-bottom: 12px; }

.tc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}

/* ── BLOG KART GÖRSELLER ─── */
.blog-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.blog-card-img-bg {
  position: absolute;
  inset: 0;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card-img-bg { transform: scale(1.08); }
.blog-card-img-icon {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 10px;
}
.blog-card-img-icon i {
  font-size: 2.5rem;
  color: rgba(255,255,255,.8);
  transition: var(--transition);
}
.blog-card:hover .blog-card-img-icon i { transform: scale(1.15) rotate(-5deg); }
.blog-card-img-icon span {
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .5px;
}
.blog-card-img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.08); }

/* ── TILT CARD ─── */
.tilt-card {
  transition: transform .2s ease, box-shadow .2s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── PARALLAX HERO LAYER ─── */
.hero-parallax-layer {
  position: absolute;
  inset: -20%;
  width: 140%; height: 140%;
  will-change: transform;
}

/* ── MARQUEE STATS (bonus) ─── */
.marquee-wrap {
  overflow: hidden;
  background: var(--gri-koyu);
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
  gap: 0;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 40px;
  white-space: nowrap;
  color: rgba(255,255,255,.55);
  font-size: .85rem;
  font-weight: 500;
}
.marquee-item i { color: var(--turuncu); }
.marquee-sep { color: rgba(255,255,255,.15); padding: 0 8px; }

/* ── SECTION TRANSİSYON DALGASI ─── */
.wave-divider { line-height: 0; overflow: hidden; }
.wave-divider svg { display: block; width: 100%; }

/* ── FLOATING BADGES (hero) ─── */
.hero-float-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  animation: fadeInUp .8s ease .5s both;
}
.hero-badge-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  color: white;
  padding: 7px 16px;
  border-radius: 50px;
  font-size: .82rem;
  font-weight: 500;
  transition: var(--transition);
}
.hero-badge-pill:hover {
  background: rgba(255,107,53,.3);
  border-color: rgba(255,107,53,.5);
  transform: translateY(-2px);
}
.hero-badge-pill i { color: var(--yesil-neon); font-size: .9rem; }

/* ── GRADIENT GÖRSEL - kategori renkleri ─── */
.grad-1 { background: linear-gradient(135deg,#FF6B35,#FF8C00); }
.grad-2 { background: linear-gradient(135deg,#2E7D32,#66BB6A); }
.grad-3 { background: linear-gradient(135deg,#FF8C00,#FFB800); }
.grad-4 { background: linear-gradient(135deg,#1565C0,#42A5F5); }
.grad-5 { background: linear-gradient(135deg,#7B1FA2,#CE93D8); }
.grad-6 { background: linear-gradient(135deg,#00695C,#4DB6AC); }
.grad-blog-1 { background: linear-gradient(135deg,#E65100,#FF6B35); }
.grad-blog-2 { background: linear-gradient(135deg,#1B5E20,#4CAF50); }
.grad-blog-3 { background: linear-gradient(135deg,#0D47A1,#1976D2); }
.grad-blog-4 { background: linear-gradient(135deg,#4A148C,#9C27B0); }
.grad-blog-5 { background: linear-gradient(135deg,#E65100,#FFB300); }
.grad-blog-6 { background: linear-gradient(135deg,#006064,#00BCD4); }

/* Noise texture overlay */
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .08;
  pointer-events: none;
  z-index: 2;
}