/* TURBOND — karşılama sayfası: tek görsel + katalog indirme alanı */

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  height:100%;
  background:#fff;
}

body{ overflow:hidden; }

/* Görsel ekrana yerleşir; .frame tam olarak görselin kapladığı kutudur,
   böylece "kataloğu indir" bağlantısı görselin üstünde doğru yerde durur. */
.stage{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;   /* telefonda görsel ÜSTE yapışır */
  overflow:hidden;
}

.frame{
  position:relative;
  width:100%;
  aspect-ratio:3456 / 2234;
  flex:none;
}

.karsilama{
  display:block;
  width:100%;
  height:100%;
}

picture{ display:contents; }

/* Geniş ekran: görsel ekranı doldurur, taşan kısım eşit kırpılır. */
@media (min-aspect-ratio: 3456/2234){
  .stage{ align-items:center; }
}

/* Çok geniş / kısa ekran: görselin tamamı sığsın, yanlarda beyaz kalsın. */
@media (min-aspect-ratio: 19/10){
  .frame{ width:auto; height:100%; }
}

/* ---- görselin üzerindeki "kataloğu indir" butonu ---- */

.katalog{
  position:absolute;
  left:84.72%;
  top:24.71%;
  width:11.49%;
  height:3.63%;
  border-radius:2px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* küçük ekranda parmakla rahat basılsın diye görünmez geniş dokunma alanı */
.katalog::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:100%;
  height:100%;
  min-width:56px;
  min-height:48px;
}

.katalog span{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.katalog:hover{ background:rgba(0,0,0,.07); }
.katalog:focus-visible{
  outline:2px solid #17191c;
  outline-offset:3px;
}