/* =========================================================
   ÖDEMEİX - ENTEGRE BANKALAR & ÖDEME KURULUŞLARI
   ========================================================= */
.integration-page{background:#fff;overflow:hidden}
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
[data-reveal].is-visible{opacity:1;transform:none}

.integration-hero{
  position:relative;overflow:hidden;padding:88px 0 78px;
  background:
    radial-gradient(circle at 88% 15%,rgba(101,50,183,.13),transparent 28%),
    radial-gradient(circle at 8% 88%,rgba(72,126,218,.06),transparent 23%),
    linear-gradient(180deg,#fbf8ff,#fff);
}
.integration-hero-bg{position:absolute;inset:0;pointer-events:none}
.integration-hero-bg i{position:absolute;border-radius:50%;border:1px solid rgba(101,50,183,.07)}
.integration-hero-bg i:nth-child(1){width:520px;height:520px;right:-230px;top:-240px}
.integration-hero-bg i:nth-child(2){width:350px;height:350px;right:-90px;top:-110px}
.integration-hero-bg i:nth-child(3){width:230px;height:230px;left:-110px;bottom:-130px}
.integration-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:.86fr 1.14fr;gap:58px;align-items:center}
.integration-kicker{display:inline-flex;padding:8px 12px;border:1px solid #e3d6ee;border-radius:999px;background:#f5effb;color:var(--purple);font-size:9px;font-weight:900;letter-spacing:.11em}
.integration-hero-copy h1{font-size:57px;line-height:1.04;letter-spacing:-2px;margin:16px 0 18px}
.integration-hero-copy h1 strong{color:var(--purple)}
.integration-hero-copy p{max-width:610px;margin:0;color:var(--muted);font-size:15px;line-height:1.72}
.integration-hero-actions{display:flex;align-items:center;gap:20px;margin-top:27px}
.integration-text-link{color:var(--purple);font-size:11px;font-weight:900}
.integration-proof{display:flex;flex-wrap:wrap;gap:9px 18px;margin-top:23px;color:#796d81;font-size:9px;font-weight:800}

/* MOTION AREA */
.integration-motion-stage{
  position:relative;min-height:420px;display:flex;flex-direction:column;justify-content:center;gap:18px;
  overflow:hidden;border:1px solid #e6dcef;border-radius:26px;
  background:linear-gradient(145deg,#fff,#f7f1fb);
  box-shadow:0 28px 60px rgba(65,31,99,.10);
}
.logo-marquee{position:relative;overflow:hidden;width:100%}
.logo-track{display:flex;width:max-content;gap:12px;will-change:transform}
.marquee-right .logo-track{animation:moveRight 30s linear infinite}
.marquee-left .logo-track{animation:moveLeft 30s linear infinite}
.second-row .logo-track{animation-duration:36s}
@keyframes moveLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes moveRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.integration-logo-pill{
  width:165px;height:82px;flex:0 0 165px;display:flex;align-items:center;justify-content:center;
  padding:14px;border:1px solid #eadff0;border-radius:16px;background:#fff;
  box-shadow:0 8px 22px rgba(65,31,99,.055);
}
.integration-logo-pill img{max-width:125px;max-height:42px;object-fit:contain}
.integration-logo-pill span{display:none}
.motion-fade{position:absolute;top:0;bottom:0;width:85px;z-index:4;pointer-events:none}
.motion-fade.left{left:0;background:linear-gradient(90deg,#f9f5fc,transparent)}
.motion-fade.right{right:0;background:linear-gradient(-90deg,#f9f5fc,transparent)}
.motion-center-card{
  position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);
  width:205px;padding:18px;text-align:center;border-radius:18px;
  background:rgba(72,26,119,.93);color:#fff;border:1px solid rgba(255,255,255,.17);
  box-shadow:0 22px 44px rgba(56,18,95,.24);backdrop-filter:blur(12px)
}
.motion-center-card span,.motion-center-card b,.motion-center-card small{display:block}
.motion-center-card span{color:#dcbdf5;font-size:8px;font-weight:900;letter-spacing:.12em}
.motion-center-card b{font-size:16px;margin:5px 0}
.motion-center-card small{font-size:8px;color:rgba(255,255,255,.68);line-height:1.4}

/* INTRO */
.integration-intro{padding:70px 0 30px}
.integration-intro-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:end}
.integration-intro h2{font-size:39px;line-height:1.15;margin:8px 0}
.integration-intro h2 strong{color:var(--purple)}
.integration-intro p{margin:0;color:var(--muted);font-size:13px;line-height:1.75}

/* PAYOS-INSPIRED LISTING GRID */
.integration-list-section{padding:48px 0 82px}
.integration-list-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:25px}
.integration-list-head h2{font-size:38px;margin:7px 0 7px}
.integration-list-head p{margin:0;color:var(--muted);font-size:12px}
.integration-search{width:290px;height:45px;display:flex;align-items:center;gap:8px;padding:0 13px;border:1px solid #e4d9eb;border-radius:12px;background:#fff}
.integration-search span{color:var(--purple);font-size:18px}
.integration-search input{width:100%;border:0;outline:0;background:transparent;font:inherit;font-size:11px}
.integration-list-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.integration-list-card{
  min-height:205px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 18px;border:1px solid #e7deed;border-radius:18px;background:#fff;text-align:center;
  box-shadow:0 10px 28px rgba(65,31,99,.045);transition:.25s ease
}
.integration-list-card:hover{
  transform:translateY(-5px);border-color:#cdb5e3;
  box-shadow:0 20px 42px rgba(65,31,99,.10)
}
.integration-list-logo{height:82px;width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.integration-list-logo img{max-width:72%;max-height:58px;object-fit:contain;filter:grayscale(1);opacity:.78;transition:.25s}
.integration-list-card:hover img{filter:none;opacity:1;transform:scale(1.04)}
.integration-list-card h3{margin:0;color:#33293c;font-size:15px}
.integration-card-type{margin-top:8px;padding:6px 9px;border-radius:999px;background:#f4eef9;color:#876d9d;font-size:8px;font-weight:800}

/* BOTTOM */
.integration-bottom{padding:0 0 78px}
.integration-bottom-card{
  display:flex;align-items:center;justify-content:space-between;gap:35px;padding:40px 44px;border-radius:24px;
  background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.16),transparent 25%),linear-gradient(135deg,#6c35b7,#45157d);
  color:#fff;box-shadow:0 24px 52px rgba(74,29,130,.19)
}
.integration-bottom-card>div{max-width:720px}
.integration-bottom-card>div>span{font-size:8px;font-weight:900;letter-spacing:.12em;color:#dbc5ef}
.integration-bottom-card h2{font-size:30px;color:#fff;margin:7px 0 8px}
.integration-bottom-card p{margin:0;color:rgba(255,255,255,.72);font-size:11px;line-height:1.6}

/* Payment page slight differentiation */
.payment-page .integration-kicker{background:#efeefe;color:#5545b6;border-color:#dddaff}
.payment-page .integration-list-card:hover{border-color:#bfc1ef}
.payment-page .integration-card-type{background:#efeffc;color:#5d57b0}
.payment-page .motion-center-card{background:rgba(53,48,135,.93)}
.payment-page .integration-bottom-card{background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.15),transparent 25%),linear-gradient(135deg,#5045a4,#6a35b6)}

@media(max-width:1050px){
  .integration-hero-grid{grid-template-columns:1fr 1fr;gap:35px}
  .integration-hero-copy h1{font-size:47px}
  .integration-list-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .integration-hero{padding:62px 0}
  .integration-hero-grid,.integration-intro-grid{grid-template-columns:1fr}
  .integration-hero-copy{text-align:center}
  .integration-hero-copy p{margin-left:auto;margin-right:auto}
  .integration-hero-actions,.integration-proof{justify-content:center}
  .integration-motion-stage{max-width:650px;width:100%;margin:auto;min-height:360px}
  .integration-intro-grid{gap:15px;text-align:center}
  .integration-list-head{align-items:flex-start;flex-direction:column}
  .integration-search{width:100%}
  .integration-list-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .integration-hero-copy h1{font-size:34px}
  .integration-hero-copy p{font-size:13px}
  .integration-hero-actions{flex-direction:column}.integration-hero-actions .btn{width:100%}
  .integration-motion-stage{min-height:300px;border-radius:20px}
  .integration-logo-pill{width:135px;height:68px;flex-basis:135px}
  .integration-logo-pill img{max-width:100px;max-height:36px}
  .motion-center-card{width:175px;padding:15px}
  .integration-intro h2,.integration-list-head h2{font-size:30px}
  .integration-list-grid{grid-template-columns:1fr 1fr;gap:10px}
  .integration-list-card{min-height:165px;padding:18px 10px}
  .integration-list-logo{height:65px}
  .integration-list-card h3{font-size:12px}
  .integration-bottom-card{align-items:flex-start;flex-direction:column;padding:32px 24px}
  .integration-bottom-card .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .logo-track{animation:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}