:root{
  --gap-left-width:300px;
  --gap-tile-width:240px;
  --gap-speed:26s;
}

/* AMP mobil: yatay taşmayı kapat */
@media (max-width:600px){
  html, body{ overflow-x:hidden; }

  .gap-banner{ width:100vw; max-width:100vw; height:120px; }
  .gap-marquee{ left:0; right:0; width:100vw; overflow:hidden; }

  /* Sol paneli biraz daralt (isteğe göre) */
  .gap-banner{ --gap-left-width:210px; }

  /* Aynı anda 5 görsel görünsün: 5 x 20vw = 100vw */
  .gap-banner{ --gap-tile-width:20vw; }

  /* Eğer 4 görsel görmek istersen: 4 x 25vw = 100vw
     .gap-banner{ --gap-tile-width:25vw; }
  */

  .gap-track img,
  .gap-track amp-img,
  .gap-track .gap-tile{
    width:var(--gap-tile-width);
    flex:0 0 var(--gap-tile-width);
    height:120px;
    max-width:none;
    object-fit:cover;
  }
}

/* Sol mavi paneli arkaplanla da çizebil (AMP desteği) */
.gap-left{ position:absolute; top:0; left:0; bottom:0; width:var(--gap-left-width); z-index:2; pointer-events:none; }
.gap-left::before{
  content:"";
  position:absolute; inset:0;
  background-image:var(--gap-left-bg);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  z-index:1;
}

/* AMP için arkaplan karo */
.gap-track .gap-tile{
  height:120px;
  width:var(--gap-tile-width);
  flex:0 0 var(--gap-tile-width);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:block;
}

/* Mevcut img kuralların kalsın; animasyon aynı */

/* Desktop (>=1024px): banner genişliği 780px */
@media (min-width:1024px){
  .gap-banner{
    width:780px;
    margin:0 auto; /* ortala */
  }
}

@media (min-width:1024px){
  .gap-banner{ width:780px; margin:0 auto; }
  .gap-banner{ --gap-tile-width: calc(780px / 5); } /* 5 görsel yan yana */
}

  .gap-banner { --gap-speed: 12s; }

/* Animasyon (sonsuz) – aynı kalsın */
.gap-banner .gap-track{
  animation: gap-scroll var(--gap-speed,26s) linear infinite;
  will-change: transform;
}
@keyframes gap-scroll{
  0%{ transform:translate3d(0,0,0) }
  100%{ transform:translate3d(-50%,0,0) }
}

/* Liste arası küçük boşluk */
.gap-list{ 
	display:flex; 
	flex-direction:column; 
	gap:0px !important 
}

/* Banner alanı */
.gap-banner{
  position:relative;
  height:120px;
  width:860px;
  overflow:hidden;
  box-sizing:border-box;
}

/* Sürekli (sonsuz) akış */
.gap-banner .gap-track{
  display:flex; align-items:center; gap:0;
  will-change: transform;
  animation-name: gap-scroll;
  animation-duration: var(--gap-speed, 26s); /* süreyi kısalt = daha hızlı */
  animation-timing-function: linear;
  animation-iteration-count: infinite;      /* hiç durmasın */
  animation-delay: 0s;
  animation-play-state: running;
}

.gap-left{
  position:absolute; top:0; left:0; bottom:0;
  width:var(--gap-left-width);   /* sadece bu kalsın */
  z-index:2; pointer-events:none;
  width: 380px;
}

.gap-left-bg,
amp-img.gap-left-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; z-index:1; max-width:none;
	display: none;
}


/* 2) İsim çerçevesi (nameli2.png) aynı; istersen genişlik oynatılabilir */
.gap-name {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 159px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Anton', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
    z-index: 2;
}

/* Açıklama – senin verdiğin CSS birebir */
.gap-desc {
    width: 300px;
    top: 40px;
    color: #ffffff;
    font-size: 12px;
    top: 50px;
    font-weight: 700;
    font-family: monospace;
    left: 15px;
    position: absolute;
    line-height: 16px;
    z-index: 2;
    display: inline-block;
    text-shadow: -1px 0px 4px #ffffff;
}

/* Telefon satırı */
/* Telefon satırı sabit kalsın; AMP iç img’lerinden etkilenmesin */
.gap-phone{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  width:calc(var(--gap-left-width) - 24px);
  max-width:calc(var(--gap-left-width) - 24px);
}
.gap-phone-icon{
  width:26px;
  height:26px;
  flex:0 0 22px;
  display:block;
  background-image:var(--gap-call);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.gap-phone > span{
  color:#fff;
  font-family:'Anton',system-ui,sans-serif;
  font-size:17px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:-1px 0 4px #ffffff;
}

.gap-phone img{
  height:22px;
  width:22px;
  flex:0 0 22px;
  display:block;
}

/* Telefon ikonu: img ve amp-img */
.gap-phone img,
.gap-phone amp-img{
    height: 32px !important;	
	width:auto; 
	display:block;
}

.gap-phone span{
  display:inline-block;
  color:#fff;
  font-family:'Anton', system-ui, sans-serif;
  font-size:17px;
  font-weight:500;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:-1px 0px 4px #ffffff;
}

/* MARQUEE: panelden sonra başlasın */
.gap-marquee{
  position:absolute; top:0; right:0; bottom:0;
  left:0;                         /* panelin ALTINDAN başlasın */
  overflow:hidden; z-index:1;
}


/* animasyonun çalıştığından emin ol */
.gap-track{
  height:100%; display:flex; align-items:center; gap:0;
  animation: gap-scroll var(--gap-speed, 26s) linear infinite;
  will-change: transform;
}

/* Kayan görseller: img ve amp-img aynı boyutta */
.gap-track img,
.gap-track amp-img{
  height:120px;
  width:var(--gap-tile-width);
  flex:0 0 var(--gap-tile-width);
  object-fit:cover; display:block; max-width:none;
}

/* İçerik iki kez basıldığı için -50%'e kadar kaydır, dikiş görünmez */
@keyframes gap-scroll{
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}

@media (max-width:480px){
  .gap-banner{ height:110px; }
  :root{
    --gap-left-width:220px;   /* mobil panel */
    --gap-tile-width:90px;    /* 4x90=360px -> ekranda ~4 görsel */
    --gap-speed:18s;          /* mobilde daha hızlı */
  }
.gap-name {
        background-size: 60% 37%;
        width: 105px;
        height: 92px;
        font-size: 10px;
        left: 0px;
        top: 13px;
        padding-bottom: 10px;
    }
    .gap-name span {
        position: relative;
        bottom: 25px;
        padding-right: 40px;
    }
.gap-phone { 
	  bottom:5px; 
	  gap:2px; 
	left: 0px;
	font-size: 16px;
}
	.gap-phone span{
		font-size: 12px;
		font-weight: 500;
	}
.gap-left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--gap-left-width);
    z-index: 2;
    pointer-events: none;
    width: 170px !important;
}
	.gap-desc {
    color: #ffffff;
    font-size: 9px;
		left: 6px;
		max-width: 75px;
}
}