/* ============================================================
   AGY Tiles (4'lü hover büyüyen kutular)
   - Desktop: kutu yerinden oynamaz, üstten uzar (bottom sabit)
   - Mobil: alt alta + toggle ile aç/kapat
============================================================ */

.agy-tiles { width: 100%; }

/* Parent'larda overflow gizli ise büyüme görünmez.
   Biz row'u da visible yapıyoruz. */
.agy-tiles__row{
  display:flex;
  gap:0;
  align-items:stretch;
  width:100%;
  overflow: visible;
}

/* Kart tabanı (akışta sabit kalır) */
.agy-tile{
  position:relative;
  flex:1 1 0;
  min-height: 150px;
  overflow: visible; /* büyüyen üst kısmı taşabilsin */
  z-index: 1;

  /* ÖNEMLİ: background artık inner'da */
  background: transparent;
}

/* Desktop'ta tüm kartı tıklanabilir yapmak için hit layer */
.agy-tile__hit{
  position:absolute;
  inset:0;
  z-index:1;
  text-decoration:none;
}

/* İçerik katmanı = asıl "kutu" */
.agy-tile__inner{
  position:relative; /* mobilde normal akış */
  z-index:2;
  height:100%;
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  color:#fff;

  /* ÖNEMLİ: background burada */
  background: var(--agy-tile-bg, #03417A);
}

/* Başlık */
.agy-tile__title{
  margin:0;
  font-size: clamp(1rem, 1.25rem, 1.75rem);
  line-height:1.2;
  letter-spacing: .2px;
  text-transform: uppercase;
}

/* Gizli içerik (hover/toggle ile açılır) */
.agy-tile__body{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height .5s ease-in-out,
            opacity .35s ease,
            transform .35s ease;

  margin-top: 12px;
}

.agy-tile__desc{
  margin:0 0 14px 0;
  opacity:.95;
  font-size: 14px;
  line-height: 1.5;
}

.agy-tile__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 18px;
  border-radius:12px;
  /* background: rgba(255,255,255,.14); */
  background : #45b232;
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  backdrop-filter: blur(6px);
}

.agy-tile__btn:hover {
  color: #fff;
}


/* ============================================================
   Desktop Hover: kutu YUKARI KAYMAZ, sadece ÜSTTEN UZAR
============================================================ */
@media (hover:hover) and (pointer:fine){

  /* inner: bottom sabit, top oynayarak büyüsün */
  .agy-tile__inner{
    position:absolute;
    left:0; right:0; bottom:0; top:0;
    height:auto;
    transition: top .45s ease-in-out;
    will-change: top;
  }

  /* hit layer da büyüsün ki uzayan kısım tıklanabilir kalsın */
  .agy-tile__hit{
    top:0; left:0; right:0; bottom:0;
    transition: top .25s ease;
  }

  /* hover/focus: z-index yükselt */
  .agy-tile:hover,
  .agy-tile:focus-within{
    z-index: 5;
  }

  /* ÜSTTEN UZAMA miktarı */
  .agy-tile:hover .agy-tile__inner,
  .agy-tile:focus-within .agy-tile__inner{
    top:-150px;                 /* <-- burayı 40/70 yapabiliriz */
    filter: brightness(1.02);
  }

  .agy-tile:hover .agy-tile__hit,
  .agy-tile:focus-within .agy-tile__hit{
    top:-56px;
  }

  /* İçeriği aç */
  .agy-tile:hover .agy-tile__body,
  .agy-tile:focus-within .agy-tile__body{
    max-height: 240px;
    opacity: 1;
    transform: translateY(0);
  }

  /* Desktop'ta toggle butonu görünmesin */
  .agy-tile__toggle{ display:none; }
}

/* ============================================================
   Mobil: alt alta + "Daha Fazla" ile aç/kapat
============================================================ */
@media (max-width: 900px){
  .agy-tiles__row{ flex-direction: column; }

  .agy-tile{
    min-height: 200px;
    z-index: 1;
  }

  .agy-tile__inner{
    position:relative;
    padding: 22px;
  }

  .agy-tile__hit{
    display:none; /* mobilde yanlış tıklamayı önleyelim */
  }

  .agy-tile__toggle{
    margin-top: 14px;
    align-self:flex-start;
    height:42px;
    padding:0 16px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.12);
    color:#fff;
    font-weight:600;
    cursor:pointer;
  }

  .agy-tile.is-open .agy-tile__body{
    max-height: 260px;
    opacity: 1;
    transform: translateY(0);
  }
}

/* A11y yardımcı */
.agy-sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}