/* =====================================================
   ZDC Sanal Market - Referans marquee & Entegrasyon grid
   ===================================================== */

/* ---------- Referanslar (hero altı, tam genişlik kayan şerit) ---------- */
.ref-strip{width:100%;padding:28px 0 56px;margin-top:10px}
.ref-head{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.ref-head h5{color:#fff;font-size:26px;letter-spacing:.08em;margin:0}
.ref-marquee{position:relative;overflow:hidden;padding:12px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ref-track{display:flex;width:max-content;will-change:transform;animation:ref-scroll-left 60s linear infinite}
.ref-marquee:hover .ref-track{animation-play-state:paused}
.ref-card{flex:0 0 auto;width:clamp(280px,18vw,400px);height:clamp(127px,8.18vw,182px);margin-right:clamp(20px,1.6vw,34px);background:#fff;border-radius:20px;
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,1.1vw,24px) clamp(22px,1.7vw,36px);
  box-shadow:0 10px 26px rgba(0,0,0,.22);transition:transform .3s ease}
.ref-card img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.ref-card:hover{transform:translateY(-5px) scale(1.04)}
@keyframes ref-scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:991px){
  .ref-card{width:240px;height:109px;margin-right:18px;padding:12px 18px}
  .ref-head h5{font-size:20px}
}
@media (max-width:767px){
  .ref-strip{padding:16px 0 40px}
  .ref-card{width:190px;height:86px;margin-right:14px;border-radius:14px;padding:10px 14px}
  .ref-head h5{font-size:18px}
  .ref-track{animation-duration:40s}
}
@media (prefers-reduced-motion:reduce){
  .ref-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .ref-card{margin-bottom:14px}
  .ref-marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---------- Entegrasyonlar (kategorili kart grid) ---------- */
.int-head{text-align:center;margin-bottom:34px}
.urunler-blok{margin-bottom:96px}
#entegrasyonlar{scroll-margin-top:110px}
.urunler-blok .features-title{text-align:left}
@media (max-width:991px){.urunler-blok{margin-bottom:56px}.urunler-blok .features-title{text-align:center}}
.int-head .title{margin-bottom:8px}
.int-sub{font-size:17px;line-height:29px;color:#6B6B6B;max-width:820px;margin:0 auto}
.int-sub strong{color:#0B6749}
.int-group{margin-bottom:46px}
.int-group-title{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0B6749;margin-bottom:16px}
.int-group-title i{color:#FFC000;font-size:24px}
.int-group-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(11,103,73,.25),rgba(11,103,73,0))}
.int-logos{display:flex;flex-wrap:wrap;gap:16px}
.int-card{background:#fff;border:1px solid rgba(11,103,73,.08);border-radius:18px;width:calc(33.333% - 11px);height:136px;
  display:flex;align-items:center;justify-content:center;padding:22px 32px;
  box-shadow:0 4px 14px rgba(11,103,73,.06);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.int-card img{width:100%;height:100%;object-fit:contain;display:block}
.int-card.pad-xs{padding:6px 12px}
.int-card.pad-sm{padding:12px 20px}
.int-card.pad-lg{padding:32px 48px}
.int-card.pad-xl{padding:40px 64px}
.int-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(11,103,73,.16);border-color:rgba(255,192,0,.6)}
@media (max-width:991px){
  .int-card{width:calc(33.333% - 11px);height:96px}
}
@media (max-width:767px){
  .int-logos{gap:12px}
  .int-card{width:calc(50% - 6px);height:92px;padding:12px 16px}
  .int-card.pad-xs{padding:4px 8px}
  .int-card.pad-sm{padding:8px 12px}
  .int-card.pad-lg{padding:20px 28px}
  .int-card.pad-xl{padding:24px 38px}
  .int-sub{font-size:15px;line-height:25px}
  .int-group-title{font-size:16px}
}

/* ---------- Entegrasyon kutusu arka planı: cihaz görseli artık gerilmiyor ---------- */
@media (min-width:992px){
  .features-box{background:#fff url(../images/features-devices.png) no-repeat;background-size:25% auto;background-position:right 3% top 40px;border-radius:34px}
}
@media (min-width:1200px){
  .features-box{padding:80px 60px 90px}
}

/* ---------- Analitik bölümü: panel ekran görüntüleri (Özellikler ile aynı düzen) ---------- */
.browser-frame{background:#fff;border-radius:14px;box-shadow:0 20px 44px rgba(11,103,73,.16);overflow:hidden;border:1px solid rgba(0,0,0,.06);text-align:left}
.browser-frame::before{content:'';display:block;height:26px;background:#0B6749;background-image:radial-gradient(circle,#FF5F57 5px,transparent 6px),radial-gradient(circle,#FEBC2E 5px,transparent 6px),radial-gradient(circle,#28C840 5px,transparent 6px);background-size:22px 26px;background-position:12px 0,34px 0,56px 0;background-repeat:no-repeat}
.browser-frame img{display:block;width:100%;height:auto}
.panel-shot .browser-frame{margin-bottom:16px}
#analitik{padding-top:90px;padding-bottom:130px}
@media (max-width:991px){#analitik{padding-top:50px;padding-bottom:70px}}
@media (max-width:991px){.panel-shot{margin-bottom:10px}}

/* ---------- SSS (FAQ) ---------- */
.sss-area{padding:70px 0 40px;background:#fff}
.sss-head{text-align:center;max-width:820px;margin:0 auto 34px}
.sss-head .title{font-size:34px;line-height:1.3}
.sss-list{max-width:900px;margin:0 auto}
.sss-item{background:#FFFBEE;border:1px solid rgba(11,103,73,.1);border-radius:14px;margin-bottom:12px;padding:0 24px;transition:box-shadow .2s}
.sss-item[open]{box-shadow:0 10px 26px rgba(11,103,73,.08);background:#fff}
.sss-item summary{cursor:pointer;list-style:none;font-weight:700;font-size:17px;color:#0B6749;padding:18px 36px 18px 0;position:relative;font-family:"Spartan",sans-serif}
.sss-item summary::-webkit-details-marker{display:none}
.sss-item summary::after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:#FFC000;color:#0B6749;text-align:center;line-height:28px;font-weight:800}
.sss-item[open] summary::after{content:'–'}
.sss-item p{padding:0 0 20px;font-size:15px;line-height:26px}
@media (max-width:767px){.sss-head .title{font-size:26px}.sss-item summary{font-size:15px}}

/* ---------- küçük düzeltmeler ---------- */
.int-note{width:100%;font-size:14px;line-height:22px;color:#6B6B6B;margin:12px 0 0}
@media (max-width:991px){.features-box{background-image:none}} /* features-bg-responsive.jpg sunucuda yok (404) */