/* ==================== GENEL RESET ==================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', 'Quicksand', sans-serif;
  background: #f7f7fa;
  color: #222;
  line-height: 1.7;
}
.featured-devices-block {
  padding: 48px 0 28px 0;
  background: linear-gradient(110deg, #fff7fb 0%, #f7fafd 100%);
  position: relative;
  overflow: hidden;
}
.block-title {
  text-align: center;
  margin-bottom: 30px;
}
.block-title h2 {
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #ba0033;
  letter-spacing: 1.1px;
  margin-bottom: 7px;
  text-shadow: 0 2px 14px #c7000010;
}
.block-title p {
  color: #444;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: .1px;
  opacity: 0.82;
  margin-bottom: 0;
}

.device-cards-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 6px;
  box-sizing: border-box;
}

/* Küçük, zarif kart */
.device-img-card {
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 3px 14px #c7000012;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .18s, transform .16s cubic-bezier(.5,1.1,.5,1.04);
  width: 138px;
  min-width: 110px;
  max-width: 99vw;
  position: relative;
  flex: 1 1 110px;
  opacity: 0;
  transform: translateY(32px) scale(.97);
  animation: cardFadeIn .6s cubic-bezier(.33,1.11,.58,1) .05s forwards;
}
@keyframes cardFadeIn {
  to { opacity: 1; transform: translateY(0) scale(1);}
}
.device-img-card:hover,
.device-img-card:focus-visible {
  box-shadow: 0 7px 18px #c7000022;
  transform: scale(1.04) translateY(-2px);
  z-index: 2;
}

