.la-desen { display: block; overflow: hidden; }
.la-arti { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  
  .js .la-desen--dalga .la-arti { animation: la-dogus 900ms var(--ease-out) calc(220ms + var(--u) * 75ms) backwards; }
  .js .la-desen--dalga .la-arti--alarm,
  .js .la-desen--dogus .la-arti--alarm { animation: la-alarm 1100ms cubic-bezier(0.3, 1.45, 0.5, 1) 700ms backwards; }
}
@keyframes la-dogus { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: none; } }
@keyframes la-alarm { 0% { opacity: 0; transform: scale(0.2) rotate(-45deg); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; } }

.la-mini { position: relative; aspect-ratio: 600 / 315; border-radius: var(--r-24); overflow: hidden; background: var(--la-kapak, var(--zemin-2));
  isolation: isolate; }
.la-mini__desen { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 700ms cubic-bezier(0.3, 1.3, 0.45, 1); }
.la-mini__ust { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 2px var(--s-3); padding: var(--s-4) var(--s-5); max-width: 62%;
  font-family: var(--mono); font-size: var(--fs-12); letter-spacing: var(--ls-label); color: var(--metin-2); }
.la-mini__kat { color: var(--metin); }

.la-kart { position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start;
  padding: var(--s-3) var(--s-3) var(--s-5); border-radius: var(--r-32); border: 1px solid var(--cizgi); background: var(--zemin);
  transition: border-color var(--d-base) var(--ease-out); }
.la-kart__baslik { margin: var(--s-5) var(--s-3) 0; font-size: var(--fs-20); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.la-kart__baslik a { text-decoration: none; border-radius: var(--r-12); }
.la-kart__baslik a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-32); }
.la-kart__ozet { margin: var(--s-3) var(--s-3) 0; font-size: var(--fs-14); line-height: 1.6; color: var(--metin-2); text-wrap: pretty; }
.la-kart__alt { display: flex; justify-content: space-between; align-items: center; margin: var(--s-5) var(--s-3) 0; padding-top: var(--s-3);
  border-top: 1px solid var(--cizgi); font-family: var(--mono); font-size: var(--fs-12); letter-spacing: var(--ls-label); color: var(--metin-2); align-self: end; }
.la-kart__ok { font-family: var(--font); font-size: var(--fs-16); color: var(--metin); transition: transform var(--d-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .la-kart:hover { border-color: var(--metin-2); }
  .la-kart:hover .la-kart__baslik a { text-decoration: underline; text-decoration-thickness: 1px; }
  .la-kart:hover .la-kart__ok { transform: translateX(4px); }
  .la-kart:hover .la-mini__desen { transform: translateX(-3%); }
}

.la-kartlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-5); }
.la-kartlar > .la-kart { margin-bottom: var(--s-6); }
.la-kart[hidden] { display: none; }
@media (max-width: 1023px) { .la-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .la-kartlar { grid-template-columns: minmax(0, 1fr); } .la-kartlar > .la-kart { margin-bottom: var(--s-4); } }

.la-kapak { position: relative; display: grid; min-height: clamp(460px, 40vw, 560px); border-radius: var(--r-48); border: 1px solid var(--cizgi);
  background: var(--zemin-2); overflow: hidden; isolation: isolate; }
.la-kapak__desen { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.la-kapak__desen--dar { display: none; }
.la-kapak__metin { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-5); max-width: min(60%, 46rem);
  padding: clamp(var(--s-6), 4vw, var(--s-8)); }
.la-kapak__ust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); font-family: var(--mono); font-size: var(--fs-14);
  letter-spacing: var(--ls-label); color: var(--metin-2); }
.la-kapak__etiket { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 28px; padding: 0 var(--s-3); border-radius: 10px;
  background: var(--metin); color: var(--zemin); font-size: var(--fs-12); }
.la-kapak__baslik { align-self: center; font-weight: 300; font-size: clamp(2.25rem, 1rem + 3.2vw, 4.25rem); line-height: 1.04; letter-spacing: -0.035em; max-width: 14ch; }
.la-kapak__baslik a { text-decoration: none; border-radius: var(--r-16); }
.la-kapak__baslik a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--r-48); }
.la-kapak__ozet { color: var(--metin-2); font-size: var(--fs-18); max-width: 44ch; margin-top: calc(-1 * var(--s-2)); }
.la-kapak__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--cizgi); }
.la-kapak__yazar { display: grid; gap: 2px; font-size: var(--fs-18); color: var(--metin); }
.la-kapak__yazar .mono { color: var(--metin-2); }
@media (hover: hover) and (pointer: fine) {
  .la-kapak:hover .la-one__oku { background: var(--bordo); color: var(--kemik); }
  .la-kapak:hover .la-one__oku .ok { transform: translateX(3px); }
}
@media (max-width: 860px) {
  .la-kapak { min-height: 0; grid-template-rows: auto auto; }
  .la-kapak__desen { position: relative; inset: auto; height: auto; aspect-ratio: 600 / 240; z-index: 0; order: -1; }
  .la-kapak__desen--genis { display: none; }
  .la-kapak__desen--dar { display: block; }
  .la-kapak__metin { max-width: none; padding: var(--s-5) var(--s-5) var(--s-6); }
  .la-kapak__baslik { font-size: clamp(2rem, 1.2rem + 3.6vw, 3rem); }
  .la-kapak__ozet { font-size: var(--fs-16); }
}

.la-mini .la-arti--alarm { fill: var(--metin-2); transition: fill 420ms var(--ease-out), transform 700ms cubic-bezier(0.3, 1.4, 0.45, 1); }
.la-kart:focus-within .la-mini .la-arti--alarm { fill: var(--vurgu); }
@media (hover: hover) and (pointer: fine) {
  .la-kart:hover .la-mini .la-arti--alarm { fill: var(--vurgu); transform: rotate(90deg); }
}