/* =========================================================
   METALAB — Ana giriş sayfası
   Daha hafif, daha açık ve videoyu öne çıkaran seçim kartları
   ========================================================= */

.gate{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  color:#fff;
  background:#111;
  display:grid;
  grid-template-rows:auto 1fr auto;
}

.gate__bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:#111;
}

.gate__bg video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:1;
  filter:none;
}

.gate__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.23) 0%,
      rgba(0,0,0,.01) 32%,
      rgba(0,0,0,.03) 64%,
      rgba(0,0,0,.34) 100%
    );
  pointer-events:none;
}

.gate__top,
.gate__choice,
.gate__foot{
  position:relative;
  z-index:2;
}

.gate__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:30px;
  padding:clamp(18px,2.5vw,32px) var(--pad);
}

.gate__top .brand{
  display:flex;
  align-items:flex-start;
  flex:0 1 auto;
}

.gate__top .brand__logo{
  display:block;
  width:auto;
  height:clamp(100px,10vw,160px);
  max-width:min(48vw,560px);
  object-fit:contain;
}

.gate__acc{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  flex:0 0 auto;
}

.gate__acc-logo{
  display:block;
  width:auto;
  height:clamp(103px,9.6vw,154px);
  max-width:min(18vw,190px);
  object-fit:contain;
}
.gate__acc-logo--bakanlik{
  height:clamp(82px,8vw,128px);
  max-width:min(16vw,165px);
  position:relative;
  top:-6px;
}

.gate__choice{
  align-self:end;
  width:min(100% - (2 * var(--pad)),1080px);
  margin:0 auto clamp(54px,7vw,94px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.choice{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(168px,17vw,205px);
  padding:clamp(22px,2.4vw,30px);
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto 1fr;
  gap:16px;
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  border-radius:2px;
  background:rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:
    transform .42s var(--ease),
    border-color .42s var(--ease),
    background .42s var(--ease),
    backdrop-filter .42s var(--ease),
    box-shadow .42s var(--ease);
}

.choice::before{
  content:"";
  position:absolute;
  left:-1px;
  top:18px;
  bottom:18px;
  width:3px;
  border-radius:99px;
}

.choice--gubre::before{
  background:linear-gradient(180deg,#ffd978,#e6a232);
  box-shadow:
    0 0 14px rgba(255,191,72,.52),
    0 0 30px rgba(255,166,44,.22);
}

.choice--tarim::before{
  background:linear-gradient(180deg,#9be1b8,#49a273);
  box-shadow:
    0 0 14px rgba(105,205,148,.50),
    0 0 30px rgba(58,158,108,.22);
}

.choice:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.58);
  background:rgba(25,32,33,.30);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:
    0 24px 60px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.13);
}

.choice__head{
  grid-column:1;
  grid-row:1;
  display:flex;
  align-items:center;
  gap:15px;
}

.choice__no{
  min-width:30px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.17em;
  color:rgba(255,255,255,.90);
}

.choice__label{
  padding-left:15px;
  border-left:1px solid rgba(255,255,255,.26);
  font-family:var(--font-sans);
  font-size:9px;
  font-weight:600;
  line-height:1;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:rgba(255,255,255,.64);
}

.choice__content{
  grid-column:1;
  grid-row:2;
  align-self:end;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}

.choice__title{
  display:flex;
  flex-direction:column;
  font-family:var(--font-serif);
  font-size:clamp(2.55rem,4vw,4rem);
  line-height:.88;
  letter-spacing:-.03em;
  color:#fff;
}

.choice__title--long{
  font-size:clamp(2.25rem,3.45vw,3.4rem);
  line-height:.86;
}

.choice__sub{
  margin-top:14px;
  font-family:var(--font-sans);
  font-size:9px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

.choice__arrow{
  grid-column:2;
  grid-row:1 / 3;
  align-self:center;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:50%;
  background:rgba(255,255,255,.025);
  font-size:20px;
  font-weight:300;
  color:#fff;
  transition:
    transform .38s var(--ease),
    background .38s var(--ease),
    border-color .38s var(--ease);
}

.choice:hover .choice__arrow{
  transform:translate(4px,-4px);
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.70);
}

.gate__foot{
  display:flex;
  justify-content:flex-start;
  padding:0 var(--pad) 22px;
  font-family:var(--font-sans);
  font-size:10px;
  font-weight:500;
  letter-spacing:.035em;
  text-transform:none;
  color:rgba(255,255,255,.62);
}

@media(max-width:760px){
  .gate__top{
    gap:18px;
    padding-top:18px;
  }

  .gate__top .brand__logo{
    height:72px;
    max-width:58vw;
  }

  .gate__acc-logo{
  height:72px;
  max-width:24vw;
}

.gate__acc-logo--bakanlik{
  height:64px;
  max-width:22vw;
  position:relative;
  top:-4px;
}

  .gate__choice{
    grid-template-columns:1fr;
    width:min(100% - (2 * var(--pad)),560px);
    gap:12px;
    margin-bottom:34px;
  }

  .choice{
    min-height:160px;
    padding:21px 20px;
  }

  .choice__title{
    font-size:clamp(2.35rem,10.5vw,3.3rem);
  }

  .choice__title--long{
    font-size:clamp(2rem,9vw,2.85rem);
  }

  .choice__arrow{
    width:40px;
    height:40px;
    font-size:18px;
  }

  .gate__foot{
    font-size:9px;
    line-height:1.45;
    max-width:85%;
  }
}

@media(max-width:480px){
  .gate__top{
    gap:12px;
  }

  .gate__top .brand__logo{
    height:58px;
    max-width:58vw;
  }

  .gate__acc-logo{
  height:58px;
  max-width:25vw;
}

.gate__acc-logo--bakanlik{
  height:52px;
  max-width:23vw;
  position:relative;
  top:-3px;
}

  .choice{
    min-height:150px;
  }

  .choice__head{
    gap:10px;
  }

  .choice__label{
    padding-left:10px;
  }

  .choice__sub{
    margin-top:11px;
  }
}

@media(prefers-reduced-motion:reduce){
  .gate__bg video{
    display:none;
  }

  .choice,
  .choice__arrow{
    transition:none;
  }
}