.device-img-rect {
  width: 100%;
  aspect-ratio: 16/11;
  background: linear-gradient(108deg, #fff6fb 60%, #ffe4ec 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  margin-bottom: 0;
}
.device-img-rect img {
  width: 90%;
  height: 85%;
  object-fit: contain;
  display: block;
  transition: transform .18s cubic-bezier(.38,1.3,.51,1.09);
  box-shadow: 0 6px 12px #c7000007;
}
.device-img-card:hover .device-img-rect img {
  transform: scale(1.06);
}

.device-caption {
  padding: 7px 0 7px 0;
  background: #fff;
  color: #b60011;
  font-weight: 700;
  font-size: .98rem;
  text-align: center;
  border-radius: 0 0 13px 13px;
  box-shadow: 0 1px 5px #c7000004;
  letter-spacing: 0.1px;
  margin-top: auto;
  user-select: none;
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ======= RESPONSIVE ======= */
@media (max-width: 1100px) {
  .device-cards-list { gap: 12px; }
  .device-img-card { width: 116px; min-width: 92px; border-radius: 10px; }
  .device-img-rect { border-radius: 10px 10px 0 0; }
  .device-caption { border-radius: 0 0 10px 10px; font-size: .91rem;}
}
@media (max-width: 850px) {
  .block-title h2 { font-size: 1.09rem; }
  .device-img-card { width: 24vw; min-width: 70px; border-radius: 7px; }
  .device-img-rect { border-radius: 7px 7px 0 0;}
  .device-caption { border-radius: 0 0 7px 7px; font-size: .88rem; }
}
@media (max-width: 700px) {
  .featured-devices-block { padding: 24px 0 11px 0;}
  .block-title h2 { font-size: .99rem; }
  .block-title p { font-size: .87rem;}
  .device-cards-list { gap: 5px; padding: 0 1vw; }
  .device-img-card {
    width: 38vw;
    min-width: 36vw;
    border-radius: 6px;
    font-size: 0.93rem;
  }
  .device-img-rect { aspect-ratio: 16/11; border-radius: 6px 6px 0 0; }
  .device-caption { font-size: 0.89rem; border-radius: 0 0 6px 6px; padding: 7px 0 7px 0;}
}
@media (max-width: 440px) {
  .device-img-card { width: 74vw; min-width: 68vw; border-radius: 5px; }
  .device-img-rect { aspect-ratio: 16/13; border-radius: 5px 5px 0 0;}
  .device-caption { border-radius: 0 0 5px 5px; }
}



/* ==================== ANA SLIDER BLOĞU + RESPONSIVE ==================== */
.main-slider-section {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(120deg,#c70000 0 60%, #fff 100%);
  padding: 0;
  min-height: 380px;
  box-shadow: 0 12px 32px 0 rgba(60,10,10,0.09);
}
.main-slider-container {
  width: 100%;
  max-width: 1400px;
  min-height: 340px;
  position: relative;
  margin: 0 auto;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 8px 32px 0 rgba(60,10,10,0.10);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-slider-images {
  width: 100%;
  height: 370px;
  display: flex;
  position: relative;
}
.slider-img {
  width: 100%;
  height: 370px;
  object-fit: contain;
  display: none;
  transition: opacity .6s cubic-bezier(.4,0,.2,1);
  border-radius: 32px;
}
.slider-img[style*="display: block"] {
  animation: sliderFadeIn .8s cubic-bezier(.42,.7,.49,1.04) both;
}
@keyframes sliderFadeIn {
  from { opacity: 0; transform: scale(1.025);}
  to   { opacity: 1; transform: scale(1);}
}
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: #fff;
  border: none;
  font-size: 2.4rem;
  color: #c70000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 2px 16px #c7000020;
  cursor: pointer;
  transition: box-shadow .2s, background .2s;
  opacity: 0.82;
  outline: none;
}
.slider-btn:hover { box-shadow: 0 8px 22px #c7000032; background: #fff3f3;}
.slider-btn.prev { left: 24px; }
.slider-btn.next { right: 24px; }
.slider-indicators {
  position: absolute;
  left: 50%; bottom: 26px; z-index: 4;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
}
.slider-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #e7b5b5;
  cursor: pointer;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px #c7000020;
  transition: background .16s, transform .16s;
}
.slider-dot.active {
  background: #c70000;
  transform: scale(1.22);
  border-color: #c70000;
}

@media (max-width: 1100px) {
  .main-slider-section { min-height: 210px;}
  .main-slider-container { border-radius: 18px; min-height: 140px; }
  .main-slider-images, .slider-img { height: 180px; border-radius: 18px; }
  .slider-btn { font-size: 1.5rem; width: 36px; height: 36px; left: 7px; right: 7px;}
  .slider-btn.prev { left: 8px; }
  .slider-btn.next { right: 8px; }
  .slider-indicators { bottom: 8px; gap: 8px;}
  .slider-dot { width: 11px; height: 11px; border-width: 1.2px;}
}
@media (max-width: 750px) {
  .main-slider-section { min-height: 120px; padding: 0;}
  .main-slider-container { border-radius: 8px; min-height: 80px; max-width: 100vw;}
  .main-slider-images, .slider-img { height: 90px; border-radius: 8px;}
  .slider-btn { font-size: 1rem; width: 22px; height: 22px; left: 2px; right: 2px;}
  .slider-btn.prev { left: 2px; }
  .slider-btn.next { right: 2px; }
  .slider-indicators { bottom: 2px; gap: 4px;}
  .slider-dot { width: 7px; height: 7px; border-width: 1px;}
}

/* =================== PARALLAX BLOKLAR + RESPONSIVE =================== */
.parallax-section {
  position: relative;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  min-height: 250px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
  background-repeat: no-repeat;
}
.parallax-section::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 5%;
  right: 5%;
  bottom: 5%;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.parallax-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  width: 100%;
  padding: 0 16px;
}
.parallax-subtitle {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: #ffffff;
  opacity: 0.8;
  margin-bottom: 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.parallax-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  line-height: 1.2;
}
.parallax-text {
  font-size: 1rem;
  font-weight: 400;
  color: #f0f0f0;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 992px) {
  .parallax-section { max-width: 100%; min-height: 200px; padding: 25px 12px;}
  .parallax-title { font-size: 1.6rem; }
  .parallax-text { font-size: 0.9rem;}
}
@media (max-width: 576px) {
  .parallax-section { min-height: 150px; padding: 20px 8px;}
  .parallax-title { font-size: 1.4rem;}
  .parallax-text { font-size: 0.85rem;}
}

/* ========== VİZYON ve MİSYON PARALLAX BLOKLARI ========== */
.catalog-image-block.parallax-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 46px;
  margin: 60px auto 0 auto;
  padding: 70px 42px;
  background: linear-gradient(120deg, #fff 60%, #c7000013 100%);
  background-attachment: fixed;
  border-radius: 32px;
  box-shadow: 0 14px 40px 0 rgba(60,10,10,0.11);
  max-width: 1400px;
  min-height: 360px;
  overflow: hidden;
  position: relative;
}
.vision-block .parallax-img, .mission-block .parallax-img {
  flex: 1 1 40%;
  min-width: 280px;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInLeft 1.1s both;
}
.vision-block .block-info, .mission-block .block-info {
  flex: 1 1 60%;
  padding: 0 16px;
  animation: fadeInRight 1.1s both;
}
.vision-block .parallax-img img, .mission-block .parallax-img img {
  width: 100%;
  max-height: 390px;
  border-radius: 24px;
  box-shadow: 0 6px 26px #c7000018;
  object-fit: cover;
}
.vision-block .block-info h2,
.mission-block .block-info h2 {
  color: #c70000;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 20px;
}
.vision-block .block-info p,
.mission-block .block-info p {
  font-size: 1.16rem;
  color: #353535;
  background: #fff7f7bb;
  border-radius: 13px;
  padding: 22px 18px;
  box-shadow: 0 2px 10px #c7000010;
  line-height: 1.85;
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-36px);}
  to   { opacity: 1; transform: translateX(0);}
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(36px);}
  to   { opacity: 1; transform: translateX(0);}
}
@media (max-width: 1100px) {
  .catalog-image-block.parallax-block { gap: 20px; flex-direction: column; min-height: unset; padding: 24px 2vw;}
  .vision-block .parallax-img, .mission-block .parallax-img,
  .vision-block .block-info, .mission-block .block-info { max-width: 100%; }
  .vision-block .block-info h2, .mission-block .block-info h2 { font-size: 1.19rem;}
  .vision-block .block-info p, .mission-block .block-info p { font-size: 1.01rem;}
}
@media (max-width: 650px) {
  .catalog-image-block.parallax-block { border-radius: 11px; padding: 10px 1vw;}
  .vision-block .block-info h2, .mission-block .block-info h2 { font-size: 1rem;}
  .vision-block .parallax-img img, .mission-block .parallax-img img { max-height: 160px;}
}

