@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
html, body { height: 100%; margin: 0; padding: 0;}
html, #referans-body {color: #fff; font-size:16px; line-height: 1.6; font-weight: 400; font-family: "Outfit", sans-serif; font-optical-sizing: auto;}
#referans-body{ background: #0b1418;}
#referans-body {min-height: 100vh; }
#referans-body a {text-decoration: none;}
.wrapper {position: relative; min-height: 100vh; overflow: hidden;}
.mainShape{display: block; position: fixed; background-size: cover; background: url(../img/main_shape.png) no-repeat; background-position: 50%;  width: 100%;   height: 100%;  left: 0; top: 0; z-index: -1;}
header{padding:50px; border-bottom:1px solid rgba(0, 0, 0, 0.2);}
.logo{display: block; width: 180px; margin:auto;}
.logo img{display: block; width: 100%;}
.pdtb50{padding:50px 0;}
.titleMain{font-size:50px;}
.color{color:#ffcf00;}
.mainContent{padding-bottom:160px;}
#referans-body .nav-pills {justify-content:center;background: rgba(255, 255, 255, 0.1); border-radius: 30px; padding:10px;}
#referans-body .nav-pills .nav-link.active{background-color: #ffcf00; border-radius: 30px; color:#000;}
#referans-body .nav-pills .nav-link{color:#ffcf00; font-size:16px; border-radius: 30px; width: 140px; margin:0 15px; }
.refBoxContainer{margin-top:80px;}
.size20{font-size:20px;}
.aRefBox {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  text-decoration: none;
}

.refImg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 30px;
}

.refImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.aRefBox:hover .refImg img {
  transform: scale(1.05);
}

.spanInfo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  color: #fff;
  background: linear-gradient(to top, rgba(11, 20, 24, 0.9) 40%, rgba(11, 20, 24, 0) 100%);
  transform: translateY(55%);
  transition: transform 0.45s ease, background 0.45s ease;
}

.spanInfo > :not(.refTitle) {
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.35s ease;
}

.aRefBox:hover .spanInfo {
  transform: translateY(0);
  background: rgba(11, 20, 24, 0.9);
}

.aRefBox:hover .spanInfo > :not(.refTitle) {
  opacity: 1;
  transform: translateY(0);
}

.refTitle {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.spanInfo .d-flex {
  display: flex;
  gap: 8px;
  font-size: 0.95rem;
}

.incele{text-align: right; font-size:14px; display: block; }
.incele svg{margin-left:5px; font-size:10px;}

.spanInfo hr{ margin:5px 0 12px 0; border-top:1px solid rgba(255, 255, 255, 0.5);}

footer{position: absolute; left:0; bottom:0; right:0; height: 50px; text-align: center;}

@media screen and (max-width:1368px) {
    .spanInfo {transform: translateY(65%);}
      #referans-body .nav-pills .nav-link{width: 140px; margin:auto; }
}
@media screen and (max-width:1200px) {
    .spanInfo {transform: translateY(70%); justify-content: center;}
.spanInfo hr{ margin:5px 0 8px 0; }
}
@media screen and (max-width:980px) {
    .spanInfo {transform: translateY(65%);}
    .refTitle {font-size: 20px;}
    .titleMain{font-size:35px;}
}
@media screen and (max-width:768px) {
    .spanInfo {transform: translateY(55%);}

#referans-body .nav-pills{justify-content: center;}
#referans-body .nav-pills .nav-link{border:1px solid #ffcf00; margin:5px;}
.refBoxContainer{margin-top:30px;}
footer{height: auto; position: relative; line-height: 60px;}
.mainContent{padding-bottom:60px;}
#referans-body .nav-pills { background: rgba(176, 176, 176, 0.1); border-radius: 30px; padding:10px;}
}