/* =================== SABİT İLETİŞİM BUTONLARI =================== */
.floating-contact-buttons {
  position: fixed;
  bottom: 32px; right: 28px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.contact-btn {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 12px #c7000014;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .17s;
}
.contact-btn:hover { box-shadow: 0 8px 24px #c7000028; }
.contact-btn img { width: 36px; height: 36px; }
@media (max-width: 700px) {
  .floating-contact-buttons { bottom: 16px; right: 8px; gap: 8px; }
  .contact-btn { width: 38px; height: 38px; }
  .contact-btn img { width: 24px; height: 24px; }
}
.video-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  padding: 64px 40px;
  margin: 60px auto 0 auto;
  background: linear-gradient(115deg, #fff 75%, #ffe6e6 100%);
  border-radius: 32px;
  box-shadow: 0 12px 38px 0 rgba(199,0,0,0.08);
  max-width: 1400px;
  min-height: 320px;
  overflow: hidden;
  position: relative;
  transition: box-shadow .22s;
}
.video-block:hover {
  box-shadow: 0 24px 62px 0 rgba(199,0,0,0.12);
}

/* --- Video kısmı küçültüldü --- */
.video-block .video-wrapper {
  flex: 0 0 320px;
  min-width: 200px;
  max-width: 380px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(199,0,0,0.11);
  background: #000;
  animation: fadeInLeft 1.2s both;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-block .video-wrapper video {
  width: 100%;
  min-height: 135px;
  border-radius: 18px;
  display: block;
  background: #000;
  box-shadow: none;
}

/* --- Açıklama kısmı: göz alıcı ve modern --- */
.video-block .block-info {
  flex: 1 1 58%;
  padding: 0 18px;
  animation: fadeInRight 1.2s both;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.video-block .block-info h2 {
  color: #c70000;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: 0.8px;
  position: relative;
  text-transform: uppercase;
  text-shadow: 0 4px 18px #c7000030;
}
.video-block .block-info h2::before {
  content: '';
  position: absolute;
  left: 0; bottom: -7px;
  width: 44px;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, #c70000 70%, #fff 100%);
  opacity: 0.82;
}

.video-block .block-info p {
  font-size: 1.17rem;
  color: #79181d;
  background: linear-gradient(96deg, #ffe5ec 40%, #fff 100%);
  padding: 16px 18px;
  border-radius: 13px;
  font-weight: 500;
  margin-bottom: 22px;
  box-shadow: 0 4px 24px #c7000010;
  text-shadow: 0 1px 5px #c7000012;
  letter-spacing: 0.3px;
  border-left: 6px solid #c70000;
  transition: background .21s;
}

.video-block .block-info ul {
  margin: 0 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.video-block .block-info ul li {
  font-size: 1.07rem;
  margin-bottom: 5px;
  color: #bb3030;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-left: 26px;
}
.video-block .block-info ul li::before {
  content: '★';
  color: #c70000;
  font-size: 1.12em;
  position: absolute;
  left: 0;
  top: 1px;
  font-weight: bold;
  filter: drop-shadow(0 1px 4px #c7000030);
}

/* ====== RESPONSIVE ====== */
@media (max-width: 1100px) {
  .video-block { flex-direction: column; gap: 36px; padding: 42px 12px; min-height: unset; }
  .video-block .video-wrapper, .video-block .block-info { max-width: 100%; }
  .video-block .video-wrapper { min-width: unset; flex-basis: 220px; }
  .video-block .block-info { padding: 0 2vw; }
  .video-block .block-info h2 { font-size: 1.32rem;}
  .video-block .block-info p { font-size: 1.02rem; padding: 13px 7px;}
}

@media (max-width: 700px) {
  .video-block { padding: 18px 1vw; gap: 14px; border-radius: 11px; margin: 19px 0 0 0;}
  .video-block .video-wrapper { max-width: 97vw; }
  .video-block .video-wrapper video { min-height: 92px; }
  .video-block .block-info h2 { font-size: 1.09rem;}
  .video-block .block-info p { font-size: .96rem; padding: 9px 5px;}
  .video-block .block-info ul li { font-size: .99rem; }
}


/* =========== COVERFLOW HERO SECTION =========== */
.coverflow-hero-section {
  position: relative;
  width: 100%;
  min-height: 400px;
  padding: 64px 0 48px 0;
  background: linear-gradient(110deg, #fff7fb 0%, #f7fafd 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

.animated-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    /* Şerit 1 */
    linear-gradient(
      120deg,
      #bcbcbc75 0%,
      rgba(93, 93, 93, 0.448) 30%,
      transparent 30%,
      transparent 70%,
      #ffffffab 70%,
      rgba(220, 53, 53, 0.821) 100%
    ),

    /* Işık parlamaları */
    radial-gradient(ellipse at 70% 20%, rgba(160, 160, 160, 0.15), transparent 70%),
    radial-gradient(ellipse at 20% 80%, rgba(230, 230, 245, 0.15), transparent 80%),
    radial-gradient(ellipse at center, rgba(245, 245, 250, 0.08), transparent 80%);

  background-size: 300% 300%, cover, cover, cover;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, center center, center center, center center;

  animation:
    stripes-shift 30s linear infinite,
    lights-pulse 12s ease-in-out infinite alternate;
  opacity: 1;
}

/* Şeritlerin diyagonal kayma animasyonu */
@keyframes stripes-shift {
  0%   { background-position: 0 0, center center, center center, center center; }
  100% { background-position: -500px 300px, center center, center center, center center; }
}

/* Işık lekelerinin soluklaşma/patlama efekti */
@keyframes lights-pulse {
  0%   { opacity: 0.9; }
  100% { opacity: 1; }
}
/* Mobil uyumluluk (isteğe bağlı opaklık artırımı) */
@media (max-width: 768px) {
  .animated-bg {
    background-size: 300% 300%;
    opacity: 1; /* Görünürlüğü korumak için */
  }
}

.coverflow-slider {
  position: relative;
  width: 960px;
  max-width: 98vw;
  height: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1400px;
  z-index: 2;
}

.coverflow-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  transition:
    transform 1s cubic-bezier(.41,1.15,.42,1),
    opacity 0.6s cubic-bezier(.33,1.1,.58,1),
    z-index 0.35s;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity;
}

/* SADECE RESİM, HİÇBİR KUTU, BORDER, GÖLGE YOK */
.coverflow-slide img {
  width: 220px;
  height: 288px;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  background: none;
  border: none;
  transition: transform .7s cubic-bezier(.4,1.1,.6,1);
  display: block;
}

/* --------- Yeni: aralar daha fazla --------- */
.coverflow-slide.center {
  transform: translate(-50%, -50%) scale(1.15) rotateY(0deg);
  z-index: 4;
  pointer-events: auto;
}
.coverflow-slide.left1 {
  transform: translate(calc(-50% - 250px), -50%) scale(0.93) rotateY(24deg);
  z-index: 3;
}
.coverflow-slide.left2 {
  transform: translate(calc(-50% - 470px), -50%) scale(0.81) rotateY(36deg);
  z-index: 2;
}
.coverflow-slide.right1 {
  transform: translate(calc(-50% + 250px), -50%) scale(0.93) rotateY(-24deg);
  z-index: 3;
}
.coverflow-slide.right2 {
  transform: translate(calc(-50% + 470px), -50%) scale(0.81) rotateY(-36deg);
  z-index: 2;
}

/* Animasyon: Kartlar aynı anda 'pop-in' ile oluşur */
.coverflow-slide.animate-in {
  animation: popIn .7s cubic-bezier(.39,1.51,.52,1.08);
}
@keyframes popIn {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: scale(0.85) translateY(44px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@media (max-width: 1100px) {
  .coverflow-slider { width: 99vw; height: 300px; }
  .coverflow-slide img { width: 142px; height: 200px; }
  .coverflow-slide.center { transform: translate(-50%, -50%) scale(1.17) rotateY(0deg);}
  .coverflow-slide.left1  { transform: translate(calc(-50% - 135px), -50%) scale(1.01) rotateY(17deg);}
  .coverflow-slide.left2  { transform: translate(calc(-50% - 245px), -50%) scale(0.86) rotateY(27deg);}
  .coverflow-slide.right1 { transform: translate(calc(-50% + 135px), -50%) scale(1.01) rotateY(-17deg);}
  .coverflow-slide.right2 { transform: translate(calc(-50% + 245px), -50%) scale(0.86) rotateY(-27deg);}
}
@media (max-width: 600px) {
  .coverflow-hero-section { min-height: 120px; padding: 10px 0;}
  .coverflow-slider { height: 140px; }
  .coverflow-slide img { width: 80px; height: 110px; }
  .coverflow-slide.center { transform: translate(-50%, -50%) scale(1.20) rotateY(0deg);}
  .coverflow-slide.left1  { transform: translate(calc(-50% - 70px), -50%) scale(0.97) rotateY(13deg);}
  .coverflow-slide.left2  { transform: translate(calc(-50% - 118px), -50%) scale(0.80) rotateY(18deg);}
  .coverflow-slide.right1 { transform: translate(calc(-50% + 70px), -50%) scale(0.97) rotateY(-13deg);}
  .coverflow-slide.right2 { transform: translate(calc(-50% + 118px), -50%) scale(0.80) rotateY(-18deg);}